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

: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:#ffffff;
  --shadow:0 14px 36px rgba(60,45,35,.16);
  --side-w:274px;
  --bar-h:34px;
}
: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);
}

html,body{height:100%;min-height:100dvh}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px;line-height:1.45;font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;overscroll-behavior:none;
}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;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{
  display:flex;flex-direction:column;min-height:0;width:var(--side-w);
  background:var(--side);border-right:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
  transition:transform .26s cubic-bezier(.2,.9,.3,1);
}
.side-top{display:flex;align-items:center;gap:8px;padding:14px 14px 10px}

.round{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:#fff;transition:transform .16s ease,filter .16s ease;
  box-shadow:0 4px 12px rgba(60,45,35,.14);
}
.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 ░ */
.tree-wrap{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 8px 20px;scrollbar-width:thin}
.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}
.node.closed>.kids{display:none}

.row{
  display:flex;align-items:center;gap:2px;
  border-radius:999px;padding:1px 4px 1px 2px;min-height:34px;
  position:relative;cursor:pointer;user-select:none;
  transition:background .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:600}

.tw{display:grid;place-items:center;width:20px;height:24px;flex:none;color:var(--ink-3)}
.tw svg{width:12px;height:12px;transition:transform .18s ease}
.node.closed>.row .tw svg{transform:rotate(-90deg)}
.tw.hidden{visibility:hidden}

.ico{display:grid;place-items:center;width:22px;height:22px;flex:none;color:var(--amber)}
.ico svg{width:15px;height:15px}
.ico img{width:15px;height:15px;border-radius:4px;display:block}
.bolt{width:11px;height:11px;border-radius:4px;display:block}

.lbl{flex:1;min-width:0;font-size:13.5px;padding:4px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* nome tirado do próprio link: MAIÚSCULA, bem espaçada */
.lbl.auto{text-transform:uppercase;letter-spacing:.24em;font-weight:600;font-size:12.5px}
.lbl-in{
  flex:1;min-width:0;font:inherit;font-size:13.5px;padding:3px 8px;border-radius:999px;
  border:1px solid var(--pink);background:var(--bg);color:var(--ink);outline:none;
}
.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)}
@media (hover:none){.more{opacity:1}}
.count{font-size:11px;color:var(--ink-3);padding-right:5px;font-weight:600}

.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:1px solid var(--line);
  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:var(--bg);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;
  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:600;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}

.stage{position:relative;flex:1;min-height:0;background:var(--bg)}
#frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;opacity:0;transition:opacity .3s ease}
#frame.live{opacity:1}
.stage-msg{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg)}

/* ░ 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:14px}
.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:#fff;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{
    position:fixed;z-index:40;top:0;bottom:0;left:0;width:min(86vw,310px);
    transform:translateX(-102%);transition:transform .26s cubic-bezier(.2,.9,.3,1);
    box-shadow:var(--shadow);
  }
  .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}
}