:root{
  --bg:#0a0a0d;
  --card:#121218;
  --card2:#0d0d12;
  --border:rgba(255,255,255,.14);
  --yellow:#f4c94b;
  --yellow-deep:#e8b428;
  --white:#f2f2f5;
  --gray:#9a9aa5;
  --orange:#f0a33c;
  --violet:#7c3aed;
  --violet-deep:#3d1a78;
  --violet-glow:#a78bfa;
  --danger:#f27272;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--white);font-family:'Segoe UI',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}

.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:44px;height:44px;flex:none;display:block}
.brand .word{display:flex;flex-direction:column;line-height:1.02;font-weight:800;color:#3f7cf0;font-size:15px;letter-spacing:.2px}

.avatar{width:180px;height:180px;position:relative;flex:none}
.avatar svg{width:100%;height:100%;display:block}
.avatar .mouth-neutral{opacity:0}
.avatar.ouvindo .mouth-smile{opacity:0}
.avatar.ouvindo .mouth-neutral{opacity:1}

.pill-btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:13px 24px;font-weight:800;font-size:15px;border:2px solid #33333f;color:#e4e4ec;background:#0c0c11}
.pill-btn.primary{background:linear-gradient(180deg,var(--yellow),var(--yellow-deep));color:#241a06;border-color:var(--yellow)}
.pill-btn.ghost{background:transparent;border-color:#33333f;color:#cfd2dc}
.pill-btn.danger{color:var(--danger);border-color:#4a2626}
.pill-btn:disabled{opacity:.5;cursor:not-allowed}

.demo-topbar{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(244,201,75,.14);border-bottom:1px solid rgba(244,201,75,.35);color:var(--yellow);font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;text-align:center;padding:7px 4px;height:28px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body{padding-top:28px}
@media (max-width:420px){ .demo-topbar{font-size:9.5px;letter-spacing:.6px} }

/* modal de configuração */
.cfg-gear{position:fixed;bottom:16px;right:16px;z-index:210;width:42px;height:42px;border-radius:50%;background:#15151c;border:1px solid var(--border);color:#cfd2dc;display:flex;align-items:center;justify-content:center}
.cfg-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:220;padding:20px}
.cfg-modal.show{display:flex}
.cfg-box{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px;width:100%;max-width:380px}
.cfg-box h3{margin:0 0 16px;font-size:18px}
.cfg-box label{display:block;font-size:12px;color:var(--gray);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px}
.cfg-box input{width:100%;background:var(--card2);border:1.5px solid #33333f;border-radius:10px;padding:11px 13px;color:#fff;font-size:15px}
.cfg-box .row{display:flex;gap:14px;margin-top:22px}