:root{
  --bg: #0b1020;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.88);
  --muted: rgba(255,255,255,.66);
  --brand: #7c3aed;
  --brand2: #22c55e;
  --warn: #f59e0b;
}

html{
  min-height:100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{min-height:100vh}
body{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.35), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(34,197,94,.25), transparent 55%),
              radial-gradient(800px 500px at 50% 110%, rgba(59,130,246,.18), transparent 60%),
              var(--bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  color: var(--text);
}

/* Password masking: some custom fonts may not include the bullet glyph.
   Keep password inputs on a system font and force disc masking where supported. */
input[type="password"],
textarea[type="password"]{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-security: disc;
}

a{color: rgba(255,255,255,.92)}
a:hover{color: #fff}

/* Verified badge (Twitter/Instagram-like) */
.verified-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:.35rem;
  vertical-align: middle;
  color:#1d9bf0;
  line-height:1;
}

.verified-badge--green{
  color:#22c55e;
}

.verified-badge .bi{
  font-size: 1.05em;
  transform: translateY(-0.02em);
}

.navbar-glass{
  background: rgba(10,16,32,.55) !important;
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
}

.site-logo{
  width: 57px;
  height: 57px;
  object-fit: contain;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

@media (max-width: 991.98px){
  .navbar-glass .container{
    position: relative;
    justify-content: center;
  }
  .navbar-glass .navbar-toggler{
    position: absolute;
    right: 12px;
  }
}

.hero{
  padding: 56px 0 28px;
}

.home-brand{
  max-width: 520px;
  margin-inline: auto;
}

.home-logo{
  width: 364px;
  height: 364px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Image skeleton shimmer (used by .img-skeleton wrappers) */
.img-skeleton{
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.img-skeleton::after{
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  animation: shimmer 1.2s ease-in-out infinite;
  pointer-events: none;
}

.img-skeleton > img{
  display: block;
  opacity: 0;
  transition: opacity .25s ease;
}

.img-skeleton.is-loaded::after{
  animation: none;
  opacity: 0;
}

.img-skeleton.is-loaded > img{
  opacity: 1;
}

@keyframes shimmer{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}

.skel-site-logo{ width: 57px; height: 57px; border-radius: 16px; }
.skel-server-logo{ width: 54px; height: 54px; min-width: 54px; min-height: 54px; border-radius: 14px; flex: 0 0 auto; }
.skel-server-logo-lg{ width: 72px; height: 72px; min-width: 72px; min-height: 72px; border-radius: 18px; flex: 0 0 auto; }
.skel-banner{ width: 100%; height: 220px; border-radius: 18px; display:block; }
.skel-carousel{ width: 100%; max-height: 360px; border-radius: 18px; display:block; }
.skel-home-logo{ width: 364px; height: 364px; border-radius: 0; display:inline-block; border: 0; background: transparent; }
.skel-home-logo::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); }

@media (max-width: 575.98px){
  .home-logo{
    width: 273px;
    height: 273px;
  }
  .skel-home-logo{ width: 273px; height: 273px; }
}

.hero .badge{
  background: rgba(124,58,237,.18);
  border: 1px solid rgba(124,58,237,.35);
}

.card-glass{
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  will-change: transform;
}

.card-glass:hover{
  border-color: rgba(255,255,255,.2);
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 14px 52px rgba(0,0,0,.32);
}

.server-logo{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: contain;
  object-position: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  display: block;
}

.server-logo.server-logo-lg{
  width: 72px;
  height: 72px;
  border-radius: 18px;
}

.server-banner{
  width: 100%;
   
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  display: block;
}

/* --- Motion / polish --------------------------------------------------- */

[data-reveal]{
  opacity: 0;
  transform: translateY(10px);
}

[data-reveal].is-inview{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .45s ease, transform .45s ease;
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    opacity: 1;
    transform: none;
  }
  [data-reveal].is-inview{
    transition: none;
  }

  .img-skeleton::after{
    animation: none;
    opacity: 0;
  }
}

.btn, .nav-link, .page-link, .card-glass{
  transition: filter .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.card-glass:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* --- Focus & Interaction ------------------------------------------------ */

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.form-control:focus,
.form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 0.25rem rgba(124,58,237,.25);
}

.input-group-text{
  background-color: rgba(255,255,255,.05);
  border-color: var(--stroke);
  color: rgba(255,255,255,.7);
}

.btn-brand:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124,58,237,.4);
}

.btn-brand:active{
  transform: translateY(0);
}

.btn-green:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(34,197,94,.4);
}

.btn-green:active{
  transform: translateY(0);
}

.btn-outline-light:hover{
  transform: translateY(-1px);
}

.btn:disabled{
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
}

/* --- Tabs (dark/glass) ------------------------------------------------- */

.tabs-glass{
  gap: .5rem;
  border-bottom: 0;
  padding: .35rem;
  background: rgba(0,0,0,.14);
  border: 1px solid var(--stroke);
  border-radius: 14px;
}

.tabs-glass .nav-link{
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  padding: .5rem .75rem;
}

.tabs-glass .nav-link:hover{
  color: #fff;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

.tabs-glass .nav-link.active,
.tabs-glass .nav-link[aria-selected="true"]{
  color: #fff;
  background: linear-gradient(90deg, rgba(124,58,237,.35), rgba(59,130,246,.22));
  border-color: rgba(124,58,237,.45);
}

.tabs-glass.nav-tabs .nav-link{ margin-bottom: 0; }

/* --- Accordion (dark/glass) ------------------------------------------- */

.accordion-glass{
  --_acc-bg: rgba(0,0,0,.14);
  --_acc-bg-active: rgba(255,255,255,.06);
}

.accordion-glass .accordion-item{
  background: transparent;
  border-color: var(--stroke);
}

.accordion-glass .accordion-button{
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.accordion-glass .accordion-button:not(.collapsed){
  background: var(--_acc-bg-active);
  color: #fff;
}

.accordion-glass .accordion-button::after{
  filter: invert(1);
  opacity: .9;
}

.accordion-glass .accordion-button:focus{
  border-color: rgba(124,58,237,.6);
  box-shadow: 0 0 0 .2rem rgba(124,58,237,.18);
}

.accordion-glass .accordion-body{
  background: var(--_acc-bg);
  color: var(--text);
}

.btn:hover{
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(0);
}

.muted{color: var(--muted)}

.badge-soft{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.btn-brand{
  background: linear-gradient(90deg, rgba(124,58,237,.95), rgba(59,130,246,.9));
  border: 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.btn-brand:hover{filter: brightness(1.05)}

.btn-green{
  background: linear-gradient(90deg, rgba(34,197,94,.95), rgba(16,185,129,.9));
  border: 0;
  color: #0b1020;
  font-weight: 700;
  position: relative;
  overflow: hidden;
}

/* Button shine */
.btn-brand::after, .btn-green::after{
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  opacity: 0;
  pointer-events: none;
}

.btn-brand:hover::after, .btn-green:hover::after{
  opacity: 1;
  animation: btnShine .7s ease;
}

@keyframes btnShine{
  0%{ left: -60%; }
  100%{ left: 120%; }
}

@media (prefers-reduced-motion: reduce){
  .btn-brand::after, .btn-green::after{
    animation: none;
    opacity: 0;
  }
}

/* --- Alerts ------------------------------------------------- */
.alert-info{
  background-color: rgba(59,130,246,.15);
  border-color: rgba(59,130,246,.3);
  color: #93c5fd;
}

.alert-success{
  background-color: rgba(34,197,94,.15);
  border-color: rgba(34,197,94,.3);
  color: #86efac;
}

.alert-warning{
  background-color: rgba(251,191,36,.15);
  border-color: rgba(251,191,36,.3);
  color: #fde047;
}

.alert-danger{
  background-color: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.3);
  color: #fca5a5;
}

.form-control, .form-select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(124,58,237,.6);
  box-shadow: 0 0 0 .2rem rgba(124,58,237,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
}

.form-control::placeholder{
  color: rgba(255,255,255,.72);
  opacity: 1;
}

.form-control:disabled, .form-select:disabled{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.55);
}

.form-select option{
  background-color: var(--bg);
  color: rgba(255,255,255,.88);
}

.form-select option[value=""]{
  color: rgba(255,255,255,.72);
}

.footer{
  border-top: 1px solid var(--stroke);
  background: rgba(10,16,32,.45);
}

.small-kpi{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 14px;
}

.admin-shell{
  min-height: 100vh;
  background: #0b1020;
}

.admin-sidebar{
  width: 280px;
  background: rgba(255,255,255,.04);
  border-right: 1px solid rgba(255,255,255,.1);
}

.admin-offcanvas{
  --bs-offcanvas-bg: #0b1020;
  --bs-offcanvas-color: rgba(255,255,255,.88);
}

.admin-offcanvas .offcanvas-header{
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.admin-link{
  display:block;
  padding: 10px 14px;
  border-radius: 12px;
  color: rgba(255,255,255,.86);
  text-decoration: none;
}
.admin-link:hover{background: rgba(255,255,255,.06); color:#fff}

.admin-link.active{
  background: rgba(124,58,237,.18);
  border: 1px solid rgba(124,58,237,.35);
}

.admin-sublink{
  display:block;
  padding: 8px 14px 8px 38px;
  margin-top: 4px;
  border-radius: 12px;
  color: rgba(255,255,255,.80);
  text-decoration: none;
  font-size: .95rem;
}

.admin-sublink:hover{background: rgba(255,255,255,.06); color:#fff}

.admin-sublink.active{
  background: rgba(124,58,237,.14);
  border: 1px solid rgba(124,58,237,.28);
}

/* --- Admin: Gamification rewards -------------------------------------- */

.admin-gamification-rewards .muted{
  color: rgba(255,255,255,.84) !important;
}

.admin-gamification-rewards .admin-rewards-table{
  --bs-table-color: rgba(255,255,255,.92);
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.10);
}

.admin-gamification-rewards .admin-rewards-table thead th{
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.85);
  font-weight: 700;
  font-size: .80rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.admin-gamification-rewards .admin-rewards-table tbody td{
  border-color: rgba(255,255,255,.08);
}

.admin-gamification-rewards .admin-rewards-table tbody tr{
  background: rgba(255,255,255,.02);
}

.admin-gamification-rewards .admin-rewards-table tbody tr:nth-child(even){
  background: rgba(255,255,255,.035);
}

.admin-gamification-rewards .admin-rewards-table .form-control{
  background: rgba(0,0,0,.20);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.95);
}

.admin-gamification-rewards .admin-rewards-table .form-control::placeholder{
  color: rgba(255,255,255,.50);
}

.admin-gamification-rewards .admin-rewards-defaults .fw-semibold{
  color: rgba(255,255,255,.95);
}

/* --- Badge variants ---------------------------------------------------- */

.badge-featured{
  background: rgba(245,158,11,.18) !important;
  border: 1px solid rgba(245,158,11,.35) !important;
}

.badge-new{
  background: rgba(34,197,94,.18) !important;
  border: 1px solid rgba(34,197,94,.35) !important;
}

.badge-warning{
  background: rgba(239,68,68,.18) !important;
  border: 1px solid rgba(239,68,68,.35) !important;
}

.card-badge{
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(245,158,11,.18);
  border: 1px solid rgba(245,158,11,.35);
  backdrop-filter: blur(6px);
  font-size: .8rem;
  padding: .25rem .5rem;
}

/* --- Star rating ------------------------------------------------------- */

.star-rating{
  color: #fbbf24;
}

/* --- Skeleton placeholders --------------------------------------------- */

.skeleton-text{
  pointer-events: none;
  user-select: none;
}

.skeleton-line{
  height: 12px;
  background: rgba(255,255,255,.08);
  border-radius: 6px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

.skeleton-line::after{
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: shimmer 1.2s ease-in-out infinite;
}

.skeleton-line.w-75{ width: 75%; }
.skeleton-line.w-50{ width: 50%; }
.skeleton-line.w-25{ width: 25%; }

/* --- Accessibility ----------------------------------------------------- */

.skip-link{
  position: absolute;
  top: 0;
  left: 12px;
  background: var(--brand);
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  z-index: 9999;
  transform: translateY(-200%);
  transition: transform .2s ease;
}

.skip-link:focus{
  transform: translateY(0);
  color: #fff;
}

/* --- Text utilities ---------------------------------------------------- */

.text-white-75{ color: rgba(255,255,255,.75) !important; }
.text-truncate-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Loading states ---------------------------------------------------- */

.btn.is-loading{
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn.is-loading::after{
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin .6s linear infinite;
  color: #fff;
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

@keyframes pulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .85; transform: scale(1.02); }
}

/* --- Card enhancements ------------------------------------------------- */

.card-glass-hover{
  cursor: pointer;
}

.card-glass-hover:active{
  transform: translateY(0) scale(1);
}

/* --- Tooltip custom ---------------------------------------------------- */

[data-tooltip]{
  position: relative;
  cursor: help;
}

/* --- Badge improvements ------------------------------------------------ */

.badge{
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* --- Cookie consent (LGPD) -------------------------------------------- */

.cookie-consent{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 0;
  z-index: 1080;
}

.cookie-consent .cookie-card{
  max-width: 860px;
  padding: 14px 16px;
  background: rgba(10,16,32,.86);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,.38);
  backdrop-filter: blur(12px);
}

.cookie-consent .cookie-preferences{
  padding-top: 4px;
}

.cookie-consent .form-check-input{
  cursor: pointer;
}

.cookie-consent .form-check-input:disabled{
  cursor: not-allowed;
  opacity: .85;
}

.cookie-consent .form-check-input:checked{
  background-color: var(--brand);
  border-color: var(--brand);
}