:root{
  --bg0:#070A12;
  --bg1:#0B1224;
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.12);
  --border: rgba(148,163,184,.22);
  --text: #EAF0FF;
  --muted: rgba(234,240,255,.72);
  --brand: #7C3AED;
  --brand2:#22D3EE;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --shadow2: 0 10px 30px rgba(0,0,0,.25);
  --radius: 18px;
  --radius-sm: 14px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* Global background */
html, body{ height: 100%; }
body.theme-3d{
  background: transparent;
  color: var(--text);
  font-family: "Comfortaa", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  letter-spacing: .2px;
}

/* ------------------------------------------------------------
   Scrollbars (brand style)
   - Firefox: scrollbar-width / scrollbar-color
   - WebKit: ::-webkit-scrollbar
   ------------------------------------------------------------ */
body.theme-3d{
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.55) rgba(255,255,255,.06);
}

/* Apply to common scroll containers too (dropdowns, lists, modals) */
body.theme-3d .nav-search__menu,
body.theme-3d .dropdown-menu,
body.theme-3d .modal,
body.theme-3d .table-responsive{
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.55) rgba(255,255,255,.06);
}

/* WebKit */
body.theme-3d ::-webkit-scrollbar{
  width: 16px;
  height: 16px;
}
body.theme-3d ::-webkit-scrollbar-track{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(148,163,184,.10) inset,
    0 10px 26px rgba(0,0,0,.18) inset;
}
body.theme-3d ::-webkit-scrollbar-thumb{
  /* Glassy thumb: transparent base + highlight stripe */
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 38%, rgba(255,255,255,.10) 100%),
    linear-gradient(180deg, rgba(124,58,237,.78), rgba(34,211,238,.58));
  border-radius: 999px;
  border: 3px solid rgba(10,15,28,.72);
  box-shadow:
    0 10px 26px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 18px rgba(124,58,237,.30),
    0 0 22px rgba(34,211,238,.20);
}
body.theme-3d ::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 38%, rgba(255,255,255,.14) 100%),
    linear-gradient(180deg, rgba(124,58,237,.92), rgba(34,211,238,.72));
  box-shadow:
    0 14px 34px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 26px rgba(124,58,237,.45),
    0 0 30px rgba(34,211,238,.32);
}

/* ------------------------------------------------------------
   Skeleton loading (global, reusable)
   ------------------------------------------------------------ */
@keyframes skel-shimmer{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}
.skel{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.14);
  color: transparent !important;
  user-select: none;
}
.skel::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-120%);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 40%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.10) 60%,
    rgba(255,255,255,0) 100%
  );
  animation: skel-shimmer 1.2s var(--ease) infinite;
  pointer-events:none;
}
.skel-line{ height: 12px; border-radius: 999px; }
.skel-title{ height: 18px; border-radius: 999px; }
.skel-pill{ height: 36px; border-radius: 999px; }
.skel-card{ border-radius: var(--radius); }
.skel-circle{ width: 38px; height: 38px; border-radius: 999px; }
.skel-w-25{ width: 25%; }
.skel-w-35{ width: 35%; }
.skel-w-45{ width: 45%; }
.skel-w-60{ width: 60%; }
.skel-w-80{ width: 80%; }
.skel-w-100{ width: 100%; }
.skel-muted{ background: rgba(255,255,255,.045); }

/* Skeleton overlay (page transitions / form submits) */
.skeleton-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background:
    radial-gradient(900px 650px at 15% 10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 650px at 85% 15%, rgba(34,211,238,.16), transparent 60%),
    linear-gradient(180deg, rgba(7,10,18,.92), rgba(11,18,36,.92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity .18s var(--ease), visibility .18s var(--ease);
}
.skeleton-overlay.is-active{
  opacity: 1;
  visibility: visible;
}
.skeleton-overlay__inner{ height: 100%; }
.skeleton-overlay__topbar{ padding: 18px 0 8px; }
.skeleton-overlay__grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1.2fr .8fr;
  padding: 12px 0 24px;
}
.skeleton-overlay__pane{
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.12);
  padding: 14px;
}
.skeleton-overlay__stack{ display:flex; flex-direction:column; gap: 10px; }
.skeleton-overlay__cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.skeleton-overlay__card{
  border-radius: var(--radius);
  padding: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.12);
}
@media (max-width: 991.98px){
  .skeleton-overlay__grid{ grid-template-columns: 1fr; }
  .skeleton-overlay__cards{ grid-template-columns: 1fr; }
}

.theme-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --bg-shift: 0px;
  background:
    radial-gradient(1200px 900px at 10% 10%, rgba(124,58,237,.20), transparent 60%),
    radial-gradient(900px 700px at 80% 20%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(1000px 800px at 50% 90%, rgba(99,102,241,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
.bg-floaters{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.orb{
  position:absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  filter: blur(0px);
  opacity: .55;
  transform: translate3d(0,0,0);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.06) 35%, rgba(255,255,255,0) 70%),
              radial-gradient(circle at 70% 60%, rgba(124,58,237,.45), rgba(34,211,238,.20) 55%, rgba(255,255,255,0) 75%);
  box-shadow: 0 40px 120px rgba(124,58,237,.10);
  animation: floatY 12s var(--ease) infinite alternate, driftX 18s linear infinite;
  will-change: transform;
}
.orb::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(34,211,238,.20));
  opacity: .22;
  filter: blur(14px);
}
.orb-1{ top: -60px; left: -80px; width: 340px; height: 340px; animation-duration: 16s, 28s; opacity: .40; }
.orb-2{ top: 18%; left: 70%; width: 260px; height: 260px; animation-duration: 14s, 22s; opacity: .42; }
.orb-3{ top: 62%; left: -90px; width: 300px; height: 300px; animation-duration: 18s, 30s; opacity: .32; }
.orb-4{ top: 78%; left: 65%; width: 380px; height: 380px; animation-duration: 20s, 34s; opacity: .26; }
.orb-5{ top: 38%; left: 38%; width: 240px; height: 240px; animation-duration: 13s, 26s; opacity: .28; }
.orb-6{ top: -90px; left: 45%; width: 300px; height: 300px; animation-duration: 17s, 29s; opacity: .24; }

@keyframes floatY{
  from { transform: translate3d(0, -18px, 0) scale(1); }
  to   { transform: translate3d(0, 18px, 0) scale(1.03); }
}
@keyframes driftX{
  from { margin-left: -10px; }
  to   { margin-left: 10px; }
}
.theme-bg::before{
  content:"";
  position:absolute;
  inset:-70px;
  background: url('/img/bg.jpg') center/cover no-repeat;
  opacity: .20;
  filter: saturate(1.05) contrast(1.05);
  transform: translate3d(0, var(--bg-shift), 0) scale(1.12);
  will-change: transform;
}
.theme-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 650px at 50% 18%, rgba(2,6,23,.05), rgba(2,6,23,.44));
}

/* Make Bootstrap text utilities readable on dark/glass background */
body.theme-3d .text-muted{ color: var(--muted) !important; }
body.theme-3d .text-secondary{ color: rgba(234,240,255,.72) !important; }
body.theme-3d .text-dark,
body.theme-3d .text-body{ color: rgba(234,240,255,.94) !important; }
body.theme-3d .text-black{ color: rgba(234,240,255,.94) !important; }
body.theme-3d h1,
body.theme-3d h2,
body.theme-3d h3,
body.theme-3d h4,
body.theme-3d h5,
body.theme-3d h6{ color: rgba(234,240,255,.98); }

/* Tables */
body.theme-3d .table{ color: rgba(234,240,255,.90); }
body.theme-3d .table thead th{ color: rgba(234,240,255,.95); border-color: rgba(148,163,184,.16); }
body.theme-3d .table td, body.theme-3d .table th{ border-color: rgba(148,163,184,.12); }
/* Fix Bootstrap's default hover text color (it becomes dark on hover if not overridden) */
body.theme-3d .table-hover{
  --bs-table-hover-bg: rgba(255,255,255,.06);
  --bs-table-hover-color: rgba(234,240,255,.92);
}
body.theme-3d .table-striped>tbody>tr:nth-of-type(odd)>*{
  --bs-table-bg-type: rgba(255,255,255,.03);
  --bs-table-color-type: rgba(234,240,255,.92);
}

/* Alerts */
body.theme-3d .alert{
  background: rgba(255,255,255,.06);
  border-color: rgba(148,163,184,.18);
  color: rgba(234,240,255,.92);
}
body.theme-3d .alert-success{ border-left: 4px solid rgba(34,211,238,.75); }
body.theme-3d .alert-danger{ border-left: 4px solid rgba(239,68,68,.75); }
body.theme-3d .alert-warning{ border-left: 4px solid rgba(245,158,11,.75); }

/* Badges */
body.theme-3d .badge.bg-light,
body.theme-3d .badge.text-bg-light{
  background: rgba(255,255,255,.10) !important;
  color: rgba(234,240,255,.92) !important;
  border-color: rgba(148,163,184,.20) !important;
}
body.theme-3d .badge.text-bg-warning,
body.theme-3d .badge.bg-warning{
  background: rgba(245,158,11,.18) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(245,158,11,.28) !important;
}

/* Pagination */
body.theme-3d .pagination .page-link{
  background: rgba(255,255,255,.06);
  border-color: rgba(148,163,184,.18);
  color: rgba(234,240,255,.88);
}
body.theme-3d .pagination .page-link:hover{ background: rgba(255,255,255,.10); }
body.theme-3d .pagination .page-item.active .page-link{
  background: linear-gradient(135deg, var(--brand), #4F46E5);
  border-color: transparent;
  color: #fff;
}
.theme-noise{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .10;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.theme-stage{ position: relative; z-index: 2; }

/* Navbar */
.navbar.theme-nav{
  background: rgba(10,15,28,.55) !important;
  border-bottom: 1px solid rgba(148,163,184,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 1100;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  overflow: visible;
}
.navbar.theme-nav::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(99,102,241,.10), rgba(34,211,238,.06), rgba(99,102,241,.10));
  opacity: .6;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.navbar.theme-nav::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(99,102,241,0), rgba(99,102,241,.55), rgba(34,211,238,.55), rgba(99,102,241,0));
  opacity: .9;
  filter: blur(.2px);
  animation: navGlow 6s ease-in-out infinite;
}
@keyframes navGlow{
  0%,100%{ opacity:.55; transform: translateX(0); }
  50%{ opacity:1; transform: translateX(8px); }
}
.navbar.theme-nav .navbar-brand{
  font-weight: 800;
  color: var(--text) !important;
  letter-spacing: .4px;
  position: relative;
}
.navbar.theme-nav .navbar-brand::after{
  content:"";
  position:absolute;
  inset:-14px -10px;
  background:
    radial-gradient(140px 60px at 40% 50%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(120px 60px at 70% 60%, rgba(34,211,238,.18), transparent 60%);
  filter: blur(10px);
  opacity: .8;
  z-index: -1;
  pointer-events:none;
}
.brand-logo{
  width: auto;
  height: 28px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
.navbar.theme-nav .navbar-nav{
  gap: 6px;
  position: relative;
}
.navbar.theme-nav .nav-indicator{
  position:absolute;
  top: 50%;
  left: 0;
  height: 40px;
  width: 120px;
  transform: translate3d(0,-50%,0);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(34,211,238,.14));
  border: 1px solid rgba(99,102,241,.35);
  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.04) inset;
  filter: saturate(1.05);
  opacity: 0;
  pointer-events:none;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), width .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
}
.navbar.theme-nav .nav-indicator::before{
  content:"";
  position:absolute;
  inset: -10px;
  border-radius: 999px;
  background:
    radial-gradient(80px 24px at 30% 45%, rgba(124,58,237,.40), transparent 60%),
    radial-gradient(90px 26px at 70% 55%, rgba(34,211,238,.30), transparent 60%);
  filter: blur(10px);
  opacity: .95;
  animation: indicatorPulse 2.8s ease-in-out infinite;
}
@keyframes indicatorPulse{
  0%,100%{ transform: scale(.98); opacity:.85; }
  50%{ transform: scale(1.02); opacity:1; }
}
.navbar.theme-nav .nav-link{
  color: rgba(234,240,255,.84) !important;
  font-weight: 800;
  letter-spacing: .2px;
  border-radius: 999px;
  padding: 8px 12px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: transform .12s ease, background .18s ease, border-color .18s ease, color .18s ease;
  border: 1px solid transparent;
  background: transparent;
  z-index: 2;
  overflow: hidden;
}
.navbar.theme-nav .nav-link.is-magnetic{
  will-change: transform;
}
.navbar.theme-nav .nav-link .nav-ico{
  will-change: transform;
}

/* Spark particles (click) */
.navbar.theme-nav .nav-spark{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(34,211,238,.85) 45%, rgba(99,102,241,.55) 75%, rgba(0,0,0,0) 100%);
  filter: blur(.1px);
  animation: navSpark 640ms cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes navSpark{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
  }
  15%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(var(--s, 1));
  }
}
.navbar.theme-nav .nav-link::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 18%, rgba(255,255,255,0) 36%);
  transform: translateX(-120%);
  opacity: 0;
  transition: opacity .18s ease;
}
.navbar.theme-nav .nav-link .nav-ico{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity: .9;
}
.navbar.theme-nav .nav-link::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(99,102,241,0), rgba(99,102,241,.75), rgba(34,211,238,.65), rgba(99,102,241,0));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.navbar.theme-nav .nav-link:hover{
  color: #fff !important;
  background: rgba(255,255,255,.06);
  border-color: rgba(148,163,184,.18);
  transform: translateY(-1px);
}
.navbar.theme-nav .nav-link:hover::before{
  opacity: 1;
  animation: navShine .75s ease-out 1;
}
@keyframes navShine{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}
.navbar.theme-nav .nav-link:hover::after{
  opacity: 1;
  transform: translateY(0);
}
.navbar.theme-nav .nav-link.is-active{
  color: rgba(234,240,255,.96) !important;
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.25);
}
.navbar.theme-nav .nav-link.is-active::after{
  opacity: 1;
  transform: translateY(0);
}
.navbar.theme-nav .navbar-toggler{
  border-color: rgba(148,163,184,.25);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(2,6,23,.18);
}
.navbar.theme-nav .navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.15);
}
.navbar.theme-nav .navbar-toggler-icon{
  filter: invert(1) opacity(.92);
}

/* Mobile: collapse panel */
@media (max-width: 991px){
  .navbar.theme-nav .navbar-collapse{
    margin-top: 10px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(10,15,28,.75);
    border: 1px solid rgba(148,163,184,.14);
    box-shadow: 0 18px 44px rgba(0,0,0,.22);
  }
  .navbar.theme-nav .navbar-nav{
    padding: 6px;
  }
  .navbar.theme-nav .nav-link{
    width: 100%;
    justify-content: flex-start;
  }
  .navbar.theme-nav .nav-indicator{ display:none; }
}

/* Navbar global search */
.nav-search{ width: min(420px, 100%); }
.nav-search--modal{ width: 100%; }
.nav-search-trigger{
  border-radius: 999px;
  padding: 9px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nav-search-trigger i{ font-size: 1.0rem; }
.nav-search__input{
  background: rgba(2,6,23,.25);
  border: 1px solid rgba(148,163,184,.18);
  color: rgba(234,240,255,.92);
  border-radius: 999px;
  padding-left: 14px;
  padding-right: 14px;
}
.nav-search__input--modal{
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(2,6,23,.35);
}
.nav-search__input::placeholder{ color: rgba(148,163,184,.90); }
.nav-search__input:focus{
  background: rgba(2,6,23,.35);
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.15);
  color: rgba(234,240,255,.95);
}
.nav-search__menu{
  width: 100%;
  max-height: 60vh;
  overflow: auto;
  background: rgba(10,15,28,.98);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  padding: 8px;
  margin-top: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.nav-search__menu--modal{
  margin-top: 12px;
  border-radius: 18px;
}
.nav-search__menu .dropdown-header{
  color: rgba(148,163,184,.95);
  font-weight: 700;
  letter-spacing: .3px;
}
.nav-search__item{
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 10px 12px;
}
.nav-search__item:active{ background: rgba(99,102,241,.22); }
.nav-search__item:hover{ background: rgba(99,102,241,.16); }
.nav-search__logo{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(2,6,23,.25);
  flex: 0 0 auto;
}
.nav-search__item .min-w-0{ min-width: 0; }
.nav-search__title{
  font-weight: 700;
  font-size: .92rem;
  color: rgba(234,240,255,.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-search__subtitle{
  font-size: .78rem;
  color: rgba(148,163,184,.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Search modal */
.modal-backdrop{ z-index: 1380; }
.modal{ z-index: 1390; }
.search-modal .modal-dialog{
  padding: 0 10px;
  margin-top: 80px; /* move popup higher so suggestions fit */
}
@media (max-width: 575.98px){
  .search-modal .modal-dialog{ margin-top: 18px; }
}
.search-modal__content{
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.18);
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(600px 260px at 80% 0%, rgba(34,211,238,.16), transparent 60%),
    rgba(10,15,28,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.search-modal .modal-header{ padding: 16px 16px 0; }
.search-modal .modal-body{ padding: 16px; }
.search-modal__hint .badge{ border-radius: 10px; }

/* In the modal we can show a taller suggestion list */
.search-modal .nav-search__menu{
  max-height: min(70vh, 520px);
}

/* Navbar account menu */
.nav-user{ position: relative; }
.nav-user__btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border-radius: 999px;
  padding: 8px 12px;
}
.nav-user__avatar{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(234,240,255,.92);
}
.nav-user__name{
  max-width: 160px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}
.nav-user__menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 260px;
  background: rgba(10,15,28,.98);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  z-index: 1200;
}
.nav-user__meta{
  padding: 6px 8px 10px;
}
.nav-user__menu .dropdown-divider{
  border-top-color: rgba(148,163,184,.14);
  margin: 8px 0;
}
.nav-user__item{
  border-radius: 12px;
  color: rgba(234,240,255,.88);
  font-weight: 700;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap: 8px;
}
.nav-user__item:hover{
  background: rgba(99,102,241,.16);
  color: rgba(234,240,255,.96);
}

/* Dark-friendly utilities */
.badge-soft{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  color: rgba(234,240,255,.92) !important;
  font-weight: 700;
}
.bg-soft{
  background: rgba(2,6,23,.16) !important;
  border-color: rgba(148,163,184,.18) !important;
  color: rgba(234,240,255,.92);
}

/* Dark-friendly button (avoid bootstrap outline-light hover => white bg) */
.btn-outline-glass{
  color: rgba(234,240,255,.88);
  border-color: rgba(148,163,184,.22);
  background: rgba(2,6,23,.10);
}
.btn-outline-glass:hover,
.btn-outline-glass:focus{
  color: rgba(234,240,255,.96);
  background: rgba(255,255,255,.08);
  border-color: rgba(148,163,184,.30);
}
.btn-outline-glass:active{
  color: rgba(234,240,255,.98);
  background: rgba(99,102,241,.16);
  border-color: rgba(99,102,241,.45);
}
.btn-outline-glass:focus{
  box-shadow: 0 0 0 .2rem rgba(99,102,241,.15);
}

/* Fixture card (shared UI across pages) */
.fixtures-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
.fixtures-list{
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 576px){
  .fixtures-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px){
  .fixtures-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fixture-card{
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(2,6,23,.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}
.fixture-card .card-body{ padding: 12px; }
.fixture-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.fixture-card__league{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
  color: rgba(234,240,255,.86);
  font-weight: 700;
}
.fixture-card__league-name{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fixture-card__flag{
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 3px;
  background: rgba(2,6,23,.25);
  flex: 0 0 auto;
}
.fixture-card__status{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.18);
  color: rgba(234,240,255,.88);
  font-size: .75rem;
  font-weight: 800;
  flex: 0 0 auto;
}
.fixture-card__teams{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items:center;
}
.fixture-card__team{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width: 0;
}
.fixture-card__logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(2,6,23,.25);
}
.fixture-card__name{
  margin-top: 6px;
  font-weight: 800;
  font-size: .85rem;
  color: rgba(234,240,255,.92);
  max-width: 100%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fixture-card__center{ text-align:center; }
.fixture-card__scoreline{
  font-weight: 900;
  font-size: 1.05rem;
  color: rgba(234,240,255,.96);
  font-variant-numeric: tabular-nums;
}
.fixture-card__kick{
  margin-top: 2px;
  font-size: .78rem;
  color: rgba(148,163,184,.95);
}
.fixture-card__actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.fixture-card__actions .btn{
  border-radius: 12px;
  white-space: nowrap;
}
.fixture-card--compact .fixture-card__actions{ grid-template-columns: 1fr 1fr; }

/* Hero with 3D parallax */
.hero-3d{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(148,163,184,.14);
  background: radial-gradient(900px 500px at 20% 20%, rgba(124,58,237,.18), transparent 60%),
              radial-gradient(700px 420px at 80% 30%, rgba(34,211,238,.12), transparent 60%),
              linear-gradient(180deg, rgba(2,6,23,.70), rgba(2,6,23,.50));
}
.hero-3d::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: url('/img/pngtree-nighttime-serenity-a-3d-rendering-of-an-empty-soccer-stadium-image_13548970.jpg') center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
  transform: translate3d(0,0,0) scale(1.08);
  opacity: .78;
}
.hero-3d::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(100deg, rgba(2,6,23,.88), rgba(2,6,23,.25));
}
.hero-3d .hero-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero-3d .hero-glow{
  background: radial-gradient(500px 300px at 20% 35%, rgba(124,58,237,.35), transparent 60%),
              radial-gradient(460px 320px at 70% 30%, rgba(34,211,238,.24), transparent 60%);
  mix-blend-mode: screen;
  opacity: .9;
}
.hero-3d .container{ position: relative; z-index: 2; }
.hero-3d h1{
  font-weight: 900;
  letter-spacing: .2px;
  text-shadow: 0 20px 60px rgba(0,0,0,.55);
}

/* Cards + 3D tilt */
.card, .live-card{
  border: 1px solid rgba(148,163,184,.18) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text);
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card .text-muted{ color: rgba(234,240,255,.70) !important; }
.card .text-dark{ color: rgba(234,240,255,.92) !important; }
.card .card-title, .card .fw-semibold, .card .fw-bold{ color: rgba(234,240,255,.96); }
.card .small.text-dark{ color: rgba(234,240,255,.90) !important; }
.card .list-group-item{
  background: transparent !important;
  border-color: rgba(148,163,184,.14) !important;
}
.card-hover3d{
  transform-style: preserve-3d;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  will-change: transform;
}
.card-hover3d::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(124,58,237,.20), rgba(34,211,238,.14));
  opacity: 0;
  transition: opacity .18s var(--ease);
  pointer-events:none;
}
.card-hover3d:hover{
  box-shadow: var(--shadow);
}
.card-hover3d:hover::after{ opacity: .55; }

/* Buttons */
.btn{
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: .2px;
}
.btn-primary{
  background: linear-gradient(135deg, var(--brand), #4F46E5) !important;
  border-color: transparent !important;
  box-shadow: 0 18px 40px rgba(124,58,237,.18);
}
.btn-outline-light{
  border-color: rgba(234,240,255,.30) !important;
  color: rgba(234,240,255,.90) !important;
}
.btn-outline-secondary, .btn-outline-dark{
  border-color: rgba(148,163,184,.28) !important;
  color: rgba(234,240,255,.88) !important;
  background: rgba(255,255,255,.04) !important;
}
.btn-outline-secondary:hover, .btn-outline-dark:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Forms */
.form-control, .form-select{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  color: rgba(234,240,255,.92) !important;
  border-radius: 14px !important;
}
.form-control::placeholder{ color: rgba(234,240,255,.55) !important; }
.dropdown-menu{
  background: rgba(10,15,28,.92) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.dropdown-item{
  color: rgba(234,240,255,.92) !important;
  font-weight: 700;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}
.dropdown-divider{ border-color: rgba(148,163,184,.14) !important; }
.accordion-button{
  background: rgba(255,255,255,.04) !important;
  color: rgba(234,240,255,.90) !important;
}

/* Odds mini (Best odds / multi-bookmaker) */
.odds-mini{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
  min-width: 220px;
}
.odds-mini__labels{
  display:flex;
  justify-content:space-between;
  width:100%;
  color: rgba(234,240,255,.60);
  font-size: 12px;
  padding: 0 4px;
}
.odds-mini__values{
  display:flex;
  gap:6px;
  margin-top:6px;
}
.odds-mini__item{
  flex:1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.18);
  padding: 7px 6px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(234,240,255,.92);
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.odds-mini__item:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
  cursor:pointer;
}
.odds-mini__meta{
  opacity:.85;
}
.odds-drop{
  border-color: rgba(244,63,94,.45) !important;
  box-shadow: 0 0 0 .25rem rgba(244,63,94,.12) !important;
}

/* Announcements banner */
.ann-banner{
  position: sticky;
  top: 0;
  z-index: 1200;
  background: rgba(10,15,28,.92);
  border-bottom: 1px solid rgba(148,163,184,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ann-banner--success{ background: rgba(20,83,45,.75); }
.ann-banner--warning{ background: rgba(120,53,15,.75); }
.ann-banner--danger{ background: rgba(127,29,29,.75); }
.accordion-item{
  border-color: rgba(148,163,184,.14) !important;
  background: transparent !important;
}

/* Links */
a{ color: rgba(234,240,255,.92); }
a:hover{ color: #fff; }

/* Footer */
.footer{
  background: rgba(10,15,28,.55) !important;
  border-top: 1px solid rgba(148,163,184,.14);
}

/* Accessibility / performance */
@media (prefers-reduced-motion: reduce){
  .card-hover3d{ transition: none !important; transform: none !important; }
  .theme-bg::before{ transform: none !important; }
  .orb{ animation: none !important; }
}