html, body{
	width:100%;
	margin:0;
	padding:0;
	box-sizing:border-box;
	overflow-x: clip;
  }
  
  *, *::before, *::after{ box-sizing:inherit; }


  :root{ --nav-h: 65px; }
  html{ scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top)); }


  .glass{
	background: var(--glass-fallback, var(--glass));
	border-bottom: 1px solid var(--border);
  }

  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
	.glass{
	  background: var(--glass);
	  -webkit-backdrop-filter: blur(12px) saturate(130%);
	  backdrop-filter: blur(12px) saturate(130%);
	}
  }

  .navbar{
	position: static;
	top: 0; left: 0; right: 0;
	z-index: 1020; 
	/* animation: fadeSlide .6s ease; */
	padding-top: env(safe-area-inset-top);
  }
  
  .navbar.sticky-top{ position: sticky; top: 0; z-index: 1020; }


  .navbar > .container-fluid{
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(12px, 4vw, 24px);
  }


  .navbar-brand{
	color: var(--accent);
	font-weight: 700;
	letter-spacing: .5px;
	text-shadow: var(--text-shadow-accent);
	transition: .3s;
  }

  .navbar-brand:hover{
	color: var(--accent2);
	text-shadow: var(--text-shadow-hover);
  }


  .navbar .nav-link{ color: var(--text); transition: .25s; white-space: nowrap; }
  .navbar .nav-link:hover{ color: var(--accent2);}
  .navbar .nav-link.active{ color: var(--accent); position: relative; }
  .navbar .nav-link.active::after{
	content:""; position:absolute; left:.5rem; right:.5rem; bottom:0; height:2px;
	background: var(--gradient-active-line);
  }


  #navContent{
	display:flex; align-items:center; justify-content:space-between;
	gap:12px; flex-wrap:nowrap; width:100%;
	background-image: repeating-linear-gradient(
	  var(--nav-stripe-angle),
	  transparent 0,
	  transparent calc(var(--nav-stripe-gap) - var(--nav-stripe-thickness)),
	  var(--nav-stripe-color) calc(var(--nav-stripe-gap) - var(--nav-stripe-thickness)),
	  var(--nav-stripe-color) var(--nav-stripe-gap)
	);
	background-blend-mode: overlay;
  }
  .nav-left{ display:flex; align-items:center; min-width:0; flex-shrink:1; }
  .nav-right{ display:flex; align-items:center; gap:12px; flex-shrink:0; }


  .navbar-nav{ flex-wrap: wrap; }
  @media (max-width: 576px){
	.navbar-nav{
	  overflow-x: auto;
	  -webkit-overflow-scrolling: touch;
	  gap: .5rem;
	  scroll-snap-type: x proximity;
	}
	.navbar .nav-link{ scroll-snap-align: start; }
  }
  @media (hover: none){
	.navbar .nav-link:hover, .icon-stat:hover{ transform: none; }
  }


  #logo{
	display:block; width:100%; aspect-ratio: 100 / 11; margin:0;
	background-position:center; background-repeat:no-repeat; background-size:contain;
  }
  @supports not (aspect-ratio: 1 / 1){
	#logo{ height: calc(100vw * 100 / 11); }
  }
  @media (max-width: 992px){
	#logo{ aspect-ratio: auto; height: clamp(55px, 11vw, 110px); }
  }
  @media (max-width: 576px){
	#logo{ display:none; }
  }


  .dropdown-menu{
	background: var(--glass);
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	max-height: 65vh;
	overflow-y: auto;
	animation: fadeSlide .5s ease;
  }
  .dropdown-item{
	color: var(--text);
	font-size: .9rem;
	transition: .25s;
  }
  .dropdown-item:hover{
	background: var(--dropdown-hover-bg);
	color: var(--dropdown-hover-text);
  }

	.dropdown-item.active, .dropdown-item:active {
  color: var(--accent2);
  background: var(--dropdown-hover-bg);
	}

  .dropdown-header{
	font-size: .75rem; text-transform: uppercase; letter-spacing: .5px;
	color: var(--accent2); opacity: var(--opacity-high);
  }
  .dropdown-divider{ border-color: var(--border); opacity: .3; margin: .25rem 0; }

	@media (max-width: 992px){
	  .navbar{ padding-left: 0; padding-right: 0; }

	  .dropdown-menu{
		position: fixed;
		inset: calc(var(--nav-h) + env(safe-area-inset-top)) 0 auto 0;
		width: 100%;
		max-height: min(70vh, 540px);
		border-radius: 12px 12px 0 0;
		margin: 0;
		z-index: 1045;
		box-shadow: var(--shadow);
	  }


	  .mobile-nav{
		position: fixed;
		inset: calc(var(--nav-h) + env(safe-area-inset-top)) 0 auto 0;
		width: 100%;
		border-radius: 12px 12px 0 0;
		z-index: 1045;
	  }

	  #userMenuList, #notifList{
		position: fixed;
		inset: calc(var(--nav-h) + env(safe-area-inset-top)) 0 auto 0;
		width: 100%;
		z-index: 1045;
		animation: fadeSlide .25s ease;
	  }

	  .dropdown-item{ padding: .9rem 1.25rem; font-size: 1rem; }
	  .dropdown-header{ font-size:.85rem; padding:.5rem 1.25rem .25rem; }
	}


	@media (max-width: 576px){
	  .icon-divider, .icon-stat span, .user-dropdown-toggle small{ display:none; }
	  .dropdown-menu{ max-height: 60vh; }
	}


  .icon-stat{
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	color: var(--text);
	text-decoration:none; font-size:1.05rem; background:none; border:none;
	cursor:pointer; position:relative; transition:.25s ease;
  }
  .icon-stat:hover{ color: var(--accent2); }
  .icon-stat span{
	font-size:.75rem; margin-top:2px; color: var(--accent2); font-weight:500;
  }
  .icon-divider{ width:1px; height:38px; background: var(--gradient-divider); opacity:.5; margin: 0 10px; }


  .user-monogram{
	width:42px; height:42px; border-radius:50%;
	background: var(--gradient-accent); color: var(--text);
	font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center;
	box-shadow: 0 0 12px rgba(91,209,255,.5);
	border: 1px solid rgba(255,255,255,.25);
	transition: .3s ease;
  }
  .user-monogram:hover{ transform: scale(1.07); box-shadow: 0 0 20px var(--glow-strong); }
  .user-dropdown-toggle{
	display:flex; flex-direction:column; align-items:center; text-decoration:none;
	border:none; background:none; cursor:pointer; color: var(--text);
  }
  .user-dropdown-toggle small{ font-size:.7rem; color: var(--accent2); margin-top:2px; }


  #search-progress{
	position: fixed; top:0; left:0; height:3px; width:0;
	background: var(--progress-gradient); transition: width .4s ease; z-index: 2000;
  }
  .badge{
	font-size:.7rem; border-radius:10px; box-shadow: 0 0 8px var(--glow-soft);
  }

  @keyframes notifPulse{
	0%{ transform: scale(1); opacity: 1 }
	50%{ transform: scale(1.4); opacity: .6 }
	100%{ transform: scale(1); opacity: 1 }
  }
  #notifDot{
	width:8px; height:8px;
	box-shadow: 0 0 6px var(--notif-glow-soft);
  }
  #notifDot.pulse{ animation: notifPulse 1s infinite ease-in-out; }


  .bg-light,
  .bg-white,
  .table,
  .card,
  .modal-content,
  .offcanvas,
  .dropdown-menu,
  .accordion-item,
  .list-group-item,
  .toast,
  .popover,
  .alert{
	background: var(--glass);
	color: var(--text);
	border-color: var(--border);
  }

  .bg-dark, .text-bg-dark{
	background: rgba(20,28,46,.8) !important;
	color: var(--text) !important;
	border-color: var(--border) !important;
  }

  .text-dark, .text-body, .text-secondary, .text-muted{
	color: rgba(207,225,255,.7) !important;
  }
  .text-white{ color: var(--text) !important; }


  .btn{ border-radius:8px; transition:.25s ease; font-weight:500; }
  .btn-outline-primary{
	color: var(--accent2); border-color: var(--accent2); background: transparent;
  }
  .btn-outline-primary:hover{
	background: var(--gradient-accent); color: var(--text); border-color: var(--accent2);
	box-shadow: 0 0 8px var(--glow-soft);
  }
  .btn-danger{
	background: var(--danger); border: 1px solid var(--danger); color: var(--text);
	box-shadow: 0 0 6px var(--notif-glow-soft);
  }
  .btn-close{ filter: invert(1) brightness(1.4); opacity:.8; }
  .btn-close:hover{ filter: invert(1) brightness(2); opacity:1; }

  .progress, .progress-bar{ background: var(--border) !important; border-radius:8px; }
  .progress-bar{
	background: var(--progress-gradient) !important; box-shadow: 0 0 8px var(--glow-soft);
  }


  .table{ border-color: var(--border); }
  .table > :not(caption) > * > *{
	background: transparent !important; color: var(--text) !important; border-color: var(--border) !important;
  }
  .table-dark th{ background-color: rgba(30,40,60,.85) !important; }
  .table-hover tbody tr:hover{ background-color: rgba(255,215,0,.05) !important; }
  .table td, .table th{ vertical-align: middle; }


  .form-control, .form-select{
	background: rgba(130,130,130,.8); color: var(--text); border: 1px solid var(--accent2);
  }
  .form-control:focus, .form-select:focus{
	border-color: var(--accent2); box-shadow: 0 0 8px var(--glow-soft);
  }

  .tooltip-inner, .popover-body{
	background: var(--bg); color: var(--text); border: 1px solid var(--border);
  }

  .alert{
	color: var(--text); border: 1px solid var(--border);
  }


  .list-group-item{
	background: transparent !important; color: var(--text) !important; border-color: var(--border) !important;
  }
  .list-group-item:hover{ background: var(--shimmer-hover); color: var(--accent2); }
  .accordion-button{ background: var(--glass); color: var(--text); }
  .accordion-button:not(.collapsed){
	color: var(--accent2); background: rgba(20,28,46,.8);
  }

  .toast{ background: var(--glass); color: var(--text); border: 1px solid var(--border); }


body[data-theme="light"] {
	--popover-bg: rgba(255,255,255,0.66);
}

body[data-theme="dark"] {
	--popover-bg: rgba(32,32,32,0.66);
}

/*

  ::-webkit-scrollbar{ width:8px; height:8px; }
  ::-webkit-scrollbar-track{ background: rgba(20,28,46,.4); }
  ::-webkit-scrollbar-thumb{ background: var(--accent2); border-radius:4px; }
  ::-webkit-scrollbar-thumb:hover{ background: var(--accent); }

*/

  .cursor-pointer{ cursor: pointer; }
  .text-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  pre{ white-space: pre-wrap; word-wrap: break-word; font-family: Consolas, monospace; }


  .card-header{
	font-weight: 600;
	font-size:14px;
	/* text-align: center; */
  }


  @media (prefers-reduced-motion: reduce){
	*{ animation: none !important; transition: none !important; }
  }


  @keyframes fadeSlide{
	from{ opacity:0; transform: translateY(-10px); }
	to{ opacity:1; transform: translateY(0); }
  }

.stat-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .7rem;
  border:1px solid var(--accent2);
  box-shadow:0 1px 2px rgba(0,0,0,.25) inset, 0 1px 6px rgba(0,0,0,.15);
  cursor:default;
  line-height:1;
  color:var(--accent2);
}
.stat-pill .fa-upload{ font-size:.95rem; opacity:.85; }
.stat-pill .stat-label{
  font-size:.8rem; letter-spacing:.02em; opacity:.75;
}
.stat-pill .stat-value{
 font-variant-numeric:tabular-nums;
 font-weight: bolder;
}
.stat-pill{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  padding:.3rem .5rem;
  border-radius:999px;
  border:1px solid var(--bs-border-color-translucent);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
  line-height:1;
  cursor:default;
}

.stat-pill.stat-xs{ padding:.25rem .45rem; }

.stat-kicker{
  font-size:.625rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.7;
  line-height:1;
  white-space:nowrap;
  margin-top:.05rem;
}

.stat-row{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  line-height:1;
}
.stat-row .fa-upload{ font-size:.9rem; opacity:.9; }
.stat-value{ font-size:.7rem; font-weight:600; font-variant-numeric:tabular-nums; }


.nav-link:focus-visible {
  outline: 0;
  box-shadow: none;
}
.navbar {
    --bs-navbar-active-color: var(--accent2) !important;
}

.btn:first-child:active{
	color: var(--accent2);
}

.btn-link{
	--bs-btn-active-color: var(--accent2);
}

.dropdown-item:focus{
	background-color: var(--dropdown-hover-bg);
	color: var(--accent2);
}


a {
	color: var(--text);
	transition: color 0.15s ease-in-out;
	text-decoration: none !important;
}

a:hover {
	color:darkgray;
}

/* Pávián */
.class_0 {color: #ffffff !IMPORTANT; }

/* Csimpánz */
.class_1 {color: #dfbe6b !IMPORTANT; }

/* Maki */
.class_3 {color: green !IMPORTANT; }

/* Gorilla */
.class_6 {color: #E15A00 !IMPORTANT; }

/* KingKong */
.class_7 {color:#BC8F8F !IMPORTANT; }

/* VIP */
.class_18 {color:#00B011 !IMPORTANT; }  

/* Moderátor */
.class_21 {color:#fffc00 !IMPORTANT; }  

/* Adminisztrátor */
.class_24 {color:#C517EC !IMPORTANT; }  

/* Staffvezető (nincs) */
.class_27 { color: white !IMPORTANT; }

/* Fejlesztő */
.class_30 { color: cadetblue !IMPORTANT; }

/* Tulajdonos */
.class_33 { color: #8A0000 !IMPORTANT; }

/* Üzemeltető */
.class_36 { color: #FF5E5E !IMPORTANT; }