:root{
  --ground:#F5F4F8; --surface:#FFFFFF; --surface-2:#EFEDF5; --surface-3:#E5E2EE;
  --line:#E3E0EC; --line-2:#C9C4D8;
  --text:#16131F; --text-2:#5D576D; --text-3:#928CA3;
  --accent:#6D4AFF; --accent-ink:#FFFFFF; --accent-soft:rgba(109,74,255,.10); --accent-line:rgba(109,74,255,.34);
  --sol:#F5C542;
  --amarelo:#B7800A; --amarelo-soft:rgba(227,160,8,.15);
  --vermelho:#C8321A; --vermelho-soft:rgba(200,50,26,.10);
  --verde:#0E8A62; --verde-soft:rgba(14,138,98,.11);
  --azul:#3E6685; --azul-soft:rgba(62,102,133,.12);
  --laranja:#B4570B; --laranja-soft:rgba(220,110,20,.13);
  --cinza:#7B7790; --cinza-soft:rgba(123,119,144,.13);
  --r:14px; --r-sm:9px;
  --display:"Outfit","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --sombra:0 1px 2px rgba(22,19,31,.05),0 6px 24px rgba(22,19,31,.06);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0F0D15; --surface:#17141F; --surface-2:#1F1B29; --surface-3:#282333;
  --line:#2A2536; --line-2:#3E384D;
  --text:#EEEBF5; --text-2:#ABA5BC; --text-3:#7A7489;
  --accent:#8F75FF; --accent-ink:#0F0A22; --accent-soft:rgba(143,117,255,.15); --accent-line:rgba(143,117,255,.4);
  --amarelo:#F0B429; --amarelo-soft:rgba(240,180,41,.14);
  --vermelho:#FF6B57; --vermelho-soft:rgba(255,107,87,.12);
  --verde:#3ACF9B; --verde-soft:rgba(58,207,155,.12);
  --azul:#82ADD3; --azul-soft:rgba(130,173,211,.13);
  --laranja:#F59A4A; --laranja-soft:rgba(245,154,74,.13);
  --cinza:#9590A6; --cinza-soft:rgba(149,144,166,.13);
  --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
}}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground); color:var(--text); font-family:var(--body); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display); margin:0; letter-spacing:-.02em; line-height:1.15; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:5px}
.wrap{max-width:1240px; margin:0 auto; padding:0 26px}
@media(max-width:640px){.wrap{padding:0 16px}}
.sp{flex:1}

/* barra */
.bar{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--ground) 88%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.bar-in{display:flex; align-items:center; gap:18px; height:60px}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.03em; white-space:nowrap}
.brand b{font-weight:600; color:var(--accent)}
.mark{width:22px; height:22px; border-radius:7px; background:var(--accent); position:relative; flex:none}
.mark::after{content:""; position:absolute; inset:5px; border-radius:50%; border:3px solid var(--sol)}
.tabs{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0; background:none; padding:7px 14px; border-radius:100px; color:var(--text-2); font-weight:500; font-size:14px; white-space:nowrap; transition:.15s}
.tab:hover{color:var(--text)}
.tab.on{background:var(--text); color:var(--ground)}
.tab .n{font-size:11.5px; margin-left:5px; color:var(--vermelho); font-weight:600}
.tab.on .n{color:inherit; opacity:.75}
.quem{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-2); white-space:nowrap}
@media(max-width:900px){.bar-in{height:auto; flex-wrap:wrap; padding-top:10px; padding-bottom:8px; gap:8px 14px} .tabs{order:3; width:100%}}

.av{width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; font-size:11px; font-weight:600; color:#fff; flex:none; background:var(--c,var(--cinza))}
.av.sm{width:20px; height:20px; font-size:10px}
.av.vazio{background:transparent; border:1.5px dashed var(--line-2)}

/* adicionar rápido */
.add-wrap{padding-top:18px}
.add{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:0 14px; height:50px; box-shadow:var(--sombra); transition:border-color .15s}
.add:focus-within{border-color:var(--accent-line)}
.add-mais{color:var(--accent); font-size:22px; font-weight:500; line-height:1}
.add input{flex:1; border:0; background:none; outline:none; font-size:15px; min-width:0}
.add input::placeholder{color:var(--text-3)}
.add-prev{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.filtros{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px}
.chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); border-radius:100px; padding:5px 12px; font-size:13px; font-weight:500; color:var(--text-2); white-space:nowrap}
.chip:hover{border-color:var(--line-2); color:var(--text)}
.chip.on{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}
select.chip{appearance:none; padding-right:26px; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 14px) 52%,calc(100% - 10px) 52%; background-size:4px 4px; background-repeat:no-repeat}

.screen{padding-top:26px; padding-bottom:120px}
.phead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:20px}
.phead h1{font-size:30px; font-weight:600}
.phead .sub{color:var(--text-3); font-size:15px}
.vazio{color:var(--text-3); padding:30px 0}
.btn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); border-radius:100px; padding:7px 15px; font-size:13.5px; font-weight:600; white-space:nowrap; transition:.15s}
.btn:hover{border-color:var(--line-2)}
.btn-p{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn-p:hover{filter:brightness(1.07)}
.btn-g{background:none; border-color:transparent; color:var(--text-2)}
.btn-g:hover{color:var(--text)}
.btn-sm{padding:4px 11px; font-size:12.5px}
.btn-perigo{color:var(--vermelho)}

/* status */
.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:100px; font-size:12px; font-weight:600; white-space:nowrap; background:var(--s-soft,var(--cinza-soft)); color:var(--s,var(--cinza))}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.st-nao_iniciado{--s:var(--cinza); --s-soft:var(--cinza-soft)}
.st-em_progresso,.st-ajustar{--s:var(--amarelo); --s-soft:var(--amarelo-soft)}
.st-impedimento{--s:var(--laranja); --s-soft:var(--laranja-soft)}
.st-aprovacao_interna,.st-aprovacao_cliente{--s:var(--azul); --s-soft:var(--azul-soft)}
.st-aprovado,.st-feito{--s:var(--verde); --s-soft:var(--verde-soft)}
.st-nao_realizado{--s:var(--text-3); --s-soft:var(--cinza-soft)}
.cli{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-2); white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis}
.cli i{width:8px; height:8px; border-radius:3px; background:var(--c); flex:none}
.prazo{font-size:12.5px; color:var(--text-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.prazo.atraso{color:var(--vermelho); font-weight:600}
.prazo.hoje{color:var(--amarelo); font-weight:600}
.prio-alta{color:var(--vermelho); font-weight:700; font-size:13px}

/* lista de tarefas (estilo Today) */
.grupo{margin-bottom:28px}
.grupo h2{font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--text)}
.grupo h2 .c{color:var(--text-3); font-weight:500; font-size:13px}
.grupo.atraso h2{color:var(--vermelho)}
.grupo summary{list-style:none; cursor:pointer}
.grupo summary::-webkit-details-marker{display:none}
.grupo summary h2::before{content:"›"; display:inline-block; transition:transform .15s; color:var(--text-3)}
.grupo[open] summary h2::before{transform:rotate(90deg)}
.lista{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.linha{display:flex; align-items:center; gap:12px; padding:11px 14px; border-top:1px solid var(--line); cursor:pointer; transition:background .12s; min-width:0}
.linha:first-child{border-top:0}
.linha:hover{background:var(--surface-2)}
.check{width:20px; height:20px; border-radius:50%; border:1.7px solid var(--line-2); background:none; flex:none; display:grid; place-items:center; padding:0; transition:.15s}
.check:hover{border-color:var(--verde); background:var(--verde-soft)}
.check.ok{background:var(--verde); border-color:var(--verde)}
.check.ok::after{content:""; width:7px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px)}
.linha .tt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.linha .tt b{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linha.fechada .tt b{color:var(--text-3); text-decoration:line-through}
.linha .tt small{color:var(--text-3); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linha .meta{display:flex; align-items:center; gap:12px; flex:none}
.extra{font-size:12px; color:var(--text-3); display:inline-flex; gap:3px; align-items:center}
@media(max-width:700px){.linha .meta .cli,.linha .meta .pill{display:none}}

/* semana */
.semana{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px}
.dia{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px; min-height:220px; display:flex; flex-direction:column; gap:7px; min-width:0}
.dia.hoje{border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft)}
.dia.fds{background:var(--surface-2)}
.dia h3{font-size:13px; font-weight:600; color:var(--text-2); display:flex; justify-content:space-between; text-transform:capitalize}
.dia.hoje h3{color:var(--accent)}
.dia.alvo{background:var(--accent-soft)}
@media(max-width:1000px){.semana{grid-template-columns:1fr} .dia{min-height:0}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 10px; display:flex; flex-direction:column; gap:6px; cursor:pointer; transition:border-color .12s, box-shadow .12s; min-width:0}
.card:hover{border-color:var(--line-2); box-shadow:var(--sombra)}
.card b{font-weight:500; font-size:13.5px; line-height:1.35; overflow-wrap:anywhere}
.card.fechada b{color:var(--text-3); text-decoration:line-through}
.card .rodape{display:flex; align-items:center; gap:8px; justify-content:space-between; min-width:0}
.card.arrastando{opacity:.45}
.dia .card{background:var(--ground)}

/* quadro */
.quadro{display:flex; gap:12px; overflow-x:auto; padding-bottom:16px; align-items:flex-start}
.coluna{flex:0 0 272px; background:var(--surface-2); border-radius:var(--r); padding:10px; display:flex; flex-direction:column; gap:8px; min-height:160px}
.coluna h3{font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; padding:2px 4px 4px}
.coluna h3 .c{color:var(--text-3); font-weight:500}
.coluna.alvo{outline:2px dashed var(--accent-line); outline-offset:-2px}

/* projetos */
.grade{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px}
.proj{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:12px; cursor:pointer; transition:.15s}
.proj:hover{border-color:var(--line-2); box-shadow:var(--sombra); transform:translateY(-1px)}
.proj h3{font-size:18px; font-weight:600}
.proj .linha2{display:flex; justify-content:space-between; align-items:center; gap:10px}
.barra{height:6px; background:var(--surface-3); border-radius:10px; overflow:hidden}
.barra i{display:block; height:100%; background:var(--verde); border-radius:10px; transition:width .3s}
.num{font-size:12.5px; color:var(--text-3); font-variant-numeric:tabular-nums}
.secao-cli{margin:6px 0 12px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text-2); text-transform:uppercase; letter-spacing:.05em}
.secao-cli i{width:10px; height:10px; border-radius:3px; background:var(--c)}

.pcab{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; margin-bottom:24px; display:grid; gap:16px}
.pcab .titulo{font-family:var(--display); font-size:28px; font-weight:600; border:0; background:none; outline:none; width:100%; padding:0; letter-spacing:-.02em}
.campos{display:flex; flex-wrap:wrap; gap:10px 22px}
.campo{display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--text-3); font-weight:500}
.campo select,.campo input{border:1px solid var(--line); background:var(--ground); border-radius:var(--r-sm); padding:6px 9px; font-size:14px; min-width:150px}
.resumo{width:100%; border:1px solid transparent; background:var(--ground); border-radius:var(--r-sm); padding:10px 12px; resize:vertical; min-height:60px; outline:none}
.resumo:focus{border-color:var(--accent-line)}
.etapa-cab{display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap}
.etapa-cab input.nome{font-family:var(--display); font-size:17px; font-weight:600; border:0; background:none; outline:none; padding:2px 0; min-width:120px; flex:0 1 auto}
.etapa-cab input[type=date]{border:1px solid var(--line); background:var(--surface); border-radius:var(--r-sm); padding:3px 7px; font-size:12.5px; color:var(--text-2)}
.add-inline{display:flex; gap:8px; padding:9px 14px; border-top:1px solid var(--line); align-items:center}
.add-inline:first-child{border-top:0}
.add-inline input{flex:1; border:0; background:none; outline:none; font-size:14px}
.add-inline span{color:var(--text-3)}
.voltar{color:var(--text-2); font-size:14px; font-weight:500; display:inline-flex; gap:6px; margin-bottom:14px}
.voltar:hover{color:var(--text)}

/* calendário */
.cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.cal .ds{background:var(--surface); padding:8px 10px; font-size:11.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em}
.cal .cd{background:var(--surface); min-height:116px; padding:7px; display:flex; flex-direction:column; gap:4px; min-width:0}
.cal .cd.fora{background:var(--ground)}
.cal .cd .n{font-size:12.5px; color:var(--text-3)}
.cal .cd.hoje .n b{background:var(--accent); color:var(--accent-ink); border-radius:100px; padding:1px 7px; font-weight:600}
.cal .ev{font-size:12px; padding:3px 7px; border-radius:6px; background:var(--surface-2); border-left:3px solid var(--c,var(--line-2)); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer}
.cal .ev.fechada{opacity:.5; text-decoration:line-through}
.cal .ev.proj{background:var(--accent-soft); color:var(--accent); font-weight:600}
.mesnav{display:flex; align-items:center; gap:8px}
.seta{width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--text-2)}
@media(max-width:760px){.cal .cd{min-height:70px} .cal .ev{font-size:0; height:6px; padding:0; border-left-width:0; background:var(--c)}}

/* time */
.tabela{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.tabela td,.tabela th{padding:10px 14px; border-top:1px solid var(--line); text-align:left; font-size:14px}
.tabela th{font-size:12px; color:var(--text-3); font-weight:500; border-top:0; text-transform:uppercase; letter-spacing:.05em}
.tabela input,.tabela select{border:1px solid var(--line); background:var(--ground); border-radius:var(--r-sm); padding:5px 8px; font-size:14px}
.tabela input[type=color]{padding:0; width:34px; height:28px}
.tabela tr.inativo td{opacity:.5}

/* gaveta da tarefa */
.veu{position:fixed; inset:0; background:rgba(15,12,25,.32); opacity:0; pointer-events:none; transition:opacity .2s; z-index:50}
.veu.on{opacity:1; pointer-events:auto}
.gaveta{position:fixed; top:0; right:0; bottom:0; width:min(560px,100vw); background:var(--surface); border-left:1px solid var(--line); z-index:60; transform:translateX(102%); transition:transform .22s ease; overflow-y:auto; padding:22px 26px 60px; display:flex; flex-direction:column; gap:18px}
.gaveta.on{transform:none; box-shadow:-20px 0 60px rgba(0,0,0,.18)}
.g-top{display:flex; align-items:center; gap:8px}
.g-titulo{font-family:var(--display); font-size:24px; font-weight:600; border:0; outline:none; background:none; width:100%; resize:none; padding:0; line-height:1.2; letter-spacing:-.02em; overflow:hidden; min-height:34px; flex:none}
.g-grade{display:grid; grid-template-columns:110px 1fr; gap:9px 12px; align-items:center; font-size:14px}
.g-grade label{color:var(--text-3); font-size:13px}
.g-grade select,.g-grade input{border:1px solid transparent; background:var(--ground); border-radius:var(--r-sm); padding:6px 9px; width:100%; font-size:14px}
.g-grade select:hover,.g-grade input:hover{border-color:var(--line)}
.g-sec h4{font-family:var(--display); font-size:14px; font-weight:600; margin:0 0 8px; color:var(--text-2)}
.g-desc{width:100%; min-height:110px; border:1px solid var(--line); background:var(--ground); border-radius:var(--r-sm); padding:10px 12px; resize:vertical; outline:none; line-height:1.5}
.g-desc:focus{border-color:var(--accent-line)}
.subt{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line)}
.subt input[type=text]{flex:1; border:0; background:none; outline:none; font-size:14px; padding:2px 0}
.subt.ok input[type=text]{color:var(--text-3); text-decoration:line-through}
.subt .x{border:0; background:none; color:var(--text-3); font-size:16px; padding:0 4px; opacity:0}
.subt:hover .x{opacity:1}
.com{display:flex; gap:10px; padding:8px 0}
.com .corpo{flex:1; min-width:0}
.com .corpo p{white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px}
.com .quando{font-size:12px; color:var(--text-3)}
.com-in{display:flex; gap:8px; margin-top:6px}
.com-in textarea{flex:1; border:1px solid var(--line); background:var(--ground); border-radius:var(--r-sm); padding:8px 10px; min-height:40px; resize:vertical; outline:none}
.links a{color:var(--accent); font-size:13px; font-weight:600}

.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); background:var(--text); color:var(--ground); padding:10px 18px; border-radius:100px; font-size:14px; font-weight:500; opacity:0; transition:.2s; z-index:80; pointer-events:none; display:flex; gap:12px; align-items:center}
.toast.on{opacity:1; transform:translate(-50%,0); pointer-events:auto}
.toast button{background:none; border:0; color:var(--sol); font-weight:600; padding:0}

.porta{max-width:440px; margin:12vh auto; text-align:center; display:grid; gap:14px}
.porta h1{font-size:28px}
.porta p{color:var(--text-2)}

/* hub: login, atalhos, ferramentas, propostas */
.mark.grande{width:46px; height:46px; border-radius:14px; margin:0 auto}
.mark.grande::after{inset:11px; border-width:5px}
.login{text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:32px; box-shadow:var(--sombra)}
.login h1,.login>p{text-align:center}
.login label{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--text-2); font-weight:500}
.login input{border:1px solid var(--line); background:var(--ground); border-radius:var(--r-sm); padding:10px 12px; font-size:15px; outline:none}
.login input:focus{border-color:var(--accent-line)}
.login .btn{justify-content:center; padding:11px; font-size:15px}
.erro{color:var(--vermelho); font-size:14px; min-height:1px; text-align:center}
.atalho{display:flex; align-items:center; gap:14px; background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--r); padding:14px 18px; margin-bottom:26px}
.atalho .ic{width:34px; height:34px; border-radius:10px; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:700; flex:none}
.atalho span{display:flex; flex-direction:column}
.atalho small{color:var(--text-2); font-size:13px}
.atalho .ir,.ir{margin-left:auto; color:var(--accent); font-weight:600; font-size:14px; white-space:nowrap}
.ferr h3{display:flex; align-items:center; gap:8px}
.proj.sem-hover{cursor:default}
.proj.sem-hover:hover{transform:none}
.botoes{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.caixa{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-top:8px}
.prop{padding:18px; border-top:1px solid var(--line); display:grid; gap:12px}
.prop:first-child{border-top:0}
.prop-cab{display:flex; align-items:center; gap:12px}
.prop-emp{font-family:var(--display); font-size:20px; font-weight:600; border:0; background:none; outline:none; flex:1; min-width:0; padding:0}
select.pill{border:0; appearance:none; cursor:pointer; padding-right:12px}
.campo input[type=date]{min-width:140px}