/* CORES: tudo sai daqui. Claro em cima, escuro embaixo (duas vezes, de propósito). */
:root{--fundo:#f4f2ee;--cartao:#fff;--tinta:#1c1f26;--tinta2:#5d6472;--linha:#e4e0d8;--marca:#1f5fd6;--marca-suave:#e6eefc;--sobre-marca:#fff;
  --ouro:#9a7209;--ouro-fundo:#fbf1d3;--perigo:#b3261e;--perigo-fundo:#fde8e6;--ok:#1c7a45;--ok-fundo:#e2f4e9;--sombra:0 6px 24px rgba(28,31,38,.10);
  --lado-e:max(16px,env(safe-area-inset-left,0px));--lado-d:max(16px,env(safe-area-inset-right,0px));
  --titulo:'Bricolage Grotesque','Figtree',system-ui,sans-serif;--texto:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fundo:#111318;--cartao:#1a1d24;--tinta:#eef0f4;--tinta2:#a2a9b6;--linha:#2b303a;--marca:#7fa8ff;--marca-suave:#1c2944;--sobre-marca:#0d1730;
  --ouro:#f0c75e;--ouro-fundo:#3a3014;--perigo:#ff8a80;--perigo-fundo:#40201d;--ok:#6fd49a;--ok-fundo:#173524;--sombra:0 6px 24px rgba(0,0,0,.45);color-scheme:dark}}
:root[data-theme="dark"]{--fundo:#111318;--cartao:#1a1d24;--tinta:#eef0f4;--tinta2:#a2a9b6;--linha:#2b303a;--marca:#7fa8ff;--marca-suave:#1c2944;--sobre-marca:#0d1730;
  --ouro:#f0c75e;--ouro-fundo:#3a3014;--perigo:#ff8a80;--perigo-fundo:#40201d;--ok:#6fd49a;--ok-fundo:#173524;--sombra:0 6px 24px rgba(0,0,0,.45);color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--fundo);color:var(--tinta);font:16px/1.45 var(--texto);-webkit-tap-highlight-color:transparent;overflow-x:hidden}
button,input,textarea,select{font:inherit;color:inherit}
input,textarea,select{font-size:16px;width:100%;background:var(--cartao);border:1.5px solid var(--linha);border-radius:14px;padding:12px 14px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--marca)}
textarea{resize:none;min-height:88px}
button{cursor:pointer;border:0;background:none;padding:0}
h1,h2,h3{font-family:var(--titulo);margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:22px}h3{font-size:17px}
p{margin:0}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.cheio{fill:currentColor}
.fraco{color:var(--tinta2)}.pq{font-size:13.5px}.neg{font-weight:700}

/* casca e topo */
.casca{max-width:480px;margin:0 auto;min-height:100%;padding-left:var(--lado-e);padding-right:var(--lado-d);padding-block:0 108px;display:flex;flex-direction:column;gap:14px}
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:10px;min-height:56px;margin:0 -4px;padding:6px 4px;background:var(--fundo)}
.logo{font:800 24px/1 var(--titulo);letter-spacing:-.03em;display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.logo i{width:30px;height:30px;border-radius:10px;background:var(--marca);color:var(--sobre-marca);display:grid;place-items:center;font-style:normal;font-size:17px}
.tit{font:700 19px/1.2 var(--titulo);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;position:relative;flex:none}
.ib:active{background:var(--marca-suave)}
.bola{position:absolute;top:5px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--perigo);color:#fff;font:700 11px/18px var(--texto);text-align:center}
:root[data-theme="dark"] .bola{color:#2a0b08}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bola{color:#2a0b08}}

/* barra de baixo, flutuando */
.barra{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(448px,calc(100% - 32px));
  display:flex;justify-content:space-around;align-items:center;padding:6px;border-radius:26px;background:var(--cartao);border:1px solid var(--linha);box-shadow:var(--sombra)}
.bi{flex:1;height:52px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:11px;font-weight:600;color:var(--tinta2)}
.bi.on{color:var(--marca-t)}
.bi-mais{flex:none;width:52px;background:var(--marca);color:var(--sobre-marca);border-radius:18px}
.bi-mais .ic{width:28px;height:28px;stroke-width:2.4}

/* botões: o padrão é clarinho */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:14px;background:var(--marca-suave);color:var(--marca-t);font-weight:700;white-space:nowrap}
.bt:active{transform:scale(.98)}
.bt.forte{background:var(--marca);color:var(--sobre-marca)}
.bt.ouro{background:var(--ouro-fundo);color:var(--ouro);box-shadow:inset 0 0 0 1.5px var(--ouro)}
.bt.liso{background:none;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--linha)}
.bt.perigo{background:var(--perigo-fundo);color:var(--perigo)}
.bt.p{min-height:36px;padding:0 14px;border-radius:12px;font-size:14px}
.bt.largo{width:100%}
.bt[disabled]{opacity:.5}
.fila{display:flex;gap:10px;align-items:center}.fila>.cresce{flex:1;min-width:0}
.col{display:flex;flex-direction:column;gap:12px}

/* avatar */
.av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font:700 17px/1 var(--titulo);overflow:hidden;object-fit:cover}
.av.emp{border-radius:30%}
.av.p{width:34px;height:34px;font-size:13px}.av.g{width:86px;height:86px;font-size:32px}
.c0{background:#2f6fed}.c1{background:#c2552d}.c2{background:#2a8f6a}.c3{background:#7a5bd0}.c4{background:#b8860b}.c5{background:#c23a6b}
.selo{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--marca);color:var(--sobre-marca);vertical-align:-2px;margin-left:4px}
.selo .ic{width:11px;height:11px;stroke-width:3.2}

/* chips e abas */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:38px;padding:0 14px;border-radius:19px;background:var(--cartao);border:1.5px solid var(--linha);font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--marca-suave);border-color:var(--marca);color:var(--marca-t)}
.abas{display:flex;gap:4px;padding:4px;border-radius:16px;background:var(--cartao);border:1px solid var(--linha)}
.aba{flex:1;min-height:40px;border-radius:12px;font-weight:700;font-size:14.5px;color:var(--tinta2);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px}
.aba.on{background:var(--marca-suave);color:var(--marca-t)}

/* status: quadrado arredondado com anel */
.faixa{display:flex;gap:12px;overflow-x:auto;margin:0 calc(var(--lado-d) * -1) 0 calc(var(--lado-e) * -1);padding:4px var(--lado-d) 4px var(--lado-e);scrollbar-width:none}
.faixa::-webkit-scrollbar{display:none}
.st{flex:none;width:72px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600}
.st-q{width:68px;height:68px;border-radius:24px;padding:3px;border:2.5px solid var(--marca);display:grid}
.st.visto .st-q{border-color:var(--linha)}
.st-q .av{width:100%;height:100%;border-radius:18px;font-size:24px}
.st-n{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st.novo .st-q{border-style:dashed;place-items:center;color:var(--marca-t)}

/* post */
.post{background:var(--cartao);border:1px solid var(--linha);border-radius:22px;overflow:hidden}
.post-c{display:flex;align-items:center;gap:10px;padding:12px 12px 10px}
.post-n{flex:1;min-width:0;text-align:left}
.post-n b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-n span{display:block;font-size:13px;color:var(--tinta2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-m{position:relative;aspect-ratio:4/5;max-width:100%;background:var(--linha);display:block;width:100%;overflow:hidden}
.arte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.marca-v{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:12px;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center}
.marca-v .ic{width:18px;height:18px}
.post-a{display:flex;align-items:center;gap:2px;padding:6px 6px 0}
.post-a .ib.on{color:var(--perigo)}.post-a .ib.sv.on{color:var(--marca-t)}
.post-a .n{font-weight:700;font-size:14px;margin-right:8px}
.post-t{padding:4px 14px 14px;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.tag{display:inline-flex;align-items:center;gap:5px;font:700 12px/1 var(--texto);letter-spacing:.04em;text-transform:uppercase;padding:6px 9px;border-radius:9px;background:var(--marca-suave);color:var(--marca-t)}
.tag.ok{background:var(--ok-fundo);color:var(--ok)}.tag.cinza{background:var(--fundo);color:var(--tinta2)}.tag.al{background:var(--perigo-fundo);color:var(--perigo)}
.tag .ic{width:14px;height:14px}
.vaga{margin:0 12px;padding:16px;border-radius:16px;background:var(--fundo);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.vaga h3{font-size:21px}
.vaga .v{font:800 20px/1 var(--titulo)}

/* grade do perfil */
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-radius:18px;overflow:hidden}
.gi{position:relative;aspect-ratio:1;background:var(--cartao);overflow:hidden;display:block;width:100%}
.gi.txt{padding:8px;font-size:12px;font-weight:700;text-align:left;display:flex;flex-direction:column;justify-content:space-between;color:var(--marca-t);background:var(--marca-suave)}
.gi .marca-v{top:6px;right:6px;width:24px;height:24px;border-radius:8px}

/* perfil */
.pf-c{display:flex;align-items:center;gap:16px}
.pf-n{flex:1;display:flex;justify-content:space-around;text-align:center}
.pf-n b{display:block;font:800 19px/1.1 var(--titulo)}.pf-n span{font-size:12.5px;color:var(--tinta2)}
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:18px;padding:14px}

/* linhas de lista */
.lin{display:flex;align-items:center;gap:12px;padding:10px 0;width:100%;text-align:left;min-height:60px}
.lin+.lin{border-top:1px solid var(--linha)}
.lin-t{flex:1;min-width:0}
.lin-t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lin-t span{display:block;font-size:14px;color:var(--tinta2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lin.nova .lin-t span{color:var(--tinta);font-weight:600}
.ponto{width:10px;height:10px;border-radius:50%;background:var(--marca);flex:none}
.campo{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14.5px}
.vazio{text-align:center;color:var(--tinta2);padding:36px 12px;display:flex;flex-direction:column;gap:12px;align-items:center}
.estrelas{display:flex;gap:4px;color:var(--ouro)}
.estrelas .ic{width:16px;height:16px}
.estrelas.g button{width:48px;height:48px;display:grid;place-items:center;color:var(--linha)}
.estrelas.g button.on{color:var(--ouro)}.estrelas.g .ic{width:34px;height:34px}

/* folha de baixo e aviso */
#folha{position:fixed;inset:0;z-index:60;background:rgba(10,12,18,.5);display:flex;align-items:flex-end;justify-content:center}
.fo{width:100%;max-width:480px;max-height:88%;overflow-y:auto;background:var(--fundo);border-radius:26px 26px 0 0;
  padding:10px var(--lado-d) calc(20px + env(safe-area-inset-bottom,0px)) var(--lado-e);display:flex;flex-direction:column;gap:14px;animation:sobe .22s ease-out}
.fo-p{width:44px;height:5px;border-radius:3px;background:var(--linha);margin:0 auto 2px;flex:none}
@keyframes sobe{from{transform:translateY(40px);opacity:0}}
#toast{position:fixed;z-index:80;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));width:max-content;max-width:min(420px,calc(100% - 32px));
  background:var(--tinta);color:var(--fundo);padding:12px 16px;border-radius:14px;font-weight:600;font-size:14.5px;box-shadow:var(--sombra);text-align:center}
.alerta{background:var(--perigo-fundo);color:var(--perigo);border-radius:14px;padding:12px 14px;font-weight:600;font-size:14.5px;display:flex;gap:10px;align-items:flex-start}
.nota{background:var(--marca-suave);color:var(--marca-t);border-radius:14px;padding:12px 14px;font-size:14.5px;display:flex;gap:10px;align-items:flex-start}
.nota.al{background:var(--perigo-fundo);color:var(--perigo)}

/* animações dos vídeos de exemplo */
.an-rolo{animation:rolo 2.6s ease-in-out infinite alternate}
@keyframes rolo{from{transform:translateY(-110px)}to{transform:translateY(120px)}}
.an-cai{animation:cai 2.4s ease-in-out infinite}
@keyframes cai{0%{transform:translateY(-60px) rotate(-4deg);opacity:0}35%,100%{transform:none;opacity:1}}
.an-brilho{animation:brilho 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes brilho{50%{opacity:.25}}
.an-braco{animation:braco 1.3s ease-in-out infinite alternate}
@keyframes braco{from{transform:translateY(-9px)}to{transform:translateY(9px)}}
.an-vai{animation:vai 3.2s ease-in-out infinite alternate}
@keyframes vai{from{transform:translateX(-120px)}to{transform:translateX(90px)}}
@media (prefers-reduced-motion:reduce){.an-rolo,.an-cai,.an-brilho,.an-braco,.an-vai,.fo{animation:none}}

/* acréscimos: busca de gente, currículo e comentários */
.cresce{flex:1;min-width:0}
.gente{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gc{background:var(--cartao);border:1px solid var(--linha);border-radius:18px;overflow:hidden;text-align:left;display:flex;flex-direction:column;min-width:0}
.gc-m{position:relative;aspect-ratio:1;display:block;background:var(--marca-suave);max-width:100%}
.gc-t{padding:10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.gc-t b,.gc-t>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-t>span{font-size:13px;color:var(--tinta2)}
.gc-t>.fila{gap:8px;font-size:inherit;color:inherit}
.gc .tag{position:absolute;left:8px;bottom:8px}
.mini-arte{position:relative;width:56px;height:56px;border-radius:14px;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--marca-suave);color:var(--marca-t)}
.com{display:flex;gap:10px;align-items:flex-start;padding:8px 0}
.com p{overflow-wrap:anywhere}
.foto-p{position:relative;align-self:center;display:grid;justify-items:center;gap:6px;color:var(--marca-t);font-weight:700;font-size:14.5px;cursor:pointer}