:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --panel: #12151a;
  --panel-2: #181c22;
  --line: #262c35;
  --text: #f5f7fa;
  --muted: #9199a5;
  --green: #53fc18;
  --green-dark: #2bc400;
  --danger: #ff5d6c;
  --card-min: 285px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% -10%, rgba(83, 252, 24, .08), transparent 28rem),
    var(--bg);
  color: var(--text);
  font: 14px/1.45 Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: rgba(11, 13, 16, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 11px; background: var(--green); color: #081005;
  font-weight: 900; letter-spacing: -.04em; box-shadow: 0 0 28px rgba(83, 252, 24, .15);
}
.brand strong, .brand span { display: block; }
.brand strong { font-size: 17px; }
.brand span { color: var(--muted); font-size: 12px; }

.stats { display: flex; align-items: center; gap: 26px; }
.stats div { min-width: 58px; text-align: center; }
.stats strong, .stats span { display: block; }
.stats strong { font-size: 22px; line-height: 1.05; }
.stats span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.top-actions { display: flex; justify-content: flex-end; gap: 9px; }

.button, .icon-button, .text-button, .segmented button {
  border: 0; color: var(--text); cursor: pointer; transition: .18s ease;
}
.button {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 15px; border-radius: 9px; text-decoration: none; font-weight: 700;
}
.button.primary { background: var(--green); color: #071005; }
.button.primary:hover { background: #75ff45; transform: translateY(-1px); }
.button.ghost { background: var(--panel-2); border: 1px solid var(--line); }
.button.ghost:hover { border-color: #3a424e; background: #20252d; }

main { padding: 20px 24px 42px; }
.controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px;
  padding: 14px 16px; margin-bottom: 20px;
  background: rgba(18, 21, 26, .8); border: 1px solid var(--line); border-radius: 13px;
}
.control-group { display: flex; align-items: center; gap: 12px; }
.control-label { color: var(--muted); font-size: 12px; }
.segmented { display: flex; padding: 3px; background: #090b0e; border: 1px solid var(--line); border-radius: 9px; }
.segmented button { min-width: 45px; padding: 5px 9px; border-radius: 6px; background: transparent; color: var(--muted); }
.segmented button.active { background: var(--panel-2); color: var(--green); box-shadow: 0 1px 3px #000; }
.toggle-row { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle {
  position: relative; flex: 0 0 36px; width: 36px; height: 20px; border-radius: 20px;
  background: #303640; border: 1px solid #3d4551; transition: .2s ease;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #b8bec8; transition: .2s ease;
}
.toggle-row input:checked + .toggle { background: rgba(83, 252, 24, .2); border-color: var(--green-dark); }
.toggle-row input:checked + .toggle::after { transform: translateX(16px); background: var(--green); }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { font-size: 12px; }
.toggle-row small { color: var(--muted); font-size: 10px; }
.rotation-clock { margin-left: auto; color: var(--muted); font-size: 12px; }
.rotation-clock strong { color: var(--green); font-variant-numeric: tabular-nums; }

.notice {
  margin: -6px 0 18px; padding: 11px 14px; border-radius: 9px;
  color: #ffd79a; background: rgba(255, 171, 64, .08); border: 1px solid rgba(255, 171, 64, .22);
}
.loading-state, .empty-state { min-height: 48vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.loading-state span, .empty-state p { color: var(--muted); }
.spinner { width: 34px; height: 34px; margin-bottom: 14px; border: 3px solid #2b313a; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 50%; background: var(--panel); color: var(--green); font-size: 20px; }
.empty-state h1 { margin: 4px 0 0; font-size: 23px; }
.empty-state p { margin: 8px 0 20px; }

.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr));
  gap: 12px;
}
.live-card { min-width: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.live-card:hover { border-color: #3a424d; }
.preview-button { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #050607; cursor: pointer; overflow: hidden; }
.player-slot, .player-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.player-slot iframe { border: 0; pointer-events: none; background: #000; }
.preview-overlay { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 8px; background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 38%, transparent); pointer-events: none; }
.live-badge, .expand-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 6px; color: #fff; background: rgba(4,5,6,.76); backdrop-filter: blur(8px); font-size: 10px; font-weight: 800; }
.live-badge i { width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #ff4052; box-shadow: 0 0 0 3px rgba(255,64,82,.16); }
.expand-badge { opacity: 0; transform: translateY(-3px); transition: .18s ease; }
.live-card:hover .expand-badge { opacity: 1; transform: none; }
.live-card footer { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.live-card footer > div:first-child { min-width: 0; }
.channel-name, .stream-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.channel-name { font-size: 13px; }
.stream-title { color: var(--muted); font-size: 11px; margin-top: 2px; }
.viewer-count { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.viewer-count span { color: var(--green); font-size: 9px; }
.viewer-count strong { color: #dce1e8; }

.drawer, .viewer-modal, .usage-modal { position: fixed; inset: 0; z-index: 60; pointer-events: none; visibility: hidden; }
.drawer.open, .viewer-modal.open, .usage-modal.open { pointer-events: auto; visibility: visible; }
.drawer-backdrop, .viewer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); opacity: 0; transition: .22s ease; backdrop-filter: blur(5px); }
.drawer.open .drawer-backdrop, .viewer-modal.open .viewer-backdrop, .usage-modal.open .viewer-backdrop { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; width: min(520px, 100%); height: 100%;
  display: flex; flex-direction: column; background: #101318; border-left: 1px solid var(--line);
  transform: translateX(100%); transition: .25s ease;
}
.drawer.open .drawer-panel { transform: none; }
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px; border-bottom: 1px solid var(--line); }
.drawer-header h2 { margin: 0; font-size: 20px; }
.drawer-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.icon-button { width: 38px; height: 38px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); font-size: 24px; line-height: 1; }
.icon-button:hover { background: #242a32; }
.channel-form { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.channel-form label { display: block; margin-bottom: 7px; font-weight: 700; }
.channel-form > div { display: flex; gap: 8px; }
.channel-form input { min-width: 0; flex: 1; height: 42px; padding: 0 12px; color: var(--text); background: #090b0e; border: 1px solid var(--line); border-radius: 9px; outline: none; }
.channel-form input:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(83,252,24,.07); }
.channel-form small { display: block; margin-top: 7px; color: var(--muted); }
.manager-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 22px; border-bottom: 1px solid var(--line); }
.manager-toolbar > div { display: flex; gap: 11px; }
.text-button { padding: 0; background: transparent; color: #aab1bc; font-size: 12px; }
.text-button:hover { color: #fff; }
.text-button.danger:hover { color: var(--danger); }
.file-button { cursor: pointer; }
.channel-list { flex: 1; overflow: auto; padding: 10px 22px 24px; }
.channel-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #20252c; }
.channel-row .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4b525d; }
.channel-row.online .status-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(83,252,24,.08); }
.channel-row strong, .channel-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-row small { color: var(--muted); font-size: 10px; }
.channel-row button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: #777f8b; cursor: pointer; }
.channel-row button:hover { background: rgba(255,93,108,.1); color: var(--danger); }

.viewer-panel { position: absolute; inset: 3vh 3vw; display: flex; flex-direction: column; background: #080a0d; border: 1px solid #303640; border-radius: 13px; overflow: hidden; opacity: 0; transform: scale(.98); transition: .2s ease; }
.viewer-modal.open .viewer-panel { opacity: 1; transform: none; }
.viewer-panel header { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 12px 9px 17px; background: #111419; border-bottom: 1px solid var(--line); }
.viewer-panel header > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.viewer-panel header strong, .viewer-panel header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-panel header small { color: var(--muted); }
.live-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #ff4052; box-shadow: 0 0 0 4px rgba(255,64,82,.12); }
.viewer-content { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 350px; }
.viewer-frame { position: relative; min-width: 0; min-height: 0; background: #000; }
.viewer-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


.interaction-panel {
  min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 20px;
  overflow-y: auto; background: #101318; border-left: 1px solid var(--line);
}
.interaction-heading > span { display: block; color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.interaction-heading strong { display: block; margin-top: 6px; font-size: 17px; line-height: 1.25; }
.interaction-heading small { display: block; margin-top: 6px; color: var(--muted); }
.chat-form { display: flex; flex-direction: column; gap: 8px; }
.chat-form label { font-size: 12px; font-weight: 800; }
.chat-form textarea {
  width: 100%; min-height: 122px; resize: vertical; padding: 12px; color: var(--text);
  background: #080a0d; border: 1px solid var(--line); border-radius: 10px; outline: none;
  font: inherit; line-height: 1.45;
}
.chat-form textarea:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(83,252,24,.07); }
.chat-form-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.chat-form-meta .near-limit { color: #ffd166; }
.chat-form .button { width: 100%; margin-top: 4px; }
.chat-status { padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: #0c0f13; font-size: 12px; }
.chat-status.success { color: #b8ff9d; border-color: rgba(83,252,24,.25); background: rgba(83,252,24,.07); }
.chat-status.error { color: #ffb3bb; border-color: rgba(255,93,108,.28); background: rgba(255,93,108,.07); }
.chat-status.warning { color: #ffd79a; border-color: rgba(255,171,64,.28); background: rgba(255,171,64,.07); }
.chat-status.loading { color: #cbd1d9; }
.chat-permission { padding: 15px; border: 1px solid rgba(255,171,64,.25); border-radius: 11px; background: rgba(255,171,64,.07); }
.chat-permission strong, .chat-permission span { display: block; }
.chat-permission strong { color: #ffd79a; }
.chat-permission span { margin: 6px 0 13px; color: #c4a675; font-size: 12px; }
.chat-permission .button { width: 100%; }
.official-action { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.official-action .button { width: 100%; }
.official-action small { display: block; margin-top: 8px; color: var(--muted); text-align: center; }

body.modal-open { overflow: hidden; }
body.players-paused .live-card { opacity: .65; }

@media (max-width: 950px) {
  .topbar { grid-template-columns: 1fr auto; }
  .stats { grid-row: 2; grid-column: 1 / -1; justify-content: center; padding-top: 8px; border-top: 1px solid #20252c; }
  .controls { align-items: flex-start; }
  .rotation-clock { width: 100%; margin-left: 0; }
}
@media (max-width: 620px) {
  .topbar { padding: 10px 14px; gap: 12px; }
  .brand span, #refreshButton { display: none; }
  .top-actions .button { min-height: 36px; padding: 0 11px; font-size: 12px; }
  main { padding: 14px 10px 30px; }
  .controls { padding: 12px; gap: 13px; }
  .control-group, .toggle-row { width: 100%; justify-content: space-between; }
  .toggle-row { justify-content: flex-start; }
  .viewer-panel { inset: 0; border: 0; border-radius: 0; }
  .viewer-panel header small, .viewer-panel .button { display: none; }
  .drawer-header, .channel-form, .manager-toolbar, .channel-list { padding-left: 15px; padding-right: 15px; }
}

/* v1.4 — autenticação individual da Kick */
.top-actions { align-items: center; flex-wrap: wrap; }
.account-chip {
  min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 4px 6px 4px 5px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--panel);
}
.account-chip img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; background: #080a0d; }
.account-chip span { min-width: 0; max-width: 150px; }
.account-chip strong, .account-chip small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account-chip strong { font-size: 12px; }
.account-chip small { color: var(--green); font-size: 10px; }
.account-chip button {
  min-height: 30px; padding: 0 8px; border: 0; border-radius: 7px;
  color: var(--muted); background: transparent; cursor: pointer;
}
.account-chip button:hover { color: #fff; background: #242a32; }
.button.kick-login { background: var(--green); color: #071005; }
.button.kick-login:hover { background: #75ff45; transform: translateY(-1px); }
.button:disabled { opacity: .48; cursor: not-allowed; transform: none !important; }

.auth-gate {
  min-height: calc(100vh - 150px); display: flex; flex-direction: column; align-items: center; justify-content: center;
  max-width: 680px; margin: 0 auto; text-align: center;
}
.auth-icon {
  width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 18px;
  border-radius: 18px; color: #071005; background: var(--green); font-size: 32px; font-weight: 950;
  box-shadow: 0 0 45px rgba(83, 252, 24, .18);
}
.auth-gate h1 { margin: 0; font-size: clamp(25px, 4vw, 38px); }
.auth-gate > p { max-width: 590px; margin: 10px 0 22px; color: var(--muted); font-size: 15px; }
.auth-gate > small { max-width: 590px; margin-top: 18px; color: #717a87; }
.setup-help {
  max-width: 620px; margin-top: 8px; padding: 16px 18px; border: 1px solid rgba(255, 171, 64, .25);
  border-radius: 12px; color: #ffd79a; background: rgba(255, 171, 64, .07);
}
.setup-help strong, .setup-help span { display: block; }
.setup-help span { margin-top: 5px; color: #c4a675; }
.setup-help code { color: #fff; }
body.auth-required .controls,
body.auth-required .loading-state,
body.auth-required .empty-state,
body.auth-required .live-grid { display: none !important; }
.notice.success { color: #b8ff9d; background: rgba(83,252,24,.07); border-color: rgba(83,252,24,.22); }

@media (max-width: 1180px) {
  .topbar { grid-template-columns: minmax(180px, 1fr) auto; }
  .stats { order: 3; grid-column: 1 / -1; justify-content: center; padding-top: 8px; border-top: 1px solid #20252c; }
}
@media (max-width: 760px) {
  .account-chip span { max-width: 95px; }
  .account-chip button { display: none; }
  #manageButton { display: none; }
}


/* v1.5 — interação manual pelo chat oficial */
@media (max-width: 1050px) {
  .viewer-content { grid-template-columns: minmax(0, 1fr) 310px; }
  .interaction-panel { padding: 16px; }
}
@media (max-width: 760px) {
  .viewer-content { display: flex; flex-direction: column; overflow: auto; }
  .viewer-frame { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; }
  .interaction-panel { flex: 1 0 auto; overflow: visible; border-left: 0; border-top: 1px solid var(--line); }
}


/* v1.6 — histórico de interação, filtro de pendentes e mensagens rotativas */
.preview-actions { display: inline-flex; align-items: center; gap: 6px; }
.visit-badge, .message-badge {
  display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(4,5,6,.78);
  font-size: 13px; line-height: 1; backdrop-filter: blur(8px);
}
.visit-badge.complete, .message-badge.complete { border-color: rgba(83,252,24,.34); background: rgba(83,252,24,.12); }
.card-meta-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.message-badge { min-width: 25px; height: 25px; padding: 0; font-size: 12px; }
.live-card.interaction-complete { border-color: rgba(83,252,24,.28); }
.pending-filter { padding: 7px 9px; border: 1px solid rgba(83,252,24,.14); border-radius: 9px; background: rgba(83,252,24,.035); }
.message-suggestion {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px;
  border: 1px solid rgba(83,252,24,.18); border-radius: 10px; background: rgba(83,252,24,.045);
}
.message-suggestion > div:first-child { min-width: 0; }
.message-suggestion > div:last-child { flex: 0 0 auto; display: flex; gap: 6px; }
.message-suggestion span { display: block; color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.message-suggestion small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.mini-button {
  min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px;
  color: #dfe4eb; background: #171b21; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700;
}
.mini-button:hover { border-color: #3a424e; background: #20252d; }
@media (max-width: 420px) {
  .message-suggestion { flex-direction: column; }
  .message-suggestion > div:last-child { width: 100%; }
  .mini-button { flex: 1; }
}


/* v1.7 — presença do grupo e moderação simples de canais */
.button-count {
  min-width: 20px; height: 20px; display: inline-grid; place-items: center; margin-left: 7px; padding: 0 6px;
  border-radius: 999px; color: #fff; background: #e94152; font-size: 10px; line-height: 1;
}
.channel-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.channel-row.pending .status-dot { background: #ffb347; box-shadow: 0 0 0 4px rgba(255,179,71,.08); }
.channel-row.suspended .status-dot { background: #ff5d6c; box-shadow: 0 0 0 4px rgba(255,93,108,.08); }
.channel-main { min-width: 0; }
.channel-main-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.channel-status-pill {
  flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; color: #cbd2dc; background: #262c35;
  font-size: 8px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
}
.channel-status-pill.pending { color: #ffd69c; background: rgba(255,179,71,.12); }
.channel-status-pill.approved { color: #b9ff9f; background: rgba(83,252,24,.10); }
.channel-status-pill.suspended { color: #ffbbc2; background: rgba(255,93,108,.11); }
.channel-owner { color: #707987 !important; }
.channel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.channel-actions button {
  width: auto; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px;
  color: #aab2bd; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800;
}
.channel-actions button:hover { color: #fff; background: #242a32; border-color: #343c47; }
.channel-actions button.approve:hover, .channel-actions button.reactivate:hover { color: #b9ff9f; background: rgba(83,252,24,.08); border-color: rgba(83,252,24,.25); }
.channel-actions button.suspend:hover { color: #ffd69c; background: rgba(255,179,71,.08); border-color: rgba(255,179,71,.24); }
.channel-actions button.remove:hover { color: #ffbbc2; background: rgba(255,93,108,.08); border-color: rgba(255,93,108,.24); }

.usage-modal { position: fixed; inset: 0; z-index: 65; pointer-events: none; visibility: hidden; }
.usage-modal.open { pointer-events: auto; visibility: visible; }
.usage-panel {
  position: absolute; inset: 5vh 4vw; display: flex; flex-direction: column; min-height: 0;
  background: #101318; border: 1px solid #303640; border-radius: 14px; overflow: hidden;
  opacity: 0; transform: scale(.985); transition: .2s ease;
}
.usage-modal.open .usage-panel { opacity: 1; transform: none; }
.usage-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.usage-header h2 { margin: 0; font-size: 21px; }
.usage-header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.usage-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.usage-summary div { padding: 15px 18px; background: #14181e; }
.usage-summary strong, .usage-summary span { display: block; }
.usage-summary strong { color: var(--green); font-size: 22px; }
.usage-summary span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.usage-note { margin: 14px 18px 0; padding: 10px 12px; color: #aeb6c1; background: rgba(83,252,24,.04); border: 1px solid rgba(83,252,24,.13); border-radius: 9px; font-size: 11px; }
.usage-table-wrap { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 18px; }
.usage-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.usage-table th { position: sticky; top: 0; z-index: 2; padding: 10px 11px; color: #858e9b; background: #101318; border-bottom: 1px solid var(--line); text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.usage-table td { padding: 12px 11px; border-bottom: 1px solid #20252c; vertical-align: middle; }
.usage-table tr:hover td { background: rgba(255,255,255,.018); }
.member-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.member-cell img, .member-avatar-fallback { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; background: #080a0d; }
.member-avatar-fallback { display: grid; place-items: center; color: #071005; background: var(--green); font-size: 12px; font-weight: 950; }
.member-cell strong, .member-cell small { display: block; }
.member-cell small { color: var(--muted); font-size: 10px; }
.presence-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; }
.presence-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #59616d; }
.presence-status.online::before { background: var(--green); box-shadow: 0 0 0 4px rgba(83,252,24,.08); }
.presence-status.validating::before { background: #ffb347; box-shadow: 0 0 0 4px rgba(255,179,71,.08); }
.absence-value { font-weight: 800; }
.absence-value.attention { color: #ffbf70; }
.absence-value.critical { color: #ff8390; }
.table-muted { color: var(--muted); font-size: 11px; }
.channel-table-status { display: inline-block; margin-left: 6px; padding: 2px 5px; border-radius: 999px; color: var(--muted); background: #252b33; font-size: 8px; text-transform: uppercase; }
.channel-table-status.approved { color: #b9ff9f; background: rgba(83,252,24,.09); }
.channel-table-status.pending { color: #ffd69c; background: rgba(255,179,71,.1); }
.channel-table-status.suspended { color: #ffbbc2; background: rgba(255,93,108,.1); }
.usage-empty { padding: 36px !important; color: var(--muted); text-align: center; }
.usage-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--line); background: #0e1115; }
.usage-footer span { color: var(--muted); font-size: 11px; }

@media (max-width: 760px) {
  #usageButton, #manageButton { display: inline-flex; }
  .usage-panel { inset: 0; border: 0; border-radius: 0; }
  .usage-summary { grid-template-columns: 1fr 1fr 1fr; }
  .usage-summary div { padding: 12px 10px; }
  .usage-summary strong { font-size: 18px; }
  .usage-header { padding: 16px; }
  .usage-note { margin-left: 12px; margin-right: 12px; }
  .usage-table-wrap { padding-left: 12px; padding-right: 12px; }
  .channel-actions button { padding: 0 6px; }
}

/* v1.7.1 — correção e retorno visual das ações de canais */
.channel-action-notice {
  margin: 0 20px 12px; padding: 10px 12px; border: 1px solid rgba(255,179,71,.24);
  border-radius: 9px; color: #ffd69c; background: rgba(255,179,71,.07); font-size: 11px;
}
.channel-action-notice.loading { color: #d7dde5; border-color: #343c47; background: rgba(255,255,255,.025); }
.channel-action-notice.success { color: #b9ff9f; border-color: rgba(83,252,24,.24); background: rgba(83,252,24,.07); }
.channel-action-notice.error { color: #ffbbc2; border-color: rgba(255,93,108,.28); background: rgba(255,93,108,.08); }
.channel-actions button:disabled { opacity: .5; cursor: wait; }
@media (max-width: 620px) { .channel-action-notice { margin-left: 15px; margin-right: 15px; } }



/* v1.8 — presença obrigatória na vitrine e exceção por estrela */
.platform-online-stat strong { color: var(--green); }
.channel-row.featured { background: linear-gradient(90deg, rgba(255, 205, 64, .035), transparent 55%); }
.channel-actions button.feature {
  min-width: 34px; padding: 0 6px; font-size: 16px; line-height: 1; color: #7f8792;
}
.channel-actions button.feature:hover { color: #ffd75a; background: rgba(255, 205, 64, .08); border-color: rgba(255, 205, 64, .24); }
.channel-actions button.feature.active { color: #ffd75a; background: rgba(255, 205, 64, .08); border-color: rgba(255, 205, 64, .22); }
@media (max-width: 920px) { .stats { gap: 18px; } }
@media (max-width: 520px) {
  .stats { gap: 10px; width: 100%; justify-content: space-between; }
  .stats div { min-width: 0; flex: 1 1 0; }
  .stats span { font-size: 9px; letter-spacing: .045em; }
}

/* v1.9 — mural dos pedidos e créditos semanais */
body.auth-required .request-board { display: none !important; }
.request-board {
  margin: 0 0 20px; overflow: hidden; border: 1px solid rgba(83,252,24,.18); border-radius: 14px;
  background: linear-gradient(135deg, rgba(83,252,24,.055), rgba(18,21,26,.88) 45%, rgba(18,21,26,.96));
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}
.request-board-header {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px 20px;
  border-bottom: 1px solid rgba(83,252,24,.12);
}
.request-board-header .eyebrow { color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.request-board-header h2 { margin: 3px 0 0; font-size: 21px; }
.request-board-header p { max-width: 720px; margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.request-credit {
  flex: 0 0 auto; min-width: 150px; padding: 10px 13px; border: 1px solid rgba(83,252,24,.2); border-radius: 10px;
  background: rgba(4,7,4,.45); text-align: right;
}
.request-credit strong, .request-credit span, .request-credit small { display: block; }
.request-credit strong { color: var(--green); font-size: 24px; line-height: 1; }
.request-credit span { margin-top: 4px; color: #dce3d8; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.request-credit small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.request-compose {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 20px;
  border-bottom: 1px solid var(--line); background: rgba(7,9,11,.38);
}
.request-compose strong, .request-compose small { display: block; }
.request-compose small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.request-options { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.request-options button {
  min-height: 34px; padding: 0 11px; border: 1px solid rgba(83,252,24,.22); border-radius: 8px;
  color: #dfffd5; background: rgba(83,252,24,.07); cursor: pointer; font: inherit; font-size: 10px; font-weight: 800;
}
.request-options button:hover:not(:disabled) { border-color: rgba(83,252,24,.48); background: rgba(83,252,24,.13); transform: translateY(-1px); }
.request-options button:disabled { opacity: .38; cursor: not-allowed; }
.request-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); gap: 10px; padding: 12px; }
.request-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; min-width: 0;
  padding: 12px; border: 1px solid #2b323c; border-radius: 11px; background: rgba(16,19,24,.92);
}
.request-card.request-subscribers { border-color: rgba(83,252,24,.25); }
.request-card.request-comments { border-color: rgba(92,167,255,.25); }
.request-card.request-followers { border-color: rgba(255,205,64,.25); }
.request-avatar {
  width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  color: #071005; background: var(--green); font-weight: 950;
}
.request-avatar img { width: 100%; height: 100%; object-fit: cover; }
.request-content { min-width: 0; }
.request-identity { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.request-identity strong, .request-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-identity small { color: var(--muted); font-size: 9px; }
.request-content p { margin: 5px 0 0; color: #fff; font-size: 14px; font-weight: 800; }
.request-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.request-countdown { color: #ffd75a; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.request-side .mini-button { display: inline-flex; align-items: center; text-decoration: none; }
.request-empty { grid-column: 1 / -1; padding: 18px; border: 1px dashed #303743; border-radius: 10px; text-align: center; }
.request-empty strong, .request-empty span { display: block; }
.request-empty span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.channel-actions button.request-credit-action { color: #9ed9ff; border-color: rgba(92,167,255,.12); }
.channel-actions button.request-credit-action:hover { color: #d8efff; background: rgba(92,167,255,.09); border-color: rgba(92,167,255,.28); }

@media (max-width: 900px) {
  .request-board-header, .request-compose { align-items: flex-start; }
  .request-compose { flex-direction: column; }
  .request-options { width: 100%; justify-content: flex-start; }
}
@media (max-width: 620px) {
  .request-board-header { flex-direction: column; align-items: stretch; padding: 15px; }
  .request-credit { width: 100%; text-align: left; }
  .request-compose { padding: 12px 15px; }
  .request-options button { flex: 1 1 120px; }
  .request-list { padding: 9px; }
  .request-card { grid-template-columns: auto minmax(0, 1fr); }
  .request-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
  .channel-actions { flex-wrap: wrap; max-width: 180px; }
}


/* Kick Friends v2.0 — Admin Panel e Corrida pelos VIPs */
.admin-drawer .drawer-panel.admin-panel{width:min(1180px,96vw);padding:0;overflow:hidden;display:flex;flex-direction:column}
.admin-header{padding:22px 24px 16px;border-bottom:1px solid var(--border,#28303a)}
.admin-header .eyebrow,.vip-race-header .eyebrow,.admin-race-control .eyebrow{display:block;font-size:10px;letter-spacing:.12em;color:#53fc18;font-weight:800;margin-bottom:5px}
.admin-tabs{display:flex;gap:6px;padding:12px 20px;border-bottom:1px solid #252c34;background:#0d1115;overflow:auto}
.admin-tabs button{border:1px solid #29313b;background:#14191f;color:#aeb7c2;border-radius:9px;padding:10px 14px;font-weight:750;white-space:nowrap;cursor:pointer}
.admin-tabs button.active{background:#53fc18;color:#071005;border-color:#53fc18}
.admin-tabs button span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:5px;border-radius:999px;background:#e5484d;color:white;font-size:11px}
.admin-tabs button span[hidden]{display:none}
.admin-section{display:none;padding:20px 24px 28px;overflow:auto}
.admin-section.active{display:block;flex:1;min-height:0;overflow:auto}
.admin-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px;margin-bottom:16px}
.admin-stat-grid article{background:#11161c;border:1px solid #28313b;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:3px}
.admin-stat-grid strong{font-size:27px;color:#fff}.admin-stat-grid span{font-size:12px;color:#8f9aa8;text-transform:uppercase;letter-spacing:.06em}
.admin-card{background:#11161c;border:1px solid #28313b;border-radius:12px;padding:18px;margin-bottom:14px}
.admin-card h3,.admin-section-heading h3,.admin-race-control h3{margin:0 0 6px;color:#fff}.admin-card p,.admin-section-heading p,.admin-race-control p{margin:0;color:#8f9aa8}
.admin-card,.admin-info-card,.admin-race-control{display:flex;align-items:center;justify-content:space-between;gap:20px}
.admin-select-label{display:flex;flex-direction:column;gap:6px;color:#9aa5b3;font-size:12px;font-weight:700}
.admin-select-label select{min-width:180px;background:#090c10;color:#fff;border:1px solid #34404d;border-radius:8px;padding:11px 12px;font:inherit}
.admin-credit-list{display:grid;gap:10px;margin-top:15px}
.admin-credit-row{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(250px,1fr) auto;gap:18px;align-items:center;background:#11161c;border:1px solid #28313b;border-radius:12px;padding:13px 15px}
.admin-credit-identity{display:flex;align-items:center;gap:10px}.admin-credit-identity img{width:38px;height:38px;border-radius:50%;object-fit:cover}.admin-credit-identity span{display:flex;flex-direction:column}.admin-credit-identity small{color:#8b96a4}
.admin-credit-values{display:flex;gap:10px;flex-wrap:wrap}.admin-credit-values span{background:#0b0f13;border:1px solid #26303a;border-radius:8px;padding:7px 10px;color:#8f99a6;font-size:11px}.admin-credit-values strong{color:#fff;font-size:15px}
.admin-credit-actions{display:flex;gap:7px;justify-content:flex-end}.admin-credit-actions button{border:1px solid #35513a;background:#16271a;color:#53fc18;border-radius:8px;padding:8px 10px;font-weight:800;cursor:pointer}.admin-credit-actions button.danger{border-color:#553034;background:#251518;color:#ff7278}
.admin-empty{padding:18px;text-align:center;color:#86919f;border:1px dashed #303945;border-radius:10px}
.admin-race-control{background:linear-gradient(135deg,#17140b,#11161c);border:1px solid #54471b;border-radius:13px;padding:18px;margin-bottom:15px}.danger-button{background:#d53d46!important;color:white!important;border-color:#d53d46!important}
.admin-race-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-race-columns .admin-card{display:block;margin:0}
.admin-race-ranking,.admin-race-history{display:grid;gap:7px;margin-top:12px}.race-rank-row{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center;background:#0b0f13;border:1px solid #252e38;border-radius:9px;padding:9px 11px}.race-rank-row.rank-1{border-color:#7b6624}.race-rank-row.rank-2{border-color:#5a6370}.race-rank-row.rank-3{border-color:#6c482c}.race-position{font-weight:900;text-align:center}.race-person{display:flex;flex-direction:column}.race-person small{color:#87929e}.race-time{font-variant-numeric:tabular-nums;color:#53fc18}.race-history-item{border:1px solid #27313b;border-radius:9px;background:#0b0f13}.race-history-item summary{cursor:pointer;padding:11px;color:#d9e0e7;font-weight:700}.history-ranking{padding:0 10px 10px}
.vip-race-board{margin:0 0 18px;background:linear-gradient(135deg,#17130a 0%,#10151a 55%,#101a11 100%);border:1px solid #66541c;border-radius:14px;padding:17px 19px;box-shadow:0 15px 45px rgba(0,0,0,.2)}.vip-race-board[hidden]{display:none}.vip-race-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:13px}.vip-race-header h2{margin:0 0 4px;color:#fff}.vip-race-header p{margin:0;color:#9aa4af}.vip-race-clock{display:flex;flex-direction:column;text-align:right;color:#a5afba;font-size:11px}.vip-race-clock strong{font-size:24px;color:#ffd952;font-variant-numeric:tabular-nums}.vip-race-top10{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:8px}.vip-race-top10 .race-rank-row.compact{grid-template-columns:32px 1fr;gap:7px;padding:8px}.vip-race-top10 .race-rank-row.compact .race-time{grid-column:2;font-size:12px}
@media(max-width:980px){.admin-stat-grid{grid-template-columns:repeat(2,1fr)}.admin-race-columns{grid-template-columns:1fr}.admin-credit-row{grid-template-columns:1fr}.admin-credit-actions{justify-content:flex-start}.vip-race-top10{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.admin-section{padding:14px}.admin-stat-grid{grid-template-columns:1fr 1fr}.admin-card,.admin-info-card,.admin-race-control,.vip-race-header{align-items:flex-start;flex-direction:column}.admin-select-label,.admin-select-label select{width:100%}.vip-race-top10{grid-template-columns:1fr}}

/* Kick Friends v2.0.1 — mural lateral e simulador visual */
body.auth-required .request-dock { display: none !important; }
.request-dock {
  position: fixed; right: 14px; top: 92px; z-index: 42;
  display: flex; align-items: flex-start; gap: 10px;
  pointer-events: none;
}
.request-dock-toggle {
  position: relative; pointer-events: auto; width: 58px; min-height: 64px; padding: 7px 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid #324039; border-radius: 14px; color: #d9e2dc; background: rgba(13,17,20,.96);
  box-shadow: 0 12px 35px rgba(0,0,0,.34); cursor: pointer; transition: .2s ease;
}
.request-dock-toggle:hover { border-color: rgba(83,252,24,.55); transform: translateX(-2px); }
.request-dock-icon { font-size: 23px; line-height: 1; }
.request-dock-label { color: #aeb7b1; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.request-dock-badge {
  position: absolute; right: -5px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center; border: 2px solid #0b0d10; border-radius: 999px;
  color: #071005; background: var(--green); font-size: 10px; font-weight: 950;
}
.request-dock.has-requests:not(.open) .request-dock-toggle {
  border-color: rgba(83,252,24,.7);
  animation: requestDockGlow 1.8s ease-in-out infinite;
}
@keyframes requestDockGlow {
  0%,100% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(83,252,24,.02); }
  50% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 24px 4px rgba(83,252,24,.28); }
}
.request-dock .request-board {
  pointer-events: auto; width: min(390px, calc(100vw - 98px)); max-height: calc(100vh - 112px); margin: 0;
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateX(24px) scale(.98); transform-origin: top right;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  box-shadow: 0 22px 65px rgba(0,0,0,.55);
}
.request-dock.open .request-board { opacity: 1; visibility: visible; transform: none; }
.request-dock.open .request-dock-toggle { border-color: var(--green-dark); background: #121a12; }
.request-dock-header-actions { display: flex; align-items: center; gap: 8px; }
.request-dock-close { flex: 0 0 auto; }
.request-dock .request-board-header { padding: 14px; align-items: flex-start; }
.request-dock .request-board-header h2 { font-size: 18px; }
.request-dock .request-board-header p { max-width: 220px; font-size: 10px; }
.request-dock .request-credit { min-width: 104px; padding: 8px 9px; }
.request-dock .request-credit strong { font-size: 20px; }
.request-dock .request-credit span, .request-dock .request-credit small { font-size: 8px; }
.request-dock .request-compose { padding: 12px 14px; align-items: flex-start; flex-direction: column; }
.request-dock .request-options { width: 100%; justify-content: stretch; }
.request-dock .request-options button { flex: 1 1 100px; }
.request-dock .request-list { grid-template-columns: 1fr; padding: 10px; overflow-y: auto; min-height: 82px; }
.request-dock .request-card { grid-template-columns: auto minmax(0,1fr); }
.request-dock .request-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
.request-dock .request-empty { padding: 14px 10px; }

.test-grid-notice {
  margin: 0 0 16px; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid rgba(92,167,255,.35); border-radius: 11px; background: rgba(32,75,123,.16);
}
.test-grid-notice > div { min-width: 0; }
.test-grid-notice strong, .test-grid-notice span { display: block; }
.test-grid-notice strong { color: #b8dcff; }
.test-grid-notice span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.test-grid-card { align-items: flex-end; }
.test-grid-card small { display: block; margin-top: 8px; color: #8da8c4; }
.test-grid-controls { min-width: min(100%, 460px); display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 7px 10px; align-items: end; }
.test-grid-controls label { grid-column: 1 / -1; color: #9ba6b3; font-size: 11px; font-weight: 750; }
.test-grid-controls select {
  min-height: 40px; padding: 0 10px; border: 1px solid #34404d; border-radius: 8px;
  color: #fff; background: #090c10; font: inherit;
}
.test-grid-buttons { display: flex; gap: 5px; }
.test-grid-buttons button {
  min-width: 42px; min-height: 40px; padding: 0 9px; border: 1px solid #35516f; border-radius: 8px;
  color: #b8dcff; background: #101c28; font-weight: 850; cursor: pointer;
}
.test-grid-buttons button:hover, .test-grid-buttons button.active { color: #071005; background: #7fc4ff; border-color: #7fc4ff; }
.test-grid-buttons button.stop { color: #ff9da5; border-color: #5b3238; background: #211316; }
.test-grid-buttons button.stop:hover { color: #fff; background: #c43f4a; border-color: #c43f4a; }
.live-card.test-clone { border-color: rgba(92,167,255,.24); }
.live-card.test-clone .player-slot { background: linear-gradient(135deg,#101b27,#080b0f); }
.player-slot .test-preview-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player-slot .test-card-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; color: #98cfff; font-size: 14px; font-weight: 900; text-align: center; background: radial-gradient(circle at 50% 40%,rgba(92,167,255,.18),transparent 55%); }
.live-card.test-clone .live-badge { color: #d6edff; background: rgba(18,49,76,.9); }
.live-card.test-clone .live-badge i { background: #5ca7ff; box-shadow: 0 0 0 3px rgba(92,167,255,.18); }

@media (max-width: 760px) {
  .request-dock { right: 9px; top: auto; bottom: 12px; align-items: flex-end; flex-direction: row-reverse; }
  .request-dock .request-board { width: calc(100vw - 18px); max-height: calc(100vh - 100px); }
  .request-dock-toggle { width: 56px; min-height: 56px; }
  .test-grid-card { align-items: stretch; }
  .test-grid-controls { min-width: 0; width: 100%; grid-template-columns: 1fr; }
  .test-grid-buttons { flex-wrap: wrap; }
  .test-grid-notice { align-items: flex-start; flex-direction: column; }
}

.request-dock { flex-direction: row-reverse; }


/* Kick Friends v2.0.2 — Corrida pelos VIPs em painel lateral recolhível */
body.auth-required .vip-race-dock { display: none !important; }
.vip-race-dock {
  position: fixed; right: 14px; top: 170px; z-index: 41;
  display: flex; align-items: flex-start; gap: 10px; flex-direction: row-reverse;
  pointer-events: none;
}
.vip-race-dock[hidden] { display: none !important; }
.vip-race-dock-toggle {
  position: relative; pointer-events: auto; width: 58px; min-height: 64px; padding: 7px 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid #56491f; border-radius: 14px; color: #f4e8b2; background: rgba(19,17,11,.97);
  box-shadow: 0 12px 35px rgba(0,0,0,.34); cursor: pointer; transition: .2s ease;
}
.vip-race-dock-toggle:hover { border-color: rgba(255,217,82,.72); transform: translateX(-2px); }
.vip-race-dock-icon { font-size: 23px; line-height: 1; }
.vip-race-dock-label { color: #c9bd8c; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.vip-race-dock-badge {
  position: absolute; right: -5px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center; border: 2px solid #0b0d10; border-radius: 999px;
  color: #181200; background: #ffd952; font-size: 10px; font-weight: 950;
}
.vip-race-dock.active:not(.open) .vip-race-dock-toggle {
  border-color: rgba(255,217,82,.8);
  animation: vipRaceDockGlow 1.8s ease-in-out infinite;
}
@keyframes vipRaceDockGlow {
  0%,100% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(255,217,82,.02); }
  50% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 24px 4px rgba(255,217,82,.28); }
}
.vip-race-dock .vip-race-board {
  pointer-events: auto; width: min(420px, calc(100vw - 98px)); max-height: calc(100vh - 190px); margin: 0; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateX(24px) scale(.98); transform-origin: top right;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  box-shadow: 0 22px 65px rgba(0,0,0,.55);
}
.vip-race-dock.open .vip-race-board { opacity: 1; visibility: visible; transform: none; }
.vip-race-dock.open .vip-race-dock-toggle { border-color: #8a7227; background: #211c0d; }
.vip-race-dock .vip-race-header {
  flex: 0 0 auto; align-items: flex-start; margin: 0; padding: 14px;
  border-bottom: 1px solid rgba(255,217,82,.18);
}
.vip-race-dock .vip-race-header h2 { font-size: 18px; }
.vip-race-dock .vip-race-header p { max-width: 230px; font-size: 10px; }
.vip-race-dock-header-actions { display: flex; align-items: flex-start; gap: 8px; }
.vip-race-dock-close { flex: 0 0 auto; }
.vip-race-dock .vip-race-clock { min-width: 104px; }
.vip-race-dock .vip-race-clock strong { font-size: 20px; }
.vip-race-dock .vip-race-top10 {
  grid-template-columns: 1fr; gap: 7px; padding: 10px; overflow-y: auto; min-height: 82px;
}
.vip-race-dock .vip-race-top10 .race-rank-row.compact {
  grid-template-columns: 34px minmax(0,1fr) auto; gap: 8px; padding: 9px 10px;
}
.vip-race-dock .vip-race-top10 .race-rank-row.compact .race-time { grid-column: auto; font-size: 12px; }
.vip-race-dock .admin-empty { margin: 0; }

@media (max-width: 760px) {
  .vip-race-dock { right: 73px; top: auto; bottom: 12px; align-items: flex-end; }
  .vip-race-dock .vip-race-board { width: calc(100vw - 18px); max-height: calc(100vh - 100px); }
  .vip-race-dock-toggle { width: 56px; min-height: 56px; }
  .vip-race-dock .vip-race-header { flex-direction: row; }
}

@media (max-width: 470px) {
  .vip-race-dock .vip-race-header { flex-direction: column; }
  .vip-race-dock-header-actions { width: 100%; justify-content: space-between; }
  .vip-race-dock .vip-race-clock { text-align: left; }
}


/* Kick Friends v2.0.3 — atalhos alinhados ao topo da grade */
:root {
  --floating-dock-top: 170px;
  --floating-dock-step: 78px;
}
.request-dock { top: var(--floating-dock-top); }
.vip-race-dock { top: calc(var(--floating-dock-top) + var(--floating-dock-step)); }

@media (max-width: 760px) {
  .request-dock { top: auto; }
  .vip-race-dock { top: auto; }
}


/* Kick Friends v2.1 — controles administrativos e autenticação Discord */
.showcase-config-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  min-width: min(100%, 560px);
}
.showcase-config-heading { padding-right: 4px; }
.showcase-config-heading strong, .showcase-config-heading small,
.readonly-setting strong, .readonly-setting small { display: block; }
.showcase-config-heading strong { font-size: 12px; }
.showcase-config-heading small { color: var(--muted); font-size: 10px; }
.readonly-setting {
  display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(7, 10, 13, .46);
}
.readonly-setting strong { font-size: 11px; }
.readonly-setting small { color: var(--muted); font-size: 9px; }
.readonly-indicator {
  flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%;
  background: #66707d; box-shadow: 0 0 0 3px rgba(102, 112, 125, .1);
}
.readonly-setting.enabled .readonly-indicator {
  background: var(--green); box-shadow: 0 0 0 3px rgba(83, 252, 24, .11), 0 0 12px rgba(83, 252, 24, .22);
}
.readonly-setting.disabled { opacity: .72; }
.admin-showcase-card { align-items: flex-start; }
.admin-toggle-list { display: grid; gap: 10px; min-width: min(100%, 460px); }
.admin-toggle-row {
  padding: 10px 12px; border: 1px solid #29323c; border-radius: 10px;
  background: #0b0f13;
}
.admin-toggle-row small { max-width: 390px; }
.admin-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 950px) {
  .showcase-config-summary { width: 100%; }
  .showcase-config-heading { width: 100%; }
}
@media (max-width: 620px) {
  .showcase-config-summary { display: grid; grid-template-columns: 1fr; }
  .readonly-setting { width: 100%; }
  .admin-toggle-list, .admin-card-actions { width: 100%; }
  .admin-card-actions .button { flex: 1 1 150px; }
}

/* v2.1 — autenticação Discord por cargos */
.button.discord-login { background: #5865f2; color: #fff; }
.button.discord-login:hover { background: #6d78f6; transform: translateY(-1px); }
.discord-account-chip { border-color: rgba(88,101,242,.34); background: rgba(88,101,242,.08); }
.discord-account-chip small { color: #aeb6ff; }
.discord-account-chip img { background: #171a32; }
body.auth-required .test-grid-notice { display: none !important; }
@media (max-width: 760px) {
  .discord-account-chip span { max-width: 90px; }
}