/* shell.css — a "moldura única" da Cammaleão: barra de topo consistente em todas as telas.
   Namespaced em .cmlnav pra não colidir com o CSS próprio de cada página. */
.cmlnav{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:.4rem;height:58px;
  padding:0 clamp(1rem,4vw,2rem);background:rgba(8,8,14,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid #1c1c28;font-family:'Space Grotesk',system-ui,sans-serif}
.cmlnav *{box-sizing:border-box}
.cmlnav a{color:inherit;text-decoration:none}
.cmlnav__brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.15rem;color:#f4f4f8;flex-shrink:0;margin-right:.4rem}
.cmlnav__brand img{height:28px;width:auto;display:block}
.cmlnav__cham{height:38px;width:38px;--poster-color:transparent;background:transparent;margin:-5px 0;pointer-events:none;--progress-bar-color:transparent}
.cmlnav__links{display:flex;align-items:center;gap:.15rem}
.cmlnav__links a{color:#a2a2b4;font-size:.9rem;font-weight:500;padding:.45rem .7rem;border-radius:8px;transition:color .16s,background .16s}
.cmlnav__links a:hover{color:#fff;background:rgba(255,255,255,.05)}
.cmlnav__links a.on{color:#fff}
.cmlnav__links a.on::after{content:"";display:block;height:2px;margin-top:3px;border-radius:2px;
  background:linear-gradient(90deg,#3ee089,#22d3ee,#7b5cff,#ec4899)}
.cmlnav__sp{flex:1}
.cmlnav__slot{display:flex;align-items:center;gap:.5rem}
.cmlnav__acc{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.cmlnav__who{color:#c9c9d6;font-size:.88rem;white-space:nowrap}
.cmlnav__who b{color:#fff;font-weight:600}
.cmlnav__btn{border:1px solid #262633;background:#161622;color:#fff;border-radius:9px;padding:.5rem .85rem;
  font:inherit;font-size:.84rem;cursor:pointer;white-space:nowrap}
.cmlnav__btn:hover{border-color:#3a3a4a}
.cmlnav__btn--pri{background:linear-gradient(90deg,#3ee089,#22d3ee 30%,#7b5cff 62%,#ec4899);border:none;color:#08080e;font-weight:700}
/* hambúrguer (mobile) */
.cmlnav__burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:40px;height:38px;background:transparent;border:1px solid #262633;border-radius:9px;cursor:pointer;flex-shrink:0}
.cmlnav__burger span{display:block;height:2px;width:20px;background:#f4f4f8;border-radius:2px;transition:transform .22s ease,opacity .22s ease}
.cmlnav__burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.cmlnav__burger.open span:nth-child(2){opacity:0}
.cmlnav__burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* painel dropdown do mobile */
.cmlnav__mobile{display:none;position:fixed;top:58px;left:0;right:0;z-index:999;background:rgba(10,10,16,.98);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid #1c1c28;padding:.5rem 1rem 1.1rem;
  transform:translateY(-14px);opacity:0;pointer-events:none;transition:transform .22s ease,opacity .22s ease;
  font-family:'Space Grotesk',system-ui,sans-serif;max-height:calc(100vh - 58px);overflow-y:auto}
.cmlnav__mobile.open{transform:translateY(0);opacity:1;pointer-events:auto}
.cmlnav__mlinks{display:flex;flex-direction:column}
.cmlnav__mlinks a{color:#c9c9d6;font-size:1.02rem;font-weight:500;padding:.9rem .4rem;border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none}
.cmlnav__mlinks a.on{color:#fff}
.cmlnav__mlinks a.on::before{content:"● ";color:#7b5cff;font-size:.7em;vertical-align:middle}
.cmlnav__macc{display:flex;flex-direction:column;gap:.55rem;padding:.9rem .4rem 0}
.cmlnav__macc a,.cmlnav__mbtn{display:block;text-align:center;padding:.8rem;border-radius:10px;border:1px solid #262633;
  background:#161622;color:#fff;font:inherit;font-size:.94rem;font-weight:600;cursor:pointer;text-decoration:none}
.cmlnav__macc a.pri{background:linear-gradient(90deg,#3ee089,#22d3ee 30%,#7b5cff 62%,#ec4899);border:none;color:#08080e}
.cmlnav__mwho{color:#c9c9d6;font-size:.98rem;padding:.3rem .4rem;text-align:center}
.cmlnav__mwho b{color:#fff}
@media(max-width:760px){
  .cmlnav__links{display:none}
  .cmlnav__acc{display:none}
  .cmlnav__burger{display:flex}
  .cmlnav__mobile{display:block}
  .cmlnav{gap:.4rem;padding:0 1rem}
}

/* pill de créditos (sempre visível quando logado) */
.cmlnav__cred{display:inline-flex;align-items:center;gap:.2rem;background:rgba(52,226,155,.12);border:1px solid rgba(52,226,155,.35);color:#3ee089;font-size:.82rem;font-weight:700;border-radius:20px;padding:.32rem .7rem;white-space:nowrap;transition:background .15s}
.cmlnav__cred:hover{background:rgba(52,226,155,.22)}
