/* =====================================================================
   MU GALAXY — tema do site
   Sistema de design único e consistente (substitui todas as camadas antigas).
   Carregado DEPOIS de app.css e custom.css.

   Escala   : espaçamento 4 / 8 / 12 / 16 / 20 / 24 / 32
   Raios    : 6px (controles) · 10px (painéis)
   Tipografia: Inter (texto) + Barlow Condensed (títulos)
   Cores    : navy neutro + azul de ação + dourado discreto (destaques)
   ===================================================================== */

:root {
  --bg:        #050b17;
  --surface:   #0a1426;
  --surface-2: #0e1b33;
  --surface-3: #122244;
  --line:      rgba(130, 165, 235, .13);
  --line-2:    rgba(130, 165, 235, .26);
  --text:      #cfd9ec;
  --text-hi:   #ffffff;
  --muted:     #7f90b0;
  --accent:    #3d8bff;
  --accent-hi: #6aaaff;
  --accent-lo: #2563d4;
  --gold:      #d8b25a;
  --ok:        #3fcf8e;
  --bad:       #ff5d6c;
  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 10px 30px rgba(0, 0, 0, .38);
  --font-text: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-head: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;

  /* variáveis herdadas do bootstrap / morpheus */
  --body-bg: var(--bg);
  --body-color: var(--text);
  --border-color: var(--line);
  --link-color: var(--accent-hi);
  --link-hover-color: #fff;
  --table-color: var(--text);
  --table-bg: transparent;
  --table-border-color: var(--line);
  --table-striped-bg: rgba(255, 255, 255, .02);
  --table-hover-bg: rgba(61, 139, 255, .08);
  --nav-pills-link-active-bg: var(--accent-lo);
  --nav-pills-link-active-color: #fff;
  --pagination-bg: var(--surface-2);
  --pagination-color: var(--accent-hi);
  --pagination-border-color: var(--line);
  --pagination-hover-bg: var(--surface-3);
  --pagination-hover-color: #fff;
  --pagination-hover-border-color: var(--line-2);
  --pagination-active-bg: var(--accent-lo);
  --pagination-active-border-color: var(--accent);
}

* { scrollbar-width: thin; scrollbar-color: #24437f var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #24437f; border-radius: 6px; border: 2px solid var(--bg); }
::selection { background: var(--accent); color: #fff; }
img { max-width: 100%; }

/* ------------------------------------------------------------------ BASE */
html body {
  background: var(--bg) url(../images/bg-galaxy-top.jpg) center top / 1920px auto no-repeat scroll !important;
  color: var(--text);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-hi); text-decoration: none; transition: color .15s; }
a:hover { color: #fff; text-shadow: none; }
h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--text-hi); letter-spacing: .02em; }
label, .form-label { color: var(--muted); font-size: 13px; font-weight: 500; }
.wrapper { width: 1180px !important; position: relative; z-index: 1; }

/* ------------------------------------------------------------------ MENU */
header .navbar {
  position: sticky; top: 0; z-index: 1000; height: 56px;
  background: rgba(5, 11, 23, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
}
header .navbar .container {
  width: 1180px; max-width: 1180px; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
header .navbar ul { display: flex; align-items: stretch; gap: 4px; height: 56px; margin: 0; padding: 0; list-style: none; }
header .navbar ul li { display: flex; }
header .navbar ul li a {
  position: relative; display: flex; align-items: center; width: auto; height: 100%; line-height: 1;
  padding: 0 18px; border: 0; border-radius: 0; background: none;
  font-family: var(--font-text); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); transition: color .15s, background .15s;
}
header .navbar ul li a::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transition: transform .2s ease;
}
header .navbar ul li a:hover { color: #fff; background: rgba(255, 255, 255, .03); box-shadow: none; }
header .navbar ul li a:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------------------ TOPO (hero) */
header .header { height: 400px; position: relative; overflow: visible; }
header .header > .container { width: 100%; min-width: 0; height: 100%; position: relative; }
header .header .container > div:not(.hero) { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; text-align: center; }
.hero { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: 440px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; left: 50%; top: 44%; width: 640px; height: 360px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(61, 139, 255, .26), rgba(61, 139, 255, 0) 68%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, rgba(5, 11, 23, 0), rgba(5, 11, 23, .7));
}
.hero-char {
  position: absolute; left: 0; bottom: 0; z-index: 1; height: 340px; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.hero-char-r { left: auto; right: 0; transform: scaleX(-1); }
.hero-logo { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto !important; }
.hero-logo img.logo { display: block; width: 400px; max-width: 100%; height: auto; margin: 0 auto; animation: g-logo-glow 4.2s ease-in-out infinite; }

/* feixes de luz e relâmpagos (discretos) */
.hero .ray { position: absolute; top: -40%; height: 190%; pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: 0; filter: blur(2px);
  background: linear-gradient(180deg, transparent, rgba(140, 195, 255, .4) 50%, transparent); }
.hero .ray.r1 { left: 18%; width: 2px; transform: rotate(28deg);  animation: g-ray 7s ease-in-out infinite; }
.hero .ray.r2 { left: 52%; width: 90px; filter: blur(28px); transform: rotate(-24deg); animation: g-ray 9s ease-in-out 1.5s infinite;
  background: linear-gradient(180deg, transparent, rgba(61, 139, 255, .35) 50%, transparent); }
.hero .ray.r3 { left: 80%; width: 2px; transform: rotate(-30deg); animation: g-ray 8s ease-in-out 3s infinite; }
@keyframes g-ray { 0%, 100% { opacity: 0; translate: -60px 0; } 40%, 60% { opacity: .8; translate: 0 0; } 80% { opacity: 0; translate: 70px 0; } }
.hero .bolt { position: absolute; top: 8px; width: 46px; height: 230px; z-index: 1; pointer-events: none; opacity: 0; filter: drop-shadow(0 0 6px #6aaaff); }
.hero .bolt polyline { fill: none; stroke: #e6f0ff; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.hero .bolt.b1 { left: calc(50% - 20px); animation: g-bolt 6s linear infinite; }
.hero .bolt.b2 { left: calc(50% + 470px); animation: g-bolt 8s linear 2.4s infinite; }
@keyframes g-bolt { 0%, 90%, 100% { opacity: 0; } 91% { opacity: 1; } 92% { opacity: .15; } 93% { opacity: 1; } 95% { opacity: .3; } 96% { opacity: 0; } }

/* logo piscando */
@keyframes g-logo-blink {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(61, 139, 255, .4)) brightness(1); }
  45%      { filter: drop-shadow(0 0 22px rgba(106, 170, 255, .85)) brightness(1.14); }
  50%      { filter: drop-shadow(0 0 6px rgba(61, 139, 255, .25)) brightness(.9); }
  55%      { filter: drop-shadow(0 0 26px rgba(150, 200, 255, .95)) brightness(1.24); }
  60%      { filter: drop-shadow(0 0 16px rgba(106, 170, 255, .6)) brightness(1.06); }
}

/* redes sociais: caixa no topo da lateral, acima do Painel de Controle, centralizada */
.social-dock { display: none !important; }
.sidebar-social {
  position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; box-sizing: border-box; margin: 0; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.sidebar-social a { display: block; flex: 0 0 38px; width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 9px; line-height: 0; transition: transform .18s ease, box-shadow .18s ease; }
.sidebar-social a svg { display: block; width: 100%; height: 100%; border-radius: 9px; }
.sidebar-social a:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }

/* ------------------------------------------------------------------ LAYOUT */
.wrapper main {
  display: grid !important; grid-template-columns: minmax(0, 1fr) 320px !important; gap: 24px !important; align-items: start;
  padding: 0 !important; margin: -30px 0 56px !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
main .main-container { max-width: none; min-width: 0; }
main .main-container > *:not(:last-child) { margin-bottom: 20px; }
.sidebar { width: auto; margin-top: 0; }
.sidebar > *:not(:last-child), .sidebar_right > *:not(:last-child) { margin-bottom: 20px; }

/* painéis */
.main-container > div:not(.page-title),
.main-container > form,
.main-container > section,
.sidebar .box,
.sidebar .box-login {
  position: relative; color: var(--text);
  background: var(--surface) !important;
  border: 1px solid var(--line) !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
.main-container > div:not(.page-title) { padding: 20px; }
.main-container > div:not(.page-title)::before, .sidebar .box::before { content: none; }

/* títulos de seção */
.page-title { margin: 0 0 16px; }
.main-container > div > .page-title:first-child, .main-container > div > h1:first-child { margin: -20px -20px 18px; }
.main-container h1, .page-title h1 {
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; margin: 0; padding: 13px 20px;
  width: auto; height: auto; min-height: 0; line-height: 1.2; position: relative; /* anula width/height fixos do custom.css */
  font-family: var(--font-head); font-size: 18px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-hi);
  background: rgba(255, 255, 255, .025); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; text-shadow: none;
}
.main-container h1::before, .page-title h1::before { content: ""; position: static; top: auto; left: auto; width: 3px; height: 16px; margin-right: 12px; flex: none; border-radius: 2px; background: var(--accent); box-shadow: none; }
.main-container h1 > a:not(.btn-more):not(.btn-mais) { float: none; width: auto; padding: 0; background: none; box-shadow: none; }
.main-container h2, .main-container h3, .main-container h4 { color: var(--text-hi); }

.btn-more, .btn-mais {
  margin-left: auto; padding: 4px 12px; border-radius: var(--radius-sm);
  font-family: var(--font-text); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-hi) !important; background: transparent; border: 1px solid var(--line-2); text-shadow: none;
}
.btn-more:hover, .btn-mais:hover { background: var(--accent-lo); border-color: var(--accent); color: #fff !important; box-shadow: none; }

/* ------------------------------------------------------------------ LATERAL */
.sidebar .box, .sidebar .box-login { padding: 0 0 8px !important; margin-top: 0 !important; overflow: hidden; }
.sidebar .sidebar-title {
  width: 100%; height: auto; display: flex; align-items: center; justify-content: flex-start !important; text-align: left !important; gap: 12px;
  padding: 12px 18px; margin-bottom: 6px;
  font-family: var(--font-head); font-size: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-hi);
  background: rgba(255, 255, 255, .025); border-bottom: 1px solid var(--line); text-shadow: none;
}
.sidebar .sidebar-title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--accent); transform: none; box-shadow: none; }
.sidebar .box ul { margin: 0; padding: 2px 0; list-style: none; }
.sidebar .box ul > *:not(:last-child) { border-bottom: 1px solid var(--line); margin: 0; box-shadow: none; }
.sidebar .box ul li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.sidebar .box ul li span, .sidebar .box ul li .text { color: var(--text-hi); font-weight: 600; text-shadow: none; }
.sidebar .text-new { color: var(--muted); font-size: 12px; }
.sidebar .box > .mb-2 { padding: 3px 0; }
.sidebar .box .status { font-weight: 700; letter-spacing: .04em; text-shadow: none; }
.sidebar .box .status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.sidebar .box .status.on, .sidebar .box ul li span.status.on { color: var(--ok) !important; }
.sidebar .box .status.off, .sidebar .box ul li span.status.off { color: var(--bad) !important; }

/* login */
.sidebar .box-login .input { width: auto; height: 40px; margin: 0 16px 10px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.sidebar .box-login .input .form-control { background: transparent; border: 0; box-shadow: none; }
.sidebar .box-login .services { margin: 12px 0 4px; padding: 8px 16px; }
.sidebar .box-login .services a, .sidebar .box-login a.logout {
  display: block; padding: 8px 12px; border-radius: var(--radius-sm); text-align: center; text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text); background: var(--surface-3); border: 1px solid var(--line-2);
}
.sidebar .box-login .services a:hover { background: var(--accent-lo); border-color: var(--accent); color: #fff; box-shadow: none; }
.sidebar .box-login a.logout { margin: 0 16px; background: #5c1822; border-color: rgba(255, 93, 108, .4); }
.sidebar .box-login a.logout:hover { background: #7a1f2d; }
.list-group-item { background: transparent; color: var(--muted); border-color: var(--line); }

/* ------------------------------------------------------------------ FORMULÁRIOS / BOTÕES */
.form-control, .form-select, textarea, select, input[type=text], input[type=password], input[type=email], input[type=number] {
  background-color: var(--bg); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-family: var(--font-text);
}
.form-control:focus, .form-select:focus { background-color: var(--bg); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61, 139, 255, .2); outline: 0; }
.form-control::placeholder { color: #51618a; }

.btn { border-radius: var(--radius-sm); font-family: var(--font-text); font-weight: 600; letter-spacing: .03em; transition: background .15s, border-color .15s, color .15s; }
.btn-primary, button[type=submit]:not(.btn-close):not(.btn-danger):not(.btn-success):not(.btn-secondary) { color: #fff; background: var(--accent-lo); border: 1px solid var(--accent); box-shadow: none; }
.btn-primary:hover, button[type=submit]:hover { background: var(--accent); border-color: var(--accent-hi); color: #fff; transform: none; box-shadow: none; }
.btn-secondary, .btn-outline-secondary, .btn-dark, .btn-light { color: var(--text); background: var(--surface-3); border: 1px solid var(--line-2); }
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-dark:hover, .btn-light:hover { background: var(--accent-lo); color: #fff; border-color: var(--accent); }

.nav-pills .nav-link, .nav-tabs .nav-link {
  color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: all .15s;
}
.nav-pills .nav-link:hover, .nav-tabs .nav-link:hover { color: #fff; border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.nav-pills .nav-link.active, .nav-tabs .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background: var(--accent-lo); border-color: var(--accent); box-shadow: none; }
.nav-tabs { border-bottom: 1px solid var(--line); gap: 6px; }
.page-link { border-radius: var(--radius-sm) !important; margin: 0 2px; }

/* tabelas */
.table { color: var(--text); }
.table > :not(caption) > * > * { border-bottom-color: var(--line); padding: 10px 12px; }
.table thead th { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .03) !important; border-bottom: 1px solid var(--line-2); }
.table-dark, .table-dark > * > * { background: transparent !important; color: var(--text) !important; }
.table-hover > tbody > tr:hover > * { background: rgba(61, 139, 255, .08) !important; }

/* cards genéricos */
.card { background: var(--surface-2) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; color: var(--text); box-shadow: none; transition: border-color .2s; }
.card:hover { border-color: var(--line-2) !important; }
.card-body, .card-header, .card-title, .card-footer { background: transparent !important; color: var(--text-hi) !important; border-color: var(--line) !important; }
.card-header { font-family: var(--font-head); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.top-class-header { background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--line); color: #fff; }

/* notícias */
.posts-post { padding: 14px 8px; border-bottom: 1px solid var(--line); border-radius: var(--radius-sm); transition: background .15s; }
.posts-post:hover { background: rgba(255, 255, 255, .02); }
.posts-title, .posts-title a { color: var(--text-hi); font-weight: 600; }
.posts-created { color: var(--muted); font-size: 12px; }
.posts-body { color: var(--text); opacity: .85; }
.badge { border-radius: 4px; font-weight: 600; letter-spacing: .04em; }

/* modais */
.modal-content, .swal2-popup, .popover, .dropdown-menu { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line-2) !important; border-radius: var(--radius) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important; }
.modal-header, .modal-footer { border-color: var(--line); }
.swal2-title, .swal2-html-container { color: #fff !important; }
.dropdown-item { color: var(--text); }
.dropdown-item:hover { background: rgba(61, 139, 255, .15); color: #fff; }
.alert { border-radius: var(--radius-sm); }

/* ------------------------------------------------------------------ HALL DA FAMA */
.main-container .ranking, .main-container .rankings, .main-container .rankings > div { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0; padding-right: 0; }
.main-container .ranking .ranking-button { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.main-container .ranking .ranking-button li { flex: 1 1 calc(25% - 6px); margin: 0; }
.main-container .ranking .ranking-button li a {
  display: block; width: auto; padding: 8px 6px; text-align: center; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 1px solid var(--line); text-decoration: none; transition: all .15s;
}
.main-container .ranking .ranking-button li a:hover { color: #fff; border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.main-container .ranking .ranking-button li a.active { color: #fff; background: var(--accent-lo); border-color: var(--accent); box-shadow: none; }

.main-container .list-characters { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px !important; }
.main-container .list-characters .character { flex: none !important; min-width: 0 !important; max-width: none !important; width: auto !important; }
.list-characters .character .card {
  --c: var(--line-2);
  position: relative; overflow: hidden; height: auto !important; padding: 14px 10px 12px; text-align: center;
  background: var(--surface-2) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important;
}
.list-characters .character .card:hover { border-color: var(--line-2) !important; }
.list-characters .character .card-header { padding: 0 !important; border: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rank-badge {
  position: absolute; top: 8px; left: 8px; min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: 5px;
}
.rank-name { max-width: 100%; margin-top: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-hi); }
.character-avatar { margin: 6px 0 8px; display: flex; justify-content: center; height: auto !important; padding: 0 !important; }
.character-avatar img {
  width: 64px !important; height: 64px !important; object-fit: cover; border-radius: 50% !important; padding: 2px;
  background: var(--bg); border: 2px solid var(--line-2); box-shadow: none;
}
.list-characters .character .card-body { display: block; padding: 0 !important; margin-bottom: 10px; font-size: 12px; color: var(--text) !important; background: none !important; border: 0; border-radius: 0; }
.list-characters .character .card-body strong { color: var(--muted); font-weight: 500; }
.list-characters .character .card-footer { padding: 0 !important; border: 0 !important; }
.list-characters .character .card-footer .btn {
  padding: 6px 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--radius-sm);
  background: transparent; color: var(--accent-hi); border: 1px solid var(--line-2); box-shadow: none;
}
.list-characters .character .card-footer .btn:hover, .list-characters .character .card:hover .card-footer .btn { background: var(--accent-lo); border-color: var(--accent); color: #fff; box-shadow: none; }
/* top 3 */
.list-characters .rank-1 .card { --c: var(--gold); border-color: rgba(216, 178, 90, .5) !important; }
.list-characters .rank-1 .rank-badge { background: var(--gold); color: #2a1f05; border-color: var(--gold); }
.list-characters .rank-1 .character-avatar img { border-color: var(--gold); }
.list-characters .rank-2 .card { --c: #c4cfe3; }
.list-characters .rank-2 .rank-badge { background: #c4cfe3; color: #121c33; border-color: #c4cfe3; }
.list-characters .rank-2 .character-avatar img { border-color: #c4cfe3; }
.list-characters .rank-3 .card { --c: #c58a5a; }
.list-characters .rank-3 .rank-badge { background: #c58a5a; color: #1f1209; border-color: #c58a5a; }
.list-characters .rank-3 .character-avatar img { border-color: #c58a5a; }

/* ------------------------------------------------------------------ REI / RAINHA / TOP DONATE */
.sidebar .box .king, .sidebar .box .queen, .sidebar .box .donate {
  --c: var(--gold);
  position: relative; left: 0; width: auto; margin: 6px 14px 6px; padding: 16px 12px 14px; text-align: center; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line); border-top: 2px solid var(--c); box-shadow: none;
}
.sidebar .box .queen  { --c: #b58cf0; }
.sidebar .box .donate { --c: var(--accent-hi); }
.sidebar .box .king .border, .sidebar .box .queen .border, .sidebar .box .donate .border { display: none; }
.sidebar .box .king::before, .sidebar .box .queen::before, .sidebar .box .donate::before { content: none; }
.sidebar .box .king .info, .sidebar .box .queen .info, .sidebar .box .donate .info {
  position: static; top: auto; left: auto; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sidebar .box .king .info img, .sidebar .box .queen .info img, .sidebar .box .donate .info img {
  position: static; width: 64px; height: 64px; margin: 0 auto; object-fit: cover; border-radius: 50% !important; padding: 2px;
  background: var(--bg); border: 2px solid var(--c); box-shadow: none;
}
.sidebar .box .king .info p, .sidebar .box .queen .info p, .sidebar .box .donate .info p { position: static; margin: 0; width: auto; text-align: center; }
.sidebar .box .king .info p:first-of-type, .sidebar .box .queen .info p:first-of-type, .sidebar .box .donate .info p:first-of-type {
  font-family: var(--font-head); font-size: 17px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-hi); text-shadow: none;
}
.sidebar .box .king .info p:last-child, .sidebar .box .queen .info p:last-child, .sidebar .box .donate .info p:last-child {
  padding: 0; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .02em; color: var(--c); background: none; border: 0; border-radius: 0;
}

/* ------------------------------------------------------------------ EVENTO MU UFC */
.homeContainer .box-custom { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0; }
.homeContainer h1 { border-radius: var(--radius); margin-bottom: 14px; }
.homeContainer .chars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.homeContainer .chars > div { padding: 8px 6px; text-align: center; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); transition: border-color .2s; }
.homeContainer .chars > div:hover { border-color: var(--line-2); transform: none; box-shadow: none; }
.homeContainer .chars > div p { margin: 4px 0; font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--text-hi); }
.homeContainer .chars > div p:first-child { color: var(--accent-hi); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.homeContainer .chars .image img { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }

/* ------------------------------------------------------------------ MARCA DE GUILD */
.guild-mark {
  --c: var(--accent-hi);
  position: relative; display: inline-flex !important; width: auto !important; height: auto !important; margin: 0 auto; padding: 6px;
  overflow: hidden; line-height: 0; background: #050a14; border: 1px solid var(--line-2); border-radius: var(--radius);
}
.guild-mark > *, .guild-mark img, .guild-mark canvas, .guild-mark table {
  width: auto !important; height: auto !important; max-width: none !important; margin: 0 !important; border: 0 !important; display: block; image-rendering: pixelated; border-radius: 0;
}
.guild-mark table { border-collapse: collapse; border-spacing: 0; }
.guild-mark td, .guild-mark th { padding: 0 !important; border: 0 !important; }
.guild-mark svg { width: 40px !important; height: 40px !important; margin: 8px !important; }
.guild-mark svg.guild-svg { width: auto !important; height: auto !important; margin: 0 !important; image-rendering: pixelated; }

/* ------------------------------------------------------------------ CASTLE SIEGE / WAR DEVIAS (mesmo molde) */
.tab-content > .row, .tab-content > .row.g-0 { display: block; margin: 0 !important; }
.tab-content > .row > .container-castle-new, .devias-wrap > .container-castle-new { width: 100%; max-width: none; margin: 0; }
.container-castle-new {
  position: relative; display: flex; align-items: center; overflow: hidden; height: auto; min-height: 200px; padding: 0 !important;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: radial-gradient(60% 120% at 88% 50%, rgba(61, 139, 255, .22), transparent 65%), linear-gradient(110deg, #08111f 30%, #0f2250 100%) !important;
}
.container-castle-new .castle-art {
  position: absolute; right: 36px; bottom: -6px; height: 112%; width: auto; max-width: none; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.container-castle-new .avatar-castle, .container-castle-new .text-content { position: relative; z-index: 2; }
.container-castle-new .avatar-castle { border: 0 !important; margin: 0 0 0 28px !important; padding: 0 !important; background: none !important; width: auto; height: auto; }
.container-castle-new .guild-mark, .devias-castle .guild-mark { min-width: 92px; min-height: 92px; justify-content: center; align-items: center; }
.container-castle-new .text-content { flex: none; width: 50%; padding: 10px 0; }
.container-castle-new .text-title {
  margin: 0 !important; padding: 10px 4px !important; text-align: left !important; font-size: 14px; color: var(--text);
  background: none !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--line) !important;
}
.container-castle-new .text-title:last-child { border-bottom: 0 !important; }
.container-castle-new .text-title strong { color: var(--gold); font-weight: 600; }
.devias-castle .text-title span { color: var(--text-hi); }
.devias-castle .text-title span.is-empty { font-style: italic; color: var(--muted); }

/* ------------------------------------------------------------------ BORDAS ANIMADAS (todas sincronizadas) */
@property --g-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes g-spin { to { --g-ang: 360deg; } }

.container-castle-new::after, .guild-mark::after,
.list-characters .character .card::after,
.sidebar .box .king::after, .sidebar .box .queen::after, .sidebar .box .donate::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--g-ang), transparent 0 55%, var(--accent) 72%, var(--c, var(--accent-hi)) 86%, #ffffff 93%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: g-spin 6s linear infinite; animation-delay: 0s;
}

/* ------------------------------------------------------------------ RODAPÉ */
footer.site-footer { display: block !important; min-height: 0 !important; position: relative; margin-top: 24px; padding: 40px 0 32px !important; text-align: center; color: var(--muted); font-size: 12px; }
footer.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.footer-logo-img { display: block; width: 150px !important; height: auto !important; max-width: 100%; margin: 0 auto 14px; opacity: .95; }
.footer-links { display: flex; justify-content: center; gap: 4px; margin: 0 0 14px; }
.footer-links a { padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: none; border: 0; border-radius: 0; }
.footer-links a:hover { color: #fff; background: none; }
footer.site-footer p { margin: 2px 0; width: auto; }
footer.site-footer p a, footer.site-footer strong { color: var(--text); }

/* ------------------------------------------------------------------ MOVIMENTO REDUZIDO */
@media (prefers-reduced-motion: reduce) {
  .container-castle-new::after, .guild-mark::after, .list-characters .character .card::after,
  .sidebar .box .king::after, .sidebar .box .queen::after, .sidebar .box .donate::after,
  .hero-logo img.logo, .footer-logo-img, .logo-fx, .logo-fx::before, .logo-fx::after, .hero .ray, .hero .bolt { animation: none !important; }
}

/* ------------------------------------------------------------------ RESPONSIVO (≤ 900px) */
@media (max-width: 900px) {
  html body { min-width: 0 !important; overflow-x: hidden; background-attachment: scroll !important; }
  .wrapper, .container { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .wrapper { padding: 0 10px; }
  header .navbar { height: auto; min-height: 48px; margin: 0 -10px; }
  header .navbar .container { width: 100% !important; padding: 0 8px; justify-content: flex-start; }
  header .navbar .container > div { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  header .navbar .container > div::-webkit-scrollbar { display: none; }
  header .navbar ul { flex-wrap: nowrap; justify-content: flex-start; white-space: nowrap; height: 48px; }
  header .navbar ul li { flex: none; }
  header .navbar ul li a { padding: 0 14px; font-size: 11px; }

  header .header { height: 300px; }
  .hero::before { width: 100%; height: 280px; }
  .hero-char { display: none; }
  .hero-logo img.logo { width: 250px; }
  header .header .container > div:not(.hero) { position: static; padding-top: 6px; }
  .countdowns { position: static !important; width: 100%; }

  .wrapper main { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; margin-top: -10px !important; }
  main .main-container, .sidebar { width: 100% !important; max-width: 100% !important; }
  .sidebar .col-sm-6, .sidebar .col-lg-12 { width: 100% !important; max-width: 100% !important; flex: none; }
  .main-container > div:not(.page-title) { padding: 14px; }
  .main-container > div > .page-title:first-child, .main-container > div > h1:first-child { margin: -14px -14px 14px; }
  .main-container h1, .page-title h1 { font-size: 16px; padding: 12px 14px; }

  .main-container .ranking .ranking-button li { flex: 1 1 calc(50% - 6px); }
  .main-container .list-characters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; }
  .homeContainer .chars { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .container-castle-new { flex-wrap: wrap; justify-content: center; padding: 14px 0 !important; }
  .container-castle-new .avatar-castle { margin: 0 14px !important; }
  .container-castle-new .text-content { flex: 1 1 100%; width: 100%; padding: 0 14px; }

  .posts-post { flex-wrap: wrap; gap: 8px; }
  .table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .row { margin-left: 0; margin-right: 0; }
  .modal-dialog { margin: 10px; }
  .footer-links { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .hero-logo img.logo { width: 220px; }
  .homeContainer .chars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ TOP DONATE (lista TOP 1 ao 5, sem imagem) */
.sidebar .box .donate.donate-list { padding: 8px 14px; text-align: left; }
.donate-list ul { list-style: none; margin: 0; padding: 0; }
.donate-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.donate-list li:last-child { border-bottom: 0; }
.donate-list .pos { min-width: 50px; text-align: center; padding: 5px 6px; border-radius: 6px; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .08em; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.donate-list .pos-1 { background: var(--gold); border-color: var(--gold); color: #1f1709; }
.donate-list .pos-2 { background: #c4cfe3; border-color: #c4cfe3; color: #121826; }
.donate-list .pos-3 { background: #c58a5a; border-color: #c58a5a; color: #1f1209; }
.donate-list .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-head); font-size: 15px; font-weight: 600; letter-spacing: .05em; text-transform: none; color: var(--text-hi); }
.donate-list .val { font-size: 12px; font-weight: 600; color: var(--accent-hi); white-space: nowrap; }
.donate-list .vazio { color: var(--muted); font-weight: 400; }
/* TOP 1 em destaque (coroa ou foto) */
.donate-list .donate-top1 { margin: 4px 0 10px; padding: 12px 14px; border: 1px solid rgba(216, 178, 90, .45); border-radius: var(--radius); background: rgba(216, 178, 90, .08); }
.donate-top1 .t1-head { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.donate-top1 .t1-place { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.donate-top1 .t1-badge { padding: 4px 10px; border-radius: 5px; font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1f1709; background: var(--gold); white-space: nowrap; }
.donate-top1 .t1-body { display: flex; align-items: center; gap: 14px; }
.donate-top1 .t1-icon { flex: 0 0 56px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--gold); border-radius: 10px; background: rgba(0, 0, 0, .28); color: var(--gold); }
.donate-top1 .t1-icon.has-photo { border-width: 2px; }
.donate-top1 .t1-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.donate-top1 .t1-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.donate-top1 .t1-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-head); font-size: 20px; font-weight: 600; letter-spacing: .04em; line-height: 1.2; color: var(--text-hi); }
.donate-top1 .t1-val { font-size: 16px; font-weight: 700; color: var(--gold); }

/* ------------------------------------------------------------------ AVATAR QUADRADO E MAIOR (Hall Fame, Eventos, Rei Donate) */
.list-characters .character-avatar img {
  width: 112px !important; height: 112px !important; max-width: 100%; border-radius: 12px !important; padding: 3px; object-fit: cover;
}

/* ------------------------------------------------------------------ REI DONATE MENSAL (janela grande) */
.sidebar .box .donate.donate-king { --c: var(--gold); padding: 30px 16px 26px; margin-top: 10px; margin-bottom: 14px; }
.sidebar .box .donate.donate-king .info { gap: 12px; }
.sidebar .box .donate.donate-king .rei-tag { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1f1709; background: var(--gold); padding: 5px 14px; border-radius: 999px; }
.sidebar .box .donate.donate-king .info img { width: 160px; height: 160px; max-width: 100%; padding: 3px; border-width: 3px; border-radius: 14px !important; }
.sidebar .box .donate.donate-king .info p:first-of-type { font-size: 26px; letter-spacing: .08em; }
.sidebar .box .donate.donate-king .info p:last-of-type { font-size: 15px; font-weight: 600; color: var(--c); }
.sidebar .box .donate.donate-king .info .btn { margin-top: 4px; width: 100%; }

/* ------------------------------------------------------------------ EVENTOS: card de DUPLA (2 nicks, nomes retos, um por linha) */
.list-characters .character-avatar.dupla { gap: 6px; }
.list-characters .character-avatar.dupla img { width: 62px !important; height: 62px !important; border-radius: 10px !important; padding: 2px; }
.list-characters .character .card-body .nick { display: block; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1.35; color: var(--text-hi); text-align: center; word-break: normal; overflow-wrap: anywhere; }
.list-characters .character .card-body .ev-info { display: block; margin-top: 4px; }

/* DUPLA: dois jogadores lado a lado, cada um com seu avatar e o nome embaixo dele */
.list-characters .character-avatar.dupla { gap: 6px; align-items: flex-start; }
.list-characters .character-avatar.dupla .dupla-col { flex: 1 1 0; min-width: 0; max-width: 68px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.list-characters .character-avatar.dupla .dupla-col img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; border-radius: 10px !important; padding: 2px; }
.list-characters .character-avatar.dupla .dupla-nick { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--text-hi); }

/* DUPLA: uma janela só, os dois nomes lado a lado (até 10 letras cada) */
.list-characters .character .card-body .dupla-names { display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 2px; }
.list-characters .character .card-body .dupla-nick { flex: 1 1 0; min-width: 0; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--text-hi); text-align: center; }
.list-characters .character .card-body .dupla-nick + .dupla-nick { border-left: 1px solid var(--line-2); }

/* DUPLA: nomes completos passando (letreiro) */
.list-characters .character .card-body .nick-marquee { overflow: hidden; white-space: nowrap; margin-bottom: 2px; }
.list-characters .character .card-body .nick-marquee span { display: inline-block; padding-left: 100%; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--text-hi); animation: g-marquee 9s linear infinite; }
.list-characters .character .card-body .nick-marquee:hover span { animation-play-state: paused; }
@keyframes g-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .list-characters .character .card-body .nick-marquee { text-overflow: ellipsis; }
  .list-characters .character .card-body .nick-marquee span { padding-left: 0; animation: none; }
}


/* ------------------------------------------------------------------ FUNDO (banner no topo) */
@media (max-width: 900px) {
  html body { background-size: auto 520px !important; background-position: 30% 0 !important; }
  .hero { padding-left: 0; }
}


/* ------------------------------------------------------------------ LOGO COM MOVIMENTO (topo + rodape) */
.logo-fx {
  position: relative; display: block; width: fit-content; margin: 0 auto;
  animation: g-logo-float 5.2s ease-in-out infinite, g-logo-zapglow 6.4s linear infinite;
  will-change: transform;
}
.logo-fx img { display: block; margin: 0 auto; }
.logo-fx-footer { margin: 0 auto 14px; }
.logo-fx-footer .footer-logo-img { margin: 0 !important; opacity: 1; animation: g-logo-glow 4.2s ease-in-out infinite; }
/* camada 1: clarao eletrico (dupla piscada rapida) */
.logo-fx::before, .logo-fx::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(../images/logo-galaxy.png) center / contain no-repeat;
          mask: url(../images/logo-galaxy.png) center / contain no-repeat;
}
.logo-fx::before {
  background: radial-gradient(closest-side, rgba(235, 247, 255, 1), rgba(140, 195, 255, .75) 65%, rgba(61, 139, 255, 0) 100%);
  opacity: 0; animation: g-logo-zap 6.4s linear infinite;
}
/* camada 2: brilho que passa pela logo */
.logo-fx::after {
  background: linear-gradient(105deg, transparent 42%, rgba(220, 240, 255, .5) 50%, transparent 58%) 160% 0 / 260% 100% no-repeat;
  mix-blend-mode: screen; animation: g-logo-sweep 6.4s ease-in-out infinite;
}
@keyframes g-logo-float {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50%      { transform: translateY(-7px) rotate(.35deg) scale(1.012); }
}
@keyframes g-logo-glow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(61, 139, 255, .45)) brightness(1); }
  50%      { filter: drop-shadow(0 0 20px rgba(106, 170, 255, .8)) brightness(1.1); }
}
/* piscada: fica calma e de repente "estala" duas vezes seguidas */
@keyframes g-logo-zap {
  0%, 78%, 100% { opacity: 0; }
  79% { opacity: 1; } 81% { opacity: .1; } 83% { opacity: .95; } 86% { opacity: .25; } 90% { opacity: 0; }
}
@keyframes g-logo-zapglow {
  0%, 78%, 100% { filter: drop-shadow(0 0 0 rgba(120, 190, 255, 0)); }
  79%, 83% { filter: drop-shadow(0 0 22px rgba(150, 210, 255, .95)); }
  81%      { filter: drop-shadow(0 0 4px rgba(120, 190, 255, .2)); }
  90%      { filter: drop-shadow(0 0 0 rgba(120, 190, 255, 0)); }
}
@keyframes g-logo-sweep {
  0%, 30% { background-position: 160% 0; }
  60%, 100% { background-position: -60% 0; }
}

/* PERSONAGENS NAS LATERAIS (rodapé): removidos a pedido */


/* ------------------------------------------------------------------ NICKS: mostrar exatamente como esta salvo (maiuscula/minuscula) */
.nick-case, .rank-name.nick-case { text-transform: none !important; }

/* ---- Mercado de itens: botão "ver todos" não vaza mais da borda ---- */
.market-title { justify-content: space-between !important; gap: 12px; min-width: 0; text-align: left !important; }
.market-title .market-title-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-more, .btn-mais { flex: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; width: auto !important; max-width: none; box-sizing: border-box; line-height: 1.2; }
.btn-more span, .btn-mais span { white-space: nowrap; }


/* ---- Mercado de itens (home): carrossel compacto, ate 5 anuncios por vez ---- */
.mk-carousel { container-type: inline-size; padding: 0 2rem !important; }
.mk-carousel .mk-viewport { gap: 8px !important; --mk-per: 2; }
@container (min-width: 360px) { .mk-carousel .mk-viewport { --mk-per: 3; } }
@container (min-width: 460px) { .mk-carousel .mk-viewport { --mk-per: 4; } }
@container (min-width: 560px) { .mk-carousel .mk-viewport { --mk-per: 5; } }
.mk-carousel .mk-slide { flex: 0 0 calc((100% - (var(--mk-per) - 1) * 8px) / var(--mk-per)) !important; min-width: 0; }
.mk-carousel .mk-slide .col-itens { margin-bottom: 0 !important; height: 100%; }
.mk-carousel .mk-slide .card { height: 100%; }
.mk-carousel .mk-slide .card-title {
    font-size: 9px !important; line-height: 1.25; min-height: 2.6em; margin-bottom: 4px !important; padding: 4px 6px !important;
    display: flex; align-items: center; justify-content: center; overflow: hidden; word-break: break-word; white-space: normal !important;
}
.mk-carousel .mk-slide .card-body { padding: 0 6px 8px !important; align-items: center; }
.mk-carousel .mk-slide .card-body > [data-tooltip], .mk-carousel .mk-slide .mk-img { width: 100% !important; height: 70px !important; }
.mk-carousel .mk-slide .card-body img { max-height: 100% !important; padding: 2px !important; object-fit: contain; }
.mk-carousel .mk-slide .item-info { font-size: 10px !important; margin: 6px 0 4px !important; line-height: 1.2; word-break: break-word; }
.mk-carousel .mk-slide .info-value { font-size: 11px !important; margin: 0 0 2px !important; line-height: 1.2; }
.mk-carousel .mk-slide .product-expire { font-size: 9px !important; line-height: 1.2; }
.mk-carousel .mk-slide .mk-buy-wrap { text-align: center; margin: 6px 0 0 !important; min-height: 24px; width: 100%; }
.mk-carousel .mk-slide .mk-buy {
    display: inline-block !important; width: auto !important; float: none !important; margin: 0 !important;
    padding: 2px 12px !important; font-size: 11px !important;
}
.mk-carousel .mk-arrow { width: 26px !important; height: 26px !important; }