/* =====================================================
   ACADEMY BETS — Premium Dark Theme CSS
   ===================================================== */

:root {
  --gold: #c9a84c;
  --gold-light: #f0c040;
  --gold-dark: #a07830;
  --gold-gradient: linear-gradient(135deg, #c9a84c, #f0c040, #c9a84c);
  --green: #4ade80;
  --green-dark: #16a34a;
  --red: #f87171;
  --red-dark: #dc2626;
  --blue: #60a5fa;
  --purple: #a78bfa;
  --bg-primary: #0a0a0f;
  --bg-secondary: #111118;
  --bg-card: #16161f;
  --bg-card-hover: #1e1e2a;
  --bg-sidebar: #0d0d14;
  --bg-input: #1a1a24;
  --border: #2a2a38;
  --border-gold: rgba(201,168,76,0.3);
  --text: #e2e2f0;
  --text-muted: #6b6b85;
  --text-dim: #9090aa;
  --shadow-gold: 0 0 20px rgba(201,168,76,0.15);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);
  --radius: 12px;
  --radius-lg: 16px;
  --sidebar-w: 240px;
  --topbar-h: 60px;
  --transition: 0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

img { max-width: 100%; }

input, select, textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 10px 14px;
  width: 100%;
  outline: none;
  transition: border-color var(--transition);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201,168,76,0.1);
}
select option { background: var(--bg-card); }

/* ── UTILITY ── */
.green-text { color: var(--green) !important; }
.red-text   { color: var(--red)   !important; }
.gold-text  { color: var(--gold)  !important; }
.blue-text  { color: var(--blue)  !important; }
.purple-text{ color: var(--purple)!important; }
.muted-text { color: var(--text-muted) !important; }

.page { position: relative; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* =====================================================
   BUTTONS
   ===================================================== */
.btn-gold {
  background: var(--gold-gradient);
  border: none;
  border-radius: 8px;
  color: #111;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px 20px;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-gold:hover { filter: brightness(1.15); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,168,76,0.35); }
.btn-gold:active { transform: translateY(0); }

.btn-full { width: 100%; justify-content: center; }

.btn-green {
  background: rgba(74,222,128,0.15);
  border: 1px solid var(--green);
  border-radius: 8px;
  color: var(--green);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-green:hover { background: rgba(74,222,128,0.25); transform: translateY(-1px); }

.btn-red {
  background: rgba(248,113,113,0.15);
  border: 1px solid var(--red);
  border-radius: 8px;
  color: var(--red);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-red:hover { background: rgba(248,113,113,0.25); transform: translateY(-1px); }

.btn-neutral {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}
.btn-neutral:hover { background: rgba(255,255,255,0.1); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.btn-outline:hover { background: rgba(201,168,76,0.1); }

.btn-telegram {
  background: linear-gradient(135deg, #0088cc, #0066aa);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 20px;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-telegram:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn-logout {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  transition: all var(--transition);
  font-size: 0.9rem;
}
.btn-logout:hover { border-color: var(--red); color: var(--red); }

/* =====================================================
   LOGIN PAGE — v2 splitscreen premium
   ===================================================== */

/* ── Fundo e partículas ── */
.login-bg {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(201,168,76,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(74,222,128,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(201,168,76,0.05) 0%, transparent 60%),
    var(--bg-primary);
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Orbs decorativos */
.login-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
}
.login-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 70%);
  top: -150px; left: -100px;
  animation: orbDrift 12s ease-in-out infinite alternate;
}
.login-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(74,222,128,0.07) 0%, transparent 70%);
  bottom: -100px; right: 300px;
  animation: orbDrift 16s ease-in-out infinite alternate-reverse;
}
.login-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(96,165,250,0.06) 0%, transparent 70%);
  top: 40%; right: -80px;
  animation: orbDrift 20s ease-in-out infinite alternate;
}
@keyframes orbDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.08); }
}

.login-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.login-particles .particle {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: floatParticle linear infinite;
}
@keyframes floatParticle {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-100vh) scale(0.3); }
}

/* ── Wrapper splitscreen ── */
.login-wrapper {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1100px;
  margin: auto;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ── Lado esquerdo — Branding ── */
.login-brand {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
  position: relative;
}
.login-brand::after {
  content: '';
  position: absolute;
  right: 0; top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.25), transparent);
}
.login-brand-inner {
  max-width: 380px;
  width: 100%;
}
.login-brand-logo {
  width: 160px;
  margin-bottom: 28px;
  filter: drop-shadow(0 0 28px rgba(201,168,76,0.40));
  animation: logoPulse 4s ease-in-out infinite;
  display: block;
}
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(201,168,76,0.35)); }
  50%       { filter: drop-shadow(0 0 42px rgba(201,168,76,0.65)); }
}
.login-brand-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 14px;
}
.login-brand-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 36px;
}
.login-brand-sub strong { color: var(--text-dim); font-weight: 600; }

/* Stats do branding */
.login-brand-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 0;
  margin-bottom: 20px;
  overflow: hidden;
}
.lbs-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lbs-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.lbs-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}
.lbs-sep {
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0;
}

/* Badges */
.login-brand-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lbb-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  letter-spacing: 0.04em;
}
.lbb-item i { color: var(--gold); font-size: 0.65rem; }

/* ── Lado direito — Formulário ── */
.login-form-side {
  width: 460px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 48px;
}

/* ── Card de login ── */
.login-card {
  background: var(--bg-card);
  border: 1px solid rgba(201,168,76,0.20);
  border-radius: 20px;
  padding: 38px 36px;
  box-shadow:
    0 0 0 1px rgba(201,168,76,0.06),
    0 8px 40px rgba(0,0,0,0.55),
    0 0 60px rgba(201,168,76,0.06);
  width: 100%;
  animation: loginCardIn 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header do card */
.login-card-header {
  text-align: center;
  margin-bottom: 28px;
}
.login-card-logo {
  margin-bottom: 16px;
}
.login-card-logo img {
  height: 56px;
  width: auto;
  filter: drop-shadow(0 0 14px rgba(201,168,76,0.35));
  animation: logoPulse 4s ease-in-out infinite;
}
.login-card h2 {
  font-size: 1.45rem;
  font-weight: 800;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  line-height: 1.2;
}
.login-sub {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
.login-sub strong { color: var(--text-dim); font-weight: 600; }
.ginga-highlight {
  color: var(--gold) !important;
  font-weight: 700 !important;
  -webkit-text-fill-color: var(--gold) !important;
}

/* form-group (mantido compatível) */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.form-group label i { color: var(--gold); font-size: 0.72rem; }

/* Input com ícone interno */
.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.login-input-icon {
  position: absolute;
  left: 13px;
  color: var(--text-muted);
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 1;
}
.login-input-wrap input {
  padding-left: 36px !important;
  padding-right: 42px !important;
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.login-input-wrap input:focus {
  border-color: var(--gold);
  background: rgba(201,168,76,0.04);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.10);
}
.login-eye-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.82rem;
  padding: 4px;
  transition: color 0.2s;
  line-height: 1;
}
.login-eye-btn:hover { color: var(--gold); }

/* Botão principal */
.btn-login-submit {
  width: 100%;
  height: 50px;
  background: var(--gold-gradient);
  border: none;
  border-radius: 12px;
  color: #0a0a0f;
  font-size: 0.95rem;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 0.03em;
  transition: filter 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(201,168,76,0.30);
  margin-top: 6px;
  position: relative;
  overflow: hidden;
}
.btn-login-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.btn-login-submit:hover::before { transform: translateX(100%); }
.btn-login-submit:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(201,168,76,0.42);
}
.btn-login-submit:active { transform: translateY(0); filter: brightness(1); }
.btn-login-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* Separador */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Botões de acesso rápido demo */
.login-quick-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.login-quick-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
  text-align: left;
}
.login-quick-btn i {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.login-quick-btn div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.login-quick-btn span {
  font-size: 0.78rem;
  font-weight: 700;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.login-quick-btn small {
  font-size: 0.64rem;
  opacity: 0.65;
  display: block;
}
.login-quick-btn.admin {
  color: var(--gold);
  border-color: rgba(201,168,76,0.28);
  background: rgba(201,168,76,0.05);
}
.login-quick-btn.admin:hover {
  background: rgba(201,168,76,0.12);
  border-color: rgba(201,168,76,0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201,168,76,0.15);
}
.login-quick-btn.user {
  color: var(--blue);
  border-color: rgba(96,165,250,0.28);
  background: rgba(96,165,250,0.04);
}
.login-quick-btn.user:hover {
  background: rgba(96,165,250,0.12);
  border-color: rgba(96,165,250,0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(96,165,250,0.12);
}

/* Nota de rodapé */
.login-footer-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.login-footer-note i { color: var(--text-muted); font-size: 0.72rem; }
.login-footer-note a { color: var(--gold); font-weight: 600; }
.login-footer-note a:hover { color: var(--gold-light); }

/* Status de loading no botão */
.btn-login-submit.loading {
  pointer-events: none;
}

/* ── RESPONSIVO ── */
@media (max-width: 860px) {
  .login-brand { display: none; }
  .login-wrapper {
    justify-content: center;
    align-items: center;
    padding: 20px;
    min-height: 100vh;
  }
  .login-form-side {
    width: 100%;
    max-width: 460px;
    padding: 20px;
  }
  .login-card { padding: 30px 24px; }
}
@media (max-width: 400px) {
  .login-card { padding: 24px 18px; border-radius: 16px; }
  .login-quick-row { grid-template-columns: 1fr; }
}

/* legacy alias — mantém compatibilidade com código antigo */
.login-switch {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 16px;
}
.demo-access-box { display: none; }
.demo-btn-admin, .demo-btn-user { display: none; }

/* =====================================================
   APP LAYOUT
   ===================================================== */
#app-page {
  display: flex;
  min-height: 100vh;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  transition: transform var(--transition);
}
.sidebar-logo {
  padding: 20px 16px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.sidebar-logo img { width: 130px; filter: drop-shadow(0 0 8px rgba(201,168,76,0.2)); }

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition);
  position: relative;
}
.nav-item i { width: 18px; text-align: center; font-size: 0.95rem; }
.nav-item:hover { background: rgba(201,168,76,0.08); color: var(--text); }
.nav-item.active {
  background: rgba(201,168,76,0.12);
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.2);
}
.nav-item.active i { color: var(--gold); }

.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  min-width: 20px;
  text-align: center;
}
.live-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.user-avatar {
  width: 36px; height: 36px;
  background: var(--gold-gradient);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #111;
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.user-details { display: flex; flex-direction: column; min-width: 0; }
.user-name { font-size: 0.8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 0.7rem; color: var(--gold); font-weight: 500; }

/* ── TOPBAR ── */
.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--topbar-h);
  background: rgba(10,10,15,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 12px;
  z-index: 100;
  transition: left var(--transition);
}

/* ─ Esquerda: hamburguer + logo ─ */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.15rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
  line-height: 1;
}
.menu-toggle:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.topbar-logo { display: flex; align-items: center; text-decoration: none; }
.topbar-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 6px rgba(201,168,76,0.25));
}

/* ─ Centro: título ─ */
.topbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.topbar-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dim);
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─ Direita ─ */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* ── TOPBAR SINO ── */
.notif-bell {
  position: relative;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 1rem;
  transition: color var(--transition), background var(--transition);
  padding: 7px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.notif-bell:hover { color: var(--gold); background: rgba(201,168,76,0.08); border-color: var(--border-gold); }
.notif-count {
  position: absolute;
  top: -5px; right: -5px;
  background: var(--red);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-primary);
  line-height: 1;
}

/* ── TOPBAR USER CHIP ── */
.topbar-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 5px 12px 5px 5px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  min-width: 0;
  max-width: 180px;
}
.topbar-user-chip:hover {
  background: rgba(201,168,76,0.08);
  border-color: var(--border-gold);
}
.topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), #b8933e);
  color: #0a0a0f;
  font-size: 0.82rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0;
  box-shadow: 0 2px 8px rgba(201,168,76,0.3);
}
.topbar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.topbar-user-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.topbar-user-role {
  font-size: 0.62rem;
  color: var(--gold);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0.85;
  white-space: nowrap;
}

.notif-bell {
  position: relative;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 1.1rem;
  transition: color var(--transition);
  padding: 4px;
}
.notif-bell:hover { color: var(--gold); }
.notif-count {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--red);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.signal-alert {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.45);
  border-radius: 10px;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 5px 10px;
  letter-spacing: 0.1em;
  animation: glowPulse 1.4s ease-in-out infinite;
  white-space: nowrap;
  flex-shrink: 0;
}
.signal-alert i {
  font-size: 0.7rem;
  animation: boltFlash 0.9s ease-in-out infinite;
}
.signal-alert-text { font-size: 0.66rem; letter-spacing: 0.12em; }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(201,168,76,0.2); border-color: rgba(201,168,76,0.45); }
  50%       { box-shadow: 0 0 12px rgba(201,168,76,0.5); border-color: rgba(201,168,76,0.8); }
}
@keyframes boltFlash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── NOTIFICATION PANEL ── */
.notif-panel {
  position: fixed;
  top: var(--topbar-h);
  right: 16px;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  z-index: 300;
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.notif-header h4 { font-size: 0.9rem; font-weight: 700; }
.notif-header button { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; }
.notif-header button:hover { color: var(--red); }
.notif-list { padding: 8px; max-height: 300px; overflow-y: auto; }
.notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 8px; margin-bottom: 4px;
}
.notif-item > i { font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.notif-item div b { font-size: 0.85rem; font-weight: 700; }
.notif-item div p { font-size: 0.8rem; color: var(--text-dim); margin: 2px 0; }
.notif-item div span { font-size: 0.72rem; color: var(--text-muted); }
.notif-green { background: rgba(74,222,128,0.07); }
.notif-green > i { color: var(--green); }
.notif-blue { background: rgba(96,165,250,0.07); }
.notif-blue > i { color: var(--blue); }

/* ── MAIN CONTENT ── */
.main-content {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  min-height: calc(100vh - var(--topbar-h));
  padding: 24px;
  transition: margin-left var(--transition);
  width: calc(100% - var(--sidebar-w));
  max-width: calc(100vw - var(--sidebar-w));
  overflow-x: hidden;
  box-sizing: border-box;
}

.tab-content { display: none; animation: fadeIn 0.3s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   DASHBOARD
   ===================================================== */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.dash-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.card-green::before { background: var(--gold-gradient); }
.card-gold::before  { background: var(--gold-gradient); }
.card-blue::before  { background: linear-gradient(90deg, var(--blue), #3b82f6); }
.card-purple::before{ background: linear-gradient(90deg, var(--purple), #7c3aed); }
.dash-card:hover { border-color: var(--border-gold); transform: translateY(-2px); box-shadow: var(--shadow-card); }

.dash-card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.card-green .dash-card-icon { background: rgba(74,222,128,0.1); color: var(--green); }
.card-gold  .dash-card-icon { background: rgba(201,168,76,0.1);  color: var(--gold); }
.card-blue  .dash-card-icon { background: rgba(96,165,250,0.1);  color: var(--blue); }
.card-purple.dash-card-icon { background: rgba(167,139,250,0.1); color: var(--purple); }
.card-purple .dash-card-icon{ background: rgba(167,139,250,0.1); color: var(--purple); }

.dash-card-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; }
.dash-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-value { font-size: 1.4rem; font-weight: 800; font-family: 'Rajdhani', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.last-signal-banner {
  background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(201,168,76,0.03));
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.signal-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.signal-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  flex-wrap: wrap;
}
.signal-pattern { font-weight: 600; font-size: 0.9rem; }
.signal-entry { font-weight: 800; color: var(--gold); font-size: 1rem; }
.signal-status { font-size: 0.8rem; font-weight: 700; }
.signal-time { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }

.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  overflow: hidden;       /* impede canvas/legenda de vazar */
  min-width: 0;           /* fix para grid em telas estreitas */
  box-sizing: border-box;
}
.chart-card h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chart-card h3 i { color: var(--gold); }

.recent-ops {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.recent-ops h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.recent-ops h3 i { color: var(--gold); }
.ops-table-wrap { overflow-x: auto; }
.ops-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.ops-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
.ops-table td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(42,42,56,0.5);
}
.ops-table tr:last-child td { border-bottom: none; }
.ops-table tr:hover td { background: rgba(255,255,255,0.02); }

.badge-green {
  background: rgba(74,222,128,0.15);
  border: 1px solid rgba(74,222,128,0.3);
  border-radius: 6px;
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  white-space: nowrap;
}
.badge-red {
  background: rgba(248,113,113,0.15);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 6px;
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  white-space: nowrap;
}
.badge-wait {
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 6px;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  white-space: nowrap;
}

/* =====================================================
   LIVE TAB
   ===================================================== */
.signal-ticker {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
}
.ticker-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ticker-content {
  font-size: 0.82rem;
  color: var(--text-dim);
  white-space: nowrap;
  animation: tickerScroll 20s linear infinite;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.live-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}

.live-main {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.live-header {
  background: rgba(0,0,0,0.3);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.live-dot-anim {
  width: 10px; height: 10px;
  background: var(--red);
  border-radius: 50%;
  animation: livePulse 1s ease-in-out infinite;
  box-shadow: 0 0 8px var(--red);
}

.btn-fullscreen {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.8rem;
  transition: all var(--transition);
}
.btn-fullscreen:hover { border-color: var(--gold); color: var(--gold); }

.game-frame-wrap {
  min-height: 480px;
  position: relative;
  background: #05050a;
}
.game-frame-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: none;
}
.game-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  gap: 12px;
  color: var(--text-muted);
}
.game-placeholder p { font-size: 1rem; font-weight: 500; }
.dice-anim {
  display: flex;
  gap: 12px;
  font-size: 3rem;
  margin-bottom: 8px;
}
.dice {
  animation: diceRoll 3s ease-in-out infinite;
  display: inline-block;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.4));
}
.dice:nth-child(2) { animation-delay: 0.5s; }
.dice:nth-child(3) { animation-delay: 1s; }
.dice:nth-child(4) { animation-delay: 1.5s; }
@keyframes diceRoll {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(15deg) scale(1.1); }
  75% { transform: rotate(-10deg) scale(0.95); }
}

.iframe-input-wrap {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  padding: 0 16px;
  margin-top: 8px;
}
.iframe-url-input { flex: 1; }

.live-sidebar { display: flex; flex-direction: column; gap: 16px; }

.signal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  overflow: hidden;
}
.signal-card-header {
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.05));
  padding: 12px 16px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-gold);
}
.signal-live-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  animation: livePulse 1s ease-in-out infinite;
}
.signal-body { padding: 14px 16px; }
.signal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(42,42,56,0.5);
  font-size: 0.85rem;
}
.signal-row:last-child { border-bottom: none; }
.signal-row span { color: var(--text-muted); font-size: 0.8rem; }
.signal-row strong { font-weight: 700; }

.signal-status-box {
  margin: 0 16px 12px;
  padding: 10px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 8px;
  text-align: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--gold);
}
.signal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px 14px;
}

.sequence-panel, .win-rate-card, .history-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.sequence-panel h4,
.win-rate-card h4,
.history-panel h4 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sequence-panel h4 i,
.win-rate-card h4 i,
.history-panel h4 i { color: var(--gold); }

.sequence-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.seq-ball {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  animation: ballPop 0.3s ease;
}
@keyframes ballPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.seq-p { background: rgba(96,165,250,0.2); border: 1px solid var(--blue); color: var(--blue); }
.seq-b { background: rgba(248,113,113,0.2); border: 1px solid var(--red); color: var(--red); }
.seq-t { background: rgba(74,222,128,0.2); border: 1px solid var(--green); color: var(--green); }

.win-rate-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.progress-bar-wrap {
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 6px;
}
.progress-bar-fill {
  height: 100%;
  background: var(--gold-gradient);
  border-radius: 20px;
  transition: width 0.5s ease;
}
.win-rate-pct { font-size: 0.8rem; color: var(--text-dim); text-align: center; }

.history-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  border: 1px solid transparent;
}
.green-item { background: rgba(74,222,128,0.05); border-color: rgba(74,222,128,0.15); }
.red-item   { background: rgba(248,113,113,0.05); border-color: rgba(248,113,113,0.15); }
.h-time { color: var(--text-muted); width: 40px; flex-shrink: 0; }
.h-entry { flex: 1; font-weight: 600; }

/* =====================================================
   CALCULADORA
   ===================================================== */
.calc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.calc-left, .calc-right { display: flex; flex-direction: column; gap: 20px; }

.calc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.calc-card h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.calc-card h3 i { color: var(--gold); }

.calc-form { display: flex; flex-direction: column; gap: 0; }

.calc-results {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calc-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  font-size: 0.875rem;
}
.calc-result-item span { color: var(--text-muted); }
.calc-result-item strong { font-size: 1rem; font-weight: 700; }

.daily-register {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.daily-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 12px;
  color: var(--text-dim);
}
.daily-btns { display: flex; flex-direction: column; gap: 8px; }
.daily-btns .btn-green, .daily-btns .btn-red { width: 100%; justify-content: center; padding: 10px; }

/* ── Valor Alternativo ── */
.alt-value-wrap {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.alt-value-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.alt-value-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}
.alt-value-toggle-label {
  font-size: 0.82rem;
  color: var(--text-dim);
  transition: color .2s;
}
.alt-value-toggle:hover .alt-value-toggle-label { color: var(--gold); }
.alt-value-toggle-label i { margin-right: 4px; color: var(--gold); }

.alt-value-field {
  display: none;
  margin-top: 12px;
  animation: fadeInDown .22s ease;
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.alt-value-hint {
  font-size: 0.78rem;
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 11px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.alt-value-hint i { color: var(--gold); margin-right: 4px; }
.alt-value-hint strong { color: var(--text); }

.alt-value-input-wrap {
  display: flex;
  align-items: center;
  background: var(--bg-input, rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s;
}
.alt-value-input-wrap:focus-within { border-color: var(--gold); }
.alt-value-prefix {
  padding: 0 12px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(212,175,55,0.08);
  border-right: 1px solid var(--border);
  height: 42px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.alt-value-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  padding: 0 14px;
  height: 42px;
}
.alt-value-input::placeholder { color: var(--text-dim); font-weight: 400; font-size: 0.85rem; }

.alt-value-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
  align-items: center;
}
.alt-ex-label {
  font-size: 0.74rem;
  color: var(--text-dim);
  flex-shrink: 0;
}
.alt-ex-btn {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.alt-ex-btn:hover { opacity: .8; transform: scale(1.04); }
.alt-ex-green {
  background: rgba(74,222,128,0.1);
  border-color: rgba(74,222,128,0.25);
  color: #4ade80;
}
.alt-ex-red {
  background: rgba(248,113,113,0.1);
  border-color: rgba(248,113,113,0.25);
  color: #f87171;
}

.daily-log { max-height: 200px; overflow-y: auto; }
.daily-log-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 0.82rem;
}
.log-green { background: rgba(74,222,128,0.06); border: 1px solid rgba(74,222,128,0.15); }
.log-red   { background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.15); }
.log-neutral{ background: rgba(255,255,255,0.03); border: 1px solid var(--border); }
.log-day { font-weight: 700; color: var(--text-dim); width: 50px; flex-shrink: 0; }
.log-result { flex: 1; font-weight: 600; }
.log-banca { margin-left: auto; color: var(--gold); font-weight: 600; }

.calc-stats-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
}
.calc-stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.calc-stat-box i { font-size: 1.1rem; }
.calc-stat-box span { font-size: 0.72rem; color: var(--text-muted); }
.calc-stat-box strong { font-size: 1.1rem; font-weight: 800; }

/* =====================================================
   AULAS
   ===================================================== */
.aulas-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.aulas-search {
  flex: 1;
  min-width: 200px;
  position: relative;
  display: flex;
  align-items: center;
}
.aulas-search i {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.aulas-search input { padding-left: 36px; }

.aulas-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  transition: all var(--transition);
  white-space: nowrap;
}
.filter-btn:hover { border-color: var(--gold); color: var(--gold); }
.filter-btn.active { background: rgba(201,168,76,0.15); border-color: var(--gold); color: var(--gold); }

.progress-overview {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.prog-info { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.prog-info span { font-size: 0.85rem; color: var(--text-dim); }
.prog-info strong { font-size: 1.1rem; font-weight: 800; }
.prog-bar-outer {
  flex: 1;
  min-width: 120px;
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  height: 8px;
  overflow: hidden;
}
.prog-bar-inner {
  height: 100%;
  background: var(--gold-gradient);
  border-radius: 20px;
  transition: width 0.6s ease;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.module-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
}
.module-card:hover { transform: translateY(-3px); border-color: var(--border-gold); box-shadow: var(--shadow-card); }

.module-thumb {
  position: relative;
  background: linear-gradient(135deg, #0d0d20, #1a1a30);
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.module-thumb-icon { font-size: 3rem; opacity: 0.6; }
.module-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity var(--transition);
}
.module-card:hover .module-thumb-play { opacity: 1; }
.play-btn-circle {
  width: 52px; height: 52px;
  background: var(--gold-gradient);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #111;
  font-size: 1.2rem;
}
.module-level-tag {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tag-iniciante    { background: rgba(74,222,128,0.2); border: 1px solid var(--green); color: var(--green); }
.tag-intermediario{ background: rgba(250,204,21,0.2); border: 1px solid #facc15; color: #facc15; }
.tag-avancado     { background: rgba(248,113,113,0.2); border: 1px solid var(--red); color: var(--red); }

.module-done-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(74,222,128,0.2);
  border: 1px solid var(--green);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  font-size: 0.75rem;
}

.module-body { padding: 16px; }
.module-body h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
.module-body p  { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px; }
.module-meta {
  display: flex;
  gap: 14px;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.module-meta i { color: var(--gold); margin-right: 3px; }
.module-prog-bar {
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  height: 4px;
  overflow: hidden;
}
.module-prog-fill {
  height: 100%;
  background: var(--gold-gradient);
  border-radius: 20px;
  transition: width 0.5s ease;
}
.module-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.module-footer .btn-gold { font-size: 0.8rem; padding: 7px 14px; }

/* =====================================================
   CHAT
   ===================================================== */
.chat-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: calc(100vh - var(--topbar-h) - 48px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.chat-sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-sidebar-header {
  padding: 14px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.chat-sidebar-header h4 { font-size: 0.85rem; font-weight: 700; color: var(--text-dim); }

.channel-list { padding: 8px; }
.channel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: 2px;
}
.channel-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.channel-item.active { background: rgba(201,168,76,0.1); color: var(--gold); }
.channel-item i { width: 14px; }

.online-list-header {
  padding: 12px 14px 6px;
  border-top: 1px solid var(--border);
}
.online-list-header h4 { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

.online-list { flex: 1; overflow-y: auto; padding: 4px 8px; }
.online-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--transition);
}
.online-user:hover { background: rgba(255,255,255,0.04); }
.online-user-dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}
.online-user-av {
  width: 24px; height: 24px;
  background: var(--gold-gradient);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #111;
  flex-shrink: 0;
}

.chat-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pinned-message {
  padding: 10px 16px;
  background: rgba(201,168,76,0.05);
  border-bottom: 1px solid rgba(201,168,76,0.15);
  font-size: 0.82rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background var(--transition);
}
.chat-msg:hover { background: rgba(255,255,255,0.02); }
.chat-msg.own-msg { flex-direction: row-reverse; }
.msg-avatar {
  width: 32px; height: 32px;
  background: var(--gold-gradient);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; color: #111;
  flex-shrink: 0;
}
.msg-content { max-width: 80%; }
.msg-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.msg-name { font-size: 0.8rem; font-weight: 700; color: var(--gold); }
.msg-time { font-size: 0.7rem; color: var(--text-muted); }
.admin-tag {
  font-size: 0.65rem;
  background: rgba(201,168,76,0.2);
  border: 1px solid rgba(201,168,76,0.4);
  color: var(--gold);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
}
.msg-text {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}

.chat-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-secondary);
}
.chat-input-area input { flex: 1; }
.emoji-btn, .send-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 6px;
  border-radius: 8px;
  transition: all var(--transition);
  flex-shrink: 0;
}
.emoji-btn { color: var(--text-muted); }
.emoji-btn:hover { color: var(--gold); background: rgba(255,255,255,0.05); }
.send-btn { color: var(--gold); }
.send-btn:hover { background: rgba(201,168,76,0.1); }

.emoji-picker {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  font-size: 1.3rem;
  letter-spacing: 4px;
  cursor: pointer;
  animation: slideDown 0.2s ease;
}

/* =====================================================
   NETWORK
   ===================================================== */
.network-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

.network-feed { display: flex; flex-direction: column; gap: 16px; }

.create-post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.create-post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.post-avatar {
  width: 38px; height: 38px;
  background: var(--gold-gradient);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 800; color: #111;
  flex-shrink: 0;
}
.create-post-header input { flex: 1; }
.create-post-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-attach {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}
.btn-attach:hover { border-color: var(--gold); color: var(--gold); }
.create-post-footer .btn-gold { margin-left: auto; }
#post-img-preview {
  display: flex;
  align-items: center;
  gap: 8px;
}
#post-img-thumb { width: 50px; height: 50px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
#post-img-preview button {
  background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem;
}
#post-img-preview button:hover { color: var(--red); }

.post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color var(--transition);
  animation: fadeIn 0.3s ease;
}
.post-card:hover { border-color: var(--border-gold); }
.post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.post-user-info { flex: 1; }
.post-user-name { font-size: 0.9rem; font-weight: 700; }
.post-user-role { font-size: 0.75rem; color: var(--text-muted); }
.post-time { font-size: 0.75rem; color: var(--text-muted); }
.post-text { font-size: 0.875rem; line-height: 1.5; margin-bottom: 12px; }
.post-img { width: 100%; border-radius: 8px; margin-bottom: 12px; }
.post-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.post-action {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all var(--transition);
}
.post-action:hover { background: rgba(255,255,255,0.04); }
.post-action.liked { color: var(--red); }
.post-action.liked i { animation: heartPop 0.3s ease; }
@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.post-comments { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; display: none; }
.post-comments.open { display: block; }
.comment-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.comment-input-row input { flex: 1; font-size: 0.82rem; }
.btn-comment-send {
  background: rgba(201,168,76,0.1);
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  cursor: pointer;
  padding: 6px 12px;
  font-size: 0.8rem;
  transition: all var(--transition);
}
.btn-comment-send:hover { background: rgba(201,168,76,0.2); }
.comment-item {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.82rem;
}
.comment-av {
  width: 24px; height: 24px;
  background: var(--gold-gradient);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 800; color: #111;
  flex-shrink: 0;
}
.comment-name { font-weight: 700; font-size: 0.78rem; color: var(--gold); }
.comment-text { color: var(--text-dim); }

.network-right { display: flex; flex-direction: column; gap: 16px; }

.ranking-card, .profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.ranking-card h4, .profile-card h4 {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ranking-list { display: flex; flex-direction: column; gap: 8px; }
.ranking-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: 0.82rem;
  transition: background var(--transition);
}
.ranking-item:hover { background: rgba(255,255,255,0.04); }
.rank-num {
  width: 22px;
  font-weight: 800;
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.rank-1 .rank-num { color: #ffd700; }
.rank-2 .rank-num { color: #c0c0c0; }
.rank-3 .rank-num { color: #cd7f32; }
.rank-av {
  width: 28px; height: 28px;
  background: var(--gold-gradient);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; color: #111;
  flex-shrink: 0;
}
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-score { font-size: 0.72rem; color: var(--text-muted); }
.rank-greens { color: var(--green); font-weight: 700; font-size: 0.8rem; }

.profile-card { text-align: center; }
.profile-avatar-big {
  width: 64px; height: 64px;
  background: var(--gold-gradient);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; color: #111;
  margin: 0 auto 10px;
  box-shadow: 0 0 20px rgba(201,168,76,0.3);
}
.profile-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.profile-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.profile-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.profile-stats strong { font-size: 1.1rem; font-weight: 800; color: var(--gold); }
.profile-stats span { font-size: 0.72rem; color: var(--text-muted); }

/* =====================================================
   ADMIN
   ===================================================== */
.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.admin-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-stat-card i { font-size: 1.4rem; }
.admin-stat-card div { display: flex; flex-direction: column; gap: 2px; }
.admin-stat-card strong { font-size: 1.4rem; font-weight: 800; font-family: 'Rajdhani', sans-serif; }
.admin-stat-card span { font-size: 0.75rem; color: var(--text-muted); }

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.admin-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.admin-card h3 {
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.mod-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.mod-tab {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  transition: all var(--transition);
}
.mod-tab.active { background: rgba(201,168,76,0.1); border-color: var(--gold); color: var(--gold); }
.mod-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.mod-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  font-size: 0.8rem;
}
.mod-item-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-item-user { color: var(--gold); font-weight: 600; font-size: 0.75rem; }
.btn-mod-del {
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 6px;
  color: var(--red);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 3px 8px;
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-mod-del:hover { background: rgba(248,113,113,0.2); }

.users-search { margin-bottom: 12px; }
.users-list { max-height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.user-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  font-size: 0.82rem;
}
.user-list-item .user-av {
  width: 30px; height: 30px;
  background: var(--gold-gradient);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; color: #111;
  flex-shrink: 0;
}
.user-list-info { flex: 1; min-width: 0; }
.user-list-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-list-email { font-size: 0.72rem; color: var(--text-muted); }
.user-status-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
  flex-shrink: 0;
}
.status-active { background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.3); color: var(--green); }
.status-blocked { background: rgba(248,113,113,0.15); border: 1px solid rgba(248,113,113,0.3); color: var(--red); }

/* =====================================================
   SISTEMA DE PADRÕES — ADMIN
   ===================================================== */
.patterns-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 4px;
}

/* Legenda */
.patterns-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 0.78rem;
}
.leg-item { display: flex; align-items: center; gap: 5px; color: var(--text-dim); }
.leg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.leg-sep { color: var(--border); font-size: 1rem; }

/* Botões importar */
.patterns-import-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.patterns-import-btns .btn-gold { padding: 9px 16px; font-size: 0.82rem; }
.patterns-import-btns .btn-outline { padding: 9px 14px; font-size: 0.82rem; }

/* Preview list */
.patterns-preview-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}
.prev-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.prev-seq { display: flex; gap: 4px; }
.prev-ball {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800;
  flex-shrink: 0;
}
.prev-ball-v { background: rgba(248,113,113,0.25); border: 1px solid #f87171; color: #f87171; }
.prev-ball-a { background: rgba(96,165,250,0.25);  border: 1px solid #60a5fa; color: #60a5fa; }
.prev-ball-e { background: rgba(167,139,250,0.25); border: 1px solid #a78bfa; color: #a78bfa; }
.prev-arrow { color: var(--text-muted); font-size: 0.75rem; }
.prev-entry-v { color: #f87171; font-weight: 800; font-size: 0.82rem; }
.prev-entry-a { color: #60a5fa; font-weight: 800; font-size: 0.82rem; }
.prev-entry-e { color: #a78bfa; font-weight: 800; font-size: 0.82rem; }
.prev-raw { color: var(--text-muted); font-family: 'Courier New', monospace; font-size: 0.75rem; margin-left: auto; }

/* Coluna direita — salvos */
.patterns-saved-col { display: flex; flex-direction: column; gap: 12px; }

.patterns-saved-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.patterns-saved-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 260px;
  overflow-y: auto;
  background: rgba(0,0,0,0.15);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  min-height: 80px;
}

.pattern-saved-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 0.82rem;
}
.pattern-saved-item:hover { border-color: var(--gold); background: rgba(201,168,76,0.06); }
.pattern-saved-item.selected { border-color: var(--gold); background: rgba(201,168,76,0.1); }
.psi-seq { display: flex; gap: 3px; }
.psi-arrow { color: var(--text-muted); font-size: 0.72rem; }
.psi-entry { font-weight: 800; }
.psi-entry-v { color: #f87171; }
.psi-entry-a { color: #60a5fa; }
.psi-entry-e { color: #a78bfa; }
.psi-del {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 2px 5px;
  border-radius: 4px;
  transition: color var(--transition);
  flex-shrink: 0;
}
.psi-del:hover { color: var(--red); }

/* Send signal box */
.send-signal-box {
  background: rgba(201,168,76,0.04);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 10px;
  padding: 14px;
}

/* Preview do sinal selecionado */
.signal-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
}
.sig-prev-seq { display: flex; gap: 5px; }
.sig-prev-arrow { font-size: 0.9rem; }
.sig-prev-entry { font-size: 1rem; font-weight: 800; }

/* Responsivo padrões */
@media (max-width: 900px) {
  .patterns-layout { grid-template-columns: 1fr; }
}

/* =====================================================
   TOAST
   ===================================================== */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 9999;
}
.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 280px;
  max-width: 360px;
  box-shadow: var(--shadow-card);
  animation: toastIn 0.3s ease;
  border-left: 3px solid var(--gold);
}
.toast.toast-green { border-left-color: var(--green); }
.toast.toast-red   { border-left-color: var(--red); }
.toast.toast-blue  { border-left-color: var(--blue); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}
.toast i { font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.toast.toast-green i { color: var(--green); }
.toast.toast-red   i { color: var(--red); }
.toast.toast-blue  i { color: var(--blue); }
.toast b { font-size: 0.85rem; font-weight: 700; display: block; margin-bottom: 2px; }
.toast p { font-size: 0.8rem; color: var(--text-dim); }

/* =====================================================
   AUTO-SINAL
   ===================================================== */
.auto-signal-card {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(201,168,76,0.04) 100%);
  border: 1px solid var(--border-gold);
}
.auto-signal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.auto-signal-header h3 { margin: 0; }

.auto-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.badge-active {
  background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.4);
  color: var(--green);
  animation: pulseBadge 1.8s ease-in-out infinite;
}
.badge-paused {
  background: rgba(107,107,133,0.15);
  border: 1px solid rgba(107,107,133,0.3);
  color: var(--text-dim);
}
@keyframes pulseBadge {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  50%      { box-shadow: 0 0 0 6px rgba(74,222,128,0.15); }
}

.auto-signal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Controles lado esquerdo */
.auto-signal-controls { display: flex; flex-direction: column; gap: 14px; }
.auto-ctrl-row { display: flex; align-items: flex-end; gap: 10px; }
.auto-apply-btn {
  padding: 10px 16px;
  white-space: nowrap;
  flex-shrink: 0;
}
.auto-signal-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auto-btn-wide {
  padding: 12px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  width: 100%;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all .2s;
}
.auto-btn-wide:disabled { cursor: not-allowed; }
.btn-red-outline {
  background: transparent;
  border: 1px solid rgba(248,113,113,0.4);
  color: var(--red);
}
.btn-red-outline:hover:not(:disabled) {
  background: rgba(248,113,113,0.1);
  border-color: var(--red);
}

/* Status lado direito */
.auto-signal-status { display: flex; flex-direction: column; gap: 14px; }
.auto-status-display {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.auto-status-icon { font-size: 2rem; line-height: 1; }
.auto-status-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin: 0 0 4px;
}
.auto-countdown {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  color: var(--gold);
  margin: 0;
  letter-spacing: .04em;
}
.auto-status-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.auto-pattern-queue {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.auto-queue-label {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.auto-queue-label strong { color: var(--text); }

/* Countdown no Live */
.countdown-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 6px;
}
.countdown-icon { font-size: 1.6rem; line-height: 1; }
.countdown-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin: 0 0 3px;
  font-weight: 700;
}
.countdown-value {
  font-size: 0.98rem;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  color: var(--gold);
  margin: 0;
}

@media (max-width: 900px) {
  .auto-signal-body { grid-template-columns: 1fr; }
  .auto-signal-btns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .auto-signal-btns { grid-template-columns: 1fr; }
}

/* =====================================================
   BAC BO LIVE — Resultados Reais
   ===================================================== */
.bacbo-live-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.bacbo-live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.bacbo-live-header span:first-child {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.live-api-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.live-api-online {
  background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.35);
  color: var(--green);
  animation: pulseBadge 1.8s ease-in-out infinite;
}
.live-api-connecting {
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
}
.live-api-error {
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.3);
  color: var(--red);
}

/* Último resultado */
.live-latest-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 2px;
}
.live-latest-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  white-space: nowrap;
}
.live-latest-result {
  font-size: 0.95rem;
  font-weight: 800;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: .04em;
}
.live-latest-player { color: #60a5fa; }
.live-latest-banker { color: #f87171; }
.live-latest-tie    { color: #a78bfa; }

/* Seq balls P/B/T */
.seq-ball.seq-p { background: rgba(96,165,250,0.2);  border: 1px solid #60a5fa; color: #60a5fa; }
.seq-ball.seq-b { background: rgba(248,113,113,0.2); border: 1px solid #f87171; color: #f87171; }
.seq-ball.seq-t { background: rgba(167,139,250,0.2); border: 1px solid #a78bfa; color: #a78bfa; }

/* Estatísticas */
.bacbo-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 12px 0 8px;
}
.bacbo-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bst-label {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.bacbo-stat strong { font-size: 1.1rem; font-weight: 800; font-family: 'Rajdhani', sans-serif; }
.bacbo-stat-p strong { color: #60a5fa; }
.bacbo-stat-b strong { color: #f87171; }
.bacbo-stat-t strong { color: #a78bfa; }
.bacbo-stat-tot strong { color: var(--gold); }

/* Barra Player% */
.bacbo-bar-wrap {
  height: 5px;
  background: rgba(248,113,113,0.25);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}
.bacbo-bar-fill {
  height: 100%;
  background: #60a5fa;
  border-radius: 4px;
  transition: width 0.6s ease;
}
.bacbo-bar-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 10px;
}

/* Histórico real */
.bacbo-hist-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bacbo-history-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 200px;
  overflow-y: auto;
}
.hlv-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  background: rgba(255,255,255,0.02);
}
.hlv-player { border-left: 2px solid #60a5fa; }
.hlv-banker { border-left: 2px solid #f87171; }
.hlv-tie    { border-left: 2px solid #a78bfa; }
.hlv-time   { color: var(--text-muted); font-size: 0.7rem; min-width: 54px; }
.hlv-score  { flex: 1; font-weight: 600; font-family: 'Rajdhani', sans-serif; font-size: 0.88rem; }
.hlv-badge  {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.hlv-badge-player { background: rgba(96,165,250,0.15);  color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); }
.hlv-badge-banker { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
.hlv-badge-tie    { background: rgba(167,139,250,0.15); color: #a78bfa; border: 1px solid rgba(167,139,250,0.3); }

/* =====================================================
   GINGABET CARD
   ===================================================== */
.gingabet-card {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(201,168,76,0.04) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 20px;
}
.gingabet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.gingabet-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dim);
}
.gingabet-brand strong { color: var(--gold); }
.gingabet-brand i { font-size: 1.2rem; }

.gb-status {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 4px 12px;
  border-radius: 20px;
}
.gb-status-off {
  background: rgba(107,107,133,0.15);
  border: 1px solid rgba(107,107,133,0.3);
  color: var(--text-muted);
}
.gb-status-on {
  background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.35);
  color: var(--green);
  animation: pulseBadge 1.8s ease-in-out infinite;
}
.gb-status-loading {
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
}
.gb-status-err {
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.3);
  color: var(--red);
}

.gb-login-form { width: 100%; }
.gb-form-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.gb-form-row .form-group { flex: 1; min-width: 160px; margin-bottom: 0; }
.gb-login-btn {
  padding: 10px 20px;
  white-space: nowrap;
  flex-shrink: 0;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.gb-info-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}
.gb-info-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gb-balance-box {
  border-color: var(--border-gold);
  background: rgba(201,168,76,0.05);
}
.gb-info-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
.gb-info-name  { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.gb-info-email { font-size: 0.75rem; color: var(--text-muted); }
.gb-balance-val {
  font-size: 1.4rem;
  font-weight: 800;
  font-family: 'Rajdhani', sans-serif;
  color: var(--gold);
  letter-spacing: .02em;
}
.gb-refresh-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  width: fit-content;
  transition: all var(--transition);
}
.gb-refresh-btn:hover { border-color: var(--gold); color: var(--gold); }

.gb-deposit-form { width: 100%; }
.gb-deposit-row  { display: flex; gap: 8px; align-items: flex-end; }
.gb-deposit-row input      { flex: 1; min-width: 0; height: 42px; padding: 8px 12px; }
.gb-deposit-row .btn-gold  { padding: 10px 14px; height: 42px; white-space: nowrap; font-size: 0.8rem; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.gb-logout-btn {
  background: transparent;
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 10px;
  color: var(--red);
  cursor: pointer;
  font-size: 1rem;
  padding: 10px 14px;
  align-self: center;
  flex-shrink: 0;
  transition: all var(--transition);
}
.gb-logout-btn:hover { background: rgba(248,113,113,0.1); border-color: var(--red); }

/* ── Responsive Gingabet + BacBo Live ── */
@media (max-width: 768px) {
  .gb-form-row               { flex-direction: column; }
  .gb-form-row .form-group   { min-width: unset; width: 100%; }
  .gb-login-btn              { width: 100%; justify-content: center; height: 44px; }
  .gb-info-row               { flex-direction: column; }
  .gb-info-box               { min-width: unset; }
  .gb-logout-btn             { width: 100%; justify-content: center; display: flex; }
  .gingabet-card             { padding: 14px; margin-top: 14px; }
  .bacbo-stats-row           { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 480px) {
  .bacbo-stats-row           { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .gb-deposit-row            { flex-direction: column; }
  .gb-deposit-row input      { width: 100%; }
  .gb-deposit-row .btn-gold  { width: 100%; justify-content: center; }
}

/* =====================================================
   BOTTOM NAV — mobile only
   ===================================================== */
.bottom-nav {
  display: none; /* shown via JS on mobile */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  z-index: 200;
  align-items: stretch;
  justify-content: space-around;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}
.bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 3px;
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 2px;
  position: relative;
  transition: color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.bnav-item i {
  font-size: 1.1rem;
  line-height: 1;
}
.bnav-item span { line-height: 1; }
.bnav-item.active {
  color: var(--gold);
}
.bnav-item.active i {
  filter: drop-shadow(0 0 6px rgba(201,168,76,0.5));
}
.bnav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  background: var(--red);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

/* ── 1200px: large tablet / small desktop ── */
@media (max-width: 1200px) {
  .dashboard-grid      { grid-template-columns: repeat(3, 1fr); }
  .charts-row          { grid-template-columns: 1fr; }
  .admin-stats-row     { grid-template-columns: repeat(2, 1fr); }
  .admin-grid          { grid-template-columns: 1fr; }
  .calc-layout         { grid-template-columns: 1fr; }
  .live-layout         { grid-template-columns: 1fr; }
  .live-sidebar        { display: grid; grid-template-columns: repeat(2, 1fr); }
  .network-layout      { grid-template-columns: 1fr 280px; }
  /* admin cards span 2 → reset to 1 col since grid is now 1 col */
  .admin-grid .admin-card[style*="span 2"] { grid-column: span 1 !important; }
}

/* ── 900px: tablet ── */
@media (max-width: 900px) {
  .network-layout              { grid-template-columns: 1fr; }
  .network-right               { display: grid; grid-template-columns: 1fr 1fr; }
  .calc-stats-row              { grid-template-columns: repeat(2, 1fr); }
  .auto-signal-body            { grid-template-columns: 1fr; }
  .auto-signal-btns            { grid-template-columns: 1fr 1fr; }
  .patterns-layout             { grid-template-columns: 1fr; }
  /* live sidebar stays 2-col on tablet */
  .live-sidebar                { grid-template-columns: repeat(2, 1fr); }
}

/* ── 768px: mobile landscape / small tablet ── */
@media (max-width: 768px) {
  /* ─ Layout skeleton ─ */
  .sidebar                     { transform: translateX(-100%); }
  .sidebar.open                { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,0.5); }
  .topbar                      { left: 0; }
  .menu-toggle                 { display: block; }
  .main-content                { margin-left: 0; padding: 14px 12px 74px; width: 100%; max-width: 100vw; }

  /* ─ Bottom nav visible ─ */
  .bottom-nav                  { display: flex; }

  /* ─ Dashboard ─ */
  .dashboard-grid              { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-card                   { padding: 14px 12px; gap: 10px; }
  .dash-card-icon              { width: 38px; height: 38px; font-size: 1rem; flex-shrink: 0; }
  .dash-value                  { font-size: 1.15rem; }
  .dash-label                  { font-size: 0.65rem; }
  .last-signal-banner          { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; }
  .signal-info                 { flex-wrap: wrap; gap: 6px; }
  .signal-pattern              { font-size: 0.82rem; }
  .signal-entry                { font-size: 0.9rem; }
  .signal-status               { font-size: 0.75rem; }
  .signal-time                 { font-size: 0.75rem; }
  .charts-row                  { grid-template-columns: 1fr; gap: 10px; }
  .chart-card                  { padding: 14px 12px; overflow: hidden; min-width: 0; box-sizing: border-box; }
  .chart-card h3               { font-size: 0.78rem; margin-bottom: 10px; }
  .chart-card canvas           { max-width: 100% !important; }
  .chart-card > div            { max-width: 100%; overflow: hidden; }

  /* ─ Live ─ */
  .live-layout                 { grid-template-columns: 1fr; gap: 14px; }
  .live-sidebar                { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .game-frame-wrap             { min-height: 220px; }
  .game-placeholder            { min-height: 220px; }
  .game-frame-wrap iframe      { min-height: 220px; }
  .dice-anim                   { font-size: 2rem; }

  /* ─ Calc ─ */
  .calc-layout                 { grid-template-columns: 1fr; gap: 14px; }
  .daily-btns                  { flex-direction: column; gap: 8px; }
  .daily-btns button           { width: 100%; }

  /* ─ Chat ─ */
  .chat-layout                 { grid-template-columns: 1fr; height: calc(100vh - var(--topbar-h) - 60px); min-height: 400px; }
  .chat-sidebar                { display: none; }
  .chat-sidebar.open           { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 500; background: var(--bg-sidebar); }
  .chat-main                   { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .messages-area               { flex: 1; overflow-y: auto; min-height: 0; }

  /* ─ Network ─ */
  .network-layout              { grid-template-columns: 1fr; }
  .network-right               { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .create-post-footer          { flex-wrap: wrap; gap: 8px; }

  /* ─ Admin ─ */
  .admin-stats-row             { grid-template-columns: 1fr 1fr; }
  .admin-grid                  { grid-template-columns: 1fr; }
  .admin-grid .admin-card[style*="span 2"] { grid-column: span 1 !important; }
  .patterns-layout             { grid-template-columns: 1fr; }
  .auto-signal-body            { grid-template-columns: 1fr; }
  .auto-signal-btns            { grid-template-columns: 1fr 1fr; }
  .auto-ctrl-row               { flex-wrap: wrap; }

  /* ─ Aulas ─ */
  .aulas-header                { flex-direction: column; align-items: stretch; gap: 10px; }
  .aulas-filters               { flex-wrap: wrap; }
  .modules-grid                { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  /* ─ Toast ─ */
  #toast-container             { left: 12px; right: 12px; bottom: 70px; }
  .toast                       { min-width: unset; max-width: 100%; width: 100%; }

  /* ─ Notif panel ─ */
  .notif-panel                 { width: calc(100vw - 24px); right: 12px; left: 12px; top: calc(var(--topbar-h) + 4px); max-height: calc(100vh - var(--topbar-h) - 70px); overflow-y: auto; }

  /* ─ Iframe input ─ */
  .iframe-input-wrap           { flex-direction: column; gap: 8px; }
  .iframe-url-input            { width: 100%; }

  /* ─ Ticker ─ */
  .signal-ticker               { padding: 8px 12px; gap: 10px; }
  .ticker-label                { font-size: 0.65rem; }

  /* ─ Topbar ─ */
  .topbar                      { padding: 0 12px; gap: 8px; }
  .topbar-logo-img             { height: 26px; }
  .topbar-title                { font-size: 0.72rem; }
  .topbar-right                { gap: 6px; }
  .topbar-user-name            { max-width: 72px; }
  .signal-alert-text           { display: none; }  /* só ícone no mobile */
  .signal-alert                { padding: 5px 8px; min-width: 32px; justify-content: center; }
}

/* ── 580px: small mobile landscape ── */
@media (max-width: 580px) {
  .live-sidebar                { grid-template-columns: 1fr; }
  .network-right               { grid-template-columns: 1fr; }
  .aulas-filters               { gap: 6px; }
  .filter-btn                  { font-size: 0.75rem; padding: 6px 10px; }
  .admin-stats-row             { grid-template-columns: 1fr 1fr; }
  .dashboard-grid              { grid-template-columns: 1fr 1fr; }
  .calc-stats-row              { grid-template-columns: 1fr 1fr; }
  /* user chip compacto em telas pequenas */
  .topbar-user-chip            { padding: 4px 10px 4px 4px; gap: 7px; }
}

/* ── 480px: small phone ── */
@media (max-width: 480px) {
  /* ─ Layout ─ */
  .main-content                { padding: 10px 10px 74px; width: 100%; max-width: 100vw; }
  .topbar                      { padding: 0 10px; }
  .topbar-title                { font-size: 0.88rem; }

  /* ─ Login ─ */
  .login-card                  { padding: 20px 16px; }
  .login-logo img              { max-width: 110px; }
  .demo-btns                   { flex-direction: column; gap: 8px; }
  .demo-btn-admin,
  .demo-btn-user               { width: 100%; justify-content: center; }

  /* ─ Dashboard ─ */
  .dashboard-grid              { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dash-card                   { padding: 12px 10px; gap: 8px; }
  .dash-card-icon              { width: 34px; height: 34px; font-size: 0.9rem; }
  .dash-value                  { font-size: 1rem; }
  .dash-label                  { font-size: 0.6rem; }
  .last-signal-banner          { padding: 10px 12px; gap: 5px; }
  .charts-row                  { gap: 10px; }
  .chart-card                  { padding: 12px 10px; }
  .chart-card h3               { font-size: 0.75rem; margin-bottom: 8px; }
  .ops-table-wrap              { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ops-table                   { min-width: 360px; }
  .recent-ops h3               { font-size: 0.8rem; }

  /* ─ Live ─ */
  .signal-ticker               { font-size: 0.75rem; padding: 8px 10px; }
  .ticker-label                { display: none; }
  .live-sidebar                { grid-template-columns: 1fr; }
  .signal-actions              { grid-template-columns: 1fr 1fr; display: grid; gap: 8px; }
  .signal-actions button       { width: 100%; padding: 10px 6px; font-size: 0.82rem; }
  .sequence-balls              { gap: 4px; flex-wrap: wrap; }

  /* ─ Ginga Game Container (mobile) ─ */
  .ginga-game-container        { margin-bottom: 14px; border-radius: 10px; }
  .ginga-game-header           { padding: 8px 12px; }
  .ginga-game-title            { font-size: 0.78rem; }
  /* Altura calculada: tela(796) - header(44) - ticker(40) - bottom-nav(56) - margem(8) = 648px */
  .ginga-iframe-wrap           {
    height: calc(100svh - 44px - 40px - 56px - 8px);
    min-height: 560px;
    max-height: 700px;
  }

  /* ─ Calc ─ */
  .calc-stats-row              { grid-template-columns: 1fr 1fr; }
  .calc-results                { gap: 6px; }
  .calc-result-item            { padding: 7px 10px; font-size: 0.82rem; }
  .calc-result-item span       { font-size: 0.75rem; }
  .calc-result-item strong     { font-size: 0.9rem; }

  /* ─ Aulas ─ */
  .modules-grid                { grid-template-columns: 1fr; }
  .progress-overview           { flex-direction: column; align-items: flex-start; gap: 6px; }
  .prog-bar-outer              { width: 100%; }
  .filter-btn                  { font-size: 0.72rem; padding: 5px 8px; }

  /* ─ Chat ─ */
  .chat-layout                 { height: calc(100vh - var(--topbar-h) - 60px); min-height: 360px; }
  .chat-input-area             { padding: 8px 10px; gap: 6px; }
  .emoji-picker                { font-size: 1.1rem; letter-spacing: 3px; }

  /* ─ Network ─ */
  .network-right               { grid-template-columns: 1fr; }
  .create-post-footer          { gap: 8px; }
  .post-footer                 { gap: 6px; flex-wrap: wrap; }
  .post-action                 { font-size: 0.75rem; padding: 4px 6px; }
  .post-text                   { font-size: 0.82rem; }

  /* ─ Admin ─ */
  .admin-stats-row             { grid-template-columns: 1fr 1fr; }
  .admin-stat-card             { padding: 12px 10px; gap: 8px; }
  .admin-stat-card strong      { font-size: 1.1rem; }
  .admin-stat-card i           { font-size: 1.1rem; }
  .admin-card h3               { font-size: 0.82rem; }
  .auto-ctrl-row               { flex-direction: column; align-items: stretch; gap: 8px; }
  .auto-apply-btn              { width: 100%; }
  .auto-signal-btns            { grid-template-columns: 1fr; }
  .patterns-import-btns        { flex-direction: column; }
  .patterns-import-btns button { width: 100%; }
  .send-signal-box             { padding: 10px; }
  .patterns-legend             { font-size: 0.72rem; gap: 8px; padding: 8px 10px; }
  .leg-sep                     { display: none; }

  /* ─ Bottom nav ─ */
  .bnav-item                   { font-size: 0.55rem; gap: 2px; }
  .bnav-item i                 { font-size: 1rem; }

  /* ─ Toast ─ */
  #toast-container             { left: 8px; right: 8px; bottom: 68px; }
  .toast                       { padding: 10px 14px; }
  .toast b                     { font-size: 0.82rem; }
  .toast p                     { font-size: 0.75rem; }
}

/* ── SIDEBAR OVERLAY ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 150;
}
.sidebar-overlay.active { display: block; }

/* =====================================================
   SIGNAL BAR — Barra fixa entre header e jogo
   ===================================================== */

/* ── Wrapper: bloco entre header e iframe ── */
.fsb-wrap {
  display: block;
  width: 100%;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
}

/* ── Barra base: full-width ── */
.signal-bar {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 40px;
  padding: 0;
  font-family: 'Inter', 'Rajdhani', sans-serif;
  background: rgba(8,8,14,0.97);
  border: none;
  border-bottom: 1.5px solid rgba(220,30,30,0.55);
  box-shadow: 0 4px 18px rgba(220,30,30,0.12), inset 0 -1px 0 rgba(220,30,30,0.08);
  animation: fsbFadeIn .30s ease both;
  transition: border-color .25s, box-shadow .25s;
  cursor: default;
  overflow: hidden;
}

/* Variantes de cor */
.signal-bar.buscando {
  border-bottom-color: rgba(240,180,41,0.45);
  box-shadow: 0 4px 14px rgba(240,180,41,0.10), inset 0 -1px 0 rgba(240,180,41,0.06);
}
.signal-bar.green {
  border-bottom-color: rgba(34,197,94,0.55);
  box-shadow: 0 4px 18px rgba(34,197,94,0.14), inset 0 -1px 0 rgba(34,197,94,0.08);
}
.signal-bar.red-result {
  border-bottom-color: rgba(239,68,68,0.60);
  box-shadow: 0 4px 18px rgba(239,68,68,0.14), inset 0 -1px 0 rgba(239,68,68,0.08);
}

/* Animações */
@keyframes fsbFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fsbSlideIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.signal-bar.green,
.signal-bar.red-result { animation: fsbSlideIn .28s ease both; }

/* ── Spacer: empurra ações para a direita ── */
.fsb-spacer { flex: 1; }

/* ── Seção LIVE (barras + texto) ── */
.fsb-live {
  display: flex; align-items: center; gap: 5px;
  padding: 0 12px 0 14px; height: 100%;
  border-right: 1px solid rgba(220,30,30,0.20);
  flex-shrink: 0;
}
.signal-bar.buscando   .fsb-live { border-right-color: rgba(240,180,41,0.18); }
.signal-bar.green      .fsb-live { border-right-color: rgba(34,197,94,0.22);  }
.signal-bar.red-result .fsb-live { border-right-color: rgba(239,68,68,0.22);  }

.fsb-bars { display: flex; align-items: flex-end; gap: 1.5px; height: 13px; }
.fsb-bars span {
  display: block; width: 2.5px; border-radius: 1px;
  background: #e81a1a;
  animation: fsbPulse 1.1s ease-in-out infinite;
}
.signal-bar.buscando   .fsb-bars span { background: #f0b429; }
.signal-bar.green      .fsb-bars span { background: #22c55e; }
.signal-bar.red-result .fsb-bars span { background: #ef4444; }
.fsb-bars span:nth-child(1){ height: 5px;  animation-delay: 0s;    }
.fsb-bars span:nth-child(2){ height: 9px;  animation-delay: .15s;  }
.fsb-bars span:nth-child(3){ height: 12px; animation-delay: .30s;  }
.fsb-bars span:nth-child(4){ height: 7px;  animation-delay: .45s;  }
@keyframes fsbPulse {
  0%,100%{ opacity: 1;   transform: scaleY(1);   }
  50%    { opacity: .38; transform: scaleY(.50); }
}
.fsb-live-txt {
  font-size: 0.68rem; font-weight: 800;
  color: #e81a1a; letter-spacing: .09em; text-transform: uppercase;
}
.signal-bar.buscando   .fsb-live-txt { color: #f0b429; }
.signal-bar.green      .fsb-live-txt { color: #22c55e; }
.signal-bar.red-result .fsb-live-txt { color: #ef4444; }

/* ── Itens centrais (entrada / proteger) ── */
.fsb-item {
  display: flex; align-items: center; gap: 5px;
  padding: 0 9px; height: 100%;
}
.fsb-item + .fsb-item { border-left: 1px solid rgba(255,255,255,0.07); }
.fsb-lbl {
  font-size: 0.62rem; font-weight: 500;
  color: rgba(235,240,255,0.78); letter-spacing: .01em;
}
.fsb-val {
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.fsb-val.red    { color: #e84a4a; }
.fsb-val.blue   { color: #4a9eff; }
.fsb-val.orange { color: #f07828; }

/* Dots coloridos */
.fsb-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.fsb-dot.red    { background: #e81a1a; box-shadow: 0 0 6px rgba(232,26,26,.8);  animation: fsbDotGlow 1.8s ease-in-out infinite; }
.fsb-dot.orange { background: #f07828; box-shadow: 0 0 6px rgba(240,120,40,.8); animation: fsbDotGlow 1.8s ease-in-out infinite .6s; }
.fsb-dot.blue   { background: #2a6fdb; box-shadow: 0 0 6px rgba(42,111,219,.8); animation: fsbDotGlow 1.8s ease-in-out infinite; }
.fsb-dot.green  { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.9);  animation: fsbDotGlow 1.4s ease-in-out infinite; }
.fsb-dot.idle   { background: #4b5563; box-shadow: none; animation: none; }
@keyframes fsbDotGlow { 0%,100%{ opacity:1; } 50%{ opacity:.50; } }

/* ── Estado Buscando ── */
.fsb-buscando {
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px; height: 100%;
}
.fsb-scan-icon {
  width: 14px; height: 14px; position: relative; flex-shrink: 0;
}
.fsb-scan-icon::before,
.fsb-scan-icon::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; border: 1.5px solid #f0b429;
}
.fsb-scan-icon::before { animation: fsbRadar 1.6s ease-out infinite; }
.fsb-scan-icon::after  { animation: fsbRadar 1.6s ease-out infinite .8s; }
@keyframes fsbRadar {
  0%  { transform: scale(0.1); opacity: 1; }
  100%{ transform: scale(1.8); opacity: 0; }
}
.fsb-scan-dot {
  width: 5px; height: 5px; background: #f0b429; border-radius: 50%;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 6px rgba(240,180,41,.9);
}
.fsb-buscando-txt {
  font-size: 0.63rem; font-weight: 700;
  color: #f0b429; letter-spacing: .06em; text-transform: uppercase;
}

/* ── Badge de Gale ── */
.fsb-gale-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 0 11px; height: 100%;
  border-left: 1px solid rgba(255,255,255,0.07);
}
.fsb-gale-txt {
  font-size: 0.65rem; font-weight: 800;
  color: #f0b429; letter-spacing: .05em;
}
.fsb-gale-txt.g2 { color: #f97316; }

/* ── Resultado GREEN / RED ── */
.fsb-result {
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px; height: 100%;
}
.fsb-result-ico {
  font-size: 0.88rem; line-height: 1; flex-shrink: 0;
  animation: iconPop .5s ease both;
}
@keyframes iconPop {
  0%  { transform: scale(1); }
  40% { transform: scale(1.35); }
  70% { transform: scale(0.92); }
  100%{ transform: scale(1); }
}
.fsb-result-main { display: flex; flex-direction: column; gap: 0; }
.fsb-result-title {
  font-size: 0.70rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1;
}
.fsb-result-title.green { color: #22c55e; text-shadow: 0 0 10px rgba(34,197,94,.45); }
.fsb-result-title.red   { color: #ef4444; text-shadow: 0 0 10px rgba(239,68,68,.45); }
.fsb-result-sub {
  font-size: 0.54rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1; margin-top: 2px;
}
.fsb-result-sub.green { color: rgba(34,197,94,0.62); }
.fsb-result-sub.red   { color: rgba(239,68,68,0.62); }

/* Chip de gale no resultado */
.fsb-gale-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 7px; border-radius: 999px;
  font-size: 0.55rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; flex-shrink: 0;
}
.fsb-gale-chip.g1 { background: rgba(240,180,41,0.15); border: 1px solid rgba(240,180,41,0.50); color: #f0b429; }
.fsb-gale-chip.g2 { background: rgba(249,115,22,0.15); border: 1px solid rgba(249,115,22,0.55); color: #f97316; }

/* ── Ações (expand) ── */
.fsb-actions {
  display: flex; align-items: center; gap: 4px;
  padding: 0 12px 0 8px;
  border-left: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.fsb-btn {
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  color: rgba(210,225,255,0.60); font-size: 0.62rem;
  cursor: pointer; transition: background .15s, color .15s;
}
.fsb-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Mobile */
@media (max-width: 768px) {
  .signal-bar              { height: 38px; }
  .fsb-buscando-txt        { font-size: 0.58rem; }
  .fsb-lbl                 { font-size: 0.58rem; }
  .fsb-val                 { font-size: 0.62rem; }
  .fsb-result-title        { font-size: 0.65rem; }
  .fsb-live                { padding: 0 10px 0 12px; }
  .fsb-buscando            { padding: 0 10px; }
  .fsb-item                { padding: 0 8px; }
  .fsb-actions             { padding: 0 10px 0 6px; }
}

/* =====================================================
   GINGA GAME CONTAINER
   ===================================================== */
.ginga-game-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

/* Header */
.ginga-game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  gap: 10px;
  flex-shrink: 0;
}
.ginga-game-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ginga-live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--red);
  animation: livePulse 1s ease-in-out infinite;
  box-shadow: 0 0 7px var(--red);
  flex-shrink: 0;
}
.ginga-game-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ginga-game-title i { color: var(--gold); }
.ginga-game-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.ginga-url-btn,
.ginga-refresh-btn,
.ginga-expand-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 5px 9px;
  font-size: 0.78rem;
  transition: all var(--transition);
  line-height: 1;
}
.ginga-url-btn:hover    { border-color: var(--gold); color: var(--gold); }
.ginga-refresh-btn:hover{ border-color: var(--green); color: var(--green); }
.ginga-expand-btn:hover { border-color: var(--blue); color: var(--blue); }

/* URL Bar */
.ginga-url-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ginga-url-input {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  padding: 8px 12px;
  outline: none;
  transition: border-color var(--transition);
  min-width: 0;
}
.ginga-url-input:focus { border-color: var(--gold); }
.ginga-url-input::placeholder { color: var(--text-muted); }
.ginga-url-load-btn {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.8rem;
  padding: 8px 14px;
}

/* Iframe Wrap — desktop */
.ginga-iframe-wrap {
  position: relative;
  width: 100%;
  height: 520px;
  background: #05050a;
  overflow: hidden;
}
.ginga-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Placeholder */
.ginga-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  padding: 20px;
  text-align: center;
}
.ginga-placeholder-icon {
  font-size: 3.5rem;
  filter: drop-shadow(0 0 12px rgba(201,168,76,0.35));
  animation: diceRoll 3s ease-in-out infinite;
}
.ginga-placeholder-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.ginga-placeholder-sub {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 0;
}
.ginga-placeholder-sub i { color: var(--gold); }
.ginga-open-url-btn { font-size: 0.85rem; padding: 10px 20px; }

/* ── FULLSCREEN ── */
.game-frame-wrap:fullscreen,
.game-frame-wrap:-webkit-full-screen {
  background: #000;
  padding: 0;
}
.game-frame-wrap:fullscreen iframe,
.game-frame-wrap:-webkit-full-screen iframe { height: 100vh; min-height: 100vh; }