/* =====================================================================
   gordinho.live — BASE / DESIGN SYSTEM
   Paleta: azul + roxo + vermelho, detalhes neon
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root{
  /* --- cores base --- */
  --bg-0:#070510;
  --bg-1:#0c0819;
  --bg-2:#120c24;
  --bg-3:#181030;
  --bg-4:#1f1640;
  --surface:rgba(24,16,48,.72);
  --surface-2:rgba(31,22,64,.66);
  --line:rgba(139,92,246,.18);
  --line-strong:rgba(139,92,246,.38);

  /* --- texto --- */
  --txt:#eef0ff;
  --txt-2:#b6b2d8;
  --txt-3:#7d78a3;

  /* --- marca --- */
  --blue:#3b82f6;
  --blue-2:#2563eb;
  --indigo:#5b5bf6;
  --purple:#8b5cf6;
  --purple-2:#a855f7;
  --magenta:#e935c1;
  --red:#ef4444;
  --red-2:#f43f5e;
  --cyan:#22d3ee;
  --green:#34d399;
  --amber:#fbbf24;

  /* --- gradientes --- */
  --grad-brand:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 48%,#ef4444 100%);
  --grad-brand-soft:linear-gradient(135deg,rgba(59,130,246,.22),rgba(139,92,246,.22) 50%,rgba(239,68,68,.20));
  --grad-purple:linear-gradient(140deg,#a855f7,#5b21b6);
  --grad-blue:linear-gradient(140deg,#60a5fa,#1d4ed8);
  --grad-red:linear-gradient(140deg,#fb7185,#b91c1c);
  --grad-cyan:linear-gradient(140deg,#67e8f9,#0891b2);

  /* --- neon --- */
  --glow-purple:0 0 0 1px rgba(168,85,247,.35), 0 0 18px rgba(168,85,247,.35);
  --glow-blue:0 0 0 1px rgba(59,130,246,.35), 0 0 18px rgba(59,130,246,.35);
  --glow-red:0 0 0 1px rgba(239,68,68,.4), 0 0 22px rgba(239,68,68,.35);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.85);

  /* --- métrica de layout --- */
  --rail:74px;
  --sidebar:252px;
  --chat:340px;
  --radius:16px;
  --radius-sm:10px;
  --header-h:56px;

  --font:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Orbitron','Outfit',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--txt);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(59,130,246,.28), transparent 60%),
    radial-gradient(820px 520px at 88% 0%, rgba(168,85,247,.26), transparent 62%),
    radial-gradient(760px 620px at 60% 110%, rgba(239,68,68,.18), transparent 60%),
    linear-gradient(180deg,#0a0718,#070510 60%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(139,92,246,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,130,246,.05) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
}
body.scrollable{overflow:auto;}

h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:.2px;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
input,textarea,select{font-family:inherit;}
img{max-width:100%;display:block;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(139,92,246,.55),rgba(59,130,246,.45));
  border-radius:99px;border:2px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#a855f7,#3b82f6);background-clip:padding-box;}

/* ---------- tipografia utilitária ---------- */
.display{font-family:var(--font-display);letter-spacing:1px;text-transform:uppercase;}
.gradient-text{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.muted{color:var(--txt-2);}
.dim{color:var(--txt-3);}
.tiny{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;}

/* ---------- botões ---------- */
.btn{
  --btn-bg:var(--grad-brand);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 18px;border:0;border-radius:12px;cursor:pointer;
  font-size:14px;font-weight:700;color:#fff;background:var(--btn-bg);
  position:relative;overflow:hidden;letter-spacing:.2px;
  box-shadow:0 10px 26px -10px rgba(139,92,246,.9), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 16px 34px -12px rgba(168,85,247,.95), inset 0 1px 0 rgba(255,255,255,.35);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(.4);}
.btn.ghost{
  background:rgba(139,92,246,.10);color:var(--txt);
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
.btn.ghost:hover{background:rgba(139,92,246,.20);}
.btn.danger{--btn-bg:var(--grad-red);box-shadow:0 10px 26px -10px rgba(239,68,68,.9), inset 0 1px 0 rgba(255,255,255,.3);}
.btn.blue{--btn-bg:var(--grad-blue);}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:10px;}
.btn.block{width:100%;}
.btn.live-on{--btn-bg:var(--grad-red);animation:pulseRed 2.2s infinite;}
@keyframes pulseRed{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55),0 10px 26px -10px rgba(239,68,68,.9);}
  50%{box-shadow:0 0 0 12px rgba(239,68,68,0),0 10px 26px -10px rgba(239,68,68,.9);}
}

.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  background:rgba(139,92,246,.08);border:1px solid var(--line);cursor:pointer;
  color:var(--txt-2);transition:.18s ease;
}
.icon-btn:hover{background:rgba(139,92,246,.2);color:#fff;border-color:var(--line-strong);
  box-shadow:0 0 16px rgba(139,92,246,.4);}
.icon-btn.active{background:var(--grad-brand);color:#fff;border-color:transparent;}
.icon-btn.on{background:var(--grad-red);color:#fff;border-color:transparent;}

/* ---------- campos ---------- */
.field{display:flex;flex-direction:column;gap:7px;}
.field > label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);}
.input,.select,.textarea{
  width:100%;padding:12px 14px;border-radius:12px;color:var(--txt);
  background:rgba(8,5,20,.75);border:1px solid var(--line);
  font-size:14.5px;outline:none;transition:.18s ease;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:rgba(168,85,247,.75);
  box-shadow:0 0 0 4px rgba(139,92,246,.16), 0 0 22px rgba(139,92,246,.28);
}
.textarea{resize:vertical;min-height:88px;}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--txt-3) 50%),linear-gradient(135deg,var(--txt-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:14px;}
.switch input{display:none;}
.switch .track{width:46px;height:26px;border-radius:99px;background:rgba(8,5,20,.9);
  border:1px solid var(--line-strong);position:relative;transition:.22s;}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(160deg,#cbd5ff,#7c7aa8);transition:.22s;}
.switch input:checked + .track{background:var(--grad-brand);border-color:transparent;box-shadow:0 0 18px rgba(139,92,246,.55);}
.switch input:checked + .track::after{left:22px;background:#fff;}

/* ---------- cartões / painéis ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow-lg);
}
.card.neon{position:relative;}
.card.neon::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:var(--grad-brand);opacity:.55;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}

/* ---------- badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.badge.live{background:var(--grad-red);color:#fff;box-shadow:0 0 18px rgba(239,68,68,.55);}
.badge.superadmin{background:linear-gradient(135deg,#fbbf24,#f43f5e);color:#1a0b00;}
.badge.admin{background:var(--grad-red);color:#fff;}
.badge.moderator{background:var(--grad-blue);color:#fff;}
.badge.member{background:rgba(139,92,246,.2);color:var(--purple-2);box-shadow:inset 0 0 0 1px rgba(168,85,247,.4);}
.badge.on{background:rgba(52,211,153,.18);color:#6ee7b7;box-shadow:inset 0 0 0 1px rgba(52,211,153,.4);}
.badge.off{background:rgba(125,120,163,.16);color:var(--txt-3);box-shadow:inset 0 0 0 1px rgba(125,120,163,.3);}

.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);}
.dot.red{background:var(--red);box-shadow:0 0 10px var(--red);}
.dot.gray{background:#6b7280;box-shadow:none;}

/* ---------- avatar ---------- */
.avatar{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#fff;position:relative;overflow:hidden;
  background:var(--grad-purple);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px -6px rgba(0,0,0,.8);
}
.avatar img{width:100%;height:100%;object-fit:cover;}
.avatar.sm{width:30px;height:30px;border-radius:10px;font-size:12px;}
.avatar.lg{width:56px;height:56px;border-radius:16px;font-size:20px;}

/* ---------- ícones 3D ---------- */
.i3d{width:22px;height:22px;flex:0 0 auto;display:block;}
.i3d.sm{width:18px;height:18px;}
.i3d.lg{width:30px;height:30px;}
.i3d.xl{width:40px;height:40px;}

/* ---------- utilidades ---------- */
.row{display:flex;align-items:center;gap:10px;}
.row.between{justify-content:space-between;}
.col{display:flex;flex-direction:column;}
.grow{flex:1;min-width:0;}
.hidden{display:none !important;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);margin:14px 0;}
.center{display:grid;place-items:center;}

/* ---------- toasts ---------- */
#toasts{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:10px;}
.toast{
  min-width:250px;max-width:360px;padding:13px 16px;border-radius:13px;font-size:14px;font-weight:600;
  background:rgba(18,12,36,.96);border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lg);animation:toastIn .3s cubic-bezier(.2,1.2,.3,1);
  display:flex;gap:10px;align-items:center;
}
.toast.ok{box-shadow:var(--shadow-lg),0 0 22px rgba(52,211,153,.3);border-color:rgba(52,211,153,.5);}
.toast.err{box-shadow:var(--shadow-lg),0 0 22px rgba(239,68,68,.35);border-color:rgba(239,68,68,.55);}
.toast.out{animation:toastOut .25s forwards;}
@keyframes toastIn{from{opacity:0;transform:translateX(40px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px) scale(.96);}}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:900;background:rgba(4,2,12,.78);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:20px;animation:fadeIn .2s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{width:min(520px,100%);padding:26px;animation:popIn .28s cubic-bezier(.2,1.2,.3,1);}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- loader ---------- */
.spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(139,92,246,.2);border-top-color:var(--purple-2);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,rgba(139,92,246,.08),rgba(139,92,246,.18),rgba(139,92,246,.08));
  background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:10px;}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- campo de upload de imagem ---------- */
.upload-field{display:flex;flex-direction:column;gap:8px;}
.upload-field > label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);}
.upload-row{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.upload-preview{
  flex:0 0 auto;border-radius:14px;overflow:hidden;display:grid;place-items:center;
  background:rgba(8,5,20,.8);border:1px dashed var(--line-strong);position:relative;
}
.upload-preview img{width:100%;height:100%;object-fit:contain;}
.upload-bar{height:6px;max-width:280px;border-radius:99px;background:rgba(8,5,20,.9);overflow:hidden;border:1px solid var(--line);}
.upload-bar i{display:block;height:100%;background:var(--grad-brand);transition:width .18s ease;box-shadow:0 0 12px rgba(168,85,247,.7);}