/* ---------- base ---------- */
*{box-sizing:border-box}
:root{
  --fundo-a:#e3eeff; --fundo-b:#d8e6fd; --gap:#e0ecfe;
  --tinta:#172b4d; --tinta-2:#44546f; --tinta-3:#626f86;
  --branco:#fff; --azul:#1868dc; --azul-esc:#1558bc;
  --borda:#dcdfe4; --sombra-1:0 1px 1px #091e4240,0 0 1px #091e424f;
  --sombra-2:0 8px 12px #091e4226,0 0 1px #091e424f;
  --sombra-3:0 20px 32px #091e4240,0 0 1px #091e424f;
  --lista-larg:336px; --card-larg:320px; --raio:22px;
  --topo:56px;
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
  --mola:cubic-bezier(.2,.9,.3,1.2);
}
html,body{margin:0;padding:0;min-height:100dvh}
body{
  font-family:var(--fonte); color:var(--tinta);
  background:linear-gradient(160deg,var(--fundo-a) 0%,var(--gap) 42%,var(--fundo-b) 100%) fixed;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
::-webkit-scrollbar{width:10px;height:12px}
::-webkit-scrollbar-thumb{background:#091e4229;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#091e4240;background-clip:padding-box;border:3px solid transparent}
::-webkit-scrollbar-track{background:transparent}

/* ---------- topbar (linha única: marca + quadro + ações) ---------- */
.topbar{
  position:sticky;top:0;z-index:60;height:var(--topo);
  display:flex;align-items:center;gap:8px;padding:0 12px;
  background:var(--branco);border-bottom:1px solid #d9dde3;
  padding-top:env(safe-area-inset-top);
}
.tb-esq{display:flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0}
.tb-dir{display:flex;align-items:center;gap:8px;flex:1 1 auto;justify-content:space-between;min-width:0;max-width:640px}
.tb-meio{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.ic-btn{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--tinta-2);transition:background .16s,transform .16s var(--mola);flex:0 0 auto}
.ic-btn:hover{background:#091e420f}
.ic-btn:active{transform:scale(.9)}
.marca{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border-radius:8px;text-decoration:none;color:var(--tinta);transition:background .16s;flex:0 0 auto}
.marca:hover{background:#091e420f}
.marca-txt{font-weight:700;font-size:19px;letter-spacing:-.4px;color:#1d2125}
.separador-topo{width:1px;height:22px;background:#d9dde3;margin:0 4px;flex:0 0 auto}
.board-nome{margin:0;font-size:17px;font-weight:700;letter-spacing:.5px;color:#1d2125;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 8px;border-radius:6px;cursor:pointer;transition:background .16s;min-width:0}
.board-nome:hover{background:#091e420f}
.bb-ic{height:32px;min-width:32px;padding:0 6px;border-radius:8px;display:inline-flex;align-items:center;gap:3px;justify-content:center;color:#42526e;font-size:16px;transition:background .16s,transform .16s var(--mola);flex:0 0 auto}
.bb-ic:hover{background:#091e420f}
.bb-ic:active{transform:scale(.9)}
.btn-criar{height:34px;padding:0 14px;border-radius:6px;border:1px solid #8590a2;background:var(--branco);font-size:14px;font-weight:500;transition:background .16s,transform .16s var(--mola);flex:0 0 auto}
.btn-criar:hover{background:#f1f2f4}
.btn-criar:active{transform:scale(.96)}
.badge-dias{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:6px;color:#fff;font-size:13.5px;font-weight:600;background:linear-gradient(90deg,#964ac0,#5f4bd8 55%,#1868dc);box-shadow:0 1px 2px #091e4233;transition:transform .18s var(--mola),filter .18s;flex:0 0 auto}
.badge-dias:hover{filter:brightness(1.08);transform:translateY(-1px)}
.avatar{width:32px;height:32px;margin-left:4px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(140deg,#8d96c1,#c18ea9);box-shadow:0 0 0 2px #fff,0 0 0 3px #dfe1e6;flex:0 0 auto}
.btn-share{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;margin-left:2px;border-radius:6px;background:#505258;color:#fff;font-size:14px;font-weight:500;transition:background .16s,transform .16s var(--mola);flex:0 0 auto}
.btn-share:hover{background:#3c3d41}
.btn-share:active{transform:scale(.96)}
.membros{display:flex;align-items:center;margin-right:2px;flex:0 0 auto}
.membros span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;margin-left:-8px;box-shadow:0 0 0 2px #fff}
.membros span:first-child{margin-left:0}

/* ---------- palco / views ---------- */
.palco{height:calc(100dvh - var(--topo) - env(safe-area-inset-top));position:relative}
.view{height:100%;overflow:hidden}
.view[hidden]{display:none}

/* ---------- board ---------- */
.board{
  height:100%;display:flex;align-items:flex-start;gap:10px;
  padding:12px 12px calc(22px + env(safe-area-inset-bottom));
  overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
}
.lista{
  flex:0 0 var(--lista-larg);width:var(--lista-larg);max-height:100%;
  display:flex;flex-direction:column;border-radius:var(--raio);
  background:var(--cor);box-shadow:var(--sombra-1);
  animation:sobe .42s var(--mola) both;
}
@keyframes sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.lista.arrastando{opacity:.45}
.lista.recolhida{flex-basis:44px;width:44px}
.lista-topo{display:flex;align-items:center;gap:4px;padding:10px 8px 4px 12px;cursor:grab}
.lista-topo:active{cursor:grabbing}
.lista-nome{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--tinta-lista);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 4px;border-radius:4px}
.lista-nome[contenteditable="true"]{background:#fff;outline:2px solid var(--azul);white-space:normal}
.lista-cont{font-size:12.5px;color:var(--tinta-lista);opacity:.72;padding:0 2px;font-variant-numeric:tabular-nums}
.lista-ic{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;color:var(--tinta-lista);font-size:15px;transition:background .16s,transform .16s var(--mola)}
.lista-ic:hover{background:#00000012}
.lista-ic:active{transform:scale(.86)}
.cartoes{
  flex:1;min-height:14px;overflow-y:auto;overflow-x:hidden;
  padding:4px 8px 2px;display:flex;flex-direction:column;gap:8px;
  scrollbar-width:thin;
}
.lista-baixo{display:flex;align-items:center;gap:4px;padding:6px 8px 8px}
.add-cartao{flex:1;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:8px;color:var(--tinta-lista);font-size:14px;font-weight:500;transition:background .16s}
.add-cartao:hover{background:#00000012}
.lista.recolhida .cartoes,.lista.recolhida .lista-baixo,.lista.recolhida .lista-nome,.lista.recolhida .lista-menu{display:none}
.lista.recolhida .lista-topo{flex-direction:column;padding:10px 6px}

/* ---------- CARTÃO 9:16 ---------- */
.cartao{
  position:relative;flex:0 0 auto;width:100%;aspect-ratio:9/16;border-radius:var(--raio);overflow:hidden;
  background:#22252b;box-shadow:var(--sombra-1);cursor:pointer;
  transition:transform .2s var(--mola),box-shadow .2s;
  animation:sobe .4s var(--mola) both;
  touch-action:pan-y;
}
.cartao:hover{transform:translateY(-3px) scale(1.012);box-shadow:var(--sombra-2)}
.cartao:active{transform:scale(.99)}
.cartao.apagado{opacity:.26;filter:grayscale(.7)}
.cartao.arrastando{opacity:.35}
.cartao-capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cartao-vazio{position:absolute;inset:0;background:var(--grad);display:grid;place-items:center}
.cartao-vazio span{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-size:19px;color:#ffffffcc;letter-spacing:.6px;text-align:center;padding:0 18px;text-shadow:0 2px 10px #0006}
.cartao-veu{position:absolute;inset:auto 0 0 0;height:56%;background:linear-gradient(to top,#000000b0,#0000);pointer-events:none;opacity:0;transition:opacity .22s}
.cartao:hover .cartao-veu,.cartao.com-titulo .cartao-veu{opacity:1}
.cartao-tit{position:absolute;left:10px;right:10px;bottom:26px;font-size:14px;font-weight:600;color:#fff;line-height:1.3;text-shadow:0 1px 6px #0009;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cartao-selos{position:absolute;left:8px;bottom:6px;display:flex;align-items:center;gap:7px;color:#fff;opacity:.92}
.cartao-selos .ponto{width:8px;height:8px;border-radius:2px;background:#ffffffd9;box-shadow:0 1px 4px #0007}
.cartao-selos svg{filter:drop-shadow(0 1px 4px #0009)}
.cartao-lapis{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#ffffffe6;color:#172b4d;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s var(--mola);box-shadow:var(--sombra-1)}
.cartao:hover .cartao-lapis{opacity:1;transform:none}
.cartao-lapis:hover{background:#fff}

/* compositor */
.compositor{flex:0 0 auto;background:#fff;border-radius:var(--raio);box-shadow:var(--sombra-2);padding:8px;animation:sobe .28s var(--mola) both}
.compositor textarea{width:100%;border:0;outline:0;resize:none;font-size:14px;line-height:1.4;min-height:56px;padding:2px}
.comp-acoes{display:flex;align-items:center;gap:6px;margin-top:6px}
.comp-acoes .prim{background:var(--azul);color:#fff;height:32px;padding:0 14px;border-radius:6px;font-size:14px;font-weight:500;transition:background .16s,transform .16s var(--mola)}
.comp-acoes .prim:hover{background:var(--azul-esc)}
.comp-acoes .prim:active{transform:scale(.95)}
.comp-acoes .ic{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;color:var(--tinta-2);transition:background .16s}
.comp-acoes .ic:hover{background:#091e420f}

/* adicionar lista */
.add-lista{flex:0 0 var(--lista-larg);width:var(--lista-larg);border-radius:var(--raio);background:#ffffffa6;backdrop-filter:blur(4px);box-shadow:var(--sombra-1);animation:sobe .42s var(--mola) both}
.add-lista .gatilho{display:flex;align-items:center;gap:8px;width:100%;padding:12px;font-size:14px;font-weight:500;color:var(--tinta);border-radius:var(--raio);transition:background .16s}
.add-lista .gatilho:hover{background:#ffffffd9}
.add-lista form{padding:8px;display:flex;flex-direction:column;gap:8px}
.add-lista input{height:34px;border:1px solid var(--azul);box-shadow:0 0 0 1px var(--azul);border-radius:6px;padding:0 10px;outline:0;font-size:14px}

/* ---------- menus / modal ---------- */
#camada{position:fixed;inset:0;z-index:100;pointer-events:none}
.scrim{position:absolute;inset:0;background:#091e4266;opacity:0;animation:aparece .2s forwards;pointer-events:auto}
@keyframes aparece{to{opacity:1}}
.menu{position:absolute;width:280px;max-width:calc(100vw - 24px);background:#fff;border-radius:10px;box-shadow:var(--sombra-3);padding:8px;pointer-events:auto;animation:menu-in .2s var(--mola) both}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.menu h4{margin:2px 0 8px;font-size:14px;font-weight:600;text-align:center;color:var(--tinta-2)}
.menu button.item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:6px;font-size:14px;text-align:left;transition:background .14s}
.menu button.item:hover{background:#091e420f}
.menu button.item.perigo{color:#ae2e24}
.menu .sep{height:1px;background:var(--borda);margin:6px 2px}
.paleta{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:4px 2px}
.paleta button{height:30px;border-radius:6px;box-shadow:inset 0 0 0 1px #091e4226;transition:transform .16s var(--mola)}
.paleta button:hover{transform:scale(1.09)}
.paleta button.sel{box-shadow:inset 0 0 0 2px var(--azul)}

.modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(880px,calc(100vw - 24px));max-height:min(88dvh,880px);overflow:auto;background:#fff;border-radius:14px;box-shadow:var(--sombra-3);pointer-events:auto;animation:modal-in .26s var(--mola) both}
@keyframes modal-in{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.modal-corpo{display:grid;grid-template-columns:300px 1fr;gap:20px;padding:18px}
.modal-capa{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#22252b}
.modal-capa img{width:100%;height:100%;object-fit:cover;display:block}
.modal-capa .cartao-vazio span{font-size:22px}
.modal-info h3{margin:2px 0 4px;font-size:20px;font-weight:600}
.modal-info .onde{font-size:13px;color:var(--tinta-2);margin-bottom:14px}
.modal-info label{display:block;font-size:12.5px;font-weight:700;color:var(--tinta-2);margin:14px 0 6px;letter-spacing:.2px}
.modal-info input[type=text],.modal-info textarea,.modal-info select{width:100%;border:1px solid var(--borda);border-radius:8px;padding:9px 10px;font-size:14px;outline:0;background:#f7f8f9;transition:background .16s,box-shadow .16s}
.modal-info input[type=text]:focus,.modal-info textarea:focus,.modal-info select:focus{background:#fff;box-shadow:0 0 0 2px var(--azul)}
.modal-info textarea{min-height:110px;resize:vertical}
.modal-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.modal-acoes button{height:34px;padding:0 14px;border-radius:8px;background:#091e420f;font-size:14px;font-weight:500;transition:background .16s,transform .16s var(--mola)}
.modal-acoes button:hover{background:#091e421a}
.modal-acoes button:active{transform:scale(.96)}
.modal-acoes .prim{background:var(--azul);color:#fff}
.modal-acoes .prim:hover{background:var(--azul-esc)}
.modal-acoes .perigo{color:#ae2e24}
.modal-x{position:absolute;top:10px;right:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:var(--tinta-2);background:#ffffffd9;transition:background .16s,transform .16s var(--mola)}
.modal-x:hover{background:#091e420f;transform:rotate(90deg)}

/* ---------- painéis ---------- */
.view{overflow-y:auto}
.painel{max-width:720px;margin:0 auto;padding:26px 18px calc(30px + env(safe-area-inset-bottom));animation:sobe .4s var(--mola) both}
.painel-largo{max-width:1180px}
.painel h2{margin:0 0 4px;font-size:26px;letter-spacing:-.3px}
.painel-sub{margin:0 0 18px;color:var(--tinta-2);font-size:14px}
.entrada-form{display:flex;gap:8px;margin-bottom:14px}
.entrada-form input{flex:1;height:40px;border:1px solid #8590a2;border-radius:8px;padding:0 12px;outline:0;background:#fff}
.entrada-form input:focus{box-shadow:0 0 0 2px var(--azul);border-color:var(--azul)}
.entrada-form button{height:40px;padding:0 18px;border-radius:8px;background:var(--azul);color:#fff;font-weight:500;transition:background .16s,transform .16s var(--mola)}
.entrada-form button:active{transform:scale(.96)}
.entrada-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.entrada-lista li{display:flex;align-items:center;gap:12px;background:#fff;border-radius:10px;padding:12px 14px;box-shadow:var(--sombra-1);animation:sobe .3s var(--mola) both}
.entrada-lista li.feito .txt{text-decoration:line-through;color:var(--tinta-3)}
.entrada-lista .txt{flex:1;font-size:14.5px}
.entrada-lista .chk{width:20px;height:20px;border-radius:50%;border:2px solid #8590a2;display:grid;place-items:center;color:#fff;transition:background .16s,border-color .16s}
.entrada-lista li.feito .chk{background:#22a06b;border-color:#22a06b}
.entrada-lista .mini{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--tinta-2);transition:background .16s}
.entrada-lista .mini:hover{background:#091e420f}
.semana{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:10px;overflow-x:auto;padding-bottom:8px}
.dia{background:#ffffffcc;border-radius:12px;padding:10px;box-shadow:var(--sombra-1);min-height:220px;animation:sobe .36s var(--mola) both}
.dia h5{margin:0 0 2px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--tinta-2)}
.dia .num{font-size:20px;font-weight:700;margin-bottom:8px}
.dia.hoje{outline:2px solid var(--azul)}
.slot{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tinta-2);padding:6px;border-radius:8px;border:1px dashed #b3bac5;margin-bottom:6px;cursor:pointer;transition:background .16s,border-color .16s}
.slot:hover{background:#fff;border-color:var(--azul)}
.slot.cheio{border-style:solid;border-color:transparent;background:var(--azul);color:#fff;font-weight:500}
.grade-quadros{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.quadro-card{position:relative;height:120px;border-radius:12px;padding:12px;color:#fff;font-weight:700;font-size:15px;text-align:left;box-shadow:var(--sombra-1);overflow:hidden;transition:transform .2s var(--mola),box-shadow .2s;animation:sobe .36s var(--mola) both}
.quadro-card:hover{transform:translateY(-3px);box-shadow:var(--sombra-2)}
.quadro-card small{position:absolute;left:12px;bottom:10px;font-weight:500;opacity:.9;font-size:12px}
.quadro-card.ativo:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px #fff}
.quadro-card.novo{background:#ffffffa6;color:var(--tinta);display:grid;place-items:center;font-size:14px;box-shadow:var(--sombra-1)}
.quadro-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:8px;background:#00000040;display:grid;place-items:center;color:#fff;font-size:15px;opacity:0;transition:opacity .16s}
.quadro-card:hover .quadro-x{opacity:1}

/* ---------- dock (agora embutido na barra de cima) ---------- */
.dock{
  display:flex;align-items:center;gap:2px;padding:3px;flex:0 0 auto;
  background:#091e420a;border-radius:11px;
  max-width:44vw;overflow-x:auto;scrollbar-width:none;
}
.dock::-webkit-scrollbar{display:none}
.dock-btn{display:inline-flex;align-items:center;gap:0;height:34px;padding:0 11px;border-radius:8px;font-size:0;color:var(--tinta-2);white-space:nowrap;transition:background .16s,color .16s,transform .16s var(--mola),padding .16s,gap .16s;flex:0 0 auto}
.dock-btn.ativa{font-size:13.5px;gap:7px;padding:0 13px}
.dock-btn:hover{background:#091e420f}
.dock-btn:active{transform:scale(.95)}
.dock-btn.ativa{color:var(--azul);font-weight:600;background:#fff;box-shadow:var(--sombra-1)}
.dock-btn.ativa svg{color:var(--azul)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translate(-50%,14px);z-index:120;background:#1d2125;color:#fff;font-size:13.5px;padding:10px 16px;border-radius:10px;box-shadow:var(--sombra-2);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--mola)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* fantasma do arraste */
.fantasma{position:fixed;z-index:200;pointer-events:none;width:var(--card-larg);border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra-3);transform:rotate(4deg);opacity:.95}
.vago{border-radius:var(--raio);background:#091e4224;flex:0 0 auto;pointer-events:none}

/* ---------- mobile ---------- */
@media (max-width:900px){
  :root{--topo:52px}
  .so-grande{display:none}
  .marca-txt{display:none}
  .tb-meio{gap:6px}
  .tb-dir{flex:0 0 auto;max-width:none;justify-content:flex-start;gap:5px}
  .badge-dias span{display:none}
  .badge-dias{padding:0 10px}
  .btn-share span{display:none}
  .board{gap:12px;scroll-snap-type:x mandatory;padding:12px 12px calc(26px + env(safe-area-inset-bottom))}
  .lista,.add-lista{flex-basis:min(84vw,320px);width:min(84vw,320px);scroll-snap-align:center}
  .modal-corpo{grid-template-columns:1fr;gap:14px}
  .modal-capa{max-width:230px;margin:0 auto}
  .painel h2{font-size:22px}
  .semana{grid-template-columns:repeat(7,72vw)}
  .dock{max-width:34vw;gap:0;padding:2px}
  .dock-btn{font-size:0;padding:0 9px;gap:0}
  .dock-btn.ativa{font-size:12.5px;gap:5px;padding:0 10px}
  .badge-dias{padding:0 8px}
}
@media (max-width:560px){
  .topbar .bb-ic:not(#btn-menu-board):not(#btn-filtro){display:none}
  .membros{display:none}
  .badge-dias{display:none}
  .topbar{padding:0 6px;gap:3px}
  .tb-esq{gap:2px}
  .tb-esq > .ic-btn,.separador-topo{display:none}
  .tb-meio{gap:3px}
  .btn-criar{width:30px;padding:0;font-size:0}
  .btn-criar::after{content:"+";font-size:19px;line-height:1;font-weight:400}
  .board-nome{font-size:14px;max-width:20vw;padding:4px 4px}
  .btn-share{padding:0 8px;margin-left:0}
  .dock{max-width:31vw;padding:2px}
  .dock-btn{padding:0 8px}
  .dock-btn.ativa{font-size:0;gap:0;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* arraste de coluna: fantasma curto e leve */
.fantasma-lista{opacity:.9;transform:rotate(2deg) scale(.98)}
.fantasma-lista .cartoes{filter:saturate(.9)}
.lista.arrastando{opacity:.4}
.vago{transition:height .12s ease}