/* ===========================================================================
   KONCORD — sistema visual
   Uma identidade so pros cinco: Conves, Carta, Rota, Bordo e Radio.
   Escuro por padrao, neutro levemente frio, laranja como unica cor de marca.
   Nada de hex solto nos componentes: tudo sai daqui.
   =========================================================================== */
:root{
  /* superficies, do fundo pro que flutua */
  --s0:#0A0A0D;
  --s1:#101014;
  --s2:#17171D;
  --s3:#1F1F27;
  --s4:#232330;
  --line:#24242E; --line2:#33333F;

  /* texto */
  --fg:#EDEDF2; --fg2:#9A97A6; --fg3:#625F6D;

  /* marca */
  --ac:#FF5A1F; --ac2:#FF8250; --on-ac:#0A0A0D;
  --ac-soft:rgba(255,90,31,.13); --ac-line:rgba(255,90,31,.34);

  /* semanticos */
  --ok:#3DD68C; --info:#4EA8FF; --warn:#FFC53D; --danger:#FF6B8A; --viol:#A78BFA;

  /* raio, na mesma escala do comeco ao fim */
  --r1:7px; --r2:10px; --r3:14px; --r4:18px; --pill:999px;

  /* elevacao: tres degraus, nunca uma sombra inventada na hora */
  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 8px 24px rgba(0,0,0,.45);
  --e3:0 18px 48px rgba(0,0,0,.55);

  /* movimento: um ritmo so no app inteiro */
  --tf:120ms; --t:180ms; --ease:cubic-bezier(.16,1,.3,1);

  --font:"Archivo","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* escala tipográfica: sete degraus, e nada fora deles */
  --f1:11px;  /* etiqueta em caixa alta */
  --f2:12px;  /* meta, contador, dica */
  --f3:13px;  /* texto de interface */
  --f4:15px;  /* nome, título de barra */
  --f5:16px;  /* corpo de leitura */
  --f6:21px;  /* título de painel */
  --f7:30px;  /* título de seção */
  --f8:40px;  /* título de página */

  /* nomes antigos, mantidos como apelido pra nao quebrar nada */
  --bg:var(--s0); --panel:var(--s1); --panel2:var(--s2);
  --mut:var(--fg2); --faint:var(--fg3); --accent:var(--ac);
}

/* foco visivel em tudo que recebe teclado */
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:var(--r1)}
::selection{background:var(--ac-soft);color:var(--fg)}

/* barra de rolagem fina, no tom das superficies */
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border:3px solid transparent;
  background-clip:content-box;border-radius:var(--pill)}
::-webkit-scrollbar-thumb:hover{background:var(--fg3);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--fg);font-family:var(--font);display:flex;
     -webkit-font-smoothing:antialiased;font-synthesis-weight:none}
button{font-family:inherit;cursor:pointer}

/* ---------------- trilho ----------------
   Anatomia de app de produto: seletor de espaço, busca com atalho, rótulo de
   seção, itens com agulha deslizante e rodapé de usuário. A agulha é UM
   elemento que viaja entre os itens — é o que dá continuidade ao trocar de aba.
   ---------------------------------------------------------------------- */
#rail{width:236px;flex:none;background:var(--s1);border-right:1px solid var(--line);
      display:flex;flex-direction:column;padding:12px 10px 10px}

.espaco{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;
  border-radius:var(--r2);padding:8px;text-align:left;color:var(--fg);
  transition:background var(--t) var(--ease)}
.espaco:hover{background:var(--s3)}
.espaco .mark{width:30px;height:30px;border-radius:9px;background:var(--ac);color:var(--on-ac);
  display:grid;place-items:center;font-weight:900;font-size:16px;flex:none;
  box-shadow:0 6px 16px rgba(255,90,31,.28)}
.espaco .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.espaco .txt b{font-size:var(--f3);font-weight:800;letter-spacing:-.01em}
.espaco .txt small{font-size:10.5px;color:var(--fg3);font-weight:600}
.espaco .chev{width:14px;height:14px;flex:none;fill:none;stroke:var(--fg3);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.atalho{display:flex;align-items:center;gap:8px;margin:12px 0 6px;padding:8px 10px;
  background:var(--s2);border:1px solid var(--line);border-radius:var(--r2);
  font-size:var(--f2);font-weight:600;color:var(--fg3);cursor:pointer;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.atalho:hover{border-color:var(--line2);color:var(--fg2)}
.atalho svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.atalho span{flex:1}
.atalho kbd{font-family:var(--mono);font-size:10px;background:var(--s3);border:1px solid var(--line);
  border-radius:5px;padding:2px 5px;color:var(--fg3)}

.secao-nav{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg3);padding:14px 10px 7px}

nav{position:relative;display:flex;flex-direction:column;gap:2px}
/* a agulha: um retângulo só, que desliza pro item ativo */
.agulha{position:absolute;left:0;width:100%;height:38px;border-radius:var(--r2);
  background:var(--s3);z-index:0;opacity:0;
  transition:transform 420ms var(--ease),opacity 200ms var(--ease)}
.agulha:before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--ac)}
.nav{position:relative;z-index:1;display:flex;align-items:center;gap:11px;width:100%;
  background:transparent;border:0;color:var(--fg2);font-size:var(--f3);font-weight:700;
  padding:0 10px;height:38px;border-radius:var(--r2);text-align:left;
  transition:color var(--t) var(--ease)}
.nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
         stroke-linejoin:round;flex:none;transition:transform var(--t) var(--ease)}
.nav:hover{color:var(--fg)}
.nav:hover svg{transform:translateX(1px)}
.nav.on{color:var(--fg)}
.nav.on svg{stroke:var(--ac)}

.me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 8px 4px;
    border-top:1px solid var(--line)}
.me .ret{width:28px;height:28px;border-radius:9px;background:var(--s3);display:grid;
  place-items:center;flex:none}
.me .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);display:block}
.me .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.me .txt b{font-size:var(--f2);font-weight:800;color:var(--fg);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.me .txt small{font-size:10.5px;color:var(--fg3);font-weight:600}
.me .eng{background:none;border:0;padding:5px;border-radius:var(--r1);color:var(--fg3);
  display:grid;place-items:center;transition:color var(--t) var(--ease),background var(--t) var(--ease)}
.me .eng:hover{color:var(--fg);background:var(--s3)}
.me .eng svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round}

/* ---------------- stage ---------------- */
#stage{flex:1;position:relative;min-width:0}
.view{position:absolute;inset:0;display:none;flex-direction:column}
.view.on{display:flex}
.bar{height:56px;flex:none;display:flex;align-items:center;gap:12px;padding:0 18px;
     border-bottom:1px solid var(--line);background:var(--panel)}
.ttl{font-size:var(--f4);font-weight:800;letter-spacing:-.01em}
.tag{display:inline-block;margin-left:8px;font-size:var(--f1);font-weight:800;letter-spacing:.06em;
     text-transform:uppercase;color:var(--accent);background:rgba(255,90,31,.12);
     border:1px solid rgba(255,90,31,.3);border-radius:var(--r1);padding:3px 8px}
.spacer{flex:1}
.who{display:flex;gap:-6px;align-items:center}
.who .b{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
        font-size:var(--f1);font-weight:900;color:var(--on-ac);border:2px solid var(--panel);margin-left:-7px}
.av{display:flex;gap:5px}
.ic{background:var(--panel2);border:1px solid var(--line);color:var(--mut);border-radius:var(--r2);
    padding:7px 12px;font-size:var(--f2);font-weight:700;min-height:34px;transition:var(--t) var(--ease)}
.ic:hover{color:var(--fg);border-color:var(--line2)}
.ic.on{background:var(--accent);border-color:var(--accent);color:var(--on-ac)}

/* ---------------- chão ---------------- */
#floor{flex:1;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, #17171D 0%, var(--on-ac) 60%),
    var(--bg)}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
#tiles{position:absolute;inset:0;pointer-events:none}

.callbar{flex:none;border-top:1px solid var(--line);background:var(--panel);
         padding:10px 16px;display:flex;align-items:center;gap:14px;min-height:64px}
.callbar .lbl{font-size:var(--f2);font-weight:700;color:var(--faint);white-space:nowrap}
/* As telhas de vídeo flutuam sobre o mapa, no canto de cima à direita — é onde o
   Gather põe quem está na conversa, pra não roubar o chão do escritório. */
.videos{position:absolute;top:14px;right:14px;z-index:20;display:flex;flex-wrap:wrap;
  justify-content:flex-end;gap:8px;max-width:min(560px,52%);pointer-events:none}
.telha{position:relative;width:168px;aspect-ratio:16/10;border-radius:var(--r3);overflow:hidden;
  background:var(--s2);border:1px solid var(--line2);box-shadow:var(--e2);
  animation:telhaEntra .34s var(--ease) both;pointer-events:auto}
@keyframes telhaEntra{from{opacity:0;transform:scale(.94) translateY(-6px)} to{opacity:1;transform:none}}
.telha video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.telha.eu video{transform:scaleX(-1)}
.telha .nome{position:absolute;left:7px;bottom:7px;right:7px;display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.telha .mic{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.telha.falando{border-color:var(--ok);box-shadow:0 0 0 2px rgba(61,214,140,.35),var(--e2)}
.hint{position:absolute;left:18px;bottom:82px;font-size:var(--f1);color:var(--faint);
      background:rgba(14,14,17,.8);border:1px solid var(--line);border-radius:var(--r2);padding:7px 11px}
.hint b{color:var(--mut)}

/* ============================ PORTÃO =====================================
   Tela cheia em duas metades, no padrão que o 21st.dev consagrou pra login de
   produto: à esquerda um palco animado (anéis pulsando + órbitas), à direita o
   formulário entrando linha a linha com cortina. As técnicas vêm de lá; o que
   orbita é nosso — os cinco módulos em volta do selo do Koncord.
   ======================================================================== */
#gate{position:fixed;inset:0;z-index:50;background:var(--s0);display:grid;
      grid-template-columns:1fr 1fr;overflow:hidden}
#gate.off{display:none}

/* ---------- palco ---------- */
#gate .palco{position:relative;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(52% 52% at 34% 42%, rgba(255,90,31,.13), transparent 70%),
    radial-gradient(46% 46% at 76% 78%, rgba(167,139,250,.10), transparent 70%),
    var(--s0)}
#gate .palco:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 70%,var(--s0));}

/* anéis que respiram, atrás de tudo */
#gate .ondas{position:absolute;inset:0;display:grid;place-items:center;
  -webkit-mask-image:linear-gradient(to bottom,#000 10%,transparent 85%);
          mask-image:linear-gradient(to bottom,#000 10%,transparent 85%)}
#gate .ondas span{position:absolute;left:50%;top:50%;border-radius:50%;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.012);
  animation:onda 4.6s ease-in-out infinite}
#gate .ondas span:nth-child(1){width:180px;height:180px;animation-delay:0s}
#gate .ondas span:nth-child(2){width:260px;height:260px;animation-delay:.12s}
#gate .ondas span:nth-child(3){width:340px;height:340px;animation-delay:.24s}
#gate .ondas span:nth-child(4){width:420px;height:420px;animation-delay:.36s}
#gate .ondas span:nth-child(5){width:500px;height:500px;animation-delay:.48s}
#gate .ondas span:nth-child(6){width:580px;height:580px;animation-delay:.60s}
#gate .ondas span:nth-child(7){width:660px;height:660px;animation-delay:.72s}
#gate .ondas span:nth-child(8){width:740px;height:740px;animation-delay:.84s;border-style:dashed}
@keyframes onda{
  0%,100%{transform:translate(-50%,-50%) scale(1);   opacity:.55}
  50%    {transform:translate(-50%,-50%) scale(.93); opacity:.9}
}

/* a legenda fica no rodapé do palco: o nome já está do outro lado, no formulário */
#gate .legenda{position:absolute;left:44px;bottom:38px;margin:0;font-size:var(--f3);
  font-weight:600;color:var(--fg3);letter-spacing:-.01em}

/* órbitas */
#gate .orbitas{position:relative;width:640px;height:640px;max-width:92%;max-height:92%;
  display:grid;place-items:center}
#gate .trilhos{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#gate .trilhos circle{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
#gate .nucleo{position:relative;z-index:2;width:74px;height:74px;border-radius:22px;
  background:var(--ac);color:var(--on-ac);display:grid;place-items:center;
  font-size:36px;font-weight:900;box-shadow:0 0 0 10px rgba(255,90,31,.10),
  0 18px 46px rgba(255,90,31,.32)}
#gate .orb{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(4px);
  animation:orbita var(--d,30s) linear infinite;animation-delay:var(--t,0s)}
#gate .orb.re{animation-direction:reverse}
#gate .orb svg{width:20px;height:20px;fill:none;stroke:var(--fg2);stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round}
#gate .orb.ponto{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--ac);border:0;box-shadow:0 0 14px var(--ac)}
#gate .orb.ponto.dois{background:var(--viol);box-shadow:0 0 14px var(--viol)}
/* a segunda rotação cancela a primeira: o ícone anda na órbita sem girar sobre si */
@keyframes orbita{
  from{transform:rotate(0deg)   translateY(calc(var(--r) * 1px)) rotate(0deg)}
  to  {transform:rotate(360deg) translateY(calc(var(--r) * 1px)) rotate(-360deg)}
}

/* ---------- formulário ---------- */
#gate .acesso{display:grid;place-items:center;padding:40px 6%;
  border-left:1px solid var(--line)}
#gate .form{width:min(392px,100%)}
#gate .marca{display:flex;align-items:center;gap:11px;font-size:30px;font-weight:900;
  letter-spacing:-.035em;margin-bottom:10px}
#gate .marca .mark{width:32px;height:32px;border-radius:10px;background:var(--ac);
  color:var(--on-ac);display:grid;place-items:center;font-size:18px;font-weight:900;flex:none;
  box-shadow:0 8px 22px rgba(255,90,31,.34)}
#gate .marca em{font-style:normal;color:var(--ac)}
#gate .sub{margin:0 0 30px;font-size:var(--f3);color:var(--fg2);line-height:1.6}
#gate label{display:block;font-size:var(--f1);font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg3);margin-bottom:9px}

/* campo com holofote seguindo o mouse: a borda acende onde o cursor está */
#gate .campo-luz{border-radius:var(--r2);padding:1.5px;background:var(--line);
  transition:background var(--t) var(--ease)}
#gate .campo-luz.aceso{background:radial-gradient(90px circle at var(--mx) var(--my),
  var(--ac), rgba(255,90,31,.12) 70%)}
#gate .campo-luz input{width:100%;display:block;background:var(--s2);border:0;
  border-radius:calc(var(--r2) - 1px);color:var(--fg);font-family:inherit;
  font-size:var(--f4);padding:12px 14px;outline:none}
#gate .campo-luz:focus-within{background:linear-gradient(90deg,var(--ac),var(--ac2))}
#gate .dica{display:block;margin:9px 0 26px;font-size:var(--f2);color:var(--fg3)}

#gate .escolha{display:flex;align-items:center;gap:18px;margin-bottom:32px}
#previa{width:70px;height:70px;flex:none;border-radius:var(--r3);background:var(--s2);
  border:1px solid var(--line);cursor:pointer;
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
#previa:hover{border-color:var(--ac);transform:translateY(-2px)}
.colors{display:flex;flex-wrap:wrap;gap:11px}
.colors button{width:28px;height:28px;border-radius:50%;border:0;padding:0;position:relative;
  cursor:pointer;transition:transform var(--t) var(--ease)}
.colors button:hover{transform:scale(1.14)}
.colors button.on{transform:scale(1.14)}
.colors button.on:after{content:'';position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--fg)}

#enter{position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  gap:9px;background:var(--ac);color:var(--on-ac);border:0;border-radius:var(--r2);
  padding:14px;font-size:var(--f4);font-weight:800;font-family:inherit;overflow:visible;
  box-shadow:0 12px 30px rgba(255,90,31,.26);
  transition:transform var(--tf) var(--ease),box-shadow var(--t) var(--ease),
             background var(--t) var(--ease)}
#enter:hover{background:var(--ac2);box-shadow:0 16px 38px rgba(255,90,31,.34)}
#enter:active{transform:scale(.985)}
#enter svg{transition:transform var(--t) var(--ease)}
#enter:hover svg{transform:translateX(3px)}
/* o fio de luz que acende embaixo do botão no hover */
#enter .fio{position:absolute;left:0;right:0;bottom:-1px;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--ac2),transparent);
  transition:opacity 420ms var(--ease)}
#enter .fio.borrao{left:18%;right:18%;filter:blur(3px);
  background:linear-gradient(90deg,transparent,var(--viol),transparent)}
#enter:hover .fio{opacity:1}

#gate .rodape{margin:22px 0 0;font-size:var(--f2);color:var(--fg3);text-align:center;
  line-height:1.55}

/* Cada linha entra com a cortina passando por cima — o "box reveal" do 21st.
   REGRA DE SEGURANÇA: o estado em repouso é "tudo visível e a cortina fora da
   tela". A animação só entra quando o JS liga a classe .anima numa aba visível.
   Se a animação não rodar (aba em segundo plano, movimento reduzido, JS quebrado),
   o formulário aparece inteiro e clicável em vez de ficar preto e travado. */
#gate .rev{position:relative;overflow:hidden}
#gate .rev:before{content:'';position:absolute;inset:2px 0;z-index:3;background:var(--ac);
  border-radius:3px;transform:translateX(101%);pointer-events:none}
#gate.anima .rev > *{animation:subir .55s var(--ease) both;
  animation-delay:calc(var(--i) * 90ms + 120ms)}
#gate.anima .rev:before{animation:cortina .55s ease-in both;
  animation-delay:calc(var(--i) * 90ms + 120ms)}
@keyframes subir  {from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none}}
/* a cortina desliza por transform: animar left/right custa layout a cada quadro */
@keyframes cortina{from{transform:translateX(0)} to{transform:translateX(101%)}}

@media (max-width:980px){
  #gate{grid-template-columns:1fr}
  #gate .palco{display:none}
  #gate .acesso{border-left:0}
}

/* painéis embutidos: chat e notas moram dentro do app */

/* ---------------- trilho: tarefas em colunas ---------------- */
.kb{flex:1;display:flex;gap:14px;padding:18px;overflow-x:auto;align-items:flex-start}
.col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);
     width:290px;flex:none;display:flex;flex-direction:column;max-height:100%}
.col h3{margin:0;padding:14px 15px 11px;font-size:var(--f2);font-weight:900;letter-spacing:.1em;
        text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:8px}
.col h3 .n{margin-left:auto;background:var(--panel2);border-radius:20px;padding:2px 8px;
           font-size:var(--f1);letter-spacing:0;color:var(--faint)}
.col .cards{padding:0 11px 11px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:54px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);padding:12px 13px;
      font-size:var(--f3);line-height:1.45;cursor:grab;transition:var(--t) var(--ease)}
.card:hover{border-color:var(--line2)}
.card.drag{opacity:.45}
.col.alvo{border-color:var(--accent)}
.col .add{margin:0 11px 12px;background:transparent;border:1px dashed var(--line);color:var(--faint);
          border-radius:var(--r2);padding:9px;font-size:var(--f2);font-weight:700}
.col .add:hover{color:var(--fg);border-color:var(--line2)}

/* painéis embutidos ocupam a seção inteira */
/* o Rádio é o chat do Koncord embutido, e a Carta antiga usava o AFFiNE */
iframe#chatFrame,iframe#muralFrame{flex:1;width:100%;border:0;background:var(--bg)}

/* ---------------- estado de presença ---------------- */
.estado{display:flex;gap:2px;background:var(--panel2);border:1px solid var(--line);
        border-radius:var(--r2);padding:2px}
.est{display:flex;align-items:center;gap:6px;background:transparent;border:0;color:var(--mut);
     font-size:var(--f2);font-weight:700;padding:6px 10px;border-radius:var(--r1);min-height:30px;
     transition:var(--t) var(--ease);font-family:inherit;cursor:pointer}
.est:hover{color:var(--fg)}
.est.on{background:var(--bg);color:var(--fg)}
.est .pt{width:7px;height:7px;border-radius:50%;display:block;flex:none}

/* ---------------- convite de conversa ---------------- */
.entrar,.sair{font-family:inherit;font-size:var(--f2);font-weight:800;border-radius:var(--r2);
              padding:9px 16px;min-height:34px;border:0;cursor:pointer;flex:none}
.entrar{background:var(--accent);color:var(--on-ac)}
.entrar:hover{filter:brightness(1.08)}
.sair{background:transparent;color:var(--mut);border:1px solid var(--line)}
.sair:hover{color:var(--fg);border-color:var(--line2)}

/* ---------------- status tipado na Rota ---------------- */
.bolinha{width:8px;height:8px;border-radius:50%;display:block;flex:none}
.col h3{gap:8px}
.col h3 span:first-of-type{flex:1}
.card{display:flex;align-items:flex-start;gap:9px}
.card .bolinha{margin-top:5px}
.card span{flex:1}

/* ===================== ROTA — board no padrão ClickUp ===================== */
.busca{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);color:var(--fg);
       font-family:inherit;font-size:var(--f2);padding:8px 12px;min-height:34px;width:190px;outline:none}
.busca:focus{border-color:var(--accent)}
.ic.pri{background:var(--accent);border-color:var(--accent);color:var(--on-ac)}
.ic.pri:hover{filter:brightness(1.08);color:var(--on-ac)}

.chips{display:flex;gap:6px;padding:0 18px;flex-wrap:wrap}
.chips:empty{display:none}
.chips .chip{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);
             border-radius:var(--r1);padding:5px 9px;font-size:var(--f1);font-weight:700;color:var(--mut)}
.chips .chip b{color:var(--fg);font-weight:800}
.chips .chip button{background:none;border:0;color:var(--faint);cursor:pointer;font-size:var(--f3);padding:0 0 0 2px}
.chips .chip button:hover{color:var(--fg)}

.kb{flex:1;display:flex;gap:14px;padding:16px 18px;overflow-x:auto;align-items:flex-start}
.col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);
     width:300px;flex:none;display:flex;flex-direction:column;max-height:100%}
.col h3{margin:0;padding:13px 14px 10px;font-size:var(--f1);font-weight:900;letter-spacing:.09em;
        text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:8px}
.col h3 .n{margin-left:auto;background:var(--panel2);border-radius:20px;padding:2px 8px;
           font-size:var(--f1);letter-spacing:0;color:var(--faint)}
.col .cards{padding:0 10px 10px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;min-height:48px}
.col .add{margin:0 10px 11px;background:transparent;border:1px dashed var(--line);color:var(--faint);
          border-radius:var(--r2);padding:8px;font-size:var(--f2);font-weight:700;font-family:inherit;cursor:pointer}
.col .add:hover{color:var(--fg);border-color:var(--line2)}
.col.alvo{border-color:var(--accent)}

/* entrada escalonada: as colunas sobem uma atrás da outra ao abrir a Rota */
.kb .col{animation:subirCol .42s var(--ease) both}
.kb .col:nth-child(1){animation-delay:0ms}
.kb .col:nth-child(2){animation-delay:45ms}
.kb .col:nth-child(3){animation-delay:90ms}
.kb .col:nth-child(4){animation-delay:135ms}
.kb .col:nth-child(n+5){animation-delay:180ms}
@keyframes subirCol{from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none}}

/* cartão: a anatomia dos boards de referência — pílulas em cima, título,
   barra de progresso e o pé com prazo, checklist e responsável */
.col{position:relative}
.col .fita{position:absolute;left:16px;right:16px;top:0;height:2px;border-radius:0 0 2px 2px;
  background:var(--cor);opacity:.65}
.card{position:relative;background:var(--s2);border:1px solid var(--line);border-radius:var(--r2);
      padding:12px 13px;cursor:pointer;display:flex;flex-direction:column;gap:9px;
      transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),
                 box-shadow var(--t) var(--ease)}
/* faixa de status na lateral: some quando parado, aparece no hover */
.card:before{content:'';position:absolute;left:0;top:11px;bottom:11px;width:2px;border-radius:0 2px 2px 0;
  background:var(--cor);opacity:0;transition:opacity var(--t) var(--ease)}
.card:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--e2)}
.card:hover:before{opacity:.9}
.card.drag{opacity:.4;transform:rotate(1.5deg) scale(.98)}
.card .alto{display:flex;gap:6px;flex-wrap:wrap}
.card .alto:empty{display:none}
.card .tit{font-size:var(--f3);line-height:1.45;color:var(--fg);font-weight:600}

.pilula{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;
  letter-spacing:.02em;padding:3px 8px;border-radius:var(--pill);
  background:color-mix(in srgb, var(--c, #8C8894) 16%, transparent);
  color:color-mix(in srgb, var(--c, #8C8894) 72%, white)}
.pilula i{width:5px;height:5px;border-radius:50%;background:var(--c, #8C8894);flex:none}
.pilula.etq{background:var(--s3);color:var(--fg2);border:1px solid var(--line);
  text-transform:none;letter-spacing:0}

.prog{width:100%}
.prog .prog-top{display:flex;width:100%;justify-content:space-between;font-size:10.5px;font-weight:700;
  color:var(--fg3);margin-bottom:5px}
.prog .prog-top b{color:var(--fg2)}
.barra{height:4px;border-radius:var(--pill);background:var(--s3);overflow:hidden}
.barra i{display:block;height:100%;border-radius:var(--pill);background:var(--cor);
  transition:width 500ms var(--ease)}

.card .baixo{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card .baixo:empty{display:none}
.card .baixo .mchip svg{vertical-align:-1px}
.card .meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card .meta:empty{display:none}
.mchip{display:flex;align-items:center;gap:4px;font-size:var(--f1);font-weight:700;
       border-radius:var(--r1);padding:3px 7px;background:rgba(255,255,255,.05);color:var(--mut)}
.mchip.venceu{background:rgba(255,107,138,.16);color:var(--danger)}
.mchip.hoje{background:rgba(255,197,61,.16);color:var(--warn)}
.mchip.tag{background:rgba(120,140,255,.14);color:var(--info)}
.mchip .flag{font-size:var(--f2);line-height:1}
.av-mini{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1px solid var(--line);
         margin-left:auto;flex:none}
.av-mini.txt{display:grid;place-items:center;font-size:var(--f1);font-weight:900;color:var(--on-ac)}

/* ===================== painel lateral da tarefa ===================== */
.painel{position:fixed;top:0;right:0;bottom:0;width:min(460px,92vw);z-index:70;
        background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;
        box-shadow:var(--e3)}
.painel[hidden]{display:none}
.pcab{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pill{display:flex;align-items:center;gap:7px;font-size:var(--f1);font-weight:900;letter-spacing:.06em;
      text-transform:uppercase;border-radius:var(--r1);padding:5px 10px}
.pcorpo{flex:1;overflow-y:auto;padding:18px 20px 40px}
.pcorpo h2{font-size:var(--f6);font-weight:800;letter-spacing:-.02em;margin:0 0 18px;outline:none;line-height:1.3}
.campos{display:flex;flex-direction:column;gap:2px;margin-bottom:22px}
.campo{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:10px;min-height:36px}
.campo label{font-size:var(--f2);font-weight:700;color:var(--mut)}
.campo input{background:transparent;border:1px solid transparent;border-radius:var(--r1);color:var(--fg);
             font-family:inherit;font-size:var(--f3);padding:6px 8px;outline:none;width:100%}
.campo input:hover{border-color:var(--line)}
.campo input:focus{border-color:var(--accent);background:var(--panel2)}
.opcoes{display:flex;gap:4px;flex-wrap:wrap}
.opcoes button{background:transparent;border:1px solid var(--line);border-radius:var(--r1);color:var(--mut);
               font-family:inherit;font-size:var(--f1);font-weight:700;padding:5px 9px;cursor:pointer;
               display:flex;align-items:center;gap:5px}
.opcoes button:hover{color:var(--fg)}
.opcoes button.on{background:var(--panel2);color:var(--fg);border-color:var(--line2)}
.secao{display:block;font-size:var(--f1);font-weight:900;letter-spacing:.11em;text-transform:uppercase;
       color:var(--faint);margin:0 0 9px}
.secao .cont{color:var(--mut);letter-spacing:0;font-weight:700}
.desc{min-height:70px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);
      padding:11px 13px;font-size:var(--f3);line-height:1.6;outline:none;margin-bottom:22px;color:var(--fg)}
.desc:focus{border-color:var(--accent)}
.desc:empty:before{content:attr(data-vazio);color:var(--faint)}
.check{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.check .item{display:flex;align-items:center;gap:9px;font-size:var(--f3);color:var(--fg)}
.check .item input{width:15px;height:15px;accent-color:var(--accent);flex:none;cursor:pointer}
.check .item span{flex:1;outline:none}
.check .item.ok span{color:var(--faint);text-decoration:line-through}
.pcorpo > .add{width:100%;background:transparent;border:1px dashed var(--line);color:var(--faint);
               border-radius:var(--r2);padding:8px;font-size:var(--f2);font-weight:700;font-family:inherit;
               cursor:pointer;margin-bottom:22px}
.pcorpo > .add:hover{color:var(--fg);border-color:var(--line2)}
.ativ{display:flex;flex-direction:column;gap:7px;font-size:var(--f2);color:var(--mut);line-height:1.5}
.ativ b{color:var(--fg);font-weight:700}

.chips{padding:10px 18px 0}
.chips .chip.aviso{background:rgba(255,197,61,.12);border-color:rgba(255,197,61,.3);color:var(--warn)}
.chips .chip.aviso b{color:var(--warn)}

/* ===================== BORDO — editor de blocos ===================== */
.doc{flex:1;display:flex;min-height:0}
.arvore{width:240px;flex:none;border-right:1px solid var(--line);background:var(--panel);
        display:flex;flex-direction:column;overflow:hidden}
.arvcab{display:flex;gap:6px;padding:12px;border-bottom:1px solid var(--line)}
.arvcab .busca{width:100%}
.arvcab .ic{padding:8px 11px;min-height:34px}
#docLista{flex:1;overflow-y:auto;padding:8px 6px}
.pg{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:var(--r1);cursor:pointer;
    font-size:var(--f3);color:var(--mut);user-select:none}
.pg:hover{background:rgba(255,255,255,.04);color:var(--fg)}
.pg.on{background:rgba(255,255,255,.07);color:var(--fg);font-weight:600}
.pg .seta{width:12px;text-align:center;color:var(--faint);font-size:10px;flex:none}
.pg .ico{flex:none}
.pg .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg .mais{opacity:0;background:none;border:0;color:var(--faint);cursor:pointer;font-size:var(--f4);padding:0 3px}
.pg:hover .mais{opacity:1}
.pg .mais:hover{color:var(--fg)}

.pagina{flex:1;display:flex;flex-direction:column;min-width:0}
.trilha{font-size:var(--f2);color:var(--mut);display:flex;gap:6px;align-items:center}
.trilha span{cursor:pointer}
.trilha span:hover{color:var(--fg)}
.rolagem{flex:1;overflow-y:auto}
/* coluna de leitura: o Notion usa 720px e é isso que dá ~70 caracteres por linha */
.folha{max-width:720px;margin:0 auto;padding:54px 24px 40vh}
.icone{font-size:52px;line-height:1;cursor:pointer;margin-bottom:10px;width:max-content;
  color:var(--fg2);transition:color var(--t) var(--ease)}
.icone:hover{color:var(--fg)}
.icone svg{width:44px;height:44px}
.pg .ico{display:inline-flex;align-items:center;color:var(--fg3)}
.pg.on .ico,.pg:hover .ico{color:var(--fg2)}
.trilha svg{width:13px;height:13px;vertical-align:-2px;opacity:.7}
.folha h1{font-size:var(--f8);line-height:48px;font-weight:800;letter-spacing:-.03em;
          margin:0 0 18px;outline:none}
.folha h1:empty:before{content:attr(data-vazio);color:var(--faint)}

/* blocos */
.blocos{display:flex;flex-direction:column}
.bl{position:relative;display:flex;align-items:flex-start;gap:4px;padding:3px 0}
.bl .alcas{position:absolute;left:-52px;top:2px;display:flex;gap:2px;opacity:0;transition:opacity var(--tf) var(--ease)}
.bl:hover .alcas{opacity:1}
.alcas button{background:none;border:0;color:var(--faint);cursor:pointer;font-size:var(--f3);
              padding:3px 4px;border-radius:var(--r1);line-height:1}
.alcas button:hover{background:rgba(255,255,255,.06);color:var(--fg)}
.bl .conteudo{flex:1;outline:none;font-size:var(--f5);line-height:24px;padding:3px 4px;
              border-radius:var(--r1);min-height:30px;color:var(--fg)}
.bl .conteudo:empty:before{content:attr(data-vazio);color:var(--faint)}
.bl.sel .conteudo{background:rgba(46,107,230,.16)}
.bl.arrastando{opacity:.4}
.bl.alvo-antes{box-shadow:0 -2px 0 var(--sel, var(--ac))}
.bl.alvo-depois{box-shadow:0 2px 0 var(--sel, var(--ac))}

.bl[data-t="h1"] .conteudo{font-size:var(--f7);line-height:39px;font-weight:700;padding-top:26px}
.bl[data-t="h2"] .conteudo{font-size:var(--f6);line-height:32px;font-weight:700;padding-top:20px}
.bl[data-t="h3"] .conteudo{font-size:var(--f6);line-height:26px;font-weight:700;padding-top:14px}
.bl[data-t="cit"] .conteudo{border-left:3px solid var(--line);padding-left:14px;color:var(--mut)}
.bl[data-t="cod"] .conteudo{font-family:ui-monospace,Menlo,monospace;font-size:var(--f3);
   background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px;
   white-space:pre-wrap;line-height:1.6}
.bl[data-t="div"]{padding:10px 0}
.bl[data-t="div"] .conteudo{height:1px;min-height:1px;background:var(--line);padding:0}
.bl .marca{flex:none;color:var(--mut);font-size:var(--f5);line-height:24px;padding:3px 0;
           user-select:none;min-width:20px;text-align:center}
.bl[data-t="tarefa"] .marca input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;
                                  margin-top:5px}
.bl[data-t="tarefa"].feito .conteudo{color:var(--faint);text-decoration:line-through}
.bl[data-t="alerta"]{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);
                     padding:12px;margin:6px 0}
.bl.filho{padding-left:26px}
.bl a.link{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(255,90,31,.35)}
.bl a.link:hover{background:rgba(255,90,31,.1)}

/* menu do / */
.menu{position:fixed;z-index:90;background:var(--panel);border:1px solid var(--line);
      border-radius:var(--r3);box-shadow:var(--e2);padding:6px;width:270px;
      max-height:320px;overflow-y:auto}
.menu .op{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:var(--r1);cursor:pointer;
          font-size:var(--f3);color:var(--mut)}
.menu .op .k{width:24px;text-align:center;font-size:var(--f4);color:var(--fg)}
.menu .op small{display:block;font-size:var(--f1);color:var(--faint)}
.menu .op:hover,.menu .op.on{background:rgba(255,255,255,.06);color:var(--fg)}
.menu .tit{font-size:var(--f1);font-weight:900;letter-spacing:.11em;text-transform:uppercase;
           color:var(--faint);padding:8px 9px 4px}

.backlinks{margin-top:50px;border-top:1px solid var(--line);padding-top:16px}
.backlinks:empty{display:none}
.backlinks h4{font-size:var(--f1);font-weight:900;letter-spacing:.11em;text-transform:uppercase;
              color:var(--faint);margin:0 0 10px}
.backlinks a{display:block;font-size:var(--f3);color:var(--mut);text-decoration:none;padding:5px 0}
.backlinks a:hover{color:var(--fg)}

/* ===================== CARTA — medidas extraídas do quadro real ===========
   barra 777×56 · fundo var(--s4) · raio 12 · fio de luz branco em vez de sombra
   botão 68×56 preenchendo a barra · sticky 200×200 · texto 26px var(--fg)
   ========================================================================= */
.cv-wrap{flex:1;position:relative;overflow:hidden;background:var(--s0)}
.cv-vp{position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1.2px, transparent 1.2px);
  background-size:26px 26px}
.cv-vp.mao{cursor:grab} .cv-vp.mao.arrasta{cursor:grabbing}
.cv-vp.criando{cursor:crosshair}
.cv-mundo{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
#cvLinhas,#cvTracos{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
#cvItens{position:absolute;top:0;left:0}

/* topo */
.cv-topo{position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:center;
  gap:10px;padding:0 14px;z-index:46;pointer-events:none}
.cv-topo > *{pointer-events:auto}
.cv-nome{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--fg)}
.cv-ico{width:20px;height:20px;border-radius:5px;background:var(--ac);color:var(--s2);
  display:grid;place-items:center;font-size:11px;font-weight:900}
.cv-estrela{color:var(--fg3);font-size:15px;cursor:pointer}
.cv-estrela:hover{color:var(--ac)}
.cv-btn{background:none;border:0;border-radius:8px;color:var(--fg);font-family:inherit;
  font-size:13.5px;font-weight:500;padding:8px 12px;cursor:pointer}
.cv-btn:hover{background:rgba(255,255,255,.08)}

/* barra principal: as medidas do quadro real */
.cv-barra{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:46;
  display:flex;align-items:center;height:56px;background:var(--s4);border-radius:12px;
  border:1px solid var(--line2);box-shadow:var(--e3)}
.fr{position:relative;background:none;border:0;cursor:pointer;border-radius:10px;
  width:68px;height:56px;display:grid;place-items:center;font-family:inherit;padding:0}
.fr:hover{background:rgba(255,255,255,.07)}
.fr.on{background:rgba(255,255,255,.12)}
.fr.larga{width:110px}
.fr.estreita{width:46px}
/* a letra do atalho fica FORA da barra, acima */
.fr:before{content:attr(data-k);position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:400;color:var(--fg3);white-space:nowrap}
.fr-sep{width:1px;height:30px;background:var(--line2);margin:0 5px}
.gl{font-size:19px;color:var(--fg);line-height:1}
.gl.forte{font-size:23px;font-weight:700}
.gl.seta{font-size:27px;font-weight:200}

.mini-task{width:88px;height:34px;background:var(--s2);border:1px solid var(--line2);
  border-radius:6px;display:block;position:relative}
.mini-task i{position:absolute;left:7px;top:6px;font-style:normal;font-size:9px;color:var(--fg3)}
.mini-task:after{content:'Task';position:absolute;left:19px;top:4px;font-size:10.5px;color:var(--fg);font-weight:600}
.mini-task em{position:absolute;left:7px;bottom:7px;width:24px;height:5px;border-radius:3px;background:var(--line2)}
.mini-task u{position:absolute;left:35px;bottom:7px;width:44px;height:5px;border-radius:3px;background:var(--ac)}
.mini-pen{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-bottom:30px solid #fff;display:block}
.mini-ret{width:34px;height:26px;background:#fff;border-radius:3px;display:block}
.mini-nota{width:32px;height:30px;background:linear-gradient(160deg,#F3DFA6,#E9CE84);
  border-radius:3px 3px 12px 3px;display:block}
.mini-frame{width:34px;height:20px;background:var(--s3);border:1px solid var(--line2);border-radius:6px;display:block}
.mini-img{width:34px;height:26px;border-radius:5px;display:block;
  background:linear-gradient(160deg,var(--info),var(--info) 60%,var(--ac))}
.mini-modelos{width:34px;height:26px;display:block;border-radius:4px;
  background:
   radial-gradient(circle at 18% 30%, var(--info) 3px, transparent 3px),
   radial-gradient(circle at 50% 30%, var(--danger) 3px, transparent 3px),
   radial-gradient(circle at 82% 30%, var(--ac) 3px, transparent 3px),
   radial-gradient(circle at 50% 78%, var(--ok) 3px, transparent 3px)}
.mini-ia{width:30px;height:26px;display:block;
  background:conic-gradient(var(--danger),var(--viol),var(--info),var(--ok),var(--danger));
  clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}

/* barra de OPÇÕES da ferramenta, acima da principal */
.cv-opcoes{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);z-index:46;
  display:none;align-items:center;gap:6px;height:48px;padding:0 12px;background:var(--s4);
  border-radius:12px;border:1px solid var(--line2);box-shadow:var(--e2)}
.cv-opcoes.on{display:flex}
.cv-opcoes .bola{width:22px;height:22px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0}
.cv-opcoes .bola.on{border-color:var(--fg)}
.cv-opcoes .sep{width:1px;height:22px;background:var(--line2);margin:0 4px}
.cv-opcoes select{background:none;border:0;color:var(--fg);font-family:inherit;font-size:13px;
  cursor:pointer;outline:none}
.cv-opcoes select option{background:var(--s2)}

/* zoom, canto inferior esquerdo */
.cv-zoom{position:absolute;left:16px;bottom:18px;z-index:46;display:flex;align-items:center;
  height:44px;background:var(--s4);border-radius:12px;padding:0 4px;
  border:1px solid var(--line2);box-shadow:var(--e2)}
.cv-zoom button{background:none;border:0;color:var(--fg2);cursor:pointer;border-radius:8px;
  padding:8px 11px;font-size:14px;font-family:inherit;line-height:1}
.cv-zoom button:hover{background:rgba(255,255,255,.07);color:var(--fg)}
.cv-zoom span{font-size:13px;font-weight:500;color:var(--fg);min-width:46px;text-align:center;
  font-variant-numeric:tabular-nums}

/* itens */
.it{position:absolute;box-sizing:border-box}
.it .txt{width:100%;height:100%;outline:none;overflow:hidden;word-break:break-word}
.it-sticky{box-shadow:0 5px 14px rgba(0,0,0,.45)}
/* nota amarela com texto claro não se lê: no ClickUp e no Miro o texto da nota é escuro */
.it-sticky .txt{padding:16px;font-size:22px;line-height:1.3;color:var(--s2);text-align:left;
  font-weight:500;letter-spacing:-.01em}
.it-texto .txt{font-size:26px;line-height:1.3;color:var(--fg);padding:2px;font-weight:500}
.it-ret{border:2px solid var(--fg);border-radius:3px;background:transparent}
.it-oval{border:2px solid var(--fg);border-radius:50%;background:transparent}
.it-ret .txt,.it-oval .txt{display:flex;align-items:center;justify-content:center;
  text-align:center;padding:10px;font-size:20px;color:var(--fg)}
/* moldura e tarefa usam as MESMAS superficies do resto do app: o cartao que
   nasce no quadro e o mesmo cartao que aparece na Rota */
.it-frame{background:var(--s1);border:1px solid var(--line2);border-radius:var(--r1)}
.it-frame .rot{position:absolute;top:-30px;left:0;background:var(--s2);color:var(--fg);
  border:1px solid var(--line);font-size:13px;font-weight:600;padding:4px 10px;
  border-radius:var(--r1);outline:none;white-space:nowrap}
.it-tarefa{background:var(--s2);border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:var(--e2)}
.it-tarefa .txt{padding:12px 14px 12px 16px;font-size:14px;color:var(--fg);font-weight:600;
  border-left:2px solid var(--ac)}
.it-seta{background:none}
.it-seta:after{content:'↑';position:absolute;inset:0;display:grid;place-items:center;
  font-size:64px;font-weight:200;color:var(--fg);line-height:1}

/* seleção: canto QUADRADO branco, lateral BOLINHA azul */
.cv-sel{position:absolute;border:1.5px solid var(--ac);pointer-events:none;z-index:40}
.cv-sel .alca{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid var(--ac);
  border-radius:1px;pointer-events:auto}
.cv-sel .alca.nw{left:-5px;top:-5px;cursor:nwse-resize}
.cv-sel .alca.ne{right:-5px;top:-5px;cursor:nesw-resize}
.cv-sel .alca.sw{left:-5px;bottom:-5px;cursor:nesw-resize}
.cv-sel .alca.se{right:-5px;bottom:-5px;cursor:nwse-resize}
.cv-sel .ponto{position:absolute;width:9px;height:9px;background:var(--ac);border-radius:50%;
  pointer-events:auto;cursor:crosshair}
.cv-sel .ponto:hover{transform:scale(1.4)}
.cv-sel .ponto.n{left:calc(50% - 4.5px);top:-17px}
.cv-sel .ponto.s{left:calc(50% - 4.5px);bottom:-17px}
.cv-sel .ponto.w{left:-17px;top:calc(50% - 4.5px)}
.cv-sel .ponto.e{right:-17px;top:calc(50% - 4.5px)}

/* barra de formatação flutuando acima do item */
.cv-menu{position:absolute;z-index:50;display:flex;align-items:center;height:48px;
  background:var(--s4);border-radius:12px;padding:0 6px;
  border:1px solid var(--line2);box-shadow:var(--e2)}
.cv-menu button{background:none;border:0;color:var(--fg);cursor:pointer;border-radius:8px;
  padding:8px 10px;font-size:13.5px;font-weight:500;font-family:inherit;min-height:34px}
.cv-menu button:hover{background:rgba(255,255,255,.08);color:var(--fg)}
.cv-menu .cor{width:22px;height:22px;border-radius:50%;border:0;padding:0}
.cv-menu .sep{width:1px;height:24px;background:var(--line2);margin:0 5px}

/* menu do botão direito */
.cv-ctx{position:fixed;z-index:95;background:var(--s2);border:1px solid var(--line2);border-radius:10px;
  padding:6px;min-width:250px;box-shadow:var(--e3)}
.cv-ctx div{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;
  font-size:13.5px;color:var(--fg);cursor:pointer}
.cv-ctx div:hover{background:rgba(255,255,255,.07);color:var(--fg)}
.cv-ctx div span{margin-left:auto;color:var(--fg3);font-size:12px}
.cv-ctx hr{border:0;border-top:1px solid var(--line2);margin:5px 4px}

/* formas desenhadas à mão pelo roughjs: a borda sai do SVG, não do CSS */
.it-ret.rabisco,.it-oval.rabisco{border:0;background:transparent}
.it .forma{position:absolute;inset:0;pointer-events:none;overflow:visible}
.it-ret.rabisco .txt,.it-oval.rabisco .txt{position:relative}

/* lista de atalhos do Convés — o painel que o Gather abre no "?" */
#atalhos{position:fixed;inset:0;z-index:92;background:rgba(8,8,11,.72);backdrop-filter:blur(8px);
  display:grid;place-items:center}
#atalhos[hidden]{display:none}
#atalhos .cx{background:var(--s1);border:1px solid var(--line2);border-radius:var(--r4);
  box-shadow:var(--e3);padding:24px 26px;width:min(420px,92vw)}
#atalhos h3{margin:0 0 16px;font-size:var(--f4);font-weight:800;letter-spacing:-.02em}
#atalhos ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
#atalhos li{display:flex;align-items:center;gap:6px;font-size:var(--f3);color:var(--fg2)}
#atalhos li span{margin-left:auto;color:var(--fg3);font-weight:600}
#atalhos kbd{font-family:var(--mono);font-size:11px;background:var(--s3);
  border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;padding:3px 7px;color:var(--fg)}


/* ---------------- vestiário ---------------- */
#vestiario{position:fixed;inset:0;z-index:94;background:rgba(8,8,11,.74);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:20px}
#vestiario[hidden]{display:none}
#vestiario .cx{background:var(--s1);border:1px solid var(--line2);border-radius:var(--r4);
  box-shadow:var(--e3);width:min(520px,96vw);max-height:92vh;display:flex;flex-direction:column;
  overflow:hidden;animation:vSobe .3s var(--ease) both}
@keyframes vSobe{from{opacity:0;transform:translateY(14px) scale(.985)} to{opacity:1;transform:none}}
#vestiario header{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
#vestiario h3{margin:0;font-size:var(--f4);font-weight:800;letter-spacing:-.02em}
#vestiario .x{margin-left:auto;background:none;border:0;color:var(--fg3);font-size:22px;
  line-height:1;padding:0 4px;cursor:pointer}
#vestiario .x:hover{color:var(--fg)}

#vestiario .palco{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 18px 4px;
  background:radial-gradient(60% 70% at 50% 40%, rgba(255,90,31,.10), transparent 70%)}
#vPrevia{width:150px;height:150px}
#vestiario .giro{display:flex;gap:4px;background:var(--s2);border:1px solid var(--line);
  border-radius:var(--pill);padding:3px}
#vestiario .giro button{background:none;border:0;color:var(--fg3);font-family:inherit;
  font-size:var(--f2);font-weight:700;padding:5px 12px;border-radius:var(--pill);cursor:pointer;
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
#vestiario .giro button.on{background:var(--s4);color:var(--fg)}

#vestiario .opts{flex:1;overflow-y:auto;padding:14px 18px 18px;display:flex;
  flex-direction:column;gap:16px}
#vestiario h4{margin:0 0 8px;font-size:var(--f1);font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg3)}
#vestiario .linha{display:flex;flex-wrap:wrap;gap:8px}
#vestiario .bolha{width:28px;height:28px;border-radius:50%;border:0;padding:0;cursor:pointer;
  position:relative;transition:transform var(--t) var(--ease)}
#vestiario .bolha:hover{transform:scale(1.12)}
#vestiario .bolha.on{transform:scale(1.12)}
#vestiario .bolha.on:after{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--fg)}
#vestiario .chip{background:var(--s2);border:1px solid var(--line);border-radius:var(--r1);
  color:var(--fg2);font-family:inherit;font-size:var(--f2);font-weight:700;padding:7px 12px;
  cursor:pointer;transition:var(--t) var(--ease)}
#vestiario .chip:hover{color:var(--fg);border-color:var(--line2)}
#vestiario .chip.on{background:var(--ac-soft);border-color:var(--ac-line);color:var(--ac2)}

#vestiario footer{display:flex;gap:9px;padding:14px 18px;border-top:1px solid var(--line)}
#vestiario .sorte{flex:none;background:var(--s2);border:1px solid var(--line);border-radius:var(--r2);
  color:var(--fg2);font-family:inherit;font-size:var(--f3);font-weight:700;padding:11px 14px;cursor:pointer}
#vestiario .sorte:hover{color:var(--fg);border-color:var(--line2)}
#vestiario .ok{flex:1;background:var(--ac);color:var(--on-ac);border:0;border-radius:var(--r2);
  font-family:inherit;font-size:var(--f3);font-weight:800;padding:11px;cursor:pointer;
  box-shadow:0 10px 24px rgba(255,90,31,.24)}
#vestiario .ok:hover{background:var(--ac2)}

/* skins prontas: a miniatura é o próprio personagem desenhado */
#vestiario .skins{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
#vestiario .skin{background:var(--s2);border:1px solid var(--line);border-radius:var(--r2);
  padding:6px 4px 7px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:var(--t) var(--ease)}
#vestiario .skin:hover{border-color:var(--line2);transform:translateY(-2px)}
#vestiario .skin.on{background:var(--ac-soft);border-color:var(--ac-line)}
#vestiario .skin canvas{width:56px;height:56px;display:block}
#vestiario .skin span{font-size:10.5px;font-weight:700;color:var(--fg3);font-family:inherit}
#vestiario .skin.on span{color:var(--ac2)}
@media (max-width:540px){#vestiario .skins{grid-template-columns:repeat(3,1fr)}}