*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
[hidden]{display:none!important}

/* ░ Mikado — a fonte do papo.video ░
   ⛔ SÓ A REGULAR. a Le não usa bold: o bold e o black saíram do projeto e não
   voltam. nada de font-weight acima de 400 em lugar nenhum daqui. */
@font-face{font-family:"Mikado";src:url("fontes/mikado-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* trava: se algum navegador tentar engordar a letra sozinho, não deixa */
*{font-weight:400!important;font-synthesis-weight:none}

:root{
  /* creme = fundo */
  --bg:#f4f2eb;
  --side:#efe8d8;
  --line:#e3dac4;
  --line-2:#d8ceb4;
  --hi:#e7dec8;
  --ink:#2c2620;
  --ink-2:#7b7060;
  --ink-3:#a09582;
  /* cores chapadas da paleta */
  --pink:#F48591;
  --coral:#FA8D85;
  --peach:#FEA283;
  --amber:#FFB872;
  --sage:#8DA599;
  --lilac:#8D96C1;
  --mauve:#C18EA9;
  --sel:#F48591;
  --sel-ink:#FFFBF3;
  --shadow:0 14px 36px rgba(60,45,35,.16);
  --side-w:274px;
  --bar-h:34px;
  /* ░ fundo em degradê, igual ao din.din.lell.ooo — mesma ideia
     (a página inteira sentada num degradê suave, não um bloco chapado),
     só que nos tons quentes já usados aqui (creme/rosa/pêssego) em vez
     do azul de lá. É LINEAR de propósito: um degradê radial com raio em
     px cria uma "bolha" com borda visível em tela estreita — foi
     exatamente o corte/ponta que apareceu no celular. Linear na diagonal
     não tem beirada, fica contínuo em qualquer tamanho de tela. */
  --wash-1:#f7dbe0;
  --wash-2:#fce4cd;
  --bg-2:#e9dfc8;
  --font-display:"Urbanist","Mikado",-apple-system,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#211d19;
  --side:#191512;
  --line:#302a24;
  --line-2:#3d352d;
  --hi:#292420;
  --ink:#f4f2eb;
  --ink-2:#a99d8b;
  --ink-3:#7b7060;
  --shadow:0 14px 36px rgba(0,0,0,.55);
  --wash-1:#332025;
  --wash-2:#1f2333;
  --bg-2:#150f0c;
}

html,body{height:100%;min-height:100dvh}
/* o Safari do iPhone pinta a barra de status/rodapé com a cor de fundo
   da página, mas só quando acha uma cor CHAPADA — com só gradiente ele
   não sabe qual cor usar e mostra cinza padrão. Por isso o html/body
   também levam uma cor sólida de fundo (a mesma do topo do degradê),
   além do gradiente por cima. */
html{background:var(--wash-1)}
body{
  /* SIMÉTRICO de propósito: mesma cor em cima e embaixo (--wash-1 nas
     duas pontas), clareando só no meio. Diagonal (160deg) fazia o topo
     ficar rosa e o fundo ficar amarelado — cores diferentes nas duas
     pontas, que foi reclamado repetidas vezes. Vertical espelhado
     resolve isso em definitivo, em qualquer proporção de tela. */
  background:linear-gradient(180deg, var(--wash-1) 0%, var(--bg) 50%, var(--wash-1) 100%);
  background-color:var(--wash-1);
  color:var(--ink);
  font-family:"Mikado",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px;line-height:1.45;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;overscroll-behavior:none;
}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
.grow{flex:1}

.app{
  display:grid;grid-template-columns:var(--side-w) 1fr;height:100dvh;width:100%;overflow:hidden;
  transition:grid-template-columns .26s cubic-bezier(.2,.9,.3,1);
}
/* janelinha: menu fechado (só no computador) */
@media (min-width:901px){
  .app.hide-side{grid-template-columns:0 1fr}
  .app.hide-side>.side{transform:translateX(-100%)}
}

/* ░ menu lateral ░ */
.side{
  position:relative;
  display:flex;flex-direction:column;min-height:0;width:var(--side-w);
  border-right:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
  transition:transform .26s cubic-bezier(.2,.9,.3,1);
  /* mesmo degradê linear do body — no celular ela vira gaveta sólida por
     cima do conteúdo, então precisa pintar o MESMO degradê nela pra não
     criar um bloco chapado cortando a continuidade da página.
     ⚠️ NUNCA usar background-attachment:fixed aqui: no Safari do iPhone,
     com safe-area-inset-top e altura em dvh, isso deixa uma faixa sem
     pintar (aparece cinza) bem no topo — foi exatamente esse bug. */
  background:linear-gradient(180deg, var(--wash-1) 0%, var(--bg) 50%, var(--wash-1) 100%);
}
/* topo do menu: a cintinha saiu. depois que a bolinha da conta desceu pro pé
   ela ficou vazia, e só sumia se a Le fechasse a lateral inteira — então no
   computador ela não existe mais. no celular ela fica, porque é onde mora o ×
   que fecha a gaveta. */
.side-top{
  display:flex;align-items:center;gap:8px;padding:10px 16px;min-height:44px;
  margin:0 14px;border-bottom:0;
}
.side-top .only-mobile{color:#FFFBF3}
.side-top .only-mobile:hover{background:rgba(255,255,255,.22)}
.apple-mark{font-size:26px;line-height:1;display:block}
@media (min-width:901px){
  .side-top{padding-bottom:0}
  .side-top .only-mobile{display:none}
}

/* ░ criar: os dois soltos no canto de baixo, à direita ░ */
.fabs{
  position:absolute;right:16px;z-index:8;
  bottom:calc(76px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:11px;
}
/* link e pasta: MESMO tamanho, MESMO brilho colorido das pastilhas
   (borda branca + sombra na cor própria + halo — tudo igual, tudo junto) */
.round.fab-max{
  width:48px;height:48px;
  box-shadow:0 0 0 3px #FFFBF3 inset,4px 6px 16px 0 color-mix(in srgb, var(--pink) 65%, transparent),0 0 22px 2px color-mix(in srgb, var(--pink) 45%, transparent);
}
.round.fab-max svg{width:21px;height:21px}
.round.fab-min{
  width:48px;height:48px;
  box-shadow:0 0 0 3px #FFFBF3 inset,4px 6px 16px 0 color-mix(in srgb, var(--amber) 65%, transparent),0 0 22px 2px color-mix(in srgb, var(--amber) 45%, transparent);
}
.round.fab-min svg{width:21px;height:21px}

.round{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:#FFFBF3;transition:transform .16s ease,filter .16s ease;
  box-shadow:0 4px 12px rgba(60,45,35,.14);
}
/* bolinha do Google: SEM brilho, SEM borda colorida — só o ícone limpo */
.round.conta{background:#FFFBF3;box-shadow:0 4px 12px rgba(60,45,35,.14)}
.round.conta svg{width:17px;height:17px}
.round svg{width:17px;height:17px;stroke-width:2}
.round:hover{transform:translateY(-2px)}
.round:active{transform:translateY(0) scale(.95)}
.round.pink{background:var(--pink)}
.round.amber{background:var(--amber)}
.round.coral{background:var(--coral)}
.round.big{width:64px;height:64px}
.round.big svg{width:26px;height:26px}

.ico-btn{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  color:var(--ink-2);flex:none;transition:background .14s ease,color .14s ease;
}
.ico-btn:hover{background:var(--hi);color:var(--ink)}

/* beijinho: acende e apaga */
.kiss{width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
.kiss span{
  width:17px;height:17px;border-radius:50%;display:block;
  background:var(--pink);box-shadow:0 0 0 4px rgba(244,133,145,.22),0 4px 12px rgba(244,133,145,.5);
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.kiss:hover span{transform:scale(1.12)}
:root[data-theme="dark"] .kiss span{
  background:transparent;box-shadow:inset 0 0 0 2px var(--pink);
}

/* janelinha (squircle) — o pauzinho anda quando o menu abre e fecha */
.jan{
  width:28px;height:28px;z-index:12;
  position:absolute;top:calc(3px + env(safe-area-inset-top));left:6px;
  transition:opacity .22s ease,background .22s ease;
}
/* sem faixa: fica discreta em cima do conteúdo, e acende no hover */
.app.hide-bar .jan{
  opacity:.4;background:var(--bg);box-shadow:0 2px 10px rgba(60,45,35,.18);
}
.app.hide-bar .jan:hover{opacity:1}
.jan svg{width:15px;height:15px;overflow:visible;transition:transform .22s cubic-bezier(.34,1.5,.44,1)}
.jan:hover svg{transform:scale(1.08)}
.jan:active svg{transform:scale(.9)}
.jan-box{stroke-width:1.7}
@keyframes janPulo{0%{transform:scale(1)}42%{transform:scale(.82)}100%{transform:scale(1)}}
.jan svg.pop{animation:janPulo .4s cubic-bezier(.34,1.45,.44,1)}
.jan-bar{
  fill:currentColor;stroke:none;
  transform-box:fill-box;transform-origin:left center;
  transition:transform .36s cubic-bezier(.34,1.45,.44,1),opacity .3s ease;
}
/* menu fechado no computador: o pauzinho encosta na parede e afina */
.app.hide-side .jan-bar{transform:translateX(-2px) scaleX(.42);opacity:.5}
@media (max-width:900px){
  .jan-bar{transform:translateX(-2px) scaleX(.42);opacity:.5}
  .app.drawer .jan-bar{transform:none;opacity:1}
}

/* conta */
.conta svg{width:16px;height:16px}
.conta.dentro{width:30px;height:30px;padding:0}
.ava{width:26px;height:26px;border-radius:50%;display:block;object-fit:cover;box-shadow:0 0 0 2px var(--sage)}
.ava.dot-on{background:var(--sage)}

/* ▲ do vercel: só na capa de cima */
.tri{color:var(--lilac)}
.tri svg{width:14px;height:14px}
.tri:hover{color:var(--lilac)}

/* ░ árvore ░ */
/* o rodapé de baixo reserva o espaço dos dois botões soltos, pra nunca tampar o último item */
.tree-wrap{
  /* só EMBAIXO precisa desse espaço grande (é onde os botões + ficam
     flutuando por cima) — em cima não tem nada, então não reserva nada,
     senão vira um vazio sem explicação nenhuma */
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 8px 124px;scrollbar-width:thin;
  display:flex;flex-direction:column;
}
.tree-wrap::-webkit-scrollbar{width:8px}
.tree-wrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px}
.tree,.kids{list-style:none;margin:0;padding:0}
/* pastilhas centralizadas SÓ quando cabem todas na tela (margin:auto
   absorve o espaço sobrando e centraliza). Quando a lista é grande
   demais e não cabe, margin:auto vira 0 sozinho e some — a lista some
   pro alinhamento normal (topo), com scroll acessível até o primeiro
   item. justify-content:center no pai quebrava isso: com muitos links
   os primeiros ficavam inacessíveis, sem jeito de rolar até eles. */
.tree{margin-top:auto;margin-bottom:auto}
.node.closed>.kids{display:none}
/* os filhos entram um pouco e ganham a linhazinha do lado, igual cloudflare */
.kids{
  margin:2px 0 4px 17px;padding-left:13px;
  border-left:1px solid var(--line-2);
}

.row{
  display:flex;align-items:center;gap:10px;
  border-radius:999px;padding:1px 4px 1px 10px;min-height:40px;
  position:relative;cursor:pointer;user-select:none;
  transition:background .14s ease,transform .14s ease;
}
.row:hover{background:var(--hi)}
.node.on>.row{background:var(--sel);color:var(--sel-ink)}
.node.on>.row .ico,.node.on>.row .tw,.node.on>.row .count,.node.on>.row .more{color:var(--sel-ink)}
.node.on>.row .lbl{font-weight:400}

/* ░ pílula: cada link é uma pílula cheia, sempre colorida — visual
   emprestado do din.din.lell.ooo (Urbanist bold, sombra colorida
   própria da cor de cada uma), no mesmo tamanho generoso de lá ░ */
.node{margin-bottom:16px}
/* entrada animada, escalonada por pílula (animation-delay vem do JS) */
@keyframes pillIn{
  from{opacity:0;transform:translateY(18px) scale(.94)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.row.pill{
  min-height:70px;padding:1px 30px;color:#FFFBF3;
  /* toda pílula tem borda branca bem visível (3px, 55%) — e MUITO
     mais forte na ativa (regra .node.on>.row.pill logo abaixo) */
  box-shadow:0 0 0 3px rgba(255,251,243,.55) inset,4px 5px 14px 0 color-mix(in srgb, var(--pillc,#F48591) 45%, transparent);
  animation:pillIn .55s cubic-bezier(.2,.9,.3,1) both;
  transition:background .14s ease,transform .16s cubic-bezier(.3,1.4,.4,1),box-shadow .16s ease;
}
.row.pill:hover{background:inherit;filter:brightness(1.05);transform:translateY(-3px) scale(1.015)}
.row.pill:active{transform:translateY(-1px) scale(.985)}
/* mantém o espaço do ícone (invisível) pra compensar o pontinho do outro
   lado — assim o texto centraliza na PÍLULA de verdade, não só na sobra */
.row.pill .ico{visibility:hidden;width:26px}
.row.pill .lbl{
  color:#FFFBF3;text-align:center;
  font-family:var(--font-display);font-weight:800!important;
  font-size:17.5px;letter-spacing:.26em;text-transform:uppercase;
}
/* um pontinho só, bem pequeno, puxado mais pra dentro da pastilha */
.row.pill .more{color:#FFFBF3;width:18px;height:18px;margin-right:8px}
.row.pill .more svg{width:9px;height:9px}
.row.pill .more:hover{background:rgba(255,255,255,.22)}
/* ░ pasta: a MESMA pílula, só que mais FORTE que o link — maior, mais
   alta, degradê de duas cores (em vez de uma só), borda mais grossa.
   Pasta guarda várias coisas dentro, tem que pesar mais que um link ░ */
.row.pasta-pill{
  min-height:86px;padding:1px 30px;
  box-shadow:0 0 0 5px rgba(255,251,243,.7) inset,6px 8px 20px 0 rgba(60,45,35,.32);
}
.row.pasta-pill .ico{visibility:visible;width:30px;color:#FFFBF3}
.row.pasta-pill .ico svg{width:22px;height:22px;stroke-width:1.8}
.row.pasta-pill .lbl{font-size:20px;letter-spacing:.2em}
.row.pasta-pill .tw{color:#FFFBF3;width:26px}
.row.pasta-pill .tw svg{width:16px;height:16px}
.node.pasta.on>.row.pasta-pill{box-shadow:0 0 0 5px #fff inset,0 0 26px 4px rgba(255,255,255,.55),6px 8px 22px 0 rgba(60,45,35,.4)}

.node.on>.row.pill{
  /* borda branca BEM grossa e visível — 2px sumia no celular */
  box-shadow:
    0 0 0 4px #FFFBF3 inset,
    4px 6px 16px 0 color-mix(in srgb, var(--pillc,#F48591) 65%, transparent),
    0 0 22px 2px color-mix(in srgb, var(--pillc,#F48591) 45%, transparent);
}

/* chevron no fim da linha: aberto ˅ · fechado › */
.tw{display:grid;place-items:center;width:20px;height:24px;flex:none;color:var(--ink-3);order:9}
.tw svg{width:13px;height:13px;transition:transform .18s ease}
.node.closed>.row .tw svg{transform:rotate(-90deg)}
.tw.hidden{display:none}

/* ícone branco de traço fino, igual ao papo.video */
.ico{display:grid;place-items:center;width:24px;height:24px;flex:none;color:var(--amber)}
.ico svg{width:17px;height:17px;stroke-width:1.5}
.ico img{width:17px;height:17px;border-radius:50%;display:block;object-fit:cover}
.bolt{width:11px;height:11px;border-radius:50%;display:block}

/* todo nome do menu: MAIÚSCULA bem espaçada, Mikado — igual ao papo.video */
.lbl{
  flex:1;min-width:0;font-size:12.5px;padding:4px 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-transform:uppercase;letter-spacing:.24em;font-weight:400;
}
.lbl.auto{font-weight:400}
/* pasta = título de seção, igual ao "EXPLORAR": Mikado Black */
.node.pasta>.row>.lbl{font-weight:400;letter-spacing:.20em}
.lbl-in{
  /* 16px é OBRIGATÓRIO aqui: no iPhone, campo de texto com letra menor
     que 16px faz o Safari dar zoom sozinho quando foca — foi exatamente
     esse zoom enorme ao criar pasta (o rename foca esse campo na hora) */
  flex:1;min-width:0;font:inherit;font-size:16px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--pink);background:var(--bg);color:var(--ink);outline:none;
  text-transform:uppercase;letter-spacing:.24em;font-weight:400;
}
.lbl-in.auto{text-transform:uppercase;letter-spacing:.24em;font-weight:400;font-size:16px}
.more{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:var(--ink-3);opacity:0;flex:none}
.more svg{width:16px;height:16px}
.row:hover .more,.row.menu-open .more{opacity:1}
.more:hover{background:rgba(120,105,85,.16)}
.node.on>.row .more:hover{background:rgba(255,255,255,.26)}
@media (hover:none){.more{opacity:1}}
.count{font-size:11px;color:var(--ink-3);padding-right:5px;font-weight:400}

.row.dragging{opacity:.4}
.row.dz-in{box-shadow:inset 0 0 0 2px var(--pink);background:var(--hi)}
.row.dz-before::before,.row.dz-after::after{content:"";position:absolute;left:8px;right:8px;height:2px;background:var(--pink);border-radius:2px}
.row.dz-before::before{top:-1px}
.row.dz-after::after{bottom:-1px}
.drop-end{height:44px}
.drop-end.dz-in{border-top:2px solid var(--pink)}

.side-bot{
  display:flex;align-items:center;gap:4px;padding:9px 12px;
  border-top:0;
  padding-bottom:calc(9px + env(safe-area-inset-bottom));
}

/* ░ página central ░ */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:transparent;position:relative}
.bar{
  height:var(--bar-h);flex:none;display:flex;align-items:center;gap:8px;
  padding:0 8px 0 40px;border-bottom:1px solid var(--line);
  margin-top:env(safe-area-inset-top);
  overflow:hidden;background:var(--wash-1);
  transition:height .26s cubic-bezier(.2,.9,.3,1),opacity .2s ease,border-color .2s ease;
}
.bar-title{flex:1;min-width:0;font-size:12.5px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-acts{display:flex;align-items:center;gap:1px;flex:none}
.bar .ico-btn{width:26px;height:26px}
.bar .ico-btn svg{width:15px;height:15px}

/* faixa escondida (3º clique na janelinha) */
.app.hide-bar .bar{height:0;opacity:0;border-bottom-width:0;pointer-events:none}

/* mesmo degradê simétrico da lateral, agora aqui também — próprio da
   caixa do stage, não emprestado do body (senão a barrinha de cima
   corta o início do degradê e desalinha) */
.stage{position:relative;flex:1;min-height:0;background:linear-gradient(180deg, var(--wash-1) 0%, var(--bg) 50%, var(--wash-1) 100%)}
#frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#FFFBF3;opacity:0;transition:opacity .3s ease}
#frame.live{opacity:1}
.stage-msg{position:absolute;inset:0;display:grid;place-items:center;background:transparent}

/* ░ menu ⋯ ░ */
.menu{
  position:fixed;z-index:60;min-width:186px;padding:6px;
  background:var(--bg);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow);
  animation:pop .13s ease;
}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border-radius:999px;font-size:13px;color:var(--ink)}
.menu button:hover{background:var(--hi)}
.menu button svg{width:15px;height:15px;color:var(--ink-3);flex:none}
.menu .sep{height:1px;background:var(--line);margin:5px 6px}
.menu button.danger{color:var(--coral)}
.menu button.danger svg{color:var(--coral)}

/* ░ modal ░ */
.modal-wrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px}
.modal-bg{position:absolute;inset:0;background:rgba(44,38,32,.34);backdrop-filter:blur(3px);animation:fade .18s ease}
@keyframes fade{from{opacity:0}}
.modal{
  position:relative;width:100%;max-width:400px;background:var(--bg);
  border:1px solid var(--line-2);border-radius:22px;box-shadow:var(--shadow);
  padding:18px;display:flex;flex-direction:column;gap:10px;
  animation:up .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes up{from{opacity:0;transform:translateY(12px) scale(.98)}}
.field{display:flex;align-items:center;gap:9px;background:var(--side);border:1px solid var(--line-2);border-radius:999px;padding:0 15px;height:44px}
.field svg{width:16px;height:16px;color:var(--ink-3);flex:none}
.field input{flex:1;min-width:0;border:0;background:none;outline:none;height:100%;font-size:16px}
.field:focus-within{border-color:var(--pink)}
.modal-acts{display:flex;justify-content:flex-end;margin-top:2px}

/* ░ toast ░ */
.toast{
  position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;
  animation:up .2s ease;
}
.toast button{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--pink);color:#FFFBF3;box-shadow:var(--shadow);
  transition:transform .16s ease;
}
.toast button:hover{transform:scale(1.06)}
.toast svg{width:21px;height:21px;stroke-width:2}

/* ░ mobile ░ */
.only-mobile{display:none}
.scrim{position:fixed;inset:0;z-index:39;background:rgba(44,38,32,.36);animation:fade .18s ease}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .only-mobile{display:grid}
  .side{
    /* tela INTEIRA quando abre no celular — a Le não quer sobrar
       pedaço de outra cor do lado, quer o degradê tomando conta de tudo */
    position:fixed;z-index:40;top:0;bottom:0;left:0;width:100vw;
    transform:translateX(-102%);transition:transform .26s cubic-bezier(.2,.9,.3,1);
    box-shadow:var(--shadow);border-right:0;
  }
  .app.drawer .side{transform:translateX(0)}
  .row{min-height:40px}
  .lbl{font-size:14.5px}
}
@media (min-width:1400px){:root{--side-w:300px}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}