/* ZP CALL — identidade Zpixels Filmes
   Preto #0D0D0F · Amarelo #F8D905 · corte diagonal de 60° da marca */

@font-face { font-family: 'ZP'; src: url('../assets/fonts/Poppins-Regular.ttf'); font-weight: 400; }
@font-face { font-family: 'ZP'; src: url('../assets/fonts/Poppins-Medium.ttf'); font-weight: 500; }
@font-face { font-family: 'ZP'; src: url('../assets/fonts/Poppins-Bold.ttf'); font-weight: 700; }
@font-face { font-family: 'ZPImpact'; src: url('../assets/fonts/InterDisplay-Black.otf'); }
@font-face { font-family: 'ZPSerif'; src: url('../assets/fonts/Lora-Variable.ttf'); font-weight: 400 700; }
@font-face { font-family: 'ZPClassic'; src: url('../assets/fonts/GFSBaskerville.otf'); }
@font-face { font-family: 'ZPMono'; src: url('../assets/fonts/DejaVuSansMono.ttf'); }
@font-face { font-family: 'ZPCond'; src: url('../assets/fonts/DejaVuSansCondensed-Bold.ttf'); }
@font-face { font-family: 'ZPSpace'; src: url('../assets/fonts/SpaceGrotesk.woff2'); font-weight: 300 700; }
@font-face { font-family: 'ZPThin'; src: url('../assets/fonts/Inter-ExtraLight.woff2'); font-weight: 200; }
@font-face { font-family: 'ZPItalic'; src: url('../assets/fonts/Poppins-LightItalic.ttf'); font-style: italic; }
@font-face { font-family: 'ZPSerifItalic'; src: url('../assets/fonts/Lora-Italic-Variable.ttf'); font-style: italic; font-weight: 400 700; }
@font-face { font-family: 'ZPDrama'; src: url('../assets/fonts/FreeSerifBoldItalic.ttf'); font-style: italic; font-weight: 700; }
@font-face { font-family: 'ZPComic'; src: url('../assets/fonts/ComicNeue-Bold.woff2'); font-weight: 700; }
@font-face { font-family: 'ZPComic'; src: url('../assets/fonts/ComicNeue-Regular.woff2'); font-weight: 400; }
@font-face { font-family: 'ZPCasual'; src: url('../assets/fonts/Recursive.woff2'); font-weight: 300 1000; }
@font-face { font-family: 'ZPJet'; src: url('../assets/fonts/JetBrainsMono-ExtraBold.woff2'); font-weight: 800; }
@font-face { font-family: 'ZPFira'; src: url('../assets/fonts/FiraCode.woff2'); font-weight: 300 700; }

:root {
  --bg: #0d0d0f;
  --bg-2: #141417;
  --surface: #1a1a1e;
  --surface-2: #232328;
  --line: #2a2a30;
  --text: #f4f4f2;
  --muted: #8d8d96;
  --yellow: #f8d905;
  --yellow-ink: #0d0d0f;
  --danger: #ff4d3d;
  --ok: #3ddc84;
  --slant: 0.5765; /* inclinação da marca (dx/dy) */
  --cut: 14px;
  --radius: 10px;
  --shade: rgba(5, 5, 6, 0.72);
  --dash: #3a3a42;
}
:root[data-theme="preto"] {
  --bg: #000000; --bg-2: #0a0a0b; --surface: #121214; --surface-2: #1b1b1f; --line: #222227; --dash: #2c2c33;
}
:root[data-theme="claro"] {
  --bg: #f4f3ef; --bg-2: #ffffff; --surface: #efeee9; --surface-2: #e4e3dd; --line: #dddcd5;
  --text: #141416; --muted: #6c6c74; --shade: rgba(20, 20, 22, 0.35); --dash: #c9c8c1;
}
:root[data-theme="claro"] .viewer, :root[data-theme="claro"] .viewer video { background: #111; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.45 'ZP', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}
input, select, button, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* barra arrastável (janela sem moldura) */
.dragbar { position: fixed; inset: 0 0 auto 0; height: 44px; -webkit-app-region: drag; z-index: 1; }
button, input, select, a, label, .tabs, .people li { -webkit-app-region: no-drag; }

.screen { position: absolute; inset: 0; }

/* ================= LOBBY ================= */
#lobby {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  padding: 64px clamp(32px, 6vw, 96px) 48px;
  gap: clamp(32px, 6vw, 96px);
  background:
    linear-gradient(120deg, transparent 0 62%, rgba(248, 217, 5, 0.06) 62% 63.4%, transparent 63.4% 66%, rgba(248, 217, 5, 0.035) 66% 66.8%, transparent 66.8%),
    var(--bg);
}
.brand-mark {
  width: 84px; height: 84px;
  background: url('../assets/zp-mark.svg') center / contain no-repeat;
  margin-bottom: 28px;
}
.lobby-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(56px, 7.5vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.lobby-title span { color: var(--yellow); margin-left: 0.18em; }
.lobby-sub { margin: 18px 0 0; color: var(--muted); font-size: 16px; max-width: 30ch; }
.lobby-foot {
  position: absolute; left: clamp(32px, 6vw, 96px); bottom: 24px;
  color: #55555d; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}

.lobby-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 28px;
  border-radius: var(--radius);
  max-width: 440px;
  width: 100%;
  justify-self: start;
}

.seg { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px; gap: 4px; margin-bottom: 22px; }
.seg-btn { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 9px 12px; border-radius: 5px; font-weight: 500; }
.seg-btn.active { background: var(--surface-2); color: var(--text); }
.seg.small { margin: 0; }
.seg.small .seg-btn { padding: 6px 14px; flex: none; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; }
.row2 { display: flex; gap: 12px; }
.row2 label { flex: 1; }
.row2 label.narrow { flex: 0 0 104px; }
input, select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 11px 12px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  user-select: text;
  min-width: 0;
}
input:focus, select:focus { border-color: var(--yellow); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.hint { margin: 0; color: var(--muted); font-size: 12px; }
.error { margin: 14px 0 0; color: var(--danger); font-size: 13px; min-height: 1em; }
.muted { color: var(--muted); }

.btn {
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 12px 18px;
  border-radius: 7px;
  font-weight: 500;
}
.btn.primary {
  background: var(--yellow);
  color: var(--yellow-ink);
  border: 0;
  font-weight: 700;
  /* corte diagonal da marca no canto */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut) * var(--slant)) 100%, 0 100%);
  margin-top: 4px;
}
.btn.primary:hover { filter: brightness(1.06); }
.btn:disabled { opacity: 0.4; cursor: default; }

/* ================= CHAMADA ================= */
#call { display: grid; grid-template-columns: 272px 1fr auto; }

.side {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding-top: 44px;
  min-height: 0;
}
.side-head { padding: 8px 20px 16px; }
.room-name { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-meta { color: var(--muted); font-size: 12px; }

.invite { margin: 0 12px 12px; padding: 12px; background: var(--bg); border: 1px dashed #3a3a42; border-radius: 8px; }
.invite-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.invite-list { display: flex; flex-direction: column; gap: 4px; }
.invite-row { display: flex; align-items: center; gap: 8px; }
.invite-row code { flex: 1; font: 500 13px ui-monospace, Menlo, Consolas, monospace; color: var(--text); user-select: text; }
.invite-row .tag { white-space: nowrap; font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--yellow); color: var(--yellow-ink); font-weight: 700; }
.invite-row .tag.lan { background: var(--surface-2); color: var(--muted); }

.people-label { padding: 6px 20px 8px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.people-label span { color: var(--text); margin-left: 4px; }
.people { list-style: none; margin: 0; padding: 0 8px; overflow-y: auto; flex: 1; }
.people li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; position: relative; }
.people li:hover { background: var(--surface); }
.p-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.p-sub { font-size: 11px; color: var(--muted); }
.p-icons { display: flex; gap: 4px; color: var(--muted); }
.p-icons svg { width: 16px; height: 16px; }
.p-icons .live { font-size: 10px; font-weight: 700; background: var(--yellow); color: var(--yellow-ink); padding: 1px 6px; border-radius: 3px; align-self: center; }
.p-vol { grid-column: 1 / -1; display: none; align-items: center; gap: 8px; padding: 4px 0 2px 42px; color: var(--muted); }
.p-vol svg { width: 14px; height: 14px; }
.people li.open .p-vol { display: flex; }
.p-vol input { flex: 1; padding: 0; }

.avatar {
  --size: 32px;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2);
  font-weight: 700; font-size: calc(var(--size) * 0.38);
  color: var(--text);
  position: relative;
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 0.08s;
}
.avatar.sm { --size: 34px; }
.speaking > .avatar, .avatar.speaking { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--yellow); }
.state-dot { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bg-2); background: #55555d; }
.state-dot.ok { background: var(--ok); }
.state-dot.bad { background: var(--danger); }

.me-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 16px; border-top: 1px solid var(--line); background: var(--bg); }
.me-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.me-text { min-width: 0; }
.me-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-status { font-size: 11px; color: var(--muted); }

.icon-btn { position: relative; border: 0; background: transparent; color: var(--muted); width: 36px; height: 36px; border-radius: 7px; display: grid; place-items: center; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }

/* palco */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding-top: 44px; position: relative; }
.stage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 10px; min-height: 46px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; }
.tab { border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); padding: 6px 12px; border-radius: 6px; white-space: nowrap; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.tab.active { color: var(--yellow-ink); background: var(--yellow); border-color: var(--yellow); font-weight: 700; }
.stage-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.vol { display: flex; align-items: center; gap: 8px; color: var(--muted); padding: 0 8px; }
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; border: 0; width: 110px; height: 20px; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--surface-2); border-radius: 2px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--yellow); margin-top: -5px; }

.viewer { flex: 1; margin: 0 16px; background: #000; border-radius: var(--radius); position: relative; overflow: hidden; display: none; min-height: 0; }
.viewer.on { display: block; }
.viewer video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.viewer-label { position: absolute; left: 12px; bottom: 12px; background: rgba(13, 13, 15, 0.8); padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 500; }
.viewer:fullscreen { margin: 0; border-radius: 0; }

.grid {
  flex: 1;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 16px; padding: 16px 32px; min-height: 0; overflow: auto;
}
.grid.compact { flex: 0 0 auto; padding: 12px 16px 0; gap: 10px; justify-content: flex-start; align-content: flex-start; }
.tile {
  width: 220px; height: 168px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  position: relative; overflow: hidden;
}
.tile .avatar { --size: 72px; }
.tile-name { font-weight: 500; display: flex; align-items: center; gap: 6px; max-width: 90%; }
.tile-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-name svg { width: 16px; height: 16px; color: var(--danger); }
/* faixa diagonal amarela quando fala — o corte da marca */
.tile::after {
  content: ''; position: absolute; top: -20px; right: 18px; width: 10px; height: 70px;
  background: var(--yellow); transform: skewX(-30deg); opacity: 0; transition: opacity 0.08s;
}
.tile.speaking { border-color: var(--yellow); }
.tile.speaking::after { opacity: 1; }
.grid.compact .tile { width: 150px; height: 64px; flex-direction: row; gap: 10px; padding: 0 12px; justify-content: flex-start; }
.grid.compact .tile .avatar { --size: 36px; }
.grid.compact .tile::after { height: 40px; width: 6px; right: 10px; }

.controls { display: flex; justify-content: center; gap: 10px; padding: 16px; }
.ctl {
  height: 48px; min-width: 56px; padding: 0 16px;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--text); font-weight: 500;
}
.ctl:hover { background: var(--surface-2); }
.ctl svg { width: 22px; height: 22px; }
.ctl.off { background: var(--danger); border-color: var(--danger); color: #fff; }
.ctl.wide.on { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); font-weight: 700; }
.ctl.danger { background: var(--danger); border-color: var(--danger); color: #fff; min-width: 64px; }
.ctl.danger svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }

/* painel lateral: chat + efeitos */
.panel { width: 320px; border-left: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; padding-top: 44px; min-height: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 10px 12px; }
.pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 4px 14px 8px; display: flex; flex-direction: column; gap: 2px; user-select: text; }
.msg { padding: 2px 0; }
.msg-head { display: flex; align-items: center; gap: 8px; margin-top: 10px; margin-bottom: 2px; }
.msg-name { font-weight: 700; font-size: 13px; }
.msg-head time { color: var(--muted); font-size: 11px; }
.msg-text { white-space: pre-wrap; word-break: break-word; padding-left: 30px; }
.msg-text a { color: var(--yellow); }
.msg .file-card { margin-left: 30px; }
.msg-sys { color: var(--muted); font-size: 12px; padding: 6px 0 2px; }
.typing { min-height: 18px; font-size: 12px; color: var(--muted); padding: 0 14px 2px; font-style: italic; }
.chat-form { display: flex; gap: 2px; padding: 10px; border-top: 1px solid var(--line); align-items: center; }
.chat-form input { flex: 1; margin: 0 4px; }

.file-card { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-top: 4px; max-width: 260px; }
.fc-img { display: block; width: 100%; max-height: 220px; object-fit: cover; cursor: zoom-in; background: #000; }
.fc-video { display: block; width: 100%; max-height: 240px; background: #000; }
.fc-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.fc-icon { color: var(--yellow); width: 18px; height: 18px; }
.fc-meta { flex: 1; min-width: 0; }
.fc-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-size { font-size: 11px; color: var(--muted); }
.fc-note { font-size: 12px; color: var(--muted); font-weight: 500; }
.fc-bar { height: 3px; background: var(--surface-2); }
.fc-bar i { display: block; height: 100%; background: var(--yellow); transition: width 0.12s linear; }
.btn.small { padding: 6px 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); }
.btn.small svg { width: 14px; height: 14px; }
.btn.small.primary { margin: 0; clip-path: none; color: var(--yellow-ink); }
.btn.ghost { background: transparent; }
.btn svg { width: 16px; height: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* mesa de efeitos */
.sb-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 8px 6px; }
.sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 12px 12px; overflow-y: auto; align-content: start; flex: 1; }
.sb-item { position: relative; }
.sb-play {
  width: 100%; min-height: 84px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 4px; padding: 10px; text-align: left;
  position: relative; overflow: hidden; transition: transform 0.08s ease, border-color 0.1s;
}
.sb-play:hover { border-color: var(--yellow); }
.sb-play:active { transform: scale(0.96); }
.sb-emoji { font-size: 22px; line-height: 1; }
.sb-name { font-weight: 700; font-size: 13px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sb-meta { font-size: 11px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.sb-meta kbd { padding: 0 5px; }
.sb-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--yellow); }
.sb-item.playing .sb-play { border-color: var(--yellow); }
.sb-item.playing .sb-prog { animation: sbprog var(--dur, 1s) linear forwards; }
@keyframes sbprog { from { width: 0; } to { width: 100%; } }
.sb-tools { position: absolute; top: 4px; right: 4px; display: none; gap: 0; background: var(--bg-2); border-radius: 7px; }
.sb-item:hover .sb-tools { display: flex; }
.sb-tools .icon-btn { width: 28px; height: 28px; }
.sb-tools svg { width: 15px; height: 15px; }
.sb-add { min-height: 84px; border: 1px dashed var(--dash); background: transparent; color: var(--muted); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; }
.sb-add:hover { color: var(--yellow); border-color: var(--yellow); }
.sb-form { margin: 0 12px 10px; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.sb-form-title { font-weight: 700; }
.sb-file { font-size: 12px; color: var(--muted); }
.sb-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.sb-form label.narrow { flex: 0 0 64px; }
.sb-form label.narrow input { text-align: center; font-size: 18px; padding: 8px; }
.sb-form-actions { display: flex; gap: 6px; justify-content: flex-end; }
.sb-form-actions .btn { padding: 8px 12px; }
.sb-form-actions .btn.primary { margin: 0; }
.sb-hint { padding: 0 14px 14px; }

.icon-btn.active { color: var(--yellow); background: var(--surface-2); }

/* modais */
.modal { position: fixed; inset: 0; background: var(--shade); display: grid; place-items: center; z-index: 10; }
.sheet { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px 22px; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 64px); display: flex; flex-direction: column; gap: 14px; }
.sheet.wide { width: min(880px, calc(100vw - 48px)); }
.sheet-head { display: flex; align-items: center; gap: 16px; }
.sheet-head h2 { margin: 0; font-size: 18px; flex: 1; }
.sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; overflow-y: auto; min-height: 160px; padding: 2px; }
.source { border: 2px solid transparent; background: var(--bg); border-radius: 9px; padding: 8px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.source:hover { border-color: var(--line); }
.source.sel { border-color: var(--yellow); }
.source .thumb { aspect-ratio: 16 / 9; background: #000 center / contain no-repeat; border-radius: 5px; }
.source .sname { display: flex; gap: 6px; align-items: center; font-size: 12px; overflow: hidden; }
.source .sname img { width: 16px; height: 16px; }
.source .sname span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-foot { display: flex; align-items: center; gap: 12px; }
.sheet-foot .switch { margin-right: auto; }
.sheet-foot select { width: auto; }
.sheet-foot .btn.primary { margin: 0; }
.perm { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 16px; }
.perm p { margin: 0 0 8px; }
.perm ol { margin: 0 0 12px; padding-left: 20px; color: var(--muted); }

.switch { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px !important; font-size: 13px !important; color: var(--text) !important; cursor: pointer; }
.switch input { display: none; }
.switch i { width: 34px; height: 20px; border-radius: 10px; background: var(--surface-2); position: relative; flex: none; transition: background 0.12s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform 0.12s, background 0.12s; }
.switch input:checked + i { background: var(--yellow); }
.switch input:checked + i::after { transform: translateX(14px); background: var(--yellow-ink); }

.meter { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; margin-top: -6px; }
.meter i { display: block; height: 100%; width: 0; background: var(--yellow); }
.shortcuts { font-size: 13px; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
kbd { font: 500 11px ui-monospace, Menlo, Consolas, monospace; background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; margin-right: 3px; }

.toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(8px);
  background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 7px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 20; max-width: 80vw;
}
.toast.show { opacity: 1; transform: translateX(-50%); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 5px; border: 3px solid transparent; background-clip: padding-box; }

/* espaço dos botões da janela */
body.mac .side-head { padding-top: 8px; }
@media (max-width: 1000px) { #lobby { grid-template-columns: 1fr; padding-top: 72px; } .lobby-card { justify-self: stretch; max-width: none; } }

.lobby-room { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.lobby-room b { color: var(--text); font-weight: 700; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
#lobbyHint { margin-top: 14px; }
.room-meta.bad { color: var(--danger); }
.alone { margin-top: 12px; font-size: 12px; color: var(--muted); background: var(--bg); border: 1px dashed #3a3a42; border-radius: 8px; padding: 10px 12px; }

/* avatares com cor e foto */
.avatar { background: color-mix(in srgb, var(--c, var(--muted)) 24%, var(--surface-2)); color: var(--c, var(--text)); }
.avatar.photo { background: var(--surface-2); }
.avatar.photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar.xs { --size: 22px; font-size: 9px; }
.avatar.xl { --size: 88px; }
.people li.speaking > .avatar, .tile.speaking .avatar { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--c, var(--yellow)); }
.me-id { border: 0; background: transparent; color: inherit; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; text-align: left; cursor: pointer; }
.me-id:hover { background: var(--surface); }

.tile { position: relative; }
.tile-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; }
.grid.compact .tile-body { flex-direction: row; justify-content: flex-start; gap: 10px; }
.tile.speaking { border-color: var(--c, var(--yellow)); }
.tile::after { background: var(--c, var(--yellow)); }
.tile-status { font-size: 12px; color: var(--muted); margin-top: -8px; max-width: 90%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* reações */
.react-wrap { position: relative; }
.react-pop { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; z-index: 5; }
.react-pop button { border: 0; background: transparent; font-size: 24px; width: 42px; height: 42px; border-radius: 9px; transition: transform 0.1s; }
.react-pop button:hover { background: var(--surface-2); transform: translateY(-3px) scale(1.15); }
.float-emoji { position: fixed; translate: -50% -50%; font-size: 34px; pointer-events: none; animation: floatup 1.8s cubic-bezier(.2,.7,.3,1) forwards; z-index: 25; }
.float-emoji.big { font-size: 56px; animation-duration: 2.1s; }
@keyframes floatup {
  0% { transform: translate(0, 10px) scale(0.4); opacity: 0; }
  15% { transform: translate(0, -10px) scale(1.15); opacity: 1; }
  100% { transform: translate(var(--drift, 0), -140px) scale(0.9); opacity: 0; }
}

/* perfil */
.pf-top { display: flex; align-items: center; gap: 18px; }
.pf-photo { display: flex; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.swatch.sel { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--sw); }
.fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 230px; overflow-y: auto; padding-right: 4px; }
.font-opt { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; text-align: left; overflow: hidden; }
.font-opt span { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.font-opt small { color: var(--muted); font-size: 11px; }
.font-opt.sel { border-color: var(--yellow); }
.pf-preview { display: flex; flex-direction: column; gap: 8px; }
.pf-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.sheet { overflow-y: auto; }

/* aparência */
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-opt { border: 1px solid var(--line); background: var(--bg); border-radius: 9px; padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text); }
.theme-opt i { height: 46px; border-radius: 6px; display: block; position: relative; overflow: hidden; }
.theme-opt i::after { content: ''; position: absolute; right: 10px; top: -6px; width: 8px; height: 60px; background: var(--yellow); transform: skewX(-30deg); }
.theme-opt.t-escuro i { background: #0d0d0f; border: 1px solid #2a2a30; }
.theme-opt.t-preto i { background: #000; border: 1px solid #222; }
.theme-opt.t-claro i { background: #f4f3ef; border: 1px solid #ddd; }
.theme-opt.sel { border-color: var(--yellow); }

/* visualizador */
.lb { width: min(1100px, calc(100vw - 48px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 10px; }
.lb-head { display: flex; align-items: center; gap: 10px; color: #fff; }
.lb-head span { flex: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-head .btn { text-decoration: none; color: var(--text); }
.lb-body { flex: 1; min-height: 0; display: grid; place-items: center; }
.lb-body img, .lb-body video { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 8px; background: #000; }

/* soltar arquivo */
.drop { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 70%, transparent); display: grid; place-items: center; pointer-events: none; }
.drop div { border: 2px dashed var(--yellow); border-radius: 16px; padding: 40px 56px; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 12px; background: var(--bg-2); }
.drop svg { width: 28px; height: 28px; color: var(--yellow); }
#settings .sheet, #profile .sheet { width: min(560px, calc(100vw - 32px)); overflow-x: hidden; }
#settings .sheet-head h2 { flex: 1; }

/* criador de avatar */
#avatarMaker .sheet.am { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.am-body { display: grid; grid-template-columns: 260px 1fr; gap: 20px; min-height: 0; }
.am-left { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.am-preview { width: 240px; height: 240px; align-self: center; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--line); }
.am-preview svg { display: block; }
.am-preview.roll { animation: amroll 0.45s cubic-bezier(.3,1.6,.5,1); }
@keyframes amroll { 0% { transform: rotate(-12deg) scale(0.85); } 100% { transform: none; } }
.am-left .btn.primary { margin-top: 6px; }
.am-right { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.am-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.am-cat { border: 1px solid var(--line); background: var(--bg); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 500; }
.am-cat:hover { color: var(--text); }
.am-cat.sel { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); font-weight: 700; }
.am-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.am-colors:empty { display: none; }
.am-colors.big .swatch { width: 44px; height: 44px; }
.am-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; overflow-y: auto; max-height: 360px; padding: 2px; }
.am-opts:empty { display: none; }
.am-opt { border: 2px solid transparent; background: var(--bg); border-radius: 10px; padding: 6px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; transition: transform 0.08s; }
.am-opt svg { border-radius: 50%; display: block; }
.am-opt:hover { transform: translateY(-2px); color: var(--text); }
.am-opt.sel { border-color: var(--yellow); color: var(--text); }
.am-opt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dice { font-size: 16px; display: inline-block; }
#btnAvRandom:hover .dice { animation: amroll 0.4s; }
.btn.primary.am-open { margin: 0; }
.pf-photo { flex-wrap: wrap; }

/* os desenhos do avatar não herdam o estilo dos ícones */
svg.av { width: auto; height: auto; fill: #000; stroke: none; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; flex: none; }

/* ===== canais (barra lateral) ===== */
.side-scroll { flex: 1; overflow-y: auto; padding: 0 8px 10px; min-height: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 4px 10px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
.sec-head b { color: var(--text); }
.icon-btn.mini { width: 24px; height: 24px; border-radius: 6px; }
.icon-btn.mini svg { width: 15px; height: 15px; }
.chans { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.chan, .vrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 7px; color: var(--muted); cursor: pointer; position: relative; min-height: 32px; }
.chan:hover, .vrow:hover { background: var(--surface); color: var(--text); }
.chan.sel { background: var(--surface-2); color: var(--text); }
.chan.unread { color: var(--text); font-weight: 700; }
.chan .hash { font-size: 17px; width: 16px; text-align: center; opacity: 0.7; }
.cname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { background: var(--danger); color: #fff; font-size: 10px; border-radius: 9px; padding: 1px 6px; font-weight: 700; }
.ctools { display: none; gap: 0; }
.chan:hover .ctools, .vrow:hover .ctools { display: flex; }
.chan:hover .badge { display: none; }
.vrow svg { width: 17px; height: 17px; }
.vchan.sel > .vrow { color: var(--text); background: var(--surface-2); }
.vchan.sel > .vrow svg { color: var(--yellow); }
.vmus { color: var(--yellow); font-weight: 700; }
.vmembers { list-style: none; margin: 2px 0 6px; padding: 0 0 0 26px; display: flex; flex-direction: column; gap: 1px; }
.vmembers li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.vmembers li:hover { background: var(--surface); color: var(--text); }
.vmembers li > svg { width: 14px; height: 14px; }
.vmembers li .live { font-size: 9px; font-weight: 700; background: var(--yellow); color: var(--yellow-ink); padding: 0 5px; border-radius: 3px; }
.vname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmembers li.speaking .avatar { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 3.5px var(--c, var(--yellow)); }
.vmembers .p-vol { display: flex; flex-basis: 100%; padding: 4px 0 2px 30px; }
.vmembers .p-vol input { width: 100%; }
.people li { padding: 5px 8px; gap: 8px; }
.people li .p-name small { color: var(--muted); font-weight: 400; }
.people .avatar.sm { --size: 30px; }
.voice-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 16px; border-top: 1px solid var(--line); background: var(--bg-2); }
.vb-text { display: flex; flex-direction: column; min-width: 0; }
.vb-text b { color: var(--ok); font-size: 12px; }
.vb-text span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#btnVoiceLeave:hover { color: var(--danger); }

/* ===== palco ===== */
.stage-title { display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.stage-title svg { width: 18px; height: 18px; color: var(--yellow); }
.stage-top { justify-content: flex-start; }
.alone { margin: 0 auto 12px; font-size: 13px; color: var(--muted); background: var(--bg-2); border: 1px dashed var(--dash); border-radius: 8px; padding: 10px 14px; }
.voice-lobby { display: none; }
#call.no-voice .voice-lobby { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; }
#call.no-voice .grid, #call.no-voice .viewer, #call.no-voice #btnShare, #call.no-voice .react-wrap, #call.no-voice #btnLeave { display: none !important; }
.vl-title { font-size: 22px; font-weight: 700; }
.vl-sub { color: var(--muted); margin-bottom: 14px; text-align: center; }
.vl-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 760px; }
.vl-card { width: 200px; min-height: 130px; border: 1px solid var(--line); background: var(--bg-2); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; text-align: left; color: var(--text); transition: transform 0.1s, border-color 0.1s; }
.vl-card:hover { border-color: var(--yellow); transform: translateY(-2px); }
.vl-name { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.vl-name svg { width: 18px; height: 18px; color: var(--yellow); }
.vl-avs { display: flex; gap: 4px; flex: 1; align-items: center; }
.vl-empty { color: var(--muted); font-size: 12px; }
.vl-go { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--yellow-ink); background: var(--yellow); padding: 4px 10px; border-radius: 6px; }
.vl-new { align-items: center; justify-content: center; border-style: dashed; color: var(--muted); }
.vl-new svg { width: 22px; height: 22px; }

/* ===== chat por canal ===== */
.chat-title { padding: 0 14px 8px; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.chat-title .hash { color: var(--muted); font-size: 18px; }
.chat-empty { margin: auto 0 8px; display: flex; flex-direction: column; gap: 4px; padding: 8px 0; color: var(--muted); }
.chat-empty b { font-size: 22px; color: var(--text); }

/* ===== música ===== */
.music-box { flex: 1; overflow-y: auto; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.mus-add { display: flex; gap: 6px; }
.mus-add input { flex: 1; }
.mus-add .btn.primary { margin: 0; clip-path: none; padding: 10px 14px; }
.mus-now { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.mus-thumb { aspect-ratio: 16 / 9; border-radius: 8px; background: #000 center / cover no-repeat; position: relative; }
.mus-paused { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.mus-eq { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 3px; align-items: flex-end; height: 16px; background: rgba(0,0,0,.6); padding: 3px 5px; border-radius: 4px; }
.mus-eq i { width: 3px; background: var(--yellow); animation: eq 0.9s ease-in-out infinite; }
.mus-eq i:nth-child(2) { animation-delay: -0.3s; } .mus-eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.mus-title { font-weight: 700; line-height: 1.3; }
.mus-by { font-size: 12px; color: var(--muted); margin-top: -4px; }
.mus-prog { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.mus-prog i { display: block; height: 100%; background: var(--yellow); width: 0; transition: width 0.9s linear; }
.mus-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mus-ctl { display: flex; gap: 6px; justify-content: center; }
.mus-ctl .ctl { height: 40px; min-width: 44px; padding: 0 10px; }
.mus-ctl .ctl svg { width: 18px; height: 18px; }
.mus-empty { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--bg); border: 1px dashed var(--dash); border-radius: 12px; color: var(--muted); font-size: 13px; }
.mus-empty b { color: var(--text); font-size: 14px; }
.mus-mine { display: flex; flex-direction: column; gap: 8px; }
.mus-vol { display: flex; align-items: center; gap: 6px; }
.mus-vol input { flex: 1; width: auto; }
.mus-vol span { font-size: 12px; color: var(--muted); width: 36px; text-align: right; }
.mus-out { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.mus-queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mus-queue li { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.q-thumb { width: 56px; height: 42px; border-radius: 5px; flex: none; background: var(--surface-2) center / cover no-repeat; }
.mus-queue li > div { flex: 1; min-width: 0; }
.q-title { font-size: 12px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.q-by { font-size: 11px; color: var(--muted); }

/* ===== modal de canal ===== */
.chan-sheet { width: min(420px, calc(100vw - 32px)) !important; }
.chan-input { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; }
.chan-input:focus-within { border-color: var(--yellow); }
.chan-input span { color: var(--muted); font-size: 18px; display: flex; }
.chan-input svg { width: 18px; height: 18px; }
.chan-input input { border: 0; background: transparent; flex: 1; padding: 12px 0; }
.panel .seg.small .seg-btn { padding: 6px 10px; }

/* ===== 1.5: layout com divisórias ===== */
#call:not(.hidden) { display: flex; } /* .hidden precisa funcionar: senão a chamada aparece por cima da tela de entrada */
#call > .side { width: var(--side-w, 272px); flex: none; min-width: 0; }
#call > .panel { width: var(--panel-w, 320px); flex: none; min-width: 0; }
#call > .stage, #call > .chatview { flex: 1; min-width: 0; }
.resizer { width: 7px; margin: 0 -3px; flex: none; cursor: col-resize; position: relative; z-index: 6; -webkit-app-region: no-drag; }
.resizer::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: transparent; transition: background 0.12s; }
.resizer:hover::after, .resizer.drag::after { background: var(--yellow); width: 2px; left: 2.5px; }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none !important; }
.side { border-right: 0; }
.stage, .chatview { border-left: 1px solid var(--line); }
.panel { border-left: 1px solid var(--line); }

/* chat no centro */
.chatview { display: flex; flex-direction: column; padding-top: 44px; min-height: 0; background: var(--bg); }
.cv-top { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; border-bottom: 1px solid var(--line); }
.cv-top .chat-title { border: 0; margin: 0; padding: 0; flex: 1; font-size: 17px; }
.cv-tools { display: flex; align-items: center; gap: 4px; }
.cv-tools .btn.small svg { color: var(--yellow); }
.chatview .chat-log { padding: 8px 24px 10px; }
.chatview .msg-text { padding-left: 38px; font-size: 15px; }
.chatview .msg .file-card { margin-left: 38px; max-width: 360px; }
.chatview .msg-head .avatar.xs { --size: 30px; font-size: 12px; }
.chatview .msg-head { margin-top: 14px; }
.chatview .msg-name { font-size: 14px; }
.chatview .chat-form { padding: 12px 20px 16px; border-top: 0; }
.chatview .chat-form input { background: var(--surface); border-color: transparent; padding: 13px 14px; }
.chatview .typing { padding: 0 26px 2px; }
.msg.mention { background: color-mix(in srgb, var(--yellow) 9%, transparent); box-shadow: inset 3px 0 0 var(--yellow); margin: 0 -24px; padding: 2px 24px; }
.at { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 14%, transparent); border-radius: 4px; padding: 0 3px; font-weight: 700; }
.msg-head { cursor: pointer; }
.msg-head:hover .msg-name { text-decoration: underline; }

/* canais: silenciado / menção */
.chan.muted .cname { opacity: 0.55; }
.mute-ic { width: 13px !important; height: 13px !important; opacity: 0.6; }
.badge.ment { background: var(--yellow); color: var(--yellow-ink); }
.badge.quiet { background: var(--surface-2); color: var(--muted); }
.vchan.viewing > .vrow { box-shadow: inset 2px 0 0 var(--yellow); }

/* ícones de mudo juntos */
.mute-ics { display: inline-flex; gap: 2px; align-items: center; color: var(--danger); }
.mute-ics svg { width: 15px; height: 15px; }
.tile-name .mute-ics svg { width: 16px; height: 16px; }

/* barra do usuário (mic, fone, engrenagem) */
.me-ctl { display: flex; gap: 0; }
.me-ctl .icon-btn { width: 32px; height: 32px; }
.me-ctl .icon-btn svg { width: 18px; height: 18px; }
.me-ctl .icon-btn.off { color: var(--danger); }
.me-bar { padding: 10px 8px 10px 12px; }

/* capa do perfil */
.pf-banner { height: 120px; border-radius: 10px; background-size: cover; background-position: center; position: relative; margin-bottom: -44px; }
.pf-banner-tools { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.pf-banner-tools .btn.small { background: rgba(13, 13, 15, 0.72); color: #fff; border-color: rgba(255,255,255,0.15); }
#profile .pf-top { padding-left: 14px; position: relative; z-index: 1; }
#profile .pf-top .avatar.xl { box-shadow: 0 0 0 5px var(--bg-2); }
#profile .pf-photo { margin-top: 40px; }

/* cartão de perfil */
.ucard { width: min(360px, calc(100vw - 32px)); background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.45); }
.uc-banner { height: 120px; background-size: cover; background-position: center; }
.uc-av { padding: 0 18px; margin-top: -46px; }
.uc-av .avatar.xl { box-shadow: 0 0 0 6px var(--bg-2); }
.uc-body { padding: 10px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.uc-name { font-size: 22px; font-weight: 700; line-height: 1.2; }
.uc-name small { font-size: 13px; color: var(--muted); font-family: 'ZP', sans-serif; font-weight: 400; }
.uc-status { color: var(--text); opacity: 0.85; }
.uc-where { font-size: 12px; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.uc-vol { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; font-size: 12px; color: var(--muted); }
.uc-vol .p-vol { display: flex; align-items: center; gap: 8px; padding: 0; }
.uc-vol .p-vol input { flex: 1; width: auto; }
.uc-actions { display: flex; gap: 8px; padding-top: 8px; }
.uc-actions .btn { flex: 1; margin: 0; }
.uc-actions .btn.primary { clip-path: none; }
.tile, #people li, .vmembers li { cursor: pointer; }

/* medidor com o portão de ruído */
.gate-meter { position: relative; height: 10px; margin-top: -4px; overflow: visible; }
.gate-meter i { transition: width 0.06s linear; }
.gate-meter i.closed { background: var(--muted); }
.gate-meter b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--danger); border-radius: 1px; }
.gate-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin-top: -6px; }
.gate-row input { flex: 1; width: auto; }
.gate-row span:last-child { width: 50px; text-align: right; font-variant-numeric: tabular-nums; }
.gate-row.dim { opacity: 0.4; pointer-events: none; }
.switch input:disabled + i { opacity: 0.5; }
#settings .sheet { width: min(600px, calc(100vw - 32px)); }
#settings .seg.small .seg-btn { padding: 6px 10px; }
#profile .sheet > *, #settings .sheet > * { flex-shrink: 0; }
#profile .sheet { gap: 12px; }
.stage { container-type: inline-size; container-name: stage; }
.controls { flex-wrap: wrap; }
@container stage (max-width: 560px) {
  .ctl.wide span { display: none; }
  .ctl.wide { min-width: 56px; padding: 0 16px; }
  .controls { gap: 8px; }
  .grid { padding: 12px; gap: 10px; }
  .tile { width: 170px; height: 140px; }
  .tile .avatar { --size: 58px; }
}
@container stage (max-width: 400px) {
  .ctl { min-width: 46px; height: 44px; padding: 0 10px; }
  .stage-title { font-size: 13px; }
}
.sb-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.alone { max-width: calc(100% - 32px); text-align: center; }

/* atualização */
.upd-bar { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--yellow); border-radius: 12px; padding: 10px 12px 10px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.4); max-width: calc(100vw - 32px); }
.upd-bar span { font-size: 13px; }
.upd-bar .btn.small.primary { color: var(--yellow-ink); }
.upd-box { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.upd-box > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.upd-box span { font-size: 12px; color: var(--muted); }

/* ===== 1.6.3 ===== */
.sb-vols { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.sb-vols .vol { padding: 0 4px 0 8px; }
.sb-vols .vol input { flex: 1; min-width: 0; }
.vol-tag { font-size: 11px; color: var(--muted); width: 92px; flex: none; white-space: nowrap; }

/* botões da capa: ficam por cima da foto/nome (antes só a metade de cima era clicável) */
.pf-banner-tools { z-index: 2; }
.pf-banner-tools .btn.small { padding: 7px 12px; }
/* ajustar imagem */
#cropper { z-index: 12; }
.crop-sheet { width: min(520px, calc(100vw - 32px)) !important; }
.crop-stage { display: grid; place-items: center; background: repeating-conic-gradient(#17171b 0 25%, #121215 0 50%) 0 0 / 18px 18px; border-radius: 10px; padding: 18px; }
#cropCanvas { display: block; cursor: grab; touch-action: none; box-shadow: 0 0 0 2px var(--yellow), 0 10px 30px rgba(0,0,0,.5); border-radius: 8px; }
#cropCanvas.drag { cursor: grabbing; }
.crop-stage.round #cropCanvas { border-radius: 50%; }
.crop-zoom { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.crop-zoom input { flex: 1; }

/* print: conferir antes de enviar */
#shotModal { z-index: 12; }
.shot-sheet { width: min(760px, calc(100vw - 48px)) !important; }
.shot-prev { background: #000; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; max-height: 56vh; }
.shot-prev img { max-width: 100%; max-height: 56vh; display: block; }
/* apagar mensagem */
.msg { position: relative; border-radius: 6px; }
.msg:hover { background: rgba(255,255,255,0.025); }
.msg-tools { position: absolute; right: 8px; top: 4px; display: none; z-index: 2; }
.msg:hover .msg-tools, .msg.armed .msg-tools { display: flex; }
.msg-del { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); border-radius: 7px; padding: 4px 8px; font-size: 12px; }
.msg-del svg { width: 15px; height: 15px; }
.msg-del:hover { color: var(--danger); border-color: var(--danger); }
.msg.armed { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.msg.armed .msg-del { color: #fff; background: var(--danger); border-color: var(--danger); }

/* ===== emojis ===== */
.emo-pop { position: fixed; z-index: 15; width: 352px; height: 380px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.5); display: flex; flex-direction: column; overflow: hidden; }
.emo-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); }
.emo-tab { flex: 1; border: 0; background: transparent; border-radius: 6px; font-size: 18px; padding: 5px 0; filter: grayscale(0.6); opacity: .8; }
.emo-tab:hover { background: var(--surface); filter: none; opacity: 1; }
.emo-grid { flex: 1; overflow-y: auto; padding: 4px 8px 10px; position: relative; }
.emo-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 4px 6px; position: sticky; top: -4px; background: var(--bg-2); z-index: 1; }
.emo-list { display: grid; grid-template-columns: repeat(8, 1fr); }
.emo { border: 0; background: transparent; font-size: 24px; line-height: 1; padding: 6px 0; border-radius: 8px; transition: transform .08s; }
.emo:hover { background: var(--surface); transform: scale(1.15); }
.msg-text.jumbo { font-size: 42px !important; line-height: 1.15; }
.rx-row { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 38px; }
.rx-row:empty { display: none; }
.rx-row:not(:empty) { margin: 6px 0 4px; }
.rx-chip { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px 3px 8px; font-size: 16px; line-height: 1.2; color: var(--text); }
.rx-chip b { font-size: 12px; font-weight: 600; color: var(--muted); }
.rx-chip:hover { border-color: #55555d; }
.rx-chip.mine { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 14%, var(--surface)); }
.rx-chip.mine b { color: var(--yellow); }
.rx-add { border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 3px 9px; display: none; }
.rx-add svg { width: 16px; height: 16px; }
.msg:hover .rx-add { display: flex; align-items: center; }
.msg-tools { gap: 6px; }
.msg-rx { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); border-radius: 7px; padding: 4px 8px; font-size: 12px; }
.msg-rx svg { width: 15px; height: 15px; }
.msg-rx:hover { color: var(--yellow); border-color: var(--yellow); }

/* ===== 1.7: nada de coisa estourando para fora ===== */
.avatar { flex: none; aspect-ratio: 1 / 1; min-width: var(--size); min-height: var(--size); }
.avatar > svg.av, .avatar > img { width: 100%; height: 100%; }
.panel, .pane { min-width: 0; overflow-x: hidden; }
.row2 label { min-width: 0; }
.row2 input { min-width: 0; width: 100%; }
.sb-form-actions { flex-wrap: wrap; }
.sb-form .sb-form-actions .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
.sb-form .row2 { flex-wrap: wrap; }
.sb-form .row2 label:not(.narrow) { flex: 1 1 120px; }
.me-bar { min-width: 0; }
.me-bar .me-id { flex: 1 1 auto; }
.me-name, .me-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet { max-width: calc(100vw - 24px); }
/* trecho do áudio */
.trim { display: flex; flex-direction: column; gap: 6px; }
.trim canvas { width: 100%; display: block; border-radius: 6px; background: var(--bg-2); touch-action: none; }
#trimOverview { height: 26px; cursor: pointer; }
#trimDetail { height: 76px; cursor: ew-resize; }
.trim-info { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.trim-info b { color: var(--text); font-weight: 600; }

/* ===== Arena ZP ===== */
.arena-sheet { width: min(520px, calc(100vw - 32px)) !important; }
.ar-desc { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ar-desc b { color: var(--text); }
.ar-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.ar-keys kbd { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--text); font: inherit; font-size: 11px; margin-right: 4px; }
.ar-stats { font-size: 13px; color: var(--yellow); font-weight: 600; }
.ar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ar-list li { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ar-list li.ar-empty { color: var(--muted); justify-content: center; }
.ar-name { flex: 1; min-width: 0; font-weight: 700; display: flex; flex-direction: column; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-name small { font-weight: 400; color: var(--muted); font-size: 12px; }
.ar-list .btn { flex: none; }
.duel-inv { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 41; display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--yellow); border-radius: 12px; padding: 10px 12px 10px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.5); max-width: calc(100vw - 32px); animation: duelIn .25s ease-out; }
.duel-inv span { flex: 1; min-width: 0; }
@keyframes duelIn { from { transform: translate(-50%, -12px); opacity: 0; } }
.game { position: fixed; inset: 0; z-index: 30; background: #08080a; display: flex; flex-direction: column; }
.g-top { height: 52px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 160px 0 18px; -webkit-app-region: no-drag; user-select: none; }
body.mac .g-top { padding-left: 90px; }
.g-top .btn { -webkit-app-region: no-drag; }
.g-score { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; min-width: 0; }
.g-score b { font-size: 22px; color: #fff; min-width: 18px; text-align: center; }
.g-score i { color: var(--muted); font-style: normal; }
.g-score span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.g-round { flex: 1; color: var(--muted); font-size: 13px; }
#gameCanvas { flex: 1; min-height: 0; width: 100%; display: block; cursor: none; }
.g-help { flex: none; text-align: center; color: #66666e; font-size: 12px; padding: 8px; }
.g-over { position: absolute; inset: 52px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(8,8,10,.78); backdrop-filter: blur(3px); text-align: center; padding: 20px; }
.g-over h2 { margin: 0; font-size: 44px; color: var(--yellow); }
.g-over p { margin: 0; color: var(--muted); }
.g-over-btns { display: flex; gap: 10px; margin-top: 10px; }

/* ===== Arena 2.0 ===== */
.game, .game * { -webkit-app-region: no-drag; }
.game { user-select: none; }
#gameCanvas:focus { outline: none; }
.game.lobby .g-top, .game.lobby #gameCanvas, .game.lobby .g-help { visibility: hidden; }
#arenaTabs { align-self: flex-start; }
.ar-list li.me { border-color: var(--yellow); }
.rk-pos { width: 34px; text-align: center; font-size: 18px; flex: none; }
.rk-elo { font-weight: 800; font-size: 18px; color: var(--yellow); flex: none; }
.ar-list { max-height: 46vh; overflow-y: auto; }
.ar-name i { font-style: normal; color: var(--yellow); padding: 0 4px; }
.g-lobby { position: absolute; inset: 0; overflow-y: auto; padding: 22px clamp(16px, 4vw, 48px) 90px; background: radial-gradient(1200px 500px at 50% -10%, rgba(248,217,5,.08), transparent), #0b0b0d; }
.gl-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; padding-right: 140px; }
body.mac .gl-head { padding-right: 0; }
.gl-head h2 { margin: 0; font-size: 26px; }
.gl-vs { font-weight: 800; font-size: 20px; flex: 1; min-width: 0; }
.gl-vs i { color: var(--muted); font-style: normal; font-weight: 500; padding: 0 6px; }
.g-lobby h3 { margin: 18px 0 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.g-lobby h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.gl-chars { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.gl-char { position: relative; text-align: left; background: var(--bg-2); border: 2px solid var(--line); border-radius: 14px; padding: 14px; color: var(--text); display: flex; flex-direction: column; gap: 6px; transition: transform .1s, border-color .1s; }
.gl-char:hover:not(:disabled) { transform: translateY(-3px); border-color: #55555d; }
.gl-char.sel { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(248,217,5,.12); }
.gl-char:disabled { opacity: .55; cursor: default; }
.gl-char.sel:disabled { opacity: 1; }
.gl-ic { font-size: 40px; line-height: 1; }
.gl-cn { font-weight: 800; font-size: 17px; }
.gl-cd { font-size: 12px; color: var(--muted); min-height: 32px; }
.gl-bars { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; }
.gl-bar { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.gl-bar i { height: 6px; background: #26262c; border-radius: 3px; overflow: hidden; }
.gl-bar b { display: block; height: 100%; background: var(--yellow); border-radius: 3px; }
.gl-sp { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.gl-sp b { color: var(--text); }
.gl-op { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: 11px; font-weight: 700; background: #4da3ff; color: #000; border-radius: 999px; padding: 2px 8px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gl-map { background: var(--bg-2); border: 2px solid var(--line); border-radius: 12px; padding: 6px 6px 8px; color: var(--text); display: flex; flex-direction: column; gap: 6px; align-items: stretch; font-weight: 600; font-size: 13px; }
.gl-map canvas, .gl-rand { width: 100%; aspect-ratio: 16 / 9; border-radius: 7px; display: block; }
.gl-rand { display: grid; place-items: center; font-size: 40px; background: repeating-linear-gradient(135deg, #1a1a1f 0 12px, #141418 12px 24px); }
.gl-map.sel { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(248,217,5,.12); }
.gl-map:hover:not(:disabled) { border-color: #55555d; }
.gl-map.sel:hover { border-color: var(--yellow); }
.gl-mapdesc { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.gl-foot { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 20px; background: rgba(11,11,13,.92); border-top: 1px solid var(--line); flex-wrap: wrap; }
.gl-foot .btn { min-width: 200px; justify-content: center; }
#glStatus { color: var(--muted); }
#glStatus b { color: var(--text); }

/* ===== 1.9: atalhos e cargos ===== */
.keys-box, .role-box { padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.key-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.key-row span { flex: 1; min-width: 0; }
.key-btn { min-width: 150px; justify-content: center; font-family: inherit; letter-spacing: .02em; }
.key-btn.rec { border-color: var(--yellow); color: var(--yellow); animation: keyPulse 1s infinite; }
@keyframes keyPulse { 50% { box-shadow: 0 0 0 3px rgba(248,217,5,.2); } }
.role-box .rb-line { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.role-box .rb-line b { color: var(--yellow); }
.role-box ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.role-box li { background: var(--surface); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.crown { font-size: 11px; margin-left: 4px; filter: drop-shadow(0 0 2px rgba(248,217,5,.5)); }
.mv-menu { position: fixed; z-index: 45; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.5); min-width: 210px; display: flex; flex-direction: column; }
.mv-menu .mv-h { font-size: 11px; color: var(--muted); padding: 6px 10px 4px; text-transform: uppercase; letter-spacing: .08em; }
.mv-menu button { border: 0; background: transparent; color: var(--text); text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.mv-menu button:hover { background: var(--surface); }
.mv-menu button.danger { color: var(--danger); }
.mv-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.vchan.drop-ok { outline: 2px dashed var(--yellow); outline-offset: -2px; border-radius: 8px; }
.vmembers li[draggable="true"] { cursor: grab; }

/* ===== 1.9: jogos para todos ===== */
.arena-sheet { width: min(620px, calc(100vw - 32px)) !important; }
.ar-play { display: flex; flex-direction: column; gap: 14px; }
.ar-game { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ar-gh { display: flex; gap: 12px; align-items: center; }
.ar-gi { font-size: 34px; }
.ar-gh b { font-size: 16px; display: block; }
.ar-gh small { color: var(--muted); font-size: 12px; }
.ar-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 4px 0 6px; }
.ar-game .ar-list li { background: var(--bg-2); }
.ar-new { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #f8d905; color: #111; font-size: 10px; font-weight: 800; vertical-align: middle; }
#rankTabs { margin-bottom: 8px; align-self: flex-start; display: inline-flex; }
.gl-desc { color: var(--muted); margin: 0 0 4px; font-size: 13px; }
.gl-players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.gl-players li { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.gl-players li.ok { border-color: #3ddc84; }
.gl-players li.me { box-shadow: inset 0 0 0 1px rgba(248,217,5,.35); }
.glp-name { flex: 1; min-width: 0; font-weight: 800; display: flex; flex-direction: column; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.glp-name small { font-weight: 400; color: var(--muted); font-size: 11px; }
.glp-name span { color: var(--text); font-weight: 600; font-size: 13px; }
.glp-st { font-size: 12px; white-space: nowrap; }
.gl-players li.glp-wait { border-style: dashed; color: var(--muted); justify-content: center; font-size: 13px; }
.gl-players li.glp-wait span { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.gs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #17171c; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--c); font-weight: 700; font-size: 13px; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.gs-chip b { color: #fff; font-size: 15px; }
.gs-chip.dead { opacity: .45; }
.g-score { flex-wrap: wrap; gap: 6px; overflow: hidden; max-height: 48px; }

.ar-btns { display: flex; gap: 6px; flex: none; }
.ar-btns .btn { padding: 8px 12px; }

/* Spotify: transmitir o que está tocando no meu Spotify */
.sp-card { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.sp-card.on { border-color: #1db954; box-shadow: 0 0 0 1px rgba(29, 185, 84, 0.25) inset; }
.sp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-head b { flex: 1; min-width: 0; }
.sp-logo { width: 20px; height: 20px; flex: none; }
.sp-logo circle { fill: #1db954; }
.sp-logo path { fill: none; stroke: #000; stroke-width: 1.8; stroke-linecap: round; }
.sp-btn { margin: 0; clip-path: none; padding: 7px 12px; font-size: 12px; }
.sp-card:not(.on) .sp-btn.primary { background: #1db954; color: #04130a; border-color: #1db954; }
.sp-line { font-size: 12px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.sp-line b { color: var(--text); font-weight: 600; }
.sp-by { display: flex; align-items: center; gap: 6px; color: #1db954; font-weight: 600; }
.sp-dot { width: 8px; height: 8px; border-radius: 50%; background: #1db954; animation: spPulse 1.6s ease-in-out infinite; flex: none; }
@keyframes spPulse { 50% { opacity: 0.35; } }
.sp-ctl-note { flex: 1; font-size: 11px; color: var(--muted); line-height: 1.35; align-self: center; }

/* ================= TRABALHOS (tipo Asana) ================= */
#call > .jobsview { flex: 1; min-width: 0; }
.jobsview { display: flex; flex-direction: column; padding-top: 44px; min-height: 0; background: var(--bg); border-left: 1px solid var(--line); }
.jobsview.hidden { display: none; }
.nav-ic { width: 17px; height: 17px; color: var(--yellow); }
.nav-jobs { margin-bottom: 6px; }
.nav-jobs .chan { color: var(--text); font-weight: 600; }
.jobs-mine { margin-left: auto; font-size: 11px; color: var(--muted); background: var(--surface-2); border-radius: 9px; padding: 1px 7px; }
.nav-jobs .badge { margin-left: auto; }
.jv-top .chat-title { gap: 8px; }
.jv-top .chat-title .nav-ic { width: 20px; height: 20px; }
.jv-tools { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.jv-tools .jv-views { margin-right: 4px; }
.jv-search { padding: 7px 10px; font-size: 13px; width: 180px; flex: 0 1 180px; }
.jv-client-f { padding: 7px 30px 7px 10px; font-size: 13px; max-width: 180px; }
.jv-chip { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 16px; padding: 6px 12px; font-size: 12px; font-weight: 600; }
.jv-chip:hover { color: var(--text); }
.jv-chip.on { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); }
.jv-new { margin: 0 0 0 auto !important; padding: 8px 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.jv-new svg { width: 15px; height: 15px; stroke-width: 2.4; }
.jv-body { flex: 1; display: flex; min-height: 0; }
.jv-main { flex: 1; min-width: 0; overflow: auto; padding: 8px 16px 40px; }
.jv-drawer { width: min(440px, 46%); flex: none; border-left: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; min-height: 0; }
.jv-drawer.hidden { display: none; }

/* lista */
.jv-list { min-width: 760px; }
.jv-row { display: grid; grid-template-columns: 28px minmax(220px, 1fr) 110px 92px 92px 92px 130px; align-items: center; gap: 8px; padding: 0 8px; min-height: 40px; border-bottom: 1px solid var(--line); cursor: pointer; }
.jv-row:hover { background: var(--surface); }
.jv-row.sel { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--yellow); }
.jv-row.jv-head { position: sticky; top: -8px; z-index: 2; background: var(--bg); cursor: default; min-height: 34px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.jv-row.jv-head:hover { background: var(--bg); }
.jv-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.jv-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.jv-row.done .jv-t { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(141, 141, 150, 0.6); }
.jv-client { font-size: 11px; color: var(--muted); background: var(--surface-2); padding: 2px 8px; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; flex: none; }
.jv-subc, .jv-cmc { font-size: 11px; color: var(--muted); white-space: nowrap; flex: none; }
.jv-subc.all { color: var(--ok); }
.jv-c-date, .jv-c-due { font-size: 12px; color: var(--muted); white-space: nowrap; }
.jv-c-due.soon, .jv-card-due.soon, .jd-rel.soon { color: var(--yellow); }
.jv-c-due.late, .jv-card-due.late, .jd-rel.late, .jd-sub-d.late { color: var(--danger); font-weight: 600; }
.jv-prio { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); white-space: nowrap; }
.jv-stage { padding: 4px 26px 4px 10px; font-size: 12px; font-weight: 600; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); background-color: color-mix(in srgb, var(--sc) 14%, transparent); color: var(--text); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; width: 100%; cursor: pointer; }
.jv-stage.big { width: auto; padding: 7px 30px 7px 12px; font-size: 13px; }
.jv-stage option { background: var(--bg-2); color: var(--text); }
.jv-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--muted); background: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; color: transparent; transition: 0.12s; }
.jv-check svg { width: 12px; height: 12px; stroke-width: 3; }
.jv-check:hover { border-color: var(--ok); color: var(--ok); }
.jv-check.on { background: var(--ok); border-color: var(--ok); color: #04130a; }
.jv-check.sm { width: 18px; height: 18px; }
.jv-check.big { width: auto; height: auto; border-radius: 7px; padding: 6px 12px; gap: 6px; color: var(--text); font-size: 13px; font-weight: 600; border-width: 1px; border-color: var(--line); }
.jv-check.big svg { color: var(--muted); }
.jv-check.big.on { background: color-mix(in srgb, var(--ok) 18%, transparent); border-color: var(--ok); color: var(--ok); }
.jv-check.big.on svg { color: var(--ok); }
.jv-new-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex: none; display: inline-block; }
.jv-av { --size: 24px; width: var(--size); height: var(--size); border-radius: 50%; background: var(--c, #555); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid var(--bg); flex: none; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.jv-av img { width: 100%; height: 100%; object-fit: cover; }
.jv-av + .jv-av { margin-left: -7px; }
.jv-av.xs { --size: 22px; border-width: 0; margin: 0 !important; }
.jv-av.more { background: var(--surface-2); color: var(--muted); }
.jv-c-who { display: flex; align-items: center; min-width: 0; }
.jv-group { margin-top: 14px; }
.jv-group-h { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 4px; font-weight: 700; font-size: 14px; color: var(--text); }
.jv-group-h i { width: 10px; height: 10px; border-radius: 3px; }
.jv-group-h b { font-size: 12px; color: var(--muted); font-weight: 600; }
.jv-caret { width: 16px; height: 16px; color: var(--muted); transition: transform 0.15s; }
.jv-caret.col { transform: rotate(-90deg); }
.jv-add { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--muted); padding: 9px 12px 9px 40px; font-size: 13px; width: 100%; text-align: left; }
.jv-add:hover { color: var(--text); background: var(--surface); }
.jv-add svg { width: 14px; height: 14px; }
.jv-quick { padding: 6px 8px 6px 36px; border-bottom: 1px solid var(--line); }
.jv-quick input { width: 100%; padding: 8px 10px; font-size: 13px; }

/* quadro */
.jv-board { display: flex; gap: 12px; align-items: flex-start; min-height: 100%; padding-top: 6px; }
.jv-col { flex: 0 0 260px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; max-height: 100%; transition: border-color 0.12s, background 0.12s; }
.jv-col.over { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 5%, var(--bg-2)); }
.jv-col-h { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 12px; font-weight: 700; font-size: 13px; }
.jv-col-h i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.jv-col-h b { color: var(--muted); font-weight: 600; font-size: 12px; flex: 1; }
.jv-col-b { padding: 0 8px 10px; display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 60px; }
.jv-col-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 18px 6px; border: 1px dashed var(--dash, #2c2c33); border-radius: 8px; }
.jv-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; cursor: grab; }
.jv-card:hover { border-color: #3a3a42; }
.jv-card.sel { border-color: var(--yellow); }
.jv-card.dragging { opacity: 0.4; }
.jv-card-t { font-weight: 600; font-size: 13px; line-height: 1.35; display: flex; gap: 6px; align-items: baseline; overflow-wrap: anywhere; }
.jv-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.jv-card-prog { height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.jv-card-prog i { display: block; height: 100%; background: var(--ok); }
.jv-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.jv-avs { display: flex; margin-right: auto; min-height: 24px; align-items: center; }

/* calendário */
.jv-cal { display: flex; flex-direction: column; min-width: 640px; height: 100%; min-height: 520px; }
.jv-cal-h { display: flex; align-items: center; gap: 8px; padding: 6px 0 10px; flex-wrap: wrap; }
.jv-cal-h b { font-size: 16px; min-width: 150px; text-align: center; }
.jv-cal-h svg { width: 18px; height: 18px; }
.jv-legend { margin-left: auto; display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.jv-cal-w { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.05em; padding-bottom: 6px; }
.jv-cal-w span { padding-left: 8px; }
.jv-cal-g { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(84px, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.jv-day { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; cursor: pointer; }
.jv-day:hover { background: var(--surface); }
.jv-day.out { background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
.jv-day.out .jv-dn { opacity: 0.4; }
.jv-dn { font-size: 12px; color: var(--muted); padding: 2px 4px; align-self: flex-start; border-radius: 10px; }
.jv-day.today .jv-dn { background: var(--yellow); color: var(--yellow-ink); font-weight: 700; }
.jv-ev { border: 0; text-align: left; font-size: 11px; padding: 3px 6px; border-radius: 5px; background: color-mix(in srgb, var(--sc) 20%, transparent); border-left: 3px solid var(--sc); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.jv-ev.done { opacity: 0.55; text-decoration: line-through; }
.jv-more { font-size: 11px; color: var(--muted); padding-left: 6px; }

.jv-empty { max-width: 380px; margin: 60px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.jv-empty > svg { width: 52px; height: 52px; color: var(--yellow); stroke-width: 1.4; }
.jv-empty b { color: var(--text); font-size: 17px; }
.jv-empty .btn { display: inline-flex; gap: 6px; align-items: center; }

/* detalhes do trabalho */
.jd-top { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.jd-sp { flex: 1; }
.icon-btn.armed { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); }
.jd-scroll { flex: 1; overflow: auto; padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.jd-title { font-size: 21px; font-weight: 700; background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 6px 8px; margin: 0 -8px; resize: none; color: var(--text); outline: none; line-height: 1.3; overflow: hidden; }
.jd-title:hover { border-color: var(--line); }
.jd-title:focus { border-color: var(--yellow); background: var(--bg); }
.jd-grid { display: grid; grid-template-columns: 118px 1fr; gap: 10px 10px; align-items: center; font-size: 13px; }
.jd-l { color: var(--muted); font-size: 12px; }
.jd-grid input { padding: 7px 10px; font-size: 13px; width: 100%; }
.jd-grid input[type=date] { width: auto; color-scheme: dark; }
:root[data-theme="claro"] .jd-grid input[type=date], :root[data-theme="claro"] .jd-sub-d { color-scheme: light; }
.jd-date { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jd-rel { font-size: 12px; color: var(--muted); }
.jd-who { display: flex; flex-wrap: wrap; gap: 6px; }
.jd-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 16px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12px; max-width: 100%; }
.jd-person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jd-person:hover { color: var(--text); border-color: #3a3a42; }
.jd-person.on { color: var(--text); border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, transparent); }
.jd-prios { display: flex; flex-wrap: wrap; gap: 6px; }
.jd-prio { border: 1px solid var(--line); background: transparent; border-radius: 14px; padding: 4px 10px; font-size: 12px; color: var(--muted); }
.jd-prio.on { color: var(--pc); border-color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); font-weight: 600; }
.jd-prio[data-jprio=""].on { color: var(--text); border-color: var(--muted); }
.jd-link { display: flex; gap: 6px; align-items: center; }
.jd-link a { color: var(--yellow); flex: none; }
.jd-link a svg { width: 18px; height: 18px; }
.jd-sec { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.jd-subc { text-transform: none; letter-spacing: 0; font-weight: 500; }
.jd-desc { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--text); resize: vertical; min-height: 80px; outline: none; user-select: text; }
.jd-desc:focus { border-color: var(--yellow); }
.jd-prog { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.jd-prog i { display: block; height: 100%; background: var(--ok); transition: width 0.3s; }
.jd-subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.jd-subs li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.jd-subs li .icon-btn { opacity: 0; }
.jd-subs li:hover .icon-btn { opacity: 1; }
.jd-sub-x { flex: 1; background: transparent; border: 1px solid transparent; padding: 5px 6px; font-size: 13px; min-width: 60px; }
.jd-sub-x:hover { border-color: var(--line); }
.jd-subs li.done .jd-sub-x { color: var(--muted); text-decoration: line-through; }
.jd-sub-u { padding: 4px 22px 4px 6px; font-size: 11px; max-width: 96px; background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%; border-color: transparent; background-color: transparent; color: var(--muted); }
.jd-sub-u:hover { border-color: var(--line); }
.jd-sub-d { padding: 4px 4px; font-size: 11px; width: 112px; color-scheme: dark; border-color: transparent; background: transparent; color: var(--muted); }
.jd-sub-d:hover { border-color: var(--line); }
.jd-subadd { display: flex; align-items: center; gap: 6px; color: var(--muted); padding-left: 2px; }
.jd-subadd svg { width: 16px; height: 16px; }
.jd-subadd input { flex: 1; padding: 7px 8px; font-size: 13px; background: transparent; border-color: transparent; }
.jd-subadd input:focus { border-color: var(--yellow); background: var(--bg); }
.jd-cms { display: flex; flex-direction: column; gap: 10px; }
.jd-cm { display: flex; gap: 8px; font-size: 13px; }
.jd-cm > div { min-width: 0; flex: 1; }
.jd-cm.sys { font-size: 12px; color: var(--muted); padding-left: 4px; border-left: 2px solid var(--line); }
.jd-cm-h { display: flex; gap: 8px; align-items: baseline; }
.jd-cm-h span { font-size: 11px; color: var(--muted); }
.jd-cm-x { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; margin-top: 2px; user-select: text; }
.jd-cm-del { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 11px; opacity: 0; }
.jd-cm:hover .jd-cm-del { opacity: 1; }
.jd-cm-del:hover { color: var(--danger); }
.jd-cmadd { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
.jd-cmadd input { flex: 1; padding: 9px 12px; font-size: 13px; }
@media (max-width: 1100px) { .jv-drawer { position: absolute; right: 0; top: 0; bottom: 0; width: min(440px, 92%); z-index: 8; box-shadow: -12px 0 30px rgba(0,0,0,.4); } .jv-body { position: relative; } }
.jd-scroll > * { flex: none; }
.jv-body.has-drawer .jv-list { min-width: 0; }
.jv-body.has-drawer .jv-row { grid-template-columns: 28px minmax(120px, 1fr) 64px 84px 118px; }
.jv-body.has-drawer .jv-c-date, .jv-body.has-drawer .jv-c-prio, .jv-body.has-drawer .jv-row .jv-client, .jv-body.has-drawer .jv-cmc { display: none; }
.jv-search { width: 150px; flex: 0 1 150px; }
.jd-sub-d:not(.has) { width: 32px; padding: 4px 6px; }
.jd-sub-d:not(.has)::-webkit-datetime-edit { display: none; }
.jd-sub-d.has { width: 104px; }
.jd-sub-u { max-width: 86px; }

/* compartilhar tela: botão de parar fica vermelho */
.ctl.wide.on { background: var(--danger); color: #fff; border-color: var(--danger); }
.ctl.wide.on:hover { filter: brightness(1.08); background: var(--danger); }
/* assistir / parar de assistir a tela de alguém */
.watch-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; background: radial-gradient(ellipse at center, #17171b 0%, #000 75%); color: #f4f4f2; }
.watch-card.hidden { display: none; }
.watch-card b { font-size: 17px; }
.watch-card span { font-size: 13px; color: #8d8d96; }
.watch-card .btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 12px 26px; font-size: 15px; }
.watch-card .btn svg { width: 20px; height: 20px; }
.watch-card .btn.ghost { background: transparent; color: #f4f4f2; border: 1px solid #2a2a30; }
.wc-ring { border-radius: 50%; padding: 4px; }
.wc-ring .avatar { --size: 72px; font-size: 26px; }
.wc-ring.live { box-shadow: 0 0 0 3px var(--danger); animation: wcPulse 1.6s ease-in-out infinite; }
@keyframes wcPulse { 50% { box-shadow: 0 0 0 7px rgba(255, 77, 61, 0.25); } }
.tab.idle { border-style: dashed; }
.tab.idle .live-dot { background: var(--danger); width: 7px; height: 7px; }
.tab.active.idle .live-dot { background: var(--yellow-ink); }
#btnUnwatch { padding: 6px 10px; }
#btnUnwatch svg { color: var(--muted); }
button.live { border: 0; cursor: pointer; font-family: inherit; }
.vmembers li button.live:not(.on) { background: var(--danger); color: #fff; }
.vmembers li button.live:hover { filter: brightness(1.1); }

/* ===== descrição com formatação ===== */
.rt-wrap { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.rt-wrap:focus-within { border-color: var(--yellow); }
.rt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--line); position: relative; }
.rt-bar button { border: 0; background: transparent; color: var(--muted); min-width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; padding: 0 6px; }
.rt-bar button:hover { background: var(--surface-2); color: var(--text); }
.rt-bar button.on { background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); }
.rt-bar button svg { width: 16px; height: 16px; }
.rt-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.rt-colors { display: inline-flex; gap: 0; }
.rt-colors button { min-width: 22px; padding: 0 3px; }
.rt-colors i { width: 14px; height: 14px; border-radius: 50%; background: var(--rc); display: block; }
.rt-colors i.none { background: transparent; border: 1.5px solid var(--muted); position: relative; overflow: hidden; }
.rt-colors i.none::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: var(--danger); transform: rotate(45deg); }
.rt-link { position: absolute; left: 6px; right: 6px; top: calc(100% + 4px); z-index: 5; }
.rt-link.hidden { display: none; }
.rt-link input { width: 100%; padding: 8px 10px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.4); border-color: var(--yellow); }
.rt { min-height: 96px; padding: 10px 12px; font-size: 13.5px; line-height: 1.55; outline: none; user-select: text; overflow-wrap: anywhere; cursor: text; }
.rt:empty::before { content: attr(data-ph); color: var(--muted); pointer-events: none; }
.rt h3 { font-size: 16px; margin: 10px 0 4px; font-weight: 700; }
.rt h3:first-child { margin-top: 0; }
.rt ul, .rt ol { margin: 4px 0; padding-left: 22px; }
.rt li { margin: 2px 0; }
.rt a { color: var(--yellow); text-decoration: underline; cursor: pointer; }
.rt blockquote { margin: 4px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }

/* ===== HDs e backups ===== */
.jv-sp { flex: 1; }
.jv-new2 { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; }
.jv-new2 svg { width: 15px; height: 15px; color: var(--yellow); }
.fs { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; min-width: 0; }
.fs-sec { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.fs-sec h3 { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.fs-sec h3 b { font-size: 12px; color: var(--muted); font-weight: 600; }
.fs-tip { font-size: 12px; color: var(--muted); }
.fs-sec .btn.small { margin-left: auto; }
.fs-drives { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.fs-drive { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; min-width: 0; text-align: left; color: var(--text); }
.fs-drive:hover { border-color: #3a3a42; background: var(--surface); }
.fs-drive.sel, .fs-drive.on { border-color: var(--yellow); }
.fs-dh { display: flex; gap: 10px; align-items: center; min-width: 0; }
.fs-dic { width: 30px; height: 30px; color: var(--yellow); stroke-width: 1.5; flex: none; }
.fs-dn { display: flex; flex-direction: column; min-width: 0; }
.fs-dn b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-dn span { font-size: 12px; color: var(--muted); }
.fs-dp { display: flex; gap: 5px; align-items: center; font-size: 12px; color: var(--muted); min-width: 0; }
.fs-dp svg { width: 14px; height: 14px; flex: none; }
.fs-ds { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11px; color: var(--muted); margin-top: auto; }
.fs-ds .ok { color: var(--ok); }
.fs-ds .warn { color: var(--danger); font-weight: 600; }
.fs-add { align-items: center; justify-content: center; flex-direction: row; color: var(--muted); border-style: dashed; min-height: 92px; font-size: 13px; }
.fs-add svg { width: 18px; height: 18px; }
.fs-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; }
.fs-row { display: grid; grid-template-columns: minmax(170px, 1.3fr) 104px minmax(200px, 2fr) 150px 96px; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; min-height: 44px; font-size: 13px; }
.fs-row:last-child { border-bottom: 0; }
.fs-row:hover { background: var(--surface); }
.fs-row.sel { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--yellow); }
.fs-row.fs-head { cursor: default; min-height: 32px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; background: var(--bg-2); }
.fs-row.fs-head:hover { background: var(--bg-2); }
.fs-brow { grid-template-columns: 110px minmax(230px, 2fr) minmax(140px, 1.4fr) 44px 110px; }
.fs-pn { display: flex; gap: 8px; align-items: center; min-width: 0; }
.fs-pn b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-pd, .fs-bd { color: var(--muted); font-size: 12px; white-space: nowrap; }
.fs-pl, .fs-bft, .fs-bj { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.fs-ic { width: 15px; height: 15px; flex: none; stroke-width: 1.7; }
.fs-loc, .fs-bk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 8px 3px 6px; border-radius: 6px; background: var(--surface-2); border: 0; color: var(--text); max-width: 100%; min-width: 0; }
.fs-loc b { font-weight: 600; white-space: nowrap; }
.fs-loc i { font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fs-loc .fs-ic { color: var(--yellow); }
.fs-loc.k-final .fs-ic { color: var(--ok); }
.fs-loc.k-projeto .fs-ic { color: #b36bff; }
.fs-loc.k-backup .fs-ic { color: #4d8dff; }
.fs-bk .fs-ic { color: #4d8dff; }
button.fs-bk { cursor: pointer; }
button.fs-bk:hover { background: #2e2e35; }
.fs-none { font-size: 12px; color: var(--danger); }
.fs-none.soon { color: var(--yellow); }
.fs-arrow { width: 16px; height: 16px; color: var(--muted); flex: none; }
.fs-stage { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--sc) 16%, transparent); color: var(--sc); white-space: nowrap; }
.fs-st { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; color: var(--bc); background: color-mix(in srgb, var(--bc) 15%, transparent); white-space: nowrap; }
.fs-jchip { font-size: 11px; background: var(--surface-2); border-radius: 10px; padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.fs-jchip.more { color: var(--muted); }
.fs-jchip.big { font-size: 12px; padding: 4px 4px 4px 10px; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.fs-jchip.big button { border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%; }
.fs-jchip.big button:hover { color: var(--danger); }
.fs-emptyrow { padding: 14px; font-size: 13px; color: var(--muted); }
@media (max-width: 1250px) { .fs-row { grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.6fr) 130px; } .fs-row .fs-pd, .fs-row .fs-ps { display: none; } .fs-brow { grid-template-columns: 96px minmax(200px, 1.6fr) minmax(120px, 1fr) 96px; } .fs-brow .fs-bw { display: none; } }
.jv-body.has-drawer .fs-row { grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.4fr); }
.jv-body.has-drawer .fs-row .fs-pd, .jv-body.has-drawer .fs-row .fs-ps, .jv-body.has-drawer .fs-row .fs-pb { display: none; }
.jv-body.has-drawer .fs-brow { grid-template-columns: 90px minmax(150px, 1fr) 90px; }
.jv-body.has-drawer .fs-brow .fs-bj, .jv-body.has-drawer .fs-brow .fs-bw { display: none; }
.jv-body.has-drawer .fs-drives { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* gavetas de disco / backup / locais */
.jd-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.jd-kind .fs-ic { color: var(--yellow); width: 16px; height: 16px; }
.jd-dt { display: inline-flex; align-items: center; gap: 5px; }
.jd-dt .fs-ic { width: 14px; height: 14px; }
.jd-grow { resize: none; overflow: hidden; min-height: 64px; }
.jd-list { display: flex; flex-direction: column; gap: 4px; }
.jd-li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 13px; min-width: 0; }
.jd-li:hover { border-color: #3a3a42; }
.jd-li b { font-weight: 600; }
.jd-li span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.jd-hint { font-size: 12px; color: var(--muted); line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jd-sec .jd-sp { flex: 1; }
.jd-sec .btn.small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.jd-bkh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 6px; }
.jd-bkh .fs-loc { font-size: 14px; padding: 6px 10px; }
.jd-bkh .fs-loc .fs-ic { width: 18px; height: 18px; }
.jd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jd-bkadd { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.jd-bkadd select { padding: 7px 30px 7px 10px; font-size: 13px; max-width: 100%; }
.jd-grid select { padding: 7px 30px 7px 10px; font-size: 13px; width: 100%; }
.jd-locs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jd-locs li { display: grid; grid-template-columns: 18px 1fr 1fr 28px; grid-template-areas: "ic dr k x" "ic p p d"; gap: 6px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.jd-locs li > .fs-ic { grid-area: ic; color: var(--yellow); align-self: start; margin-top: 8px; }
.jd-loc-dr { grid-area: dr; } .jd-loc-k { grid-area: k; }
.jd-locs li > .icon-btn { grid-area: x; }
.jd-loc-p { grid-area: p; }
.jd-locs li > .jd-sub-d { grid-area: d; justify-self: end; }
.jd-locs select, .jd-locs input { padding: 6px 8px; font-size: 12px; min-width: 0; width: 100%; }
.jd-locs select { padding-right: 26px; background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; }
.jd-locs .jd-sub-d { width: 104px; border-color: var(--line); background: var(--bg-2); }
.jd-locs .jd-sub-d:not(.has) { width: 36px; }
.jd-addrow { display: flex; align-items: center; gap: 6px; background: none; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); padding: 8px 10px; font-size: 13px; }
.jd-addrow:hover { color: var(--text); border-color: var(--muted); }
.jd-addrow svg { width: 15px; height: 15px; }
.jd-bks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jd-bks .jd-l { margin-right: 2px; }
@media (max-width: 1250px) { .fs-row { grid-template-columns: minmax(140px, 1fr) 96px minmax(170px, 1.6fr) 130px; } .fs-row .fs-pd { display: block; } }
.jd-locs li { grid-template-columns: 18px 1.25fr 1fr 28px; }

/* ===== revisão de vídeo ===== */
.jv-main.rv-mode { padding: 0; display: flex; flex-direction: column; }
.jv-main.rv-mode > .fs, .jv-main.rv-mode > .jv-empty { padding: 8px 16px 40px; }
.rv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.rv-card { display: flex; gap: 12px; text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; color: var(--text); min-width: 0; }
.rv-card:hover { border-color: #3a3a42; background: var(--surface); }
.rv-card.sel { border-color: var(--yellow); }
.rv-thumb { width: 92px; aspect-ratio: 16 / 10; border-radius: 8px; background: linear-gradient(135deg, #1d1d22, #0b0b0d); display: flex; align-items: center; justify-content: center; position: relative; flex: none; }
.rv-thumb svg { width: 26px; height: 26px; fill: var(--yellow); stroke: none; }
.rv-thumb span { position: absolute; left: 6px; bottom: 5px; font-size: 11px; font-weight: 800; color: var(--yellow-ink); background: var(--yellow); padding: 0 5px; border-radius: 3px; }
.rv-cinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: var(--muted); }
.rv-cinfo b { color: var(--text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-cinfo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-ctags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.rv-st { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; color: var(--sc); background: color-mix(in srgb, var(--sc) 15%, transparent); white-space: nowrap; }
.rv-mc { font-size: 11px; }
.rv-fs { font-size: 11px; }
.rv-fs.ok { color: var(--ok); }
.rv-fs.warn { color: var(--yellow); }
.rv-fs.gone { color: var(--muted); }
.rv-fs.prog { color: var(--text); }
.rv { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; height: 100%; }
.rv-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 10px 14px 12px; gap: 8px; }
.rv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rv-ht { display: flex; flex-direction: column; min-width: 0; }
.rv-ht b { font-size: 15px; display: flex; align-items: center; gap: 6px; }
.rv-ht span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-ver { font-size: 11px; font-weight: 800; color: var(--yellow-ink); background: var(--yellow); padding: 0 6px; border-radius: 4px; }
.rv-watch { display: flex; }
.rv-watch .jv-av { margin-left: -5px !important; border: 2px solid var(--bg) !important; }
.rv-head .btn.primary { margin: 0; padding: 9px 16px; }
.rv-head .btn.primary:disabled { opacity: .45; }
.rv-ok { color: var(--ok); }
.rv-stage { flex: 1; min-height: 160px; background: #000; border-radius: 10px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.rv-stage video { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.rv-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; background: radial-gradient(ellipse at center, #17171b, #000 75%); color: #f4f4f2; }
.rv-over.hidden { display: none; }
.rv-over b { font-size: 16px; }
.rv-over span { font-size: 13px; color: #8d8d96; }
.rv-prog { width: min(320px, 80%); height: 8px; background: #232328; border-radius: 4px; position: relative; overflow: visible; display: flex; align-items: center; }
.rv-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--yellow); border-radius: 4px; transition: width .3s; }
.rv-prog b { position: absolute; right: -44px; font-size: 12px; }
.rv-ctl { display: flex; align-items: center; gap: 10px; }
.rv-ctl #rvPlay svg { width: 22px; height: 22px; }
.rv-time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; min-width: 92px; }
.rv-tl { flex: 1; position: relative; height: 26px; cursor: pointer; display: flex; align-items: center; }
.rv-tl-bg { width: 100%; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.rv-tl-bg i { display: block; height: 100%; background: var(--yellow); width: 0; }
.rv-marks { position: absolute; inset: 0; pointer-events: none; }
.rv-marks i { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c); border: 2px solid var(--bg); pointer-events: auto; cursor: pointer; }
.rv-marks i:hover { transform: scale(1.3); }
.rv-vol { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.rv-vol input { width: 80px; }
.rv-vol svg { width: 18px; height: 18px; }
.rv-add { display: flex; gap: 8px; align-items: center; }
.rv-add input { flex: 1; padding: 10px 12px; font-size: 13px; }
.rv-add .btn.primary { margin: 0; padding: 10px 16px; }
.rv-at { font-size: 12px; font-weight: 700; color: var(--yellow-ink); background: var(--yellow); padding: 4px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.rv-closed { font-size: 13px; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.rv-side { border-left: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.rv-sh { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-2); z-index: 1; }
.rv-sh span { color: var(--muted); font-size: 12px; }
.rv-note { margin: 10px 12px 0; font-size: 12px; background: color-mix(in srgb, var(--yellow) 10%, transparent); border-left: 3px solid var(--yellow); padding: 8px 10px; border-radius: 6px; }
.rv-cms { display: flex; flex-direction: column; padding: 8px; gap: 4px; }
.rv-cm { display: flex; gap: 8px; padding: 8px; border-radius: 8px; border: 1px solid transparent; }
.rv-cm:hover { background: var(--surface); }
.rv-cm.now { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 7%, transparent); }
.rv-cm.done .rv-cmx { text-decoration: line-through; color: var(--muted); }
.rv-tc { border: 0; font-size: 11px; font-weight: 700; color: var(--yellow); background: color-mix(in srgb, var(--yellow) 12%, transparent); border-radius: 5px; padding: 3px 6px; height: fit-content; font-variant-numeric: tabular-nums; }
.rv-tc:hover { background: var(--yellow); color: var(--yellow-ink); }
.rv-cmb { flex: 1; min-width: 0; }
.rv-cmh { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.rv-cmh .jv-check { margin-left: auto; }
.rv-cmx { font-size: 13px; line-height: 1.45; margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.rv-cm:hover .jd-cm-del { opacity: 1; }
.rv-modal { position: absolute; inset: 0; z-index: 30; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.jobsview { position: relative; }
.rv-sheet { width: min(460px, 100%); background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.rv-sheet h3 { margin: 0; font-size: 17px; }
.rv-sheet label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.rv-sheet select, .rv-sheet input { width: 100%; }
.rv-drop { border: 1.5px dashed var(--line); background: var(--bg); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text); }
.rv-drop:hover { border-color: var(--yellow); }
.rv-drop.has { border-style: solid; border-color: var(--yellow); }
.rv-drop svg { width: 28px; height: 28px; color: var(--yellow); }
.rv-drop span { font-size: 12px; color: var(--muted); }
.rv-sheet .sb-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.rv-sheet .btn.primary { margin: 0; }
@media (max-width: 1100px) { .rv { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 220px; } .rv-side { border-left: 0; border-top: 1px solid var(--line); } }
.rv-head { flex-wrap: nowrap; }
.rv-head .rv-ht { flex: 1 1 auto; min-width: 0; }
.rv-head > .jd-sp { display: none; }
.rv-head .btn { white-space: nowrap; flex: none; }

/* ===== barra de voz estilo Discord ===== */
.voice-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 10px 10px 12px; }
.vb-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vb-sig { width: 18px; height: 18px; color: var(--ok); stroke-width: 2.4; flex: none; }
.vb-text { flex: 1; }
.vb-text b { font-size: 13px; }
.vb-text span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; }
.vb-timer { font-size: 12px; color: var(--ok); font-variant-numeric: tabular-nums; font-family: ui-monospace, 'SF Mono', Consolas, monospace; flex: none; }
.vb-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vb-btn { height: 34px; border-radius: 8px; border: 0; background: var(--surface-2); color: var(--text); display: flex; align-items: center; justify-content: center; }
.vb-btn:hover { background: #2e2e35; }
.vb-btn svg { width: 19px; height: 19px; }
.vb-btn.active { background: color-mix(in srgb, var(--yellow) 20%, var(--surface-2)); color: var(--yellow); }
.vb-btn.on { background: var(--danger); color: #fff; }
.vtimer { margin-left: auto; font-size: 11px; color: var(--ok); font-variant-numeric: tabular-nums; font-family: ui-monospace, 'SF Mono', Consolas, monospace; flex: none; }
.vrow:hover .vtimer { display: none; }
.sb-pop { position: fixed; z-index: 40; width: min(400px, calc(100vw - 24px)); max-height: min(560px, 72vh); display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.55); overflow: hidden; }
.sb-pop.hidden { display: none; }
.sb-pop-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.sb-pop-head > svg { width: 18px; height: 18px; color: var(--yellow); }
.sb-pop-head b { flex: 1; font-size: 14px; }
.sb-pane { display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow: auto; min-height: 0; }
.panel-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.panel-title svg { width: 18px; height: 18px; color: var(--yellow); }
.jd-time { width: auto !important; padding: 7px 8px !important; color-scheme: dark; }
:root[data-theme="claro"] .jd-time { color-scheme: light; }

/* busca no topo + ordenação das colunas */
.jv-hsearch { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; height: 36px; width: min(340px, 40%); margin-left: auto; transition: border-color .15s, box-shadow .15s; cursor: text; }
.jv-hsearch:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 18%, transparent); }
.jv-hsearch.hidden { display: none; }
.jv-hsearch svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.jv-hsearch:focus-within svg { color: var(--yellow); }
.jv-hsearch input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; height: 100%; font-size: 13px; box-shadow: none; }
.jv-hsearch input:focus { border: 0; }
.jv-hsearch input::-webkit-search-cancel-button { filter: invert(.6); }
.jv-hsearch kbd { font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-family: inherit; white-space: nowrap; }
.jv-hsearch:focus-within kbd { display: none; }
.jv-top .chat-title { flex: none; }
.jv-top .cv-tools { margin-left: 4px; }
.jv-sort { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; justify-self: start; }
.jv-sort:hover { color: var(--text); }
.jv-sort.on { color: var(--yellow); }
.jv-sort svg { width: 13px; height: 13px; stroke-width: 2.6; }
.jv-sort-clear { background: none; border: 0; color: var(--muted); font-size: 14px; padding: 0 4px; cursor: pointer; }
.jv-sort-clear:hover { color: var(--danger); }
.jv-fin { font-size: 11px; color: var(--ok); white-space: nowrap; flex: none; background: color-mix(in srgb, var(--ok) 12%, transparent); padding: 1px 7px; border-radius: 9px; }
.jv-group-hr { display: flex; align-items: center; gap: 10px; }
.jv-chip.sm { padding: 3px 10px; font-size: 11px; }
.rv-sent { margin-left: auto; font-size: 11px; color: var(--ok); }
.rv-drafts { margin: 8px 10px 0; font-size: 12px; color: var(--muted); background: var(--surface); border-radius: 8px; padding: 8px 10px; line-height: 1.4; }
.rv-dtag { font-size: 10px; color: var(--yellow); border: 1px dashed color-mix(in srgb, var(--yellow) 60%, transparent); border-radius: 6px; padding: 0 5px; }
.rv-cm.draft .rv-tc { background: transparent; border: 1px dashed color-mix(in srgb, var(--yellow) 60%, transparent); }

/* barras de envio e download */
.fc-prog { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fc-prog span { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-prog .fc-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 0; }
.fc-prog .fc-bar i { display: block; height: 100%; background: var(--yellow); border-radius: 3px; transition: width .25s; }
.fc-prog.up .fc-bar i { background: linear-gradient(90deg, var(--yellow), #ffb800); }
.btn.fc-cancel { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)); }
.btn.fc-cancel:hover { background: color-mix(in srgb, var(--danger) 20%, var(--surface-2)); }
.rv-upprog { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.rv-upprog .rv-prog { width: 100%; }
.rv-upprog .rv-prog i { width: var(--p, 0%); }
.rv-upprog > b { font-size: 13px; font-variant-numeric: tabular-nums; }
.rv-upprog > span { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.rv-over .btn { margin-top: 4px; }
.rv-over .btn.fc-cancel { color: #ff6b5e; }
.rv-up { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--surface-2); padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.rv-up b { font-variant-numeric: tabular-nums; color: var(--yellow); }
.rv-up button { background: none; border: 0; color: var(--danger); font-size: 11px; padding: 0 2px; cursor: pointer; }
.rv-x { font-size: 11px; color: var(--danger); cursor: pointer; padding: 1px 6px; border-radius: 6px; }
.rv-x:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); }
.rv-x[data-rvget] { color: var(--yellow); }
.rv-mini { display: inline-block; width: 50px; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; vertical-align: middle; margin-left: 4px; }
.rv-mini > i { display: block; height: 100%; width: var(--p, 0%); background: var(--yellow); }
.file-card .fc-prog { padding: 0 10px 9px; }

/* ================= FUNDO PERSONALIZADO (gradiente / imagem) + painéis de vidro ================= */
:root { --bg-rgb: 13 13 15; --bg2-rgb: 20 20 23; --glass: 1; --glass-2: 1; --app-blur: 0px; }
:root[data-theme="preto"] { --bg-rgb: 0 0 0; --bg2-rgb: 10 10 11; }
:root[data-theme="claro"] { --bg-rgb: 244 243 239; --bg2-rgb: 255 255 255; }
body.fx-bg::before { content: ''; position: fixed; inset: calc(var(--app-blur) * -2); background: var(--app-bg); filter: blur(var(--app-blur)); z-index: 0; pointer-events: none; }
body.fx-anim::before { inset: -12%; background-size: 140% 140%; animation: zpBgMove 28s ease-in-out infinite alternate; }
@keyframes zpBgMove { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(-3%, 2%) scale(1.06) rotate(2deg); } 100% { transform: translate(2%, -3%) scale(1.03) rotate(-2deg); } }
body.fx-bg .screen { z-index: 1; }
body.fx-bg #lobby { background: linear-gradient(120deg, transparent 0 62%, color-mix(in srgb, var(--yellow) 7%, transparent) 62% 63.4%, transparent 63.4%); }
body.fx-bg .side, body.fx-bg .panel { background: rgb(var(--bg2-rgb) / var(--glass-2)); backdrop-filter: blur(22px) saturate(1.2); }
body.fx-bg .stage, body.fx-bg .chatview, body.fx-bg .jobsview { background: rgb(var(--bg-rgb) / var(--glass)); backdrop-filter: blur(14px); }
body.fx-bg .me-bar, body.fx-bg .voice-bar { background: rgb(var(--bg-rgb) / calc(var(--glass) * 0.6)); }
body.fx-bg .jv-drawer, body.fx-bg .rv-side, body.fx-bg .jv-col, body.fx-bg .fs-drive, body.fx-bg .rv-card, body.fx-bg .fs-table { background-color: rgb(var(--bg2-rgb) / calc(var(--glass-2) * 0.92 + 0.08)); }
body.fx-bg .jv-row.jv-head, body.fx-bg .fs-row.fs-head { background: rgb(var(--bg-rgb) / 0.75); }
body.fx-bg .grid .tile { backdrop-filter: blur(10px); }
@media (prefers-reduced-motion: reduce) { body.fx-anim::before { animation: none; } }

/* configurações de aparência */
.look-preview { position: relative; height: 128px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); display: flex; gap: 8px; padding: 10px; isolation: isolate; flex: none; }
.lp-bg { position: absolute; inset: 0; z-index: -1; background: var(--bg); }
body.fx-bg .lp-bg { background: var(--app-bg); filter: blur(calc(var(--app-blur) / 3)); }
.lp-side { width: 26%; border-radius: 8px; background: rgb(var(--bg2-rgb) / var(--glass-2)); backdrop-filter: blur(10px); padding: 10px 8px; display: flex; flex-direction: column; gap: 7px; }
.lp-side i { height: 8px; border-radius: 4px; background: var(--surface-2); }
.lp-side i.on { background: var(--yellow); width: 70%; }
.lp-main { flex: 1; border-radius: 8px; background: rgb(var(--bg-rgb) / var(--glass)); backdrop-filter: blur(10px); padding: 10px; display: flex; flex-direction: column; gap: 7px; position: relative; }
.lp-top { display: flex; gap: 6px; align-items: center; }
.lp-top b { width: 40%; height: 9px; border-radius: 4px; background: var(--text); opacity: .8; }
.lp-top span { width: 16%; height: 9px; border-radius: 4px; background: var(--surface-2); margin-left: auto; }
.lp-card { background: var(--surface); border-radius: 6px; padding: 6px; display: flex; gap: 5px; }
.lp-card i { height: 7px; flex: 1; border-radius: 3px; background: var(--surface-2); }
.lp-card i.s { flex: .4; background: color-mix(in srgb, var(--yellow) 60%, transparent); }
.lp-btn { position: absolute; right: 10px; bottom: 10px; width: 56px; height: 18px; background: var(--yellow); clip-path: polygon(0 0, 100% 0, 100% 60%, 88% 100%, 0 100%); }
.bg-box { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.bg-box.hidden { display: none; }
.bg-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bg-preset { border: 0; background: none; padding: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; color: var(--muted); font-size: 11px; cursor: pointer; }
.bg-preset i { width: 100%; aspect-ratio: 1.5; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .15s, box-shadow .15s; }
.bg-preset:hover i { transform: translateY(-2px); }
.bg-preset.sel { color: var(--text); font-weight: 600; }
.bg-preset.sel i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--yellow); }
.bg-colors { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bg-color { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.bg-color input[type=color] { -webkit-appearance: none; appearance: none; width: 34px; height: 34px; border: 2px solid var(--line); border-radius: 50%; padding: 0; background: none; cursor: pointer; }
.bg-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.bg-color input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.bg-color.off { opacity: .35; pointer-events: none; }
.switch.mini { font-size: 12px; margin-left: auto; }
.range-row { display: grid; grid-template-columns: 110px 1fr 64px; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.range-row input[type=range] { width: 100%; }
.range-row b { font-size: 12px; color: var(--text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.range-row.hidden { display: none; }
.bg-imgrow { display: flex; gap: 12px; align-items: center; }
.bg-thumb { width: 120px; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--surface) center / cover; border: 1px solid var(--line); flex: none; }
.bg-thumb.empty { background-image: repeating-linear-gradient(45deg, var(--surface), var(--surface) 6px, var(--bg-2) 6px, var(--bg-2) 12px); }
.bg-imgbtns { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.swatch.custom { position: relative; display: grid; place-items: center; cursor: pointer; background: conic-gradient(from 0deg, #ff4d3d, #f8d905, #3ddc84, #4d8dff, #a77bff, #ff4d8d, #ff4d3d); }
.swatch.custom.sel { background: var(--sw); }
.swatch.custom svg { width: 14px; height: 14px; color: #fff; stroke-width: 3; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.look-reset { align-self: flex-start; color: var(--muted); }
.sheet { width: min(520px, calc(100vw - 32px)); }

/* ================= POLIMENTO GERAL ================= */
.chan, .vrow, .icon-btn, .btn, .seg-btn, .ctl, .vb-btn, .jv-chip, .jd-prio, .jd-person { transition: background-color .14s, color .14s, border-color .14s, transform .08s, box-shadow .14s; }
.btn:active, .ctl:active, .vb-btn:active, .icon-btn:active { transform: scale(0.96); }
.chan.sel { box-shadow: inset 3px 0 0 var(--yellow); }
.nav-jobs .chan.sel { background: color-mix(in srgb, var(--yellow) 12%, var(--surface-2)); }
.icon-btn:focus-visible, .btn:focus-visible, .seg-btn:focus-visible, .chan:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.modal { backdrop-filter: blur(6px); }
.sheet { box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.toast { display: flex; align-items: center; gap: 8px; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.toast::before { content: ''; width: 4px; align-self: stretch; border-radius: 2px; background: var(--yellow); }
::-webkit-scrollbar-thumb:hover { background-color: #3a3a42; }
.sec-head span { letter-spacing: .06em; }
.msg:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }

/* Ir para… (Ctrl+K) */
.qs-btn { margin-top: 12px; width: 100%; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; color: var(--muted); font-size: 13px; cursor: pointer; text-align: left; }
.qs-btn:hover { border-color: #3a3a42; color: var(--text); }
.qs-btn svg { width: 16px; height: 16px; flex: none; }
.qs-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-btn kbd { margin: 0; font-size: 10px; }
body.fx-bg .qs-btn { background: rgb(var(--bg-rgb) / .55); }
.qs { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.qs.hidden { display: none; }
.qs-box { width: min(620px, calc(100vw - 32px)); background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.55); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; animation: qsIn .14s ease-out; }
@keyframes qsIn { from { transform: translateY(-8px) scale(.98); opacity: 0; } }
.qs-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.qs-in svg { width: 20px; height: 20px; color: var(--yellow); flex: none; }
.qs-in input { flex: 1; border: 0; background: transparent; font-size: 16px; padding: 6px 0; }
.qs-in input:focus { border: 0; }
.qs-list { overflow: auto; padding: 6px; display: flex; flex-direction: column; }
.qs-it { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: transparent; border-radius: 9px; padding: 8px 10px; color: var(--text); cursor: pointer; }
.qs-it.sel, .qs-it:hover { background: var(--surface-2); }
.qs-it.sel { box-shadow: inset 3px 0 0 var(--yellow); }
.qs-ic { width: 28px; height: 28px; display: grid; place-items: center; background: var(--surface); border-radius: 8px; flex: none; font-size: 14px; }
.qs-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.qs-t b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-t small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }
.qs-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }

/* desenhar na revisão */
.rv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.rv-canvas.on { pointer-events: auto; cursor: crosshair; }
.rv-stage .rv-over { z-index: 3; }
.rv-dhint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4; background: rgba(0,0,0,.7); color: #fff; font-size: 12px; padding: 5px 12px; border-radius: 14px; pointer-events: none; white-space: nowrap; }
.rv-dhint.hidden { display: none; }
.rv-draw { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-dtog { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.rv-dtog svg { width: 16px; height: 16px; }
.rv-dtog:hover { border-color: #3a3a42; }
.rv-dtog.on { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); }
.rv-dtools { display: inline-flex; align-items: center; gap: 4px; transition: opacity .15s; }
.rv-dtools.off { opacity: .45; }
.rv-dt { width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.rv-dt svg { width: 18px; height: 18px; }
.rv-dt:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.rv-dt.on { background: var(--surface-2); color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 50%, transparent); }
.rv-dt:disabled { opacity: .35; cursor: default; }
.rv-dc { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bg); background: var(--dc); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.rv-dc.on { box-shadow: 0 0 0 2px var(--dc); }
.rv-dsep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.rv-dbadge { border: 0; background: color-mix(in srgb, var(--yellow) 14%, transparent); color: var(--yellow); font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 6px; cursor: pointer; margin-right: 2px; }
.rv-dbadge:hover { background: var(--yellow); color: var(--yellow-ink); }
.rv-head { flex-wrap: wrap; row-gap: 8px; }
.rv-head .rv-ht { flex: 1 1 220px; }
.rv-ht b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rv-ht b .rv-ver { display: inline-block; vertical-align: 2px; margin-left: 4px; }
.rv-acts { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.rv-acts .btn { margin: 0; }
/* Revisão: área separada */
.rv-tabs .seg-btn { display: inline-flex; align-items: center; gap: 6px; }
.rv-tabn { font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--muted); border-radius: 9px; padding: 0 7px; min-width: 20px; text-align: center; }
.seg-btn.active .rv-tabn { background: var(--bg); color: var(--text); }
.rv-tabn.hot { background: var(--yellow); color: var(--yellow-ink); }
.jobsview.is-rev .jv-tools { border-bottom-color: color-mix(in srgb, var(--yellow) 25%, var(--line)); }

/* ===== Minigames: 3D por baixo, efeitos e placar por cima ===== */
#game3d { position: absolute; z-index: 0; pointer-events: none; display: block; }
#game3d.hidden { display: none; }
#gameCanvas { position: relative; z-index: 1; }
.g-top, .g-help { position: relative; z-index: 2; }
.game.lobby #game3d { visibility: hidden; }
.g3d-btn { flex: none; height: 28px; min-width: 42px; padding: 0 10px; border-radius: 8px; border: 1px solid #34343c; background: #17171c; color: #9a9aa2; font: 800 12px/1 ZPImpact, ZP, sans-serif; letter-spacing: .06em; cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.g3d-btn:hover { border-color: #55555e; color: #fff; }
.g3d-btn.on { background: linear-gradient(135deg, #f8d905, #ffb800); color: #111; border-color: transparent; box-shadow: 0 0 0 1px rgba(248,217,5,.35), 0 4px 14px rgba(248,217,5,.25); }

/* vitrine 3D da sala */
.gl-stage { position: relative; height: clamp(190px, 30vh, 280px); margin-top: 14px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #0b0b0d; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.gl-stage.hidden { display: none; }
.gl-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gl-stage-tag { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 18px 26px; background: linear-gradient(90deg, rgba(8,8,10,.7), transparent 28%, transparent 72%, rgba(8,8,10,.7)); pointer-events: none; }
.gl-stage-tag .gst-vs { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); margin: 0; }
.gl-stage-tag .gst-p:last-child { align-items: flex-end; }
.gl-stage-tag .gst-p:first-child { align-items: flex-start; }
.gst-p { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.gst-p b { font-size: 20px; color: var(--c); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.gst-p i { font-style: normal; font-size: 12px; color: #d8d8de; }
.gst-p em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #111; background: #3ddc84; border-radius: 999px; padding: 2px 8px; margin-top: 3px; }
.gst-vs { font: 800 34px/1 ZPImpact, ZP, sans-serif; color: var(--yellow); text-shadow: 0 0 22px rgba(248,217,5,.45), 0 3px 0 #000; align-self: center; margin-bottom: 8px; }
.gst-vs.gst-wait { font: 600 14px/1 ZP, sans-serif; color: var(--muted); text-shadow: none; }

/* fim de partida */
.g-over { background: radial-gradient(700px 420px at 50% 40%, rgba(248,217,5,.10), transparent 70%), rgba(8,8,10,.8); backdrop-filter: blur(6px); }
.go-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 34px 24px; border-radius: 22px; background: linear-gradient(180deg, rgba(28,28,34,.92), rgba(14,14,18,.92)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); min-width: min(420px, 92vw); max-width: 92vw; animation: goIn .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes goIn { from { transform: translateY(18px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.go-hero { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 2px; }
.go-crown { font-size: 34px; line-height: 1; margin-bottom: -10px; z-index: 1; filter: drop-shadow(0 4px 10px rgba(248,217,5,.5)); animation: goCrown 1.6s ease-in-out infinite; }
@keyframes goCrown { 50% { transform: translateY(-4px) rotate(-6deg); } }
.go-hero.lost .go-crown { filter: grayscale(.3) drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.go-av { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent), 0 0 40px color-mix(in srgb, var(--c) 45%, transparent); overflow: visible; display: grid; place-items: center; background: #1b1b21; }
.go-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.go-av span { font: 800 44px/1 ZPImpact, ZP, sans-serif; color: var(--c); }
.go-av i { position: absolute; right: -6px; bottom: -4px; font-style: normal; font-size: 22px; width: 36px; height: 36px; display: grid; place-items: center; background: #0d0d10; border-radius: 50%; border: 2px solid var(--c); }
.g-over h2 { font: 800 46px/1.05 ZPImpact, ZP, sans-serif; background: linear-gradient(180deg, #fff 10%, #f8d905 60%, #ff9a2b); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0,0,0,.6)); text-align: center; }
.g-over p { font-size: 15px; }
.go-board { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 6px; }
.gb-row { display: grid; grid-template-columns: 34px auto 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); font-size: 14px; }
.gb-row em { font-style: normal; font-weight: 800; color: var(--muted); }
.gb-row b { color: var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-row strong { font: 800 20px/1 ZPImpact, ZP, sans-serif; color: #fff; }
.gb-row.win { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(255,255,255,.03)); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.gb-row.win em { color: #f8d905; }
.gb-row.me b::after { content: ' (você)'; color: var(--muted); font-weight: 500; font-size: 12px; }
.g-over-btns .btn { min-width: 170px; justify-content: center; }
/* barra de cima do jogo */
.g-top { background: linear-gradient(180deg, rgba(8,8,10,.95), rgba(8,8,10,.75)); border-bottom: 1px solid rgba(255,255,255,.05); }
.game .g-over { z-index: 5; }
.game .g-lobby { z-index: 6; }
.gb-row { text-align: left; }
.turn-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.turn-box > span { color: var(--muted); font-size: 12.5px; }
.turn-url { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.turn-url input { width: 100%; }
.turn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.turn-row small { color: var(--muted); }
.net-diag { margin: 0; padding: 10px 12px; border-radius: 10px; background: #0d0d10; border: 1px solid var(--line); font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; color: #d8d8de; max-height: 260px; overflow: auto; user-select: text; }
.cf-box { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 10px; background: rgba(248,217,5,.04); border: 1px solid rgba(248,217,5,.18); }
.cf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cf-box > span { color: var(--muted); font-size: 12.5px; }
.cf-info { color: var(--muted); }
.cf-info.ok { color: #3ddc84; }
.cf-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
@media (max-width: 640px) { .cf-fields { grid-template-columns: 1fr; } }
.turn-mode { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); }
.turn-mode > span { color: var(--text); font-weight: 600; font-size: 13px; }
.turn-mode .seg { align-self: flex-start; flex-wrap: wrap; }
.rv-cm[data-rvseek] { cursor: pointer; transition: background .12s, border-color .12s; }
.rv-cm[data-rvseek]:hover { border-color: color-mix(in srgb, var(--yellow) 35%, transparent); }
.rv-cm[data-rvseek]:hover .rv-tc { background: var(--yellow); color: #111; }
.rv-cm[data-rvseek]:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
/* efeitos sonoros: a lista rola quando tem muitos */
.sb-pop .sb-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sb-pop .sb-grid { flex: 1 1 auto; overflow-y: auto; min-height: 120px; padding-right: 6px; }
.sb-pop .sb-pane > :not(.sb-grid) { flex-shrink: 0; }
.sb-pop .sb-grid::-webkit-scrollbar { width: 8px; }
.sb-pop .sb-grid::-webkit-scrollbar-thumb { background: #3a3a44; border-radius: 4px; }
/* anexos esperando o Enter */
.chat-pending { border-top: 1px solid var(--line); padding: 10px 12px 2px; display: flex; flex-direction: column; gap: 8px; }
.chat-pending.hidden { display: none; }
.pend-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.pend { position: relative; flex: none; display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 6px 30px 6px 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.pend img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: #000; }
.pend-ic { width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; background: var(--bg); border-radius: 6px; }
.pend-meta { display: flex; flex-direction: column; min-width: 0; }
.pend-meta b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pend-meta small { color: var(--muted); font-size: 11px; }
.pend-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #2a2a32; color: #fff; font-size: 11px; cursor: pointer; display: grid; place-items: center; }
.pend-x:hover { background: #e5484d; }
.pend-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.pend-foot kbd { font: 600 11px/1 ui-monospace, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; color: var(--text); }
/* @: lista para marcar alguém */
.chatview { position: relative; }
.mention-pop { position: absolute; left: 12px; width: min(380px, calc(100% - 24px)); max-height: 280px; overflow-y: auto; z-index: 15; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.mention-pop.hidden { display: none; }
.mp-it { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; position: relative; }
.mp-it:hover, .mp-it.sel { background: var(--surface-2); }
.mp-it .avatar { flex: none; }
.mp-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--muted); font-size: 17px; }
.mp-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mp-ic.ia { background: linear-gradient(135deg, #b36bff, #6b8bff); color: #fff; }
.mp-tx { display: flex; flex-direction: column; min-width: 0; }
.mp-tx b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-tx small { font-size: 12px; color: var(--muted); }
/* zoom na imagem aberta */
.lb-body { overflow: hidden; position: relative; }
.lb-body img { transform-origin: center center; transition: transform .08s ease-out; cursor: zoom-in; user-select: none; will-change: transform; }
.lb-body img.zoomed { cursor: grab; border-radius: 0; }
.lb-body.panning img { cursor: grabbing; transition: none; }
.lb-zoom { display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 2px; }
.lb-zoom.hidden { display: none; }
.lb-zoom .icon-btn { width: 30px; height: 30px; font-size: 18px; font-weight: 600; color: #fff; }
.lb-zv { min-width: 56px; border: 0; background: transparent; color: #fff; font: 600 12px/1 ZP, sans-serif; cursor: pointer; padding: 6px 4px; border-radius: 6px; }
.lb-zv:hover { background: rgba(255,255,255,.08); }
.lb { width: min(1400px, calc(100vw - 48px)); height: calc(100vh - 48px); }

/* =====================================================================
   INTERFACE 2.8 — cards flutuantes de vidro, trilho de ícones, cantos grandes
   (as opções de Aparência continuam valendo: o fundo, o degradê e o vidro vêm de lá)
   ===================================================================== */
:root { --r-xl: 24px; --r-lg: 18px; --r-md: 13px; --disp: 'ZPSpace', 'ZP', sans-serif; --edge: rgb(255 255 255 / .07); --edge-hi: rgb(255 255 255 / .05); --panel-shadow: 0 18px 50px rgb(0 0 0 / .28); }
:root[data-theme="claro"] { --edge: rgb(255 255 255 / .9); --edge-hi: #fff; --panel-shadow: 0 16px 44px rgb(40 40 90 / .10); }
body { background: var(--bg); }
#call:not(.hidden) { padding: 44px 12px 12px; gap: 12px; }
#call > .resizer { margin: 0 -12px; z-index: 3; }
#call > .side, #call > .stage, #call > .chatview, #call > .jobsview, #call > .panel {
  border-radius: var(--r-xl); border: 1px solid var(--edge); overflow: hidden; padding-top: 0;
  box-shadow: var(--panel-shadow), inset 0 1px 0 var(--edge-hi);
  background: rgb(var(--bg2-rgb) / var(--glass-2)); backdrop-filter: blur(24px) saturate(1.2);
}
#call > .stage, #call > .jobsview, #call > .chatview { background: rgb(var(--bg-rgb) / var(--glass)); }
body:not(.fx-bg) #call > .stage, body:not(.fx-bg) #call > .chatview, body:not(.fx-bg) #call > .jobsview { background: var(--bg-2); }
body:not(.fx-bg) #call > .side, body:not(.fx-bg) #call > .panel { background: var(--bg-2); }
body:not(.fx-bg) #call:not(.hidden) { background: radial-gradient(900px 600px at 80% -10%, color-mix(in srgb, var(--yellow) 6%, transparent), transparent 70%); }

/* trilho de ícones */
.rail { width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 12px; border-radius: 22px; background: rgb(8 8 9 / .78); border: 1px solid var(--edge); box-shadow: var(--panel-shadow); backdrop-filter: blur(20px); }
:root[data-theme="claro"] .rail { background: #17161d; border-color: transparent; }
.rail-logo { width: 40px; height: 40px; border-radius: 13px; background: var(--yellow); color: var(--yellow-ink); display: grid; place-items: center; font: 700 16px/1 var(--disp); letter-spacing: -.04em; margin-bottom: 12px; -webkit-app-region: drag; }
.rail-btn { position: relative; width: 44px; height: 44px; border-radius: 14px; border: 0; background: transparent; color: rgb(244 244 242 / .5); display: grid; place-items: center; cursor: pointer; }
.rail-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover { background: rgb(255 255 255 / .07); color: #f4f4f2; }
.rail-btn.on, .rail-btn.active { background: rgb(255 255 255 / .11); color: #f4f4f2; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.rail-btn.on::before { content: ''; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--yellow); }
:root[data-theme="claro"] .rail-btn.on { background: var(--yellow); color: var(--yellow-ink); }
.rail-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #ff8a2b; border: 2px solid #0b0b0c; }
.rail-badge { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--yellow); color: var(--yellow-ink); font: 700 10px/18px var(--disp); text-align: center; }
.rail-dot.hidden, .rail-badge.hidden { display: none; }
.rail-sp { flex: 1; }
.rail-me { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: transparent; cursor: pointer; margin-top: 4px; }
.rail-me .avatar { --size: 40px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 30%, transparent); }
@media (min-width: 900px) { .side .nav-jobs { display: none; } }
@media (max-width: 899px) { .rail { display: none; } }

/* barra lateral */
.side-head { padding: 20px 18px 10px; }
.room-name { font: 600 19px/1.15 var(--disp); letter-spacing: -.02em; }
.qs-btn { border-radius: var(--r-md) !important; }
.sec-head { padding: 16px 10px 6px 12px; letter-spacing: .14em; }
.chan, .vrow { border-radius: 12px; min-height: 38px; padding: 7px 10px 7px 12px; }
.chan.sel { background: rgb(255 255 255 / .09); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05); }
:root[data-theme="claro"] .chan.sel { background: #17161d; color: #fff; }
.me-bar, .voice-bar { background: transparent !important; }
.voice-bar { margin: 0 10px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px !important; background: rgb(0 0 0 / .18) !important; }
:root[data-theme="claro"] .voice-bar { background: rgb(255 255 255 / .6) !important; }
.me-bar { border-top: 0; padding: 12px 14px 14px; }
.vb-btn { border-radius: 12px; height: 38px; }
.people li { border-radius: 12px; }

/* palco da chamada */
.stage-top { padding: 18px 20px 12px; min-height: 0; }
.stage-title { font: 600 26px/1.1 var(--disp); letter-spacing: -.03em; gap: 10px; }
.stage-title svg { width: 20px; height: 20px; }
.viewer { margin: 0 16px; border-radius: var(--r-lg); box-shadow: 0 12px 40px rgb(0 0 0 / .35); }
.grid { gap: 14px; padding: 16px 24px; }
.tile { width: 240px; height: 180px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02)); border-color: rgb(255 255 255 / .07); backdrop-filter: blur(12px); }
:root[data-theme="claro"] .tile { background: rgb(255 255 255 / .8); border-color: #fff; }
.tile .avatar { --size: 84px; }
.tile-name { font: 600 15px/1.2 var(--disp); }
.tile::after { display: none; }
.tile.speaking { border-color: color-mix(in srgb, var(--yellow) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--yellow) 40%, transparent), 0 0 36px color-mix(in srgb, var(--yellow) 18%, transparent); }
.tile.speaking .avatar { box-shadow: 0 0 0 4px rgb(var(--bg-rgb)), 0 0 0 7px var(--yellow), 0 0 32px color-mix(in srgb, var(--yellow) 50%, transparent); }
.grid.compact .tile { border-radius: 16px; height: 62px; }
.grid.compact .tile .avatar { --size: 36px; }
.grid.compact .tile.speaking .avatar { box-shadow: 0 0 0 2px rgb(var(--bg-rgb)), 0 0 0 4px var(--yellow); }
.controls { align-self: center; gap: 8px; padding: 8px; margin: 6px 0 16px; border-radius: 999px; background: rgb(8 8 9 / .72); border: 1px solid var(--edge); backdrop-filter: blur(18px); box-shadow: 0 14px 40px rgb(0 0 0 / .3); }
:root[data-theme="claro"] .controls { background: rgb(255 255 255 / .9); }
.ctl { height: 50px; min-width: 50px; border-radius: 999px; border: 0; background: rgb(255 255 255 / .08); }
:root[data-theme="claro"] .ctl { background: #eef0f6; }
.ctl:hover { background: rgb(255 255 255 / .14); }
.ctl.wide { padding: 0 20px; }
.ctl.danger { min-width: 58px; }
#call.no-voice .controls { display: none; }
.voice-lobby { gap: 12px; }

/* chat */
.cv-top { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.cv-top .chat-title, .chat-title { font: 600 20px/1.15 var(--disp); letter-spacing: -.02em; }
.chat-form { margin: 10px 12px 12px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgb(0 0 0 / .22); }
:root[data-theme="claro"] .chat-form { background: rgb(255 255 255 / .85); }
.chat-form input { border: 0 !important; background: transparent !important; }
.chat-form button[type=submit] { background: var(--yellow); color: var(--yellow-ink); border-radius: 12px; }
.chat-pending { border-top: 0; }
/* chat ao lado da chamada */
#call > .chatview.cv-side { flex: none; width: clamp(300px, 26vw, 380px); }
.chatview.cv-side #btnBackCall, .chatview.cv-side .cv-tools [data-openpane] { display: none; }
.chatview.cv-side .cv-top { padding: 16px 16px 10px; }
.chatview.cv-side .chat-log { padding: 8px 12px 10px; }
#btnChat.active { background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); }

/* trabalhos, HDs e revisão */
.jv-top .chat-title { font: 600 26px/1.1 var(--disp); }
.jv-hsearch { border-radius: 999px !important; }
.jv-views.seg, .seg.small { border-radius: 999px; }
.seg.small .seg-btn { border-radius: 999px; }
.jv-drawer { border-radius: var(--r-lg) 0 0 var(--r-lg); }

/* botões e formulários */
.btn { border-radius: 999px; }
.btn.primary { clip-path: none !important; }
.sheet, .modal .sheet { border-radius: var(--r-xl) !important; }
input, select, textarea { border-radius: 12px; }
.panel-head { padding: 16px 12px 10px 16px; }
.panel-title { font: 600 18px/1.1 var(--disp); }
.toast { border-radius: 14px !important; }
.grid:not(.compact) .tile { width: clamp(140px, calc((100% - 48px) / 3), 260px); height: auto; aspect-ratio: 4 / 3; min-height: 120px; }
.grid:not(.compact) .tile .avatar { --size: clamp(52px, 6vw, 84px); }
.chatview.cv-side #btnShot { display: none; }
.chatview.cv-side .chat-form { margin: 8px 10px 10px; gap: 0; }
.chatview.cv-side .chat-form input { margin: 0 2px; min-width: 0; }
/* resumo da semana no topo de Trabalhos */
.jd-dash { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; margin: 4px 0 16px; }
.jd-dash-off { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.jdd-hero { position: relative; overflow: hidden; padding: 22px 24px; border-radius: var(--r-xl); border: 1px solid var(--edge); background: linear-gradient(160deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02)); min-height: 230px; display: flex; flex-direction: column; }
:root[data-theme="claro"] .jdd-hero, :root[data-theme="claro"] .jdd-rev, :root[data-theme="claro"] .jdd-week { background: rgb(255 255 255 / .8); }
.jdd-shot { position: absolute; right: -50px; top: -14px; width: min(46%, 360px); height: 250px; padding: 26px 70px 22px 26px; border-radius: 24px; transform: rotate(-6deg); background: linear-gradient(135deg, color-mix(in srgb, var(--yellow) 85%, #ff8a2b), #ee5a24 50%, #2d1b69); box-shadow: 0 26px 50px rgb(0 0 0 / .35); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.jdd-shot b { font: 600 20px/1.15 var(--disp); text-shadow: 0 2px 12px rgb(0 0 0 / .35); }
.jdd-shot small { opacity: .85; font-size: 13px; }
.jdd-next { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.jdd-play { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(6deg); width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .22); backdrop-filter: blur(8px); color: #fff; font: 600 30px/1 var(--disp); cursor: pointer; }
.jdd-play:hover { background: rgb(255 255 255 / .34); }
.jdd-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); position: relative; }
.jdd-h { margin: 8px 0 0; font: 600 clamp(26px, 2.6vw, 40px)/1.05 var(--disp); letter-spacing: -.035em; max-width: 56%; position: relative; }
.jdd-stats { position: relative; margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; border-radius: 18px; }
.jdd-stats > div { padding: 12px 18px; background: rgb(10 10 10 / .5); backdrop-filter: blur(14px); border: 1px solid var(--edge); margin-right: -1px; }
.jdd-stats > div:first-child { border-radius: 16px 0 0 16px; }
.jdd-stats > div:last-child { border-radius: 0 16px 16px 0; }
:root[data-theme="claro"] .jdd-stats > div { background: rgb(255 255 255 / .85); }
.jdd-stats b { display: block; font: 600 28px/1 var(--disp); letter-spacing: -.03em; }
.jdd-stats span { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.jdd-stats i { width: 7px; height: 7px; border-radius: 50%; }
.jdd-stats .bad b { color: #ff6b5b; }
.jdd-x { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .35); color: #fff; opacity: 0; cursor: pointer; transition: opacity .15s; z-index: 2; }
.jdd-hero:hover .jdd-x { opacity: 1; }
.jdd-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.jdd-rev, .jdd-week { border-radius: var(--r-xl); border: 1px solid var(--edge); background: linear-gradient(160deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02)); padding: 16px; }
.jdd-rev { display: flex; gap: 14px; align-items: stretch; flex: 1; }
.jdd-th { width: 120px; flex: none; border-radius: 16px; background: linear-gradient(135deg, #2d1b69, #4d7cff); position: relative; min-height: 86px; }
.jdd-th span { position: absolute; left: 8px; bottom: 8px; font: 600 11px/1 ZP, sans-serif; color: #fff; background: rgb(0 0 0 / .45); padding: 4px 8px; border-radius: 999px; }
.jdd-rinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jdd-rinfo b { font: 600 17px/1.2 var(--disp); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jdd-rinfo small { color: var(--muted); font-size: 12.5px; }
.jdd-rinfo .btn { align-self: flex-start; margin-top: auto; }
.jdd-wh { display: flex; align-items: baseline; justify-content: space-between; }
.jdd-wh b { font: 600 17px/1 var(--disp); text-transform: capitalize; }
.jdd-wh small { color: var(--muted); font-size: 12px; }
.jdd-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.jdd-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jdd-day small { font-size: 11px; color: var(--muted); }
.jdd-day b { width: 100%; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 600 15px/1 var(--disp); background: rgb(255 255 255 / .05); }
.jdd-day.today b { background: var(--yellow); color: var(--yellow-ink); }
.jdd-day i { display: flex; gap: 3px; height: 5px; }
.jdd-day em { width: 5px; height: 5px; border-radius: 50%; }
.jdd-day em.due { background: #ff8a2b; }
.jdd-day em.rec { background: #3ddc84; }
@media (max-width: 1100px) { .jd-dash { grid-template-columns: 1fr; } .jdd-week { display: none; } }
.jdd-shot { width: min(38%, 330px); right: -36px; top: 18px; height: 210px; padding: 22px 54px 26px 22px; transform: rotate(-4deg); }
.jdd-play { left: auto; right: 54px; top: 18px; transform: rotate(4deg); width: 46px; height: 46px; font-size: 26px; }
.jdd-shot b { font-size: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jdd-h { max-width: 60%; }
.jdd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); width: 62%; gap: 0; }
.jdd-stats > div, .jdd-stats > div:first-child, .jdd-stats > div:last-child { border-radius: 0; margin: 0 -1px -1px 0; }
.jdd-stats { border-radius: 16px; overflow: hidden; }
@media (max-width: 1350px) { .jdd-stats b { font-size: 22px; } .jdd-stats > div { padding: 10px 14px; } }
:root[data-theme="claro"] .ctl.danger, .ctl.danger { background: var(--danger); color: #fff; }
:root[data-theme="claro"] .ctl.off, .ctl.off { background: var(--danger); color: #fff; }
:root[data-theme="claro"] .ctl.wide.on, .ctl.wide.on { background: var(--yellow); color: var(--yellow-ink); }
.grid.compact { gap: 8px; padding: 10px 16px 0; }
.grid.compact .tile { width: 132px; padding: 0 10px; }

/* ===== 2.9.2 ===== */
/* chat: Shift+Enter pula linha */
.chat-form { align-items: flex-end; }
.chat-form textarea { flex: 1; min-width: 0; margin: 0 4px; resize: none; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.45; padding: 9px 6px; max-height: 180px; overflow-y: auto; outline: none; }
.chat-form textarea::placeholder { color: var(--muted); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
/* um só perfil e configurações: o do trilho */
@media (min-width: 900px) { .side .me-bar { display: none; } }
@media (max-width: 899px) { .vb-mini { display: none; } }
.vb-mini { width: 32px; height: 32px; }
.vb-mini.off { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
/* presença */
.state-dot.away { background: #f5b301; }
.state-dot.off { background: #6b6b74; box-shadow: inset 0 0 0 2px #2a2a30; }
.rail-me .avatar { position: relative; }
.rail-me .state-dot { right: -1px; bottom: -1px; width: 12px; height: 12px; border-color: #0b0b0c; }
.pres-menu { position: fixed; z-index: 70; min-width: 220px; padding: 6px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 18px 50px rgb(0 0 0 / .5); display: flex; flex-direction: column; gap: 2px; }
.pres-menu .pm-h { padding: 8px 10px 6px; font: 600 14px/1.2 var(--disp); }
.pres-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; font: 500 13px ZP, sans-serif; cursor: pointer; }
.pres-menu button:hover { background: var(--surface-2); }
.pres-menu button.on { background: var(--surface); }
.pres-menu button small { color: var(--muted); font-weight: 400; }
.pres-menu .state-dot { position: static; flex: none; border: 0; width: 10px; height: 10px; }
.pres-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
/* cartões de aviso */
.ncards { position: fixed; top: 54px; right: 14px; z-index: 65; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 28px)); pointer-events: none; }
.ncard { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px; border: 1px solid var(--edge, var(--line)); background: rgb(var(--bg2-rgb) / .92); backdrop-filter: blur(20px); box-shadow: 0 16px 40px rgb(0 0 0 / .4), inset 3px 0 0 var(--c, var(--yellow)); color: var(--text); text-align: left; cursor: pointer; animation: ncIn .25s cubic-bezier(.2, 1.2, .4, 1) both; }
.ncard.out { animation: ncOut .2s ease-in both; }
@keyframes ncIn { from { transform: translateX(30px); opacity: 0; } }
@keyframes ncOut { to { transform: translateX(30px); opacity: 0; } }
.nc-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; font-size: 20px; border-radius: 12px; background: var(--surface); }
.nc-ic .avatar { --size: 36px; }
.nc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nc-tx b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-tx small { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nc-x { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; color: var(--muted); }
.nc-x:hover { background: var(--surface-2); color: var(--text); }
/* chamada privada tocando */
.call-pop { position: fixed; z-index: 80; top: 60px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 16px 18px 16px 16px; border-radius: 26px; background: rgb(var(--bg2-rgb) / .94); border: 1px solid var(--edge, var(--line)); backdrop-filter: blur(24px); box-shadow: 0 24px 70px rgb(0 0 0 / .55); animation: ncIn .3s cubic-bezier(.2, 1.2, .4, 1) both; min-width: 360px; }
.cp-av .avatar { --size: 64px; animation: cpPulse 1.4s ease-in-out infinite; }
@keyframes cpPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yellow) 55%, transparent); } 50% { box-shadow: 0 0 0 12px transparent; } }
.cp-tx { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cp-tx small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cp-tx b { font: 600 22px/1.15 var(--disp); }
.cp-tx span { color: var(--muted); font-size: 13px; }
.cp-btns { display: flex; gap: 10px; }
.cp-btns button { width: 54px; height: 54px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 20px; cursor: pointer; color: #fff; }
.cp-btns button svg { width: 24px; height: 24px; }
.cp-no { background: var(--danger); }
.cp-ok { background: #2fc46a; animation: cpPulse 1.4s ease-in-out infinite; }
.vb-btns { grid-template-columns: repeat(5, 1fr); }
.vb-mini { width: auto; height: 38px; }
@media (max-width: 899px) { .vb-btns { grid-template-columns: repeat(3, 1fr); } }
/* barra de cima (para mover a janela) */
.titlebar { height: 40px; z-index: 25; display: flex; align-items: center; gap: 10px; padding: 0 150px 0 14px; background: #0a0a0b; border-bottom: 1px solid rgb(255 255 255 / .05); color: #c9c9cf; font-size: 12.5px; user-select: none; }
body.mac .titlebar { padding-left: 84px; padding-right: 14px; }
:root[data-theme="claro"] .titlebar { background: #ecebf0; color: #3a3a42; border-color: rgb(0 0 0 / .06); }
.tb-logo { width: 20px; height: 20px; border-radius: 6px; background: var(--yellow); color: var(--yellow-ink); display: grid; place-items: center; font: 700 9.5px/1 var(--disp); letter-spacing: -.04em; }
.tb-app { font: 600 13px/1 var(--disp); letter-spacing: .02em; }
.tb-sep { width: 1px; height: 14px; background: currentColor; opacity: .2; }
.tb-where { opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.tb-grip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; opacity: .28; }
.tb-grip i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.titlebar:hover .tb-grip { opacity: .55; }
#call:not(.hidden) { padding-top: 50px; }

/* ===== 2.9.3 ===== */
/* ferramentas da mensagem: uma barrinha só de ícones */
.msg-tools { gap: 2px; padding: 3px; top: -14px; right: 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 8px 22px rgb(0 0 0 / .35); }
.msg-tools button { display: flex; align-items: center; gap: 6px; border: 0 !important; background: transparent !important; color: var(--muted); border-radius: 8px; padding: 5px 7px; font-size: 12px; }
.msg-tools button span { display: none; }
.msg-tools button:hover { background: var(--surface) !important; color: var(--text); }
.msg-tools button svg { width: 16px; height: 16px; }
.msg-tools .msg-del:hover { color: var(--danger); }
.msg.armed .msg-del { background: var(--danger) !important; color: #fff; }
.msg.armed .msg-del span { display: inline; }
.msg.pinned .msg-pin-b { color: var(--yellow); }
.msg:first-child .msg-tools { top: 2px; }
/* resposta citada dentro da mensagem */
.msg-quote { margin: 4px 0 4px 38px; max-width: min(520px, calc(100% - 50px)); padding: 6px 10px 7px 12px; border-radius: 10px; background: color-mix(in srgb, var(--qc, #888) 10%, rgb(255 255 255 / .03)); box-shadow: inset 3px 0 0 var(--qc, #888); cursor: pointer; display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.35; }
.msg-quote b { color: var(--qc); font-weight: 600; font-size: 12.5px; }
.msg-quote span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-quote:hover { background: color-mix(in srgb, var(--qc, #888) 18%, rgb(255 255 255 / .03)); }
.chatview.cv-side .msg-quote, .chat-log .msg-quote { margin-left: 38px; }
.msg-edited { margin-left: 6px; font-size: 11px; color: var(--muted); opacity: .8; white-space: nowrap; }
.msg.flash { animation: msgFlash 2s ease; }
@keyframes msgFlash { 0%, 30% { background: color-mix(in srgb, var(--yellow) 22%, transparent); } 100% { background: transparent; } }
.msg.pinned::after { content: ''; position: absolute; left: -2px; top: 8px; width: 3px; height: 14px; border-radius: 3px; background: var(--yellow); opacity: .7; }
/* barra de resposta / edição em cima da caixa de mensagem */
.chat-ctx { display: flex; align-items: center; gap: 10px; margin: 6px 12px -4px; padding: 8px 10px 12px 12px; border-radius: 14px 14px 0 0; background: rgb(255 255 255 / .04); border: 1px solid var(--line); border-bottom: 0; animation: ctxIn .16s ease; }
.chat-ctx .ctx-ic { width: 18px; height: 18px; color: var(--yellow); }
.ctx-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.35; }
.ctx-t b { font-weight: 600; color: var(--text); }
.ctx-t span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-t kbd, .vrec-hint kbd { font: 600 10.5px var(--disp); padding: 1px 5px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); }
.ctx-x { border: 0; background: transparent; color: var(--muted); width: 28px; height: 28px; border-radius: 8px; }
.ctx-x:hover { background: var(--surface); color: var(--text); }
.chat-form.editing { border-color: color-mix(in srgb, var(--yellow) 55%, transparent); }
@keyframes ctxIn { from { opacity: 0; transform: translateY(6px); } }
/* microfone quando a caixa está vazia; enviar quando tem texto */
.chat-form .voice-b { display: none; }
.chat-form.empty .voice-b { display: grid; background: var(--yellow); color: var(--yellow-ink); border-radius: 12px; }
.chat-form.empty .send-b { display: none; }
/* gravando áudio */
.chat-form { position: relative; }
.vrec { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 8px; border-radius: inherit; background: var(--bg-2); animation: ctxIn .15s ease; }
.vrec-x, .vrec-send { width: 38px; height: 38px; border: 0; border-radius: 12px; display: grid; place-items: center; flex: none; }
.vrec-x { background: transparent; color: var(--muted); }
.vrec-x:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.vrec-send { background: var(--yellow); color: var(--yellow-ink); }
.vrec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgb(255 77 77 / .6); animation: recPulse 1.2s infinite; flex: none; }
@keyframes recPulse { 70% { box-shadow: 0 0 0 9px rgb(255 77 77 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 77 77 / 0); } }
.vrec-time { font: 600 14px var(--disp); font-variant-numeric: tabular-nums; min-width: 38px; }
.vrec-bars { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.vrec-bars i { flex: 1; max-width: 4px; min-width: 2px; height: 12%; border-radius: 2px; background: var(--yellow); opacity: .85; transition: height .09s; }
.vrec-hint { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.chatview.cv-side .vrec-hint { display: none; }
/* mensagem de voz */
.vmsg { margin: 3px 0 2px 38px; display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 999px; background: rgb(255 255 255 / .05); border: 1px solid var(--line); width: min(340px, calc(100% - 46px)); }
.msg.mine .vmsg { background: color-mix(in srgb, var(--yellow) 10%, rgb(255 255 255 / .03)); border-color: color-mix(in srgb, var(--yellow) 25%, transparent); }
.vplay { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); display: grid; place-items: center; }
.vplay svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.vplay .vi-pause { display: none; fill: none; stroke: currentColor; stroke-width: 3; }
.vmsg.playing .vi-play { display: none; }
.vmsg.playing .vi-pause { display: block; }
.vwave { flex: 1; height: 28px; display: flex; align-items: center; gap: 2px; cursor: pointer; min-width: 60px; }
.vwave i { flex: 1; border-radius: 2px; background: currentColor; color: var(--muted); opacity: .55; min-height: 3px; transition: background .1s; }
.vwave i.on { background: var(--yellow); opacity: 1; }
.vtime { font: 500 12px var(--disp); font-variant-numeric: tabular-nums; color: var(--muted); min-width: 32px; text-align: right; }
.vspd { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; font: 600 11px var(--disp); padding: 2px 7px; }
.vspd:hover { color: var(--text); }
.vstat { font-size: 11px; color: var(--muted); }
.vstat:empty { display: none; }
.vmsg.vwait .vplay { background: var(--surface); color: var(--muted); }
.vmsg.vwait .vwave { opacity: .4; }
.vmsg.vwait .vspd { display: none; }
.chatview.cv-side .vmsg .vspd { display: none; }
/* prévia de link */
.lnk { margin: 6px 0 4px 38px; display: flex; flex-direction: column; width: min(360px, calc(100% - 46px)); border-radius: 14px; overflow: hidden; background: rgb(255 255 255 / .045); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.lnk:hover { border-color: color-mix(in srgb, var(--yellow) 45%, var(--line)); transform: translateY(-1px); }
.lnk-wait { height: 0; border: 0; margin: 0; }
.lnk-th { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.lnk-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lnk-drive .lnk-th { background: #15151a; }
.lnk-drive .lnk-th img { object-fit: contain; }
.lnk-play { position: absolute; left: 50%; top: 50%; width: 54px; height: 38px; transform: translate(-50%, -50%); border-radius: 12px; background: rgb(0 0 0 / .62); display: grid; place-items: center; backdrop-filter: blur(4px); transition: background .15s; }
.lnk-play svg { width: 20px; height: 20px; fill: #fff; stroke: none; }
.lnk:hover .lnk-play { background: #ff0033; }
.lnk-small { flex-direction: row; align-items: center; }
.lnk-noth { aspect-ratio: auto; width: 56px; height: 56px; flex: none; margin: 10px 0 10px 10px; border-radius: 12px; background: rgb(255 255 255 / .06); display: grid; place-items: center; color: var(--muted); }
.lnk-noth svg { width: 26px; height: 26px; }
.lnk-meta { padding: 9px 12px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lnk-meta small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.lnk-meta small svg { width: 13px; height: 13px; }
.lnk-yt .lnk-meta small svg { color: #ff3344; }
.lnk-meta b { font-weight: 600; font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lnk-meta span { font-size: 12px; color: var(--muted); }
/* mensagens fixadas */
.pin-bar { display: flex; align-items: center; gap: 10px; margin: 8px 14px 0; padding: 6px 6px 6px 10px; border-radius: 14px; background: rgb(255 255 255 / .045); border: 1px solid var(--line); animation: ctxIn .2s ease; }
.pin-ticks { display: flex; flex-direction: column; gap: 2px; align-self: stretch; justify-content: center; }
.pin-ticks i { width: 3px; flex: 1; max-height: 9px; border-radius: 2px; background: var(--muted); opacity: .35; }
.pin-ticks i.on { background: var(--yellow); opacity: 1; }
.pin-ic { width: 17px; height: 17px; color: var(--yellow); }
.pin-main { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 2px 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.pin-main b { font-size: 11.5px; color: var(--yellow); font-weight: 600; }
.pin-main span { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-main em { font-style: normal; color: var(--muted); }
.pin-list-b { width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); display: grid; place-items: center; }
.pin-list-b:hover { background: var(--surface); color: var(--text); }
.pin-list-b svg { width: 17px; height: 17px; }
.pin-pop { position: absolute; right: 14px; top: 132px; z-index: 16; width: min(400px, calc(100% - 28px)); max-height: 60%; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgb(0 0 0 / .5); overflow: hidden; animation: ctxIn .15s ease; }
.pp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pp-x { border: 0; background: transparent; color: var(--muted); width: 28px; height: 28px; border-radius: 8px; }
.pp-list { overflow-y: auto; padding: 6px; }
.pp-it { display: flex; align-items: flex-start; gap: 4px; border-radius: 10px; }
.pp-it:hover { background: var(--surface); }
.pp-go { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.pp-h { display: flex; gap: 8px; align-items: baseline; }
.pp-h time, .pp-go small { font-size: 11px; color: var(--muted); }
.pp-go span { color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pp-un { margin: 8px 6px 0 0; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--yellow); display: grid; place-items: center; }
.pp-un svg { width: 16px; height: 16px; }
.pp-un:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
/* busca no canal */
.chat-search { display: flex; align-items: center; gap: 6px; margin: 8px 14px 0; padding: 4px 4px 4px 12px; border-radius: 14px; background: rgb(255 255 255 / .06); border: 1px solid color-mix(in srgb, var(--yellow) 40%, var(--line)); animation: ctxIn .15s ease; }
.chat-search > svg { width: 17px; height: 17px; color: var(--muted); }
.chat-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); outline: none; padding: 7px 4px; font-size: 14px; }
.cs-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cs-nav { width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; }
.cs-nav:hover { background: var(--surface); color: var(--text); }
.cs-nav svg { width: 16px; height: 16px; }
.cs-results { position: absolute; left: 14px; right: 14px; top: 124px; z-index: 16; max-height: min(420px, 60%); overflow-y: auto; padding: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgb(0 0 0 / .5); display: flex; flex-direction: column; gap: 2px; }
.cs-it { text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text); }
.cs-it:hover, .cs-it.sel { background: var(--surface); }
.cs-it.sel { box-shadow: inset 2px 0 0 var(--yellow); }
.cs-h { display: flex; gap: 8px; align-items: baseline; }
.cs-h time { font-size: 11px; color: var(--muted); }
.cs-it span { color: color-mix(in srgb, var(--text) 85%, transparent); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cs-it mark { background: color-mix(in srgb, var(--yellow) 35%, transparent); color: var(--text); border-radius: 3px; padding: 0 1px; }
.cs-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }
:root[data-theme="claro"] .msg-tools, :root[data-theme="claro"] .pin-pop, :root[data-theme="claro"] .cs-results, :root[data-theme="claro"] .vrec { background: #fff; }
/* animação ao trocar de aba */
.view-in { animation: viewIn .26s cubic-bezier(.2, .7, .2, 1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: none; } }
.rail-btn, .chan { transition: background .18s, color .18s, transform .12s; }
.rail-btn:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .view-in, .chat-ctx, .pin-bar, .vrec, .chat-search { animation: none !important; } }
/* tela de entrada no estilo vidro */
#lobby { padding-top: 84px; }
body.fx-bg #lobby { background: none; }
#lobby .lobby-card { background: rgb(var(--bg2-rgb) / var(--glass-2, .9)); backdrop-filter: blur(26px) saturate(1.25); border: 1px solid rgb(255 255 255 / .08); border-radius: 28px; padding: 32px; box-shadow: 0 30px 80px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .06); animation: lobbyIn .5s cubic-bezier(.2, .7, .2, 1) both; }
#lobby .lobby-brand { animation: lobbyIn .5s .06s cubic-bezier(.2, .7, .2, 1) both; }
#lobby .brand-mark { filter: drop-shadow(0 12px 30px color-mix(in srgb, var(--yellow) 30%, transparent)); }
#lobby .lobby-title { font-family: var(--disp); letter-spacing: -.045em; }
#lobby .lobby-sub { font-size: 17px; }
#lobby input { border-radius: 14px; background: rgb(0 0 0 / .25); border-color: rgb(255 255 255 / .08); padding: 13px 14px; }
#lobby .btn.primary { border-radius: 14px; padding: 13px 18px; font-weight: 600; box-shadow: 0 10px 30px color-mix(in srgb, var(--yellow) 25%, transparent); }
#lobby .lobby-room { padding: 6px 12px 6px 10px; border-radius: 999px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .06); width: max-content; }
:root[data-theme="claro"] #lobby .lobby-card { border-color: #fff; box-shadow: 0 30px 80px rgb(40 40 90 / .15); }
:root[data-theme="claro"] #lobby input { background: rgb(255 255 255 / .8); border-color: rgb(0 0 0 / .08); }
@keyframes lobbyIn { from { opacity: 0; transform: translateY(14px); } }
/* sem conexão */
.offline { position: fixed; inset: 40px 0 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgb(6 6 8 / .55); backdrop-filter: blur(10px) saturate(.8); animation: offIn .3s ease; }
@keyframes offIn { from { opacity: 0; } }
.off-card { width: min(440px, 100%); text-align: center; padding: 34px 30px 26px; border-radius: 28px; background: rgb(var(--bg2-rgb) / .92); border: 1px solid rgb(255 255 255 / .08); box-shadow: 0 30px 90px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .06); animation: lobbyIn .4s cubic-bezier(.2, .7, .2, 1); }
.off-ic { position: relative; width: 84px; height: 84px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--yellow) 12%, transparent); color: var(--yellow); }
.off-ic svg { width: 40px; height: 40px; position: relative; }
.off-ic .off-slash { stroke: #ff5d5d; stroke-width: 2.4; }
.off-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--yellow) 40%, transparent); animation: offRing 2.4s ease-out infinite; }
.off-ring.r2 { animation-delay: 1.2s; }
@keyframes offRing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.off-card h2 { margin: 0 0 8px; font: 600 26px/1.1 var(--disp); letter-spacing: -.03em; }
.off-card p { margin: 0 auto 18px; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 34ch; }
.off-try { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / .05); border: 1px solid var(--line); font-size: 12.5px; margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.off-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--yellow) 25%, transparent); border-top-color: var(--yellow); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.off-tips { list-style: none; margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; background: rgb(0 0 0 / .2); text-align: left; font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.off-tips li::before { content: '•'; color: var(--yellow); margin-right: 8px; }
:root[data-theme="claro"] .offline { background: rgb(230 230 240 / .5); }
:root[data-theme="claro"] .off-card { border-color: #fff; }
:root[data-theme="claro"] .off-tips { background: rgb(0 0 0 / .04); }
.msg.armed-hover .msg-tools { display: flex; }
.msg.armed-hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.tb-sep:has(+ .tb-where:empty) { display: none; }

/* ===== 2.10: ZP Strike (sala, tela do jogo e resultado) ===== */
.strike-hub { width: min(880px, calc(100vw - 32px)) !important; max-height: calc(100vh - 80px); display: flex; flex-direction: column; }
.strike-hub #arenaTabs { margin-bottom: 14px; }
.hb-body { overflow-y: auto; min-height: 0; }
.hb-hero { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 18px; background: radial-gradient(500px 200px at 0% 0%, rgba(248,217,5,.18), transparent 70%), linear-gradient(135deg, #17171c, #0e0e12); border: 1px solid rgba(255,255,255,.06); margin-bottom: 14px; }
.hb-hero-t { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.hb-hero-t b { font: 700 28px/1 var(--disp); letter-spacing: -.03em; } .hb-hero-t b em { font-style: normal; color: var(--yellow); }
.hb-hero-t small { color: var(--muted); font-size: 13px; max-width: 46ch; }
.hb-me { display: flex; gap: 8px; }
.hb-me div { min-width: 74px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); text-align: center; display: flex; flex-direction: column; }
.hb-me b { font: 700 22px/1 var(--disp); } .hb-me small { font-size: 11px; color: var(--muted); margin-top: 3px; }
.hb-actions { display: flex; gap: 10px; margin-bottom: 16px; } .hb-actions .btn { flex: 1; justify-content: center; padding: 12px; border-radius: 14px; font-weight: 600; }
.hb-sub { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; font-weight: 700; }
.ar-btns { display: flex; gap: 6px; flex: none; }
.hb-rank { width: 100%; border-collapse: collapse; font-size: 13px; }
.hb-rank th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hb-rank td { padding: 9px 8px; border-bottom: 1px solid rgba(255,255,255,.04); white-space: nowrap; }
.hb-rank tr.me td { background: color-mix(in srgb, var(--yellow) 8%, transparent); }
.hb-elo { font: 700 15px var(--disp); color: var(--yellow); }
.hb-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hb-skin { padding: 10px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.hb-skin img { width: 100%; aspect-ratio: 9 / 5; object-fit: contain; }
.hb-skin small { color: var(--muted); font-size: 11.5px; }
.hb-skin.locked img { filter: grayscale(.85) brightness(.6); }
.hb-skin i, .sl-skin u { display: block; height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.hb-skin i u { display: block; height: 100%; background: var(--yellow); }
/* sala de espera */
.g-lobby.sl { padding: 18px clamp(14px, 3vw, 36px) 90px; background: radial-gradient(900px 420px at 15% -10%, rgba(248,217,5,.12), transparent 70%), radial-gradient(800px 500px at 100% 100%, rgba(255,138,43,.08), transparent 70%), #0b0b0d; }
.sl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sl-logo { width: 44px; height: 44px; border-radius: 14px; background: var(--yellow); color: #111; display: grid; place-items: center; font: 700 17px var(--disp); letter-spacing: -.04em; }
.sl-head h2 { margin: 0; font: 700 26px/1 var(--disp); letter-spacing: -.03em; } .sl-head h2 b { color: var(--yellow); }
.sl-head > div:nth-child(2) { flex: 1; } .sl-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.sl-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1050px) { .sl-grid { grid-template-columns: 1fr; } }
.sl-card { background: rgba(20,20,26,.82); border: 1px solid rgba(255,255,255,.07); border-radius: 22px; padding: 16px 18px; backdrop-filter: blur(14px); }
.sl h3 { margin: 4px 0 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sl-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sl-mode { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; border: 2px solid transparent; background: rgba(255,255,255,.05); color: var(--text); font: inherit; cursor: pointer; }
.sl-mode span { font-size: 24px; } .sl-mode b { font-size: 13px; }
.sl-mode.sel { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 12%, transparent); }
.sl-mode:disabled { cursor: default; } .sl-mode:disabled:not(.sel) { opacity: .5; }
.sl-desc { margin: 10px 2px 16px; color: var(--muted); font-size: 13px; }
.sl-maps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.sl-map { position: relative; padding: 6px 6px 8px; border-radius: 14px; border: 2px solid transparent; background: rgba(255,255,255,.05); color: var(--text); font: inherit; font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.sl-map canvas, .sl-rand { width: 100%; aspect-ratio: 16 / 9; border-radius: 9px; display: block; }
.sl-rand { display: grid; place-items: center; font-size: 30px; background: rgba(255,255,255,.04); }
.sl-map.sel { border-color: var(--yellow); }
.sl-map em { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--yellow); color: #111; }
.sl-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sl-players li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid transparent; }
.sl-players li.me { border-color: color-mix(in srgb, var(--yellow) 40%, transparent); }
.sl-players li.spec { opacity: .7; }
.sl-bot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); font-size: 17px; flex: none; }
.sl-name { flex: 1; min-width: 0; font-weight: 700; display: flex; flex-direction: column; font-size: 14px; }
.sl-name small { font-weight: 400; color: var(--muted); } .sl-name span { font-weight: 500; color: var(--muted); font-size: 12px; }
.sl-st { font-size: 12px; color: var(--muted); white-space: nowrap; } .sl-st.ok { color: #3ddc84; }
.sl-team { border: 0; border-radius: 999px; padding: 4px 10px; font: 600 12px var(--ui, inherit); cursor: pointer; }
.sl-team.t0 { background: rgba(248,217,5,.18); color: var(--yellow); } .sl-team.t1 { background: #26272c; color: #e8e8ee; border: 1px solid rgba(255,255,255,.15); }
.sl-team:disabled { cursor: default; }
.sl-lvl { background: #1c1c24; color: #eee; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 4px 6px; font: inherit; font-size: 12px; }
.sl-x { border: 0; background: transparent; color: var(--muted); width: 26px; height: 26px; border-radius: 8px; cursor: pointer; } .sl-x:hover { background: rgba(255,77,61,.15); color: #ff6b5b; }
.sl-addbot { display: inline-flex; gap: 4px; margin-left: auto; text-transform: none; letter-spacing: 0; }
.sl-wait { justify-content: center; color: var(--muted); font-size: 13px; background: transparent !important; border: 1px dashed rgba(255,255,255,.1) !important; }
.sl-tabs { margin-bottom: 12px; }
.sl-gun { display: flex; align-items: center; gap: 12px; padding: 6px 4px 12px; }
.sl-gun img { width: 58%; aspect-ratio: 9 / 5; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0,0,0,.5)); }
.sl-gunname { display: flex; flex-direction: column; gap: 4px; font-size: 20px; } .sl-gunname b { font: 700 22px var(--disp); } .sl-gunname small { font-size: 12.5px; color: var(--muted); }
.sl-guns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.sl-gbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 2px; border-radius: 12px; border: 2px solid transparent; background: rgba(255,255,255,.05); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.sl-gbtn span { font-size: 22px; } .sl-gbtn.sel { border-color: var(--yellow); } .sl-gbtn:disabled:not(.sel) { opacity: .5; cursor: default; }
.sl-bars { display: flex; flex-direction: column; gap: 6px; }
.sl-bar { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.sl-bar i { position: relative; height: 8px; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; }
.sl-bar b { position: absolute; inset: 0 auto 0 0; background: var(--yellow); border-radius: 5px; }
.sl-bar u { position: absolute; top: 0; bottom: 0; } .sl-bar u.up { background: #3ddc84; } .sl-bar u.down { background: rgba(255,77,61,.85); }
.sl-atts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.sl-atth { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.sl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-chip { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.sl-chip.sel { background: var(--yellow); color: #111; border-color: var(--yellow); font-weight: 700; }
.sl-att small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.sl-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.sl-skin { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; border-radius: 14px; border: 2px solid transparent; background: rgba(255,255,255,.04); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.sl-skin i { width: 100%; height: 26px; border-radius: 8px; }
.sl-skin em { font-style: normal; font-size: 11px; color: var(--muted); }
.sl-skin u { width: 100%; } .sl-skin u { background: linear-gradient(90deg, var(--yellow) 0 100%) no-repeat, rgba(255,255,255,.08); }
.sl-skin.sel { border-color: var(--yellow); } .sl-skin.locked { opacity: .55; cursor: default; }
.sl-note { color: var(--muted); font-size: 12px; margin: 10px 2px 0; }
.sl-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(14px, 3vw, 36px); background: rgba(10,10,14,.9); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.06); font-size: 13.5px; }
.sl-ready { min-width: 200px; justify-content: center; padding: 12px 18px; border-radius: 14px; font-weight: 700; }
/* resultado */
.go-card { max-height: calc(100vh - 100px); overflow-y: auto; }
.go-awards { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.go-aw { display: flex; flex-direction: column; align-items: center; min-width: 108px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.go-aw span { font-size: 22px; } .go-aw small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .go-aw b { font-size: 14px; } .go-aw em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.go-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.go-table th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; text-align: center; }
.go-table th:nth-child(2) { text-align: left; }
.go-table td { padding: 7px 8px; text-align: center; border-top: 1px solid rgba(255,255,255,.05); white-space: nowrap; }
.go-table td.gt-name { text-align: left; } .go-table td.gt-name b { color: var(--c); }
.go-table tr.win td { background: color-mix(in srgb, var(--yellow) 7%, transparent); }
.go-table tr.me td:first-child { box-shadow: inset 3px 0 0 var(--yellow); }

/* ===== 2.11 ===== */
.snd-box { margin: 6px 0 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.snd-row { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.snd-row select { grid-column: 2 / 4; }
.snd-row input[type=range] { accent-color: var(--yellow); width: 100%; }
.snd-row b { font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.snd-tests { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); }
/* mensagens privadas */
.chans.dms .chan.dm { gap: 8px; }
.chans.dms .chan.dm .avatar { position: relative; flex: none; }
.chans.dms .chan.dm .state-dot { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; border: 2px solid var(--bg-2); }
.chans.dms .chan.dm .state-dot.away { background: #f8b805; } .chans.dms .chan.dm .state-dot.off { background: #6b6b75; }
.dm-empty { list-style: none; font-size: 12px; color: var(--muted); padding: 4px 12px 8px; }
.dm-title { display: inline-flex; align-items: center; gap: 10px; }
.dm-title b { font: 600 19px/1.1 var(--disp); }
.dm-title small { font: 500 12px var(--ui, inherit); color: var(--muted); letter-spacing: 0; }
.dm-pick { position: fixed; z-index: 60; width: 270px; max-height: 60vh; overflow-y: auto; padding: 8px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 20px 50px rgb(0 0 0 / .5); display: flex; flex-direction: column; gap: 2px; animation: ctxIn .15s ease; }
.dmp-h { font-size: 12px; font-weight: 700; padding: 4px 8px 8px; }
.dm-pick button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--text); padding: 7px 8px; border-radius: 10px; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.dm-pick button:hover { background: var(--surface); }
.dm-pick button span { flex: 1; } .dm-pick small { color: var(--muted); font-size: 11px; }
.dm-pick p { margin: 6px 8px; font-size: 12px; color: var(--muted); }
.dmp-note { border-top: 1px solid var(--line); padding-top: 8px; }

/* logo da Zpixels no lugar do "ZP" */
.rail-logo, .tb-logo { background: #0d0d0f; border: 1px solid rgb(248 217 5 / .28); box-shadow: 0 6px 18px rgb(248 217 5 / .12), inset 0 1px 0 rgb(255 255 255 / .06); font-size: 0; color: transparent; }
.rail-logo::before, .tb-logo::before { content: ''; width: 64%; height: 64%; background: url('../assets/zp-mark.svg') center / contain no-repeat; }
.tb-logo { border-radius: 6px; }
.tb-logo::before { width: 70%; height: 70%; }
.sl-logo { font-size: 0 !important; color: transparent !important; display: grid; place-items: center; }
.sl-logo::before { content: ''; width: 62%; height: 62%; background: var(--yellow-ink, #111); -webkit-mask: url('../assets/zp-mark.svg') center / contain no-repeat; mask: url('../assets/zp-mark.svg') center / contain no-repeat; }

/* cartão de perfil: botões em grade, sem achatar */
#ucard .uc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 10px; }
#ucard .uc-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; height: auto; padding: 10px 12px; margin: 0; border-radius: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.15; white-space: nowrap; clip-path: none; min-width: 0; flex: none; width: 100%; }
#ucard .uc-actions .btn span { overflow: hidden; text-overflow: ellipsis; }
#ucard .uc-actions .btn svg { width: 17px; height: 17px; flex: none; }
#ucard .uc-actions .btn:not(.primary) { background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); color: var(--text); }
#ucard .uc-actions .btn:not(.primary):hover { background: rgb(255 255 255 / .09); }
#ucard .uc-actions .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
:root[data-theme="claro"] #ucard .uc-actions .btn:not(.primary) { background: rgb(0 0 0 / .04); border-color: rgb(0 0 0 / .08); }

/* ================= CONTA: entrar / criar senha ================= */
.auth-form { gap: 14px; }
.auth-lock { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--yellow) 7%, transparent); border: 1px solid color-mix(in srgb, var(--yellow) 22%, transparent); margin-bottom: 4px; }
.auth-lock svg { width: 22px; height: 22px; color: var(--yellow); flex: none; margin-top: 1px; }
.auth-lock span { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.auth-lock b { color: var(--text); font-size: 13.5px; }
.auth-lock em { font-style: normal; color: var(--text); opacity: .8; word-break: break-all; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 48px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0 !important; border-radius: 10px; background: transparent !important; color: var(--muted); display: grid; place-items: center; padding: 0; }
.pw-eye:hover, .pw-eye.on { color: var(--yellow); }
.pw-eye svg { width: 19px; height: 19px; }
.link-btn { border: 0; background: none; color: var(--muted); font-size: 13px; padding: 6px; align-self: center; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .2); }
.link-btn:hover { color: var(--text); }
.pw-meter { height: 4px; border-radius: 4px; background: rgb(255 255 255 / .07); overflow: hidden; margin-top: -4px; }
.pw-meter i { display: block; height: 100%; width: 0; border-radius: 4px; background: #ef4444; transition: width .2s, background .2s; }
.pw-meter i[data-n="2"] { background: #f59e0b; } .pw-meter i[data-n="3"] { background: #84cc16; } .pw-meter i[data-n="4"] { background: #22c55e; }
#lobbyHint.bad, #acctSync.bad { color: #ff7a6b; }
body:not(.has-cloud) .cloud-only { display: none !important; }
.acct-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: rgb(255 255 255 / .04); border: 1px solid var(--line); }
.acct-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--yellow) 14%, transparent); color: var(--yellow); flex: none; }
.acct-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acct-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-who span { font-size: 12px; color: #4ade80; }
.acct-pass { gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); }
.acct-pass .row { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-pass .row input { flex: 1 1 140px; min-width: 0; }
.acct-pass small { color: var(--muted); }
.acct-out { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.danger { background: transparent; color: #ff7a6b; border-color: rgb(255 122 107 / .35); }
.btn.danger:hover { background: rgb(255 122 107 / .1); }

/* ================= VERSÃO WEB ================= */
body.web .titlebar { display: none; }
body.web #call:not(.hidden) { padding-top: 12px; }
.m-tabs, .m-back, .m-scrim { display: none; }

/* ================= CELULAR ================= */
body.m { --tabs-h: 64px; --sa-t: env(safe-area-inset-top, 0px); --sa-b: env(safe-area-inset-bottom, 0px); overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body.m, body.m #call { height: 100dvh; }
body.m button, body.m .chan, body.m .vrow, body.m .people li { touch-action: manipulation; }
body.m input, body.m textarea, body.m select { font-size: 16px !important; } /* sem zoom ao digitar no iPhone */
body.m #call:not(.hidden) { padding: 0; gap: 0; display: block; position: fixed; inset: 0; overflow: hidden; }
body.m #call > .rail, body.m #call > .resizer, body.m #call > .panel { display: none !important; }
body.m #call > .side, body.m #call > .stage, body.m #call > .chatview, body.m #call > .jobsview {
  position: absolute; inset: 0; width: auto !important; border-radius: 0; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--bg) !important; animation: none;
}
body.m.m-home #call > :is(.stage, .chatview, .jobsview) { display: none !important; }
body.m:not(.m-home) #call > .side { display: none !important; }
body.m #call > :is(.side, .stage, .jobsview) { padding-bottom: calc(var(--tabs-h) + var(--sa-b)); }
body.m.m-kb #call > :is(.side, .stage, .jobsview) { padding-bottom: 0; }

/* abas embaixo */
body.m .m-tabs { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--tabs-h) + var(--sa-b)); padding: 6px 6px var(--sa-b); background: rgb(13 13 15 / .86); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); border-top: 1px solid rgb(255 255 255 / .07); }
body.m.m-chat .m-tabs, body.m.m-kb .m-tabs { display: none; }
body.m .m-tabs button { border: 0; background: none; color: rgb(244 244 242 / .5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; letter-spacing: .01em; border-radius: 14px; }
body.m .m-tabs .m-ic { position: relative; width: 52px; height: 30px; border-radius: 15px; display: grid; place-items: center; transition: background .2s; }
body.m .m-tabs svg { width: 22px; height: 22px; }
body.m .m-tabs button.on { color: var(--text); }
body.m .m-tabs button.on .m-ic { background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); }
body.m .m-badge { position: absolute; top: -3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--yellow); color: var(--yellow-ink); font: 700 10.5px/18px var(--disp); text-align: center; font-style: normal; box-shadow: 0 0 0 2px #0d0d0f; }
body.m .m-live { position: absolute; top: 1px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #0d0d0f, 0 0 10px #22c55e; }
body.m .m-badge.hidden, body.m .m-live.hidden { display: none; }
:root[data-theme="claro"] body.m .m-tabs { background: rgb(250 250 252 / .9); border-color: rgb(0 0 0 / .06); }
:root[data-theme="claro"] body.m .m-tabs button { color: rgb(20 20 30 / .5); }
:root[data-theme="claro"] body.m .m-tabs button.on { color: #111; }

/* lista (Conversas) */
body.m .side { display: flex; flex-direction: column; }
body.m .side-head { padding: calc(var(--sa-t) + 18px) 18px 8px; }
body.m .room-name { font-size: 26px; }
body.m .qs-btn { min-height: 44px; margin-top: 12px; }
body.m .qs-btn kbd { display: none; }
body.m .side-scroll { padding: 0 8px 12px; -webkit-overflow-scrolling: touch; }
body.m .side .nav-jobs { display: none; }
body.m .chan, body.m .vrow { min-height: 50px; font-size: 16px; padding: 10px 12px 10px 14px; }
body.m .chan.sel { background: transparent; box-shadow: none; }
body.m .chan:active, body.m .vrow:active, body.m .people li:active { background: rgb(255 255 255 / .07); }
body.m .sec-head { padding: 20px 8px 8px 14px; }
body.m .sec-head .icon-btn.mini { width: 36px; height: 36px; }
body.m .people li { min-height: 54px; }
body.m .me-bar { padding: 10px 14px; border-top: 1px solid var(--line); }
body.m .me-ctl .icon-btn { width: 42px; height: 42px; }
body.m .voice-bar { margin: 0 10px 8px; }
body.m .vb-btn { height: 44px; }

/* chat em tela cheia */
body.m .chatview { display: flex; flex-direction: column; }
body.m .cv-top { padding: calc(var(--sa-t) + 8px) 10px 8px 6px; min-height: calc(var(--sa-t) + 58px); gap: 6px; border-bottom: 1px solid var(--line); background: rgb(var(--bg2-rgb) / .92); position: relative; z-index: 3; }
body.m .m-back { display: grid; width: 44px; height: 44px; flex: none; }
body.m .m-back svg { width: 24px; height: 24px; }
body.m .chat-title { font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
body.m #btnBackCall span { display: none; }
body.m .chat-log { padding: 10px 6px 6px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.m .msg { padding-left: 10px; padding-right: 10px; transition: background .15s; }
body.m .msg:hover .msg-tools { display: none; }
body.m .msg.m-open { background: color-mix(in srgb, var(--yellow) 9%, transparent); border-radius: 14px; }
body.m .msg.m-swipe::before { content: '↩'; position: absolute; left: -34px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--yellow-ink); font-weight: 700; }
body.m .chat-form { padding: 8px 8px calc(8px + var(--sa-b)); gap: 4px; border-radius: 0; margin: 0; border-left: 0; border-right: 0; border-bottom: 0; }
body.m.m-kb .chat-form { padding-bottom: 8px; }
body.m .chat-form .icon-btn { width: 42px; height: 42px; flex: none; }
body.m #chatInput { min-height: 42px; max-height: 30vh; padding-top: 10px; padding-bottom: 10px; }
body.m .vrec-hint { display: none; }
/* ações da mensagem: menu que sobe de baixo */
body.m.m-sheet .m-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgb(0 0 0 / .5); animation: mFade .18s ease both; }
body.m .msg.m-open .msg-tools { display: flex !important; position: fixed; z-index: 60; left: 10px; right: 10px; top: auto; bottom: calc(10px + var(--sa-b)); flex-direction: column; gap: 2px; padding: 8px; border-radius: 22px; background: var(--bg-2); border: 1px solid rgb(255 255 255 / .08); box-shadow: 0 -10px 50px rgb(0 0 0 / .5); animation: mUp .22s cubic-bezier(.2, .8, .2, 1) both; }
body.m .msg.m-open .msg-tools button { justify-content: flex-start; gap: 14px; padding: 14px 16px; font-size: 16px; color: var(--text); border-radius: 14px; width: 100%; }
body.m .msg.m-open .msg-tools button span { display: inline; }
body.m .msg.m-open .msg-tools button svg { width: 21px; height: 21px; color: var(--muted); }
body.m .msg.m-open .msg-tools .msg-del, body.m .msg.m-open .msg-tools .msg-del svg { color: #ff7a6b; }
body.m .msg.m-open .msg-tools button:active { background: rgb(255 255 255 / .07) !important; }
@keyframes mUp { from { transform: translateY(40px); opacity: 0; } }
@keyframes mFade { from { opacity: 0; } }

/* chamada */
body.m .stage-top { padding: calc(var(--sa-t) + 10px) 14px 6px; }
body.m .stage-title { font-size: 18px; }
body.m .grid { padding: 10px; gap: 10px; justify-content: center; align-content: flex-start; overflow-y: auto; }
body.m .grid .tile { width: calc(50% - 5px); height: auto; aspect-ratio: 1 / 1.05; }
body.m .grid.compact .tile { width: calc(50% - 5px); height: 64px; aspect-ratio: auto; }
body.m .controls { padding: 10px 12px 14px; gap: 10px; flex-wrap: nowrap; }
body.m .controls .ctl { width: 56px; min-width: 56px; height: 56px; border-radius: 50%; padding: 0; }
body.m .controls .ctl.wide { width: auto; border-radius: 28px; padding: 0 18px; }
body.m .controls .ctl.wide span { display: none; }
body.m .voice-lobby { padding: 20px 16px !important; }
body.m .viewer { border-radius: 14px; margin: 0 10px; }

/* trabalhos */
body.m .jobsview .cv-top { flex-wrap: wrap; }
body.m .jv-hsearch { order: 3; flex: 1 1 100%; }
body.m .jv-tools { overflow-x: auto; flex-wrap: nowrap; padding-left: 10px; padding-right: 10px; scrollbar-width: none; }
body.m .jv-tools::-webkit-scrollbar { display: none; }
body.m .jv-main { overflow-x: auto; }
body.m .jv-drawer:not(.hidden) { position: fixed; inset: 0; z-index: 40; width: auto !important; max-width: none; border-radius: 0; padding-top: var(--sa-t); padding-bottom: var(--sa-b); background: var(--bg-2); }

/* janelas: viram folhas que sobem de baixo */
body.m .modal { place-items: end stretch; padding: 0; backdrop-filter: none; }
body.m .modal > .sheet, body.m #settings .sheet, body.m #profile .sheet { width: 100% !important; max-width: none !important; max-height: calc(100dvh - var(--sa-t) - 24px); border-radius: 24px 24px 0 0; padding: 10px 18px calc(18px + var(--sa-b)); border-left: 0; border-right: 0; border-bottom: 0; animation: mUp .25s cubic-bezier(.2, .8, .2, 1) both; overscroll-behavior: contain; }
body.m .modal > .sheet::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .18); margin: 0 auto 4px; flex: none; }
body.m .sheet-head { flex-wrap: wrap; gap: 10px; }
body.m #setTabs { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
body.m #setTabs .seg-btn { flex: 1 0 auto; padding: 9px 12px; }
body.m .ucard { width: 100% !important; border-radius: 24px 24px 0 0; padding-bottom: var(--sa-b); }
body.m #userCard { place-items: end stretch; }
body.m .toast { bottom: calc(var(--tabs-h) + var(--sa-b) + 14px); width: max-content; max-width: calc(100vw - 32px); border-radius: 14px; text-align: center; }
body.m.m-chat .toast { bottom: calc(90px + var(--sa-b)); }
body.m .qs { padding-top: calc(var(--sa-t) + 10px); }
body.m .qs-box { width: calc(100vw - 20px); }
body.m .qs-foot { display: none; }

/* tela de entrada no celular */
body.web #lobby { min-height: 100dvh; position: relative; }
@media (max-width: 760px) {
  body.web #lobby { display: flex; flex-direction: column; justify-content: flex-start; gap: 22px; padding: calc(env(safe-area-inset-top, 0px) + 36px) 18px calc(env(safe-area-inset-bottom, 0px) + 28px); overflow-y: auto; }
  body.web #lobby .brand-mark { width: 54px; height: 54px; margin-bottom: 18px; }
  body.web #lobby .lobby-title { font-size: 52px; }
  body.web #lobby .lobby-sub { font-size: 15px; margin-top: 12px; }
  body.web #lobby .lobby-card { padding: 20px; border-radius: 24px; max-width: none; }
  body.web #lobby input { font-size: 16px; padding: 14px; }
  body.web #lobby .btn.primary { padding: 15px 18px; font-size: 16px; }
  body.web .lobby-foot { position: static; text-align: center; margin-top: auto; }
}
body.m .ncards { top: calc(var(--sa-t) + 8px); left: 10px; right: 10px; width: auto; }
body.m .ncards .ncard:not(:first-child) { display: none; }
body.m .ncard { padding: 10px 12px; border-radius: 18px; }
body.m .vb-btns { display: none; }
body.m .jv-hsearch kbd, body.m .jobsview kbd { display: none; }
body.m .jdd-hero { padding: 18px; min-height: 0; }
body.m .jdd-shot { position: relative; right: auto; top: auto; width: auto; height: auto; min-height: 96px; transform: none; padding: 16px 18px; margin: -4px -4px 16px; border-radius: 18px; }
body.m .jdd-shot b { font-size: 17px; }
body.m .jdd-stats { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 0; }
body.m .jdd-stats > div { margin: 0 -1px -1px 0; border-radius: 0 !important; padding: 10px 14px; }
body.m .jdd-stats > div:nth-child(1) { border-radius: 14px 0 0 0 !important; }
body.m .jdd-stats > div:nth-child(2) { border-radius: 0 14px 0 0 !important; }
body.m .jdd-stats > div:nth-child(3) { border-radius: 0 0 0 14px !important; }
body.m .jdd-stats > div:nth-child(4) { border-radius: 0 0 14px 0 !important; }
body.m .jd-dash { grid-template-columns: 1fr !important; }