/* ???????????????????????????????????????????????
   CSS VARIABLES & THEME
??????????????????????????????????????????????? */
/* Production WebView: nincs ?weboldal? jelleg? kijel?l?s (input/textarea/.allow-select kiv?tel). */
html.remnant-production-webview,
html.remnant-production-webview body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html.remnant-production-webview input,
html.remnant-production-webview textarea,
html.remnant-production-webview select,
html.remnant-production-webview [contenteditable="true"],
html.remnant-production-webview [contenteditable=""],
html.remnant-production-webview .allow-select,
html.remnant-production-webview .allow-select * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

:root {
  color-scheme: dark;
  /* ??? ??les / tiszta? UI ? vissza?ll?t?s (?veg + blur): --blur: blur(20px); --blur-heavy: blur(40px);
       --glass: rgba(255,255,255,0.04); #sidebar rgba(15,15,24,0.6); #topbar rgba(10,10,15,0.4);
       body::before anim?ci? + body::after opacity 0.5; .modal-overlay blur(8px); thead blur(10px);
       .nav-item.active::before box-shadow 0 0 8px; .btn-primary:hover 0 0 14px; .btn-danger:hover 0 0 16px; .page anim 12px ??? */
  --bg: #0a0a0f;
  --bg2: #0f0f18;
  --glass: rgba(255,255,255,0.065);
  --glass-border: rgba(255,255,255,0.08);
  --glass-hover: rgba(255,255,255,0.07);
  --glass-active: rgba(255,255,255,0.10);
  --cyan: #00e5ff;
  --cyan-dim: rgba(0,229,255,0.15);
  --cyan-glow: rgba(0,229,255,0.4);
  --blue: #4d8fff;
  --blue-dim: rgba(77,143,255,0.15);
  --purple: #a855f7;
  --purple-dim: rgba(168,85,247,0.15);
  --green: #00ffa3;
  --status-online: #00ffa3;
  --green-dim: rgba(0,255,163,0.15);
  /* Mentés / hiba feliratok — soha ne kövessék az accent színt */
  --status-ok: #00ffa3;
  --status-err: #ff7b7b;
  --orange: #ff9500;
  --red: #ff3b30;
  --text: #e8eaf6;
  --text-dim: rgba(232,234,246,0.5);
  --text-faint: rgba(232,234,246,0.25);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --sidebar-w: clamp(220px, 16vw, 300px);
  --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: all 0.15s ease;
  --blur: none;
  --blur-heavy: none;
  --profile-banner-h: 200px;
  --profile-banner-aspect: 5;
  --profile-pane-h: min(76vh, 760px);
  --profile-core-w: clamp(980px, 60vw, 1140px);
  --profile-side-w: clamp(220px, 15vw, 300px);

  /* Rarity colors */
  --rarity-common: #8a9bb0;
  --rarity-rare: #4d8fff;
  --rarity-epic: #a855f7;
  --rarity-legendary: #ff9500;
}

/* ???????????????????????????????????????????????
   RESET & BASE
??????????????????????????????????????????????? */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Animated background */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,229,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(168,85,247,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(77,143,255,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.82;
  animation: none;
}

@keyframes bgPulse {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Noise overlay (kikapcsolva az ?les UI-hoz ? kevesebb ?szemcs?s? / mosott ?rzet) */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: 0;
}

/* ???????????????????????????????????????????????
   APP LAYOUT
??????????????????????????????????????????????? */
#app.remnant-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ???????????????????????????????????????????????
   SIDEBAR
??????????????????????????????????????????????? */
#sidebar {
  width: auto;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  container-type: inline-size;
  container-name: remnant-sidebar;
  /* Sidebar-only background image; full column height. */
  background-color: rgba(8, 10, 18, 0.55);
  background-image:
    linear-gradient(180deg, rgba(8, 10, 18, 0.42) 0%, rgba(8, 10, 18, 0.58) 55%, rgba(8, 10, 18, 0.78) 100%),
    url("sidebarbackground.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-right: 1px solid rgba(0, 229, 255, 0.12);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

/* Sidebar logo ? Rynex brand (logo + RYNEX egy sorban, alc?mek alatta) */
.sidebar-logo {
  padding: clamp(8px, 1.1vw, 12px) clamp(8px, 1vw, 12px) clamp(10px, 1.3vw, 16px);
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: clamp(8px, 1vw, 12px);
}

.sidebar-logo-brand {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.85vw, 11px);
}

.sidebar-logo-img {
  width: clamp(48px, 28cqi, 92px);
  height: clamp(48px, 28cqi, 92px);
  max-width: 42%;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
}

.sidebar-logo-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2px, 0.35vw, 3px);
  min-width: 0;
  flex: 1;
}

.sidebar-logo .logo-wordmark.sidebar-logo-wordmark {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(0.82rem, 5.6cqi, 1.28rem);
  line-height: 1.05;
  letter-spacing: clamp(0.06em, 0.35cqi, 0.1em);
  margin: 0;
  padding: 0;
  text-align: left;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
}

.sidebar-logo-wordmark-r {
  color: rgba(248, 250, 252, 0.96);
}

.sidebar-logo-wordmark-nex {
  background: linear-gradient(90deg, #5cf2ff 0%, #3b9dff 52%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sidebar-logo-lines {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.logo-line-game,
.logo-line-network {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(0.52rem, 2.9cqi, 0.68rem);
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--text-muted, var(--text));
  opacity: 0.92;
}

.logo-line-launcher {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.46rem, 2.55cqi, 0.6rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 1px;
}

/* Legacy class kept for any stray markup */
.logo-wordmark {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
}

.logo-sub {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* User profile in sidebar */
.sidebar-user {
  padding: 10px 14px 16px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: 0 8px 8px;
  transition: var(--transition-fast);
}

.sidebar-user:hover { background: var(--glass-hover); }

.avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: 14px;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.15);
}

.status-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--status-online);
  border: 2px solid var(--bg2);
  bottom: 0; right: 0;
  box-shadow: 0 0 6px var(--status-online);
}

.sidebar-user.remnant-sidebar-hud {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 12px 14px 14px;
  margin: 0 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: none;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 12px;
}
.sidebar-user-hud-top {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.remnant-sidebar-hud-avatar.avatar {
  width: 44px;
  height: 44px;
  font-size: 15px;
}
.sidebar-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: rgba(34, 197, 94, 0.98);
  font-weight: 600;
}
.sidebar-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.9);
  flex-shrink: 0;
}

.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-username { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-rynexcoin {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  width: 100%;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(226, 232, 240, 0.88);
  font-weight: 500;
}
.sidebar-rynexcoin-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.sidebar-rynexcoin-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}
#remnant-sidebar-rynexcoin-value {
  font-weight: 700;
  color: rgba(250, 204, 21, 0.95);
}

.sidebar-link-status {
  margin: 8px 10px 10px;
  padding: 10px 10px 8px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  position: relative;
}
.sidebar-link-status-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.sidebar-link-status-row:last-child { margin-bottom: 0; }
.sidebar-link-status-label { color: var(--text); font-weight: 600; }
.sidebar-link-status-icon { width: 12px; display: inline-block; text-align: center; font-weight: 800; }
.sidebar-link-status-ok { color: #4ade80; font-weight: 800; }
.sidebar-link-status-pending { color: #cbd5e1; font-weight: 800; }
.sidebar-link-status-miss { color: #ef4444; font-weight: 800; }
.sidebar-link-alert-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #facc15;
  cursor: pointer;
  width: 42px;
  height: 42px;
  font-size: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.7));
}
.sidebar-link-alert-btn.show { display: inline-flex; }
.sidebar-link-alert-btn:hover { color: #fde047; }
.remnant-build-version {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 271000;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(5, 8, 16, 0.72);
  color: rgba(226, 232, 240, 0.9);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* Sidebar nav */
.sidebar-nav {
  flex: 1;
  padding: 4px 8px;
  overflow-y: auto;
  scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-section-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 10px 10px 4px;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 2px;
  user-select: none;
}

/* WebView / author CSS: a .nav-item display ne ?rja fel?l a [hidden]-t (Admin Panel csak jogosultaknak). */
#remnant-sidebar-admin-open.nav-item[hidden] {
  display: none !important;
}

.nav-item:hover {
  background: var(--glass-hover);
  color: var(--text);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.14), rgba(0, 229, 255, 0.04));
  color: var(--cyan);
  border: 1px solid rgba(0, 229, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.08) inset,
    0 0 18px rgba(0, 229, 255, 0.18);
}

.nav-item.nav-item--soon {
  opacity: 0.72;
}
.nav-item.nav-item--soon:hover {
  opacity: 0.9;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--cyan);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
}

.nav-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item.active .nav-icon { opacity: 1; }
.nav-item.active .nav-icon path,
.nav-item.active .nav-icon circle,
.nav-item.active .nav-icon rect { stroke: var(--cyan); }

.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
}
.nav-badge--lime {
  background: linear-gradient(180deg, #d9f99d, #84cc16);
  color: #0f172a;
  border: 1px solid rgba(190, 242, 100, 0.65);
  box-shadow: 0 0 12px rgba(190, 242, 100, 0.35);
}
.nav-item[data-page='friends'] .nav-badge {
  background: rgba(0, 229, 255, 0.18);
  color: #e0fbff;
  border: 1px solid rgba(0, 229, 255, 0.45);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.28);
}

.game-tab.game-tab--with-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-badge.remnant-updates-tab-badge {
  margin-left: 0;
  flex-shrink: 0;
}

/* Sidebar bottom */
.sidebar-bottom {
  padding: 12px 8px 0;
  border-top: 1px solid var(--glass-border);
}

#remnant-sidebar-nav-admin {
  display: none;
  flex: 1;
  min-height: 0;
}
body.admin-mode #remnant-sidebar-nav-main {
  display: none !important;
}
body.admin-mode #remnant-sidebar-nav-admin {
  display: block;
}
body.admin-mode .sidebar-link-status {
  display: none !important;
}
body.admin-mode #sidebar {
  border-right-color: rgba(168, 85, 247, 0.28);
}

.remnant-admin-mode-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 232, 255, 0.95);
  background: rgba(168, 85, 247, 0.22);
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 999px;
  padding: 5px 12px;
  flex-shrink: 0;
}
.remnant-admin-exit-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  padding: 7px 12px;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
}
.remnant-admin-exit-btn:hover {
  background: var(--glass-hover);
  border-color: rgba(0, 229, 255, 0.35);
}

.remnant-admin-muted { color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.remnant-admin-error { color: var(--red); font-size: 13px; margin-top: 8px; }
.remnant-admin-toolbar-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px;
}
.remnant-admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  max-width: 900px;
}
.remnant-admin-stat {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 16px;
}
.remnant-admin-stat-val { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 700; color: var(--cyan); }
.remnant-admin-stat-lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-top: 4px; }
.remnant-admin-role-badge {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--glass-border);
}
.remnant-admin-role-badge--user { color: var(--text-dim); }
.remnant-admin-role-badge--moderator { color: #93c5fd; border-color: rgba(147, 197, 253, 0.35); }
.remnant-admin-role-badge--admin { color: #c4b5fd; border-color: rgba(168, 85, 247, 0.45); }
.remnant-admin-role-badge--superadmin { color: #f0abfc; border-color: rgba(232, 121, 249, 0.45); }
.remnant-admin-role-badge--owner { color: #fde68a; border-color: rgba(250, 204, 21, 0.45); }
.remnant-admin-table-wrap {
  max-height: min(62vh, 560px); overflow: auto; border-radius: 12px; border: 1px solid var(--glass-border);
}
.remnant-admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.remnant-admin-table thead th {
  text-align: left; padding: 10px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); border-bottom: 1px solid var(--glass-border); position: sticky; top: 0;
  background: rgba(15,15,24,0.96);
}
.remnant-admin-table tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.remnant-admin-table tbody tr:hover { background: rgba(168, 85, 247, 0.06); }
.remnant-admin-code { font-size: 12px; color: var(--text-dim); word-break: break-all; }

/* ? Admin ? Felhaszn?l?k (lista + review panel) ? */
.remnant-admin-users-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 2px 4px 0;
  border-radius: 0;
  background: transparent;
}
.remnant-admin-users-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
@media (max-width: 1020px) {
  .remnant-admin-users-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .remnant-admin-users-cards { grid-template-columns: 1fr; }
}
.remnant-admin-users-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: rgba(10, 14, 24, 0.88);
  border-radius: 14px;
  padding: 16px 14px 14px 16px;
  min-height: 108px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.remnant-admin-users-card-body {
  flex: 1;
  min-width: 0;
}
.remnant-admin-users-card--purple {
  border: 1px solid rgba(167, 139, 250, 0.38);
  box-shadow:
    0 0 32px rgba(139, 92, 246, 0.14),
    0 0 0 1px rgba(139, 92, 246, 0.06) inset;
}
.remnant-admin-users-card--green {
  border: 1px solid rgba(74, 222, 128, 0.35);
  box-shadow:
    0 0 32px rgba(34, 197, 94, 0.12),
    0 0 0 1px rgba(74, 222, 128, 0.06) inset;
}
.remnant-admin-users-card--blue {
  border: 1px solid rgba(96, 165, 250, 0.38);
  box-shadow:
    0 0 32px rgba(59, 130, 246, 0.14),
    0 0 0 1px rgba(96, 165, 250, 0.06) inset;
}
.remnant-admin-users-card--orange {
  border: 1px solid rgba(251, 146, 60, 0.38);
  box-shadow:
    0 0 32px rgba(245, 158, 11, 0.12),
    0 0 0 1px rgba(251, 146, 60, 0.06) inset;
}
.remnant-admin-users-card:hover {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow:
    0 0 36px rgba(139, 92, 246, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.remnant-admin-users-card--green:hover {
  border-color: rgba(74, 222, 128, 0.5);
  box-shadow: 0 0 36px rgba(34, 197, 94, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.remnant-admin-users-card--blue:hover {
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 36px rgba(59, 130, 246, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.remnant-admin-users-card--orange:hover {
  border-color: rgba(251, 146, 60, 0.5);
  box-shadow: 0 0 36px rgba(245, 158, 11, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.remnant-admin-users-card-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.remnant-admin-users-card-stat-icon svg {
  width: 21px;
  height: 21px;
}
.remnant-admin-users-card--purple .remnant-admin-users-card-stat-icon {
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.28);
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.2), inset 0 0 16px rgba(255, 255, 255, 0.02);
}
.remnant-admin-users-card--purple .remnant-admin-users-card-stat-icon svg {
  color: #d8b4fe;
  filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.5));
}
.remnant-admin-users-card--green .remnant-admin-users-card-stat-icon {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.28);
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.16), inset 0 0 16px rgba(255, 255, 255, 0.02);
}
.remnant-admin-users-card--green .remnant-admin-users-card-stat-icon svg {
  color: #86efac;
  filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.45));
}
.remnant-admin-users-card--blue .remnant-admin-users-card-stat-icon {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.28);
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.18), inset 0 0 16px rgba(255, 255, 255, 0.02);
}
.remnant-admin-users-card--blue .remnant-admin-users-card-stat-icon svg {
  color: #93c5fd;
  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.5));
}
.remnant-admin-users-card--orange .remnant-admin-users-card-stat-icon {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(251, 146, 60, 0.3);
  box-shadow: 0 0 18px rgba(251, 146, 60, 0.15), inset 0 0 16px rgba(255, 255, 255, 0.02);
}
.remnant-admin-users-card--orange .remnant-admin-users-card-stat-icon svg {
  color: #fdba74;
  filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.45));
}
.remnant-admin-users-card-lab {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 8px;
}
.remnant-admin-users-card-val {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.remnant-admin-users-card-sub { margin-top: 8px; font-size: 12px; color: var(--text-dim); line-height: 1.35; }
.remnant-admin-users-card-sub--up { color: #4ade80; font-weight: 600; }
.remnant-admin-users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.remnant-admin-users-toolbar-search {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  background: rgba(10, 14, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
}
.remnant-admin-users-toolbar-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.remnant-admin-users-toolbar-search-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.75;
}
.remnant-admin-users-toolbar-search-ico svg {
  width: 18px;
  height: 18px;
  color: #a5b4fc;
  filter: drop-shadow(0 0 6px rgba(129, 140, 248, 0.35));
}
.remnant-admin-users-toolbar select {
  background: rgba(10, 14, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--text);
  font-size: 13px;
  padding: 10px 12px;
  max-width: 200px;
}
.remnant-admin-users-toolbar-refresh {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding-left: 10px;
  padding-right: 10px;
}
.remnant-admin-users-toolbar-refresh svg {
  width: 18px;
  height: 18px;
}
.remnant-admin-users-table-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 24, 0.82);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
}
.remnant-admin-users-table-panel--empty {
  flex: 1 1 auto;
  min-height: 120px;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.remnant-admin-users-table-panel--empty p {
  margin: 0;
  text-align: center;
}
.remnant-admin-users-table-scroller {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  -webkit-overflow-scrolling: touch;
}
.remnant-admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.remnant-admin-users-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 14px 16px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: rgba(8, 12, 20, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
}
.remnant-admin-users-table tbody td {
  padding: 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
  color: #e6edf3;
}
.remnant-admin-users-table tbody tr {
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.remnant-admin-users-table tbody tr:hover {
  background: rgba(139, 92, 246, 0.08);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.12);
}
.remnant-admin-users-table tbody tr.remnant-admin-users-tr--active {
  background: rgba(139, 92, 246, 0.12);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.2);
}
.remnant-admin-users-usercell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.remnant-admin-users-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.5), rgba(59, 130, 246, 0.45));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.remnant-admin-users-uname { font-weight: 700; color: #fff; }
.remnant-admin-users-presence {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  flex-shrink: 0;
  background: rgba(139, 148, 158, 0.65);
}
.remnant-admin-users-presence--on { background: #3fb950; box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.25); }
.remnant-admin-users-presence--off { background: rgba(139, 148, 158, 0.65); box-shadow: none; }
.remnant-admin-users-avatar {
  position: relative;
  overflow: hidden;
}
.remnant-admin-users-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.remnant-admin-users-verified {
  display: inline-flex;
  margin-left: 6px;
  color: #a855f7;
  font-size: 14px;
  vertical-align: middle;
}
.remnant-admin-users-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.remnant-admin-users-badge--user { color: #d8b4fe; border-color: rgba(168, 85, 247, 0.45); }
.remnant-admin-users-badge--moderator { color: #93c5fd; border-color: rgba(147, 197, 253, 0.45); }
.remnant-admin-users-badge--scope {
  margin-left: 4px;
  font-size: 9px;
  padding: 2px 6px;
  vertical-align: middle;
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.35);
}
.remnant-admin-users-badge--admin { color: #f87171; border-color: rgba(248, 113, 113, 0.45); }
.remnant-admin-users-badge--superadmin { color: #f0abfc; border-color: rgba(232, 121, 249, 0.45); }
.remnant-admin-users-badge--owner { color: #c4b5fd; border-color: rgba(168, 85, 247, 0.55); }
.remnant-admin-users-xpwrap { min-width: 100px; }
.remnant-admin-users-xpnum { font-weight: 700; color: #fff; }
.remnant-admin-users-xpbar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 8px;
  overflow: hidden;
}
.remnant-admin-users-xpbar > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #a855f7, #22d3ee);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.45);
  width: 0%;
}
.remnant-admin-users-more {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.remnant-admin-users-more svg {
  width: 18px;
  height: 18px;
}
.remnant-admin-users-more:hover {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(167, 139, 250, 0.35);
  color: #e9d5ff;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.15);
}
.remnant-admin-users-td-actions { text-align: right; width: 56px; }
.remnant-admin-users-qmenu {
  position: fixed;
  z-index: 12020;
  min-width: 260px;
  max-width: min(320px, 92vw);
  background: rgba(18, 18, 28, 0.98);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  padding: 8px 0;
  max-height: min(72vh, 520px);
  overflow-y: auto;
}
.remnant-admin-users-qmenu-h {
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.remnant-admin-users-qmenu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: #e6edf3;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.remnant-admin-users-qmenu button:hover { background: rgba(168, 85, 247, 0.12); }
.remnant-admin-users-qmenu button.remnant-admin-users-qmenu--danger { color: #f85149; }
.remnant-admin-users-review {
  position: fixed;
  inset: 0;
  z-index: 12010;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.remnant-admin-users-review[hidden] { display: none !important; }
.remnant-admin-users-review-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
.remnant-admin-users-review-panel {
  position: relative;
  width: min(480px, 100%);
  max-width: 100%;
  height: 100%;
  background: rgba(14, 14, 22, 0.98);
  border-left: 1px solid var(--glass-border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  animation: remnant-admin-review-in 0.22s ease-out;
}
@keyframes remnant-admin-review-in {
  from { transform: translateX(100%); opacity: 0.85; }
  to { transform: translateX(0); opacity: 1; }
}
.remnant-admin-users-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--glass-border);
}
.remnant-admin-users-review-close {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.remnant-admin-users-review-close:hover { background: rgba(248, 81, 73, 0.12); border-color: rgba(248, 81, 73, 0.35); }
.remnant-admin-users-review-body { flex: 1; overflow: auto; padding: 20px; }
.remnant-admin-users-review-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.remnant-admin-users-review-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.55), rgba(59, 130, 246, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.remnant-admin-users-review-meta h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-users-review-meta p { margin: 0; font-size: 13px; color: var(--text-dim); }
.remnant-admin-users-review-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-admin-users-review-section h4 {
  margin: 0 0 10px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.remnant-admin-users-review-kv { display: grid; gap: 8px; font-size: 13px; }
.remnant-admin-users-review-kv div { display: flex; justify-content: space-between; gap: 12px; }
.remnant-admin-users-review-kv span:first-child { color: var(--text-dim); }
.remnant-admin-users-review-kv span:last-child { color: #e6edf3; font-weight: 600; text-align: right; }

.remnant-admin-users-qmenu-h.remnant-admin-users-qmenu-tier--admin {
  margin-top: 4px;
  padding: 8px 14px 6px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #93c5fd;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.remnant-admin-users-qmenu-h.remnant-admin-users-qmenu-tier--super {
  margin-top: 4px;
  padding: 8px 14px 6px;
  border-radius: 8px;
  background: rgba(232, 121, 249, 0.12);
  border: 1px solid rgba(232, 121, 249, 0.38);
  color: #f0abfc;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.remnant-admin-users-qmenu-h.remnant-admin-users-qmenu-tier--owner {
  margin-top: 4px;
  padding: 8px 14px 6px;
  border-radius: 8px;
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.38);
  color: #fde68a;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.remnant-admin-review-v2-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 4px;
}
.remnant-admin-review-v2-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.55), rgba(59, 130, 246, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.remnant-admin-review-v2-hero-main { flex: 1; min-width: 0; }
.remnant-admin-review-v2-title {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
  color: #fff;
}
.remnant-admin-review-v2-handle {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: var(--text-dim);
}
.remnant-admin-review-v2-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.remnant-admin-review-v2-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #3fb950;
}
.remnant-admin-review-v2-presence i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.28);
}
.remnant-admin-review-v2-links {
  display: flex;
  gap: 10px;
  align-items: center;
}
.remnant-admin-review-v2-link-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0.35;
}
.remnant-admin-review-v2-link-ico.is-on {
  opacity: 1;
  border-color: rgba(102, 126, 234, 0.55);
  background: rgba(102, 126, 234, 0.12);
  color: #c7d2fe;
}
.remnant-admin-review-v2-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.remnant-admin-review-v2-quick button {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.remnant-admin-review-v2-quick button:hover {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.35);
}
.remnant-admin-review-v2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 14px;
}
.remnant-admin-review-v2-tabs button {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.remnant-admin-review-v2-tabs button.is-active {
  color: #fff;
  border-color: rgba(168, 85, 247, 0.55);
  background: rgba(168, 85, 247, 0.14);
}
.remnant-admin-review-v2-tabs button:hover:not(.is-active) {
  color: #e6edf3;
}
.remnant-admin-review-v2-panel-title {
  margin: 0 0 12px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 700;
}
.remnant-admin-review-v2-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  font-size: 13px;
}
.remnant-admin-review-v2-stats div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}
.remnant-admin-review-v2-stats span:first-child { color: var(--text-dim); }
.remnant-admin-review-v2-stats span:last-child {
  color: #e6edf3;
  font-weight: 600;
  text-align: right;
}
.remnant-admin-review-v2-empty {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px dashed rgba(255, 255, 255, 0.1);
}
.remnant-admin-review-history-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.remnant-admin-review-history-item {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.remnant-admin-review-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}
.remnant-admin-review-ticket-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.remnant-admin-review-ticket-row {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.remnant-admin-review-ticket-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.remnant-admin-review-ticket-subj {
  font-size: 13px;
  font-weight: 600;
  color: #e6edf3;
}
.remnant-admin-review-sensitive-id {
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.remnant-admin-review-v2-link-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.remnant-admin-review-v2-link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(10, 10, 18, 0.55);
}
.remnant-admin-review-v2-link-row strong {
  display: block;
  font-size: 13px;
  color: #fff;
}
.remnant-admin-review-v2-link-row span.remnant-admin-muted {
  font-size: 11px;
}
.remnant-admin-review-v2-act-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.remnant-admin-review-v2-act-grid button {
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  color: #e6edf3;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.remnant-admin-review-v2-act-grid button:hover {
  background: rgba(168, 85, 247, 0.1);
}
.remnant-admin-review-v2-rank-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.12);
  color: #e9d5ff;
  vertical-align: middle;
}
.remnant-admin-review-v2-tab-panel {
  margin-top: 4px;
}
.remnant-admin-review-v2-tab-panel[hidden] {
  display: none !important;
}

/* ? Admin Chat (3 oszlop) ? */
.remnant-admin-chat-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-bottom: 0;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.remnant-admin-chat-wrap {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr) minmax(200px, 300px);
  gap: 12px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  align-items: stretch;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .remnant-admin-chat-wrap {
    grid-template-columns: 1fr;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}
.remnant-admin-chat-col {
  background: rgba(18, 18, 26, 0.92);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.remnant-admin-chat-ch-search {
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.remnant-admin-chat-ch-search input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.remnant-admin-chat-ch-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}
.remnant-admin-chat-ch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.remnant-admin-chat-ch-item:hover {
  background: rgba(168, 85, 247, 0.08);
}
.remnant-admin-chat-ch-item.is-active {
  border-color: rgba(168, 85, 247, 0.55);
  background: rgba(168, 85, 247, 0.12);
}
.remnant-admin-chat-ch-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.remnant-admin-chat-ch-ico--all {
  background: rgba(168, 85, 247, 0.22);
  color: #d8b4fe;
}
.remnant-admin-chat-ch-ico--mod {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}
.remnant-admin-chat-ch-ico--adm {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}
.remnant-admin-chat-ch-ico--super {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
}
.remnant-admin-chat-ch-ico--owner {
  background: rgba(167, 139, 250, 0.2);
  color: #ddd6fe;
}
.remnant-admin-chat-ch-meta {
  flex: 1;
  min-width: 0;
}
.remnant-admin-chat-ch-meta strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}
.remnant-admin-chat-ch-meta span {
  font-size: 11px;
  color: var(--text-dim);
}
.remnant-admin-chat-ch-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
}
.remnant-admin-chat-main-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.remnant-admin-chat-main-h h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
  color: #fff;
}
.remnant-admin-chat-main-h p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}
.remnant-admin-chat-main-tools {
  display: flex;
  gap: 6px;
}
.remnant-admin-chat-main-tools button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
}
.remnant-admin-chat-main-tools button:hover {
  color: #fff;
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.1);
}
.remnant-admin-chat-feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px 18px;
  -webkit-overflow-scrolling: touch;
}
.remnant-admin-chat-msg {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 12px 12px 12px 10px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.remnant-admin-chat-msg:hover {
  background: rgba(248, 81, 73, 0.08);
}
.remnant-admin-chat-msg:hover .remnant-admin-chat-msg-actions {
  opacity: 1;
  pointer-events: auto;
}
.remnant-admin-chat-msg-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
}
.remnant-admin-chat-msg-av--haspic {
  padding: 0;
  overflow: hidden;
}
.remnant-admin-chat-msg-av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.remnant-admin-chat-msg-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.remnant-admin-chat-msg-name {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.remnant-admin-chat-msg-time {
  font-size: 12px;
  color: var(--text-faint);
}
.remnant-admin-chat-msg-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.remnant-admin-chat-msg-body {
  font-size: 14px;
  line-height: 1.48;
  color: #e6edf3;
  word-break: break-word;
}
.remnant-admin-chat-msg--system .remnant-admin-chat-msg-body {
  color: #f85149;
  font-weight: 600;
}
.remnant-admin-chat-msg-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.remnant-admin-chat-msg-actions button {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(14, 14, 22, 0.95);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.remnant-admin-chat-msg-actions button:hover {
  color: #fff;
  border-color: rgba(248, 81, 73, 0.45);
}
.remnant-admin-chat-foot {
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.remnant-admin-chat-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.remnant-admin-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  resize: vertical;
  min-height: 44px;
  max-height: 160px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
  color: #e6edf3;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.35;
}
.remnant-admin-chat-attach,
.remnant-admin-chat-send {
  flex-shrink: 0;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.remnant-admin-chat-attach {
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
}
.remnant-admin-chat-send {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(79, 70, 229, 0.22));
  border-color: rgba(139, 92, 246, 0.45);
  color: #faf5ff;
}
.remnant-admin-chat-attach:hover {
  border-color: rgba(148, 163, 184, 0.35);
  color: #fff;
}
.remnant-admin-chat-send:hover {
  filter: brightness(1.06);
}
.remnant-admin-chat-msg-media {
  margin-top: 8px;
}
.remnant-admin-chat-foot input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text-dim);
  font-size: 13px;
  font-family: inherit;
}
.remnant-admin-chat-foot-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.remnant-admin-chat-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8b949e;
}
.remnant-admin-chat-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.25);
}
.remnant-admin-chat-new {
  color: #c4b5fd;
  font-weight: 600;
}
.remnant-admin-chat-new i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a855f7;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.remnant-admin-chat-staff-h {
  padding: 14px 14px 10px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
  flex-shrink: 0;
}
.remnant-admin-chat-staff-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.remnant-admin-chat-staff-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.2);
}
.remnant-admin-chat-staff-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}
.remnant-admin-chat-staff-av--haspic {
  padding: 0;
  overflow: hidden;
}
.remnant-admin-chat-staff-av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.remnant-admin-chat-staff-info {
  flex: 1;
  min-width: 0;
}
.remnant-admin-chat-staff-info strong {
  display: block;
  font-size: 13px;
  color: #fff;
}
.remnant-admin-chat-staff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3fb950;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.25);
}

/* ? Admin ? Ticket moder?ci? (3 oszlop, glass / neon) ? */
.remnant-admin-tickets-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-bottom: 0;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.remnant-admin-tickets {
  --tkt-glass: rgba(10, 14, 24, 0.88);
  --tkt-border: rgba(255, 255, 255, 0.06);
  --tkt-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  --tkt-purple: #a855f7;
  --tkt-cyan: #22d3ee;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.remnant-admin-tickets .icon-glow {
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.45));
}
.remnant-admin-tickets-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.remnant-admin-tickets-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.remnant-admin-tickets-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--tkt-border);
  background: var(--tkt-glass);
  box-shadow: var(--tkt-shadow);
  color: #e6edf3;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s, transform 0.12s;
}
.remnant-admin-tickets-filter-pill:hover {
  border-color: rgba(168, 85, 247, 0.28);
  background: rgba(10, 14, 24, 0.94);
}
.remnant-admin-tickets-filter-pill.is-active {
  border-color: rgba(168, 85, 247, 0.75);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.35),
    0 0 22px rgba(168, 85, 247, 0.28),
    var(--tkt-shadow);
  background: rgba(24, 12, 40, 0.55);
}
.remnant-admin-tickets-filter-label {
  letter-spacing: 0.01em;
}
.remnant-admin-tickets-filter-count {
  font-size: 11px;
  font-weight: 800;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #c9d1d9;
}
.remnant-admin-tickets-fc--new {
  background: rgba(168, 85, 247, 0.22);
  color: #f3e8ff;
}
.remnant-admin-tickets-fc--prog {
  background: rgba(249, 115, 22, 0.2);
  color: #ffedd5;
}
.remnant-admin-tickets-fc--wait {
  background: rgba(34, 211, 238, 0.16);
  color: #cffafe;
}
.remnant-admin-tickets-fc--closed {
  background: rgba(34, 197, 94, 0.18);
  color: #dcfce7;
}
.remnant-admin-tickets-fc--all {
  background: rgba(255, 255, 255, 0.08);
}
.remnant-admin-tickets-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.remnant-admin-tickets-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--tkt-border);
  background: var(--tkt-glass);
  box-shadow: var(--tkt-shadow);
}
.remnant-admin-tickets-sort-ico {
  display: flex;
  color: #c4b5fd;
  opacity: 0.95;
}
.remnant-admin-tickets-sort-ico svg {
  width: 18px;
  height: 18px;
}
.remnant-admin-tickets-sort {
  appearance: none;
  background: transparent;
  border: none;
  color: #e6edf3;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px 4px 0;
  outline: none;
}
.remnant-admin-tickets-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  min-width: min(240px, 46vw);
  border-radius: 12px;
  border: 1px solid var(--tkt-border);
  background: var(--tkt-glass);
  box-shadow: var(--tkt-shadow);
}
.remnant-admin-tickets-search-ico {
  display: flex;
  color: #93c5fd;
}
.remnant-admin-tickets-search-ico svg {
  width: 18px;
  height: 18px;
}
.remnant-admin-tickets-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #e6edf3;
  font-family: inherit;
  font-size: 13px;
}
.remnant-admin-tickets-search input::placeholder {
  color: rgba(139, 148, 158, 0.85);
}
.remnant-admin-tickets-grid {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(260px, 340px);
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  align-items: stretch;
}
@media (max-width: 1200px) {
  .remnant-admin-tickets-grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .remnant-admin-tickets-col--list {
    max-height: 360px;
  }
}
.remnant-admin-tickets-col {
  background: var(--tkt-glass);
  border: 1px solid var(--tkt-border);
  border-radius: 16px;
  box-shadow: var(--tkt-shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.remnant-admin-tickets-col--list {
  min-height: 0;
}
.remnant-admin-tickets-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.remnant-admin-tickets-list-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}
.remnant-admin-tickets-slot {
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.12);
  padding: 12px 12px 10px;
  color: inherit;
  transition: border-color 0.18s, box-shadow 0.2s, background 0.18s;
}
.remnant-admin-tickets-slot:hover {
  border-color: rgba(168, 85, 247, 0.22);
  background: rgba(168, 85, 247, 0.06);
}
.remnant-admin-tickets-slot.is-active {
  border-color: rgba(168, 85, 247, 0.85);
  background: rgba(20, 10, 36, 0.72);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.35),
    0 0 28px rgba(168, 85, 247, 0.22);
}
.remnant-admin-tickets-slot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.remnant-admin-tickets-slot-id {
  font-size: 12px;
  font-weight: 800;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #c4b5fd;
  letter-spacing: 0.02em;
}
.remnant-admin-tickets-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.remnant-admin-tickets-badge--new {
  color: #dcfce7;
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.32);
}
.remnant-admin-tickets-badge--progress {
  color: #dbeafe;
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.36);
}
.remnant-admin-tickets-badge--wait {
  color: #cffafe;
  background: rgba(34, 211, 238, 0.14);
  border-color: rgba(34, 211, 238, 0.32);
}
.remnant-admin-tickets-badge--closed {
  color: #fee2e2;
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.38);
}
.remnant-admin-tickets-slot-mid {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.remnant-admin-tickets-slot-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}
.remnant-admin-tickets-slot-av--pic {
  padding: 0;
  overflow: hidden;
  font-size: 0;
}
.remnant-admin-tickets-slot-av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.remnant-admin-tickets-slot-meta {
  flex: 1;
  min-width: 0;
}
.remnant-admin-tickets-slot-user {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.remnant-admin-tickets-slot-preview {
  font-size: 12px;
  color: rgba(139, 148, 158, 0.95);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.remnant-admin-tickets-slot-time {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(139, 148, 158, 0.75);
}
.remnant-admin-tickets-col--chat {
  min-height: 420px;
}
.remnant-admin-tickets-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--tkt-border);
  flex-shrink: 0;
}
.remnant-admin-tickets-chat-head-txt {
  min-width: 0;
}
.remnant-admin-tickets-chat-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.remnant-admin-tickets-chat-tid {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: 13px;
  color: #e9d5ff;
}
.remnant-admin-tickets-chat-subj {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.remnant-admin-tickets-chat-subline {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.remnant-admin-tickets-chat-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.remnant-admin-tickets-btn-accept {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.35), rgba(91, 33, 182, 0.25));
  color: #faf5ff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.25);
  transition: box-shadow 0.18s, transform 0.12s;
}
.remnant-admin-tickets-btn-accept:hover {
  box-shadow: 0 0 32px rgba(168, 85, 247, 0.4);
}
.remnant-admin-tickets-btn-handoff {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid rgba(249, 115, 22, 0.5);
  background: linear-gradient(145deg, rgba(249, 115, 22, 0.28), rgba(234, 88, 12, 0.2));
  color: #ffedd5;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.22);
  transition: box-shadow 0.18s, transform 0.12s;
}
.remnant-admin-tickets-btn-handoff:hover:not(:disabled) {
  box-shadow: 0 0 28px rgba(249, 115, 22, 0.38);
}
.remnant-admin-tickets-btn-claim {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid rgba(45, 212, 191, 0.45);
  background: linear-gradient(145deg, rgba(45, 212, 191, 0.22), rgba(13, 148, 136, 0.2));
  color: #ccfbf1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.18);
  transition: box-shadow 0.18s, transform 0.12s;
}
.remnant-admin-tickets-btn-claim:hover:not(:disabled) {
  box-shadow: 0 0 28px rgba(45, 212, 191, 0.32);
}
.remnant-admin-tickets-badge--handoff {
  border-color: rgba(249, 115, 22, 0.55) !important;
  background: rgba(249, 115, 22, 0.2) !important;
  color: #fed7aa !important;
  font-weight: 800;
}
.remnant-admin-tickets-past-scroll {
  max-height: 180px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}
.remnant-admin-tickets-past-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  font-size: 12px;
}
.remnant-admin-tickets-past-card .remnant-admin-tickets-user-av,
.remnant-admin-tickets-past-card .remnant-admin-tickets-user-av--img {
  margin-bottom: 0;
  flex-shrink: 0;
}
.remnant-admin-tickets-btn-ico {
  display: flex;
}
.remnant-admin-tickets-btn-ico svg {
  width: 18px;
  height: 18px;
}
.remnant-admin-tickets-btn-more {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--tkt-border);
  background: rgba(0, 0, 0, 0.2);
  color: #c9d1d9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.remnant-admin-tickets-btn-more:hover {
  border-color: rgba(168, 85, 247, 0.35);
  color: #fff;
}
.remnant-admin-tickets-btn-more svg {
  width: 20px;
  height: 20px;
}
.remnant-admin-tickets-chat-feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 18px 14px;
  -webkit-overflow-scrolling: touch;
}
.remnant-admin-tickets-chat-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}
.remnant-admin-tickets-chat-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
}
.remnant-admin-tickets-chat-sep span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(139, 148, 158, 0.85);
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--tkt-border);
  background: rgba(0, 0, 0, 0.2);
}
.remnant-admin-tickets-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.remnant-admin-tickets-msg-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.remnant-admin-tickets-msg-av--pic {
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.remnant-admin-tickets-msg-av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.remnant-admin-tickets-msg-body {
  flex: 1;
  min-width: 0;
}
.remnant-admin-tickets-msg-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.remnant-admin-tickets-msg-name {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}
.remnant-admin-tickets-msg-time {
  font-size: 11px;
  color: rgba(139, 148, 158, 0.85);
  margin-left: auto;
}
.remnant-admin-tickets-staff-pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.25);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #f3e8ff;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}
.remnant-text-pre-wrap {
  white-space: pre-wrap;
  word-break: break-word;
}
.remnant-admin-tickets-msg-bubble {
  display: inline-block;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #e6edf3;
  word-break: break-word;
  white-space: pre-wrap;
}
.remnant-admin-tickets-msg--user .remnant-admin-tickets-msg-bubble {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.remnant-admin-tickets-msg--staff .remnant-admin-tickets-msg-bubble {
  background: rgba(88, 28, 135, 0.22);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.12);
}
.remnant-admin-tickets-composer {
  border-top: 1px solid var(--tkt-border);
  padding: 12px 14px 14px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.12);
}
.remnant-admin-tickets-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.remnant-admin-tickets-tab {
  position: relative;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: rgba(139, 148, 158, 0.95);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: color 0.15s;
}
.remnant-admin-tickets-tab:hover {
  color: #e6edf3;
}
.remnant-admin-tickets-tab.is-active {
  color: #e9d5ff;
}
.remnant-admin-tickets-tab.is-active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tkt-purple), var(--tkt-cyan));
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.55);
}
.remnant-admin-tickets-compose-box {
  border-radius: 14px;
  border: 1px solid var(--tkt-border);
  background: rgba(10, 14, 24, 0.72);
  padding: 10px 10px 8px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.2);
}
.remnant-admin-tickets-ta {
  width: 100%;
  box-sizing: border-box;
  min-height: 72px;
  resize: vertical;
  border: none;
  background: transparent;
  color: #e6edf3;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  outline: none;
}
.remnant-admin-tickets-ta:focus {
  outline: none;
}
.remnant-admin-tickets-compose-box:focus-within {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.2),
    inset 0 0 24px rgba(0, 0, 0, 0.2);
}
.remnant-admin-tickets-compose-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-admin-tickets-compose-tools {
  display: flex;
  gap: 4px;
}
.remnant-admin-tickets-tool {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #c4b5fd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.remnant-admin-tickets-tool:hover {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.2);
}
.remnant-admin-tickets-tool svg {
  width: 18px;
  height: 18px;
}
.remnant-admin-tickets-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.4), rgba(76, 29, 149, 0.35));
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.28);
  transition: box-shadow 0.18s;
}
.remnant-admin-tickets-send:hover {
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.4);
}
.remnant-admin-tickets-send-ico {
  display: flex;
}
.remnant-admin-tickets-send-ico svg {
  width: 18px;
  height: 18px;
}
.remnant-admin-tickets-col--meta {
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.remnant-admin-tickets-side-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}
.remnant-admin-tickets-side-block {
  border-radius: 14px;
  border: 1px solid var(--tkt-border);
  background: rgba(0, 0, 0, 0.14);
  padding: 14px 14px 12px;
  margin-bottom: 10px;
}
.remnant-admin-tickets-side-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e6edf3;
  margin-bottom: 12px;
}
.remnant-admin-tickets-side-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.22);
  color: #e9d5ff;
}
.remnant-admin-tickets-side-ico svg {
  width: 18px;
  height: 18px;
}
.remnant-admin-tickets-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-dim);
}
.remnant-admin-tickets-field span:first-child {
  font-weight: 600;
}
.remnant-admin-tickets-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--tkt-border);
  background: rgba(0, 0, 0, 0.28);
  color: #e6edf3;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}
.remnant-admin-tickets-select:focus {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.15);
}
.remnant-admin-tickets-pri-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.remnant-admin-tickets-pri-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.35);
}
.remnant-admin-tickets-pri-dot--high {
  background: #f87171;
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.45);
}
.remnant-admin-tickets-pri-dot--mid {
  background: #facc15;
}
.remnant-admin-tickets-pri-dot--low {
  background: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.35);
}
.remnant-admin-tickets-pri-row .remnant-admin-tickets-select {
  flex: 1;
}
.remnant-admin-tickets-user-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.remnant-admin-tickets-user-av {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: #fff;
  margin-bottom: 4px;
}
.remnant-admin-tickets-user-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.remnant-admin-tickets-user-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
  flex-shrink: 0;
}
.remnant-admin-tickets-user-dot--off {
  background: #6b7280;
  box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2);
}
.remnant-admin-tickets-user-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.remnant-admin-tickets-user-kv span:first-child {
  color: var(--text-dim);
  flex-shrink: 0;
}
.remnant-admin-tickets-user-kv span:last-child {
  color: #e6edf3;
  text-align: right;
  word-break: break-all;
}
.remnant-admin-tickets-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
}
.remnant-admin-tickets-side-actions {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.remnant-admin-tickets-act {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--tkt-border);
  transition: box-shadow 0.18s, border-color 0.15s;
}
.remnant-admin-tickets-act-ico {
  display: flex;
}
.remnant-admin-tickets-act-ico svg {
  width: 18px;
  height: 18px;
}
.remnant-admin-tickets-act--close {
  background: rgba(0, 0, 0, 0.25);
  color: #e6edf3;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
}
.remnant-admin-tickets-act--close:hover {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.18);
}
.remnant-admin-tickets-act--close .remnant-admin-tickets-act-ico {
  color: #c4b5fd;
}
.remnant-admin-tickets-act--del {
  background: rgba(127, 29, 29, 0.45);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
  box-shadow: 0 0 22px rgba(248, 113, 113, 0.12);
}
.remnant-admin-tickets-act--del:hover {
  box-shadow: 0 0 28px rgba(248, 113, 113, 0.22);
  border-color: rgba(248, 113, 113, 0.5);
}
.remnant-admin-tickets-act--del .remnant-admin-tickets-act-ico {
  color: #fca5a5;
}

/* ? Admin ?ttekint? dashboard (mockup) ? */
#page-admin.page-admin-dash-page {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0 8px 6px 0;
}
#page-admin.page-admin-dash-page.active {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
}
.remnant-admin-dash-page-inner {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 6px;
}
#remnant-admin-overview-root.remnant-admin-dash-page-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#remnant-admin-overview-root > .remnant-admin-dash--overview-fit {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.remnant-admin-dash {
  --adm-bg: #0b0e14;
  --adm-card: rgba(21, 25, 33, 0.92);
  --adm-border: #21262d;
  --adm-muted: #8b949e;
  --adm-green: #238636;
  --adm-blue: #1f6feb;
  --adm-orange: #d29922;
  --adm-red: #f85149;
  --adm-purple: #8957e5;
  --adm-overview-card: rgba(10, 14, 24, 0.88);
  --adm-overview-border: rgba(255, 255, 255, 0.06);
  --adm-main-content-max: min(1320px, 98vw);
  max-width: 1240px;
  margin: 0 auto;
  font-size: 14px;
}
.remnant-admin-dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.remnant-admin-dash-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
}
.remnant-admin-dash-sub {
  margin: 0;
  color: var(--adm-muted);
  font-size: 14px;
  max-width: 520px;
  line-height: 1.45;
}
.remnant-admin-dash-details {
  position: relative;
  flex-shrink: 0;
}
.remnant-admin-dash-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--adm-border);
  background: var(--adm-card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  user-select: none;
}
.remnant-admin-dash-details > summary::-webkit-details-marker { display: none; }
.remnant-admin-dash-details > summary::after {
  content: '?';
  font-size: 10px;
  opacity: 0.65;
  margin-left: 4px;
}
.remnant-admin-dash-details[open] > summary::after { transform: rotate(180deg); display: inline-block; }
.remnant-admin-dash-details-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--adm-border);
  background: rgba(18, 22, 30, 0.98);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  z-index: 30;
}
.remnant-admin-dash-details-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.remnant-admin-dash-details-menu button:hover {
  background: rgba(31, 111, 235, 0.12);
  color: #fff;
}
.remnant-admin-dash-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) {
  .remnant-admin-dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .remnant-admin-dash-cards { grid-template-columns: 1fr; }
}
.remnant-admin-dash-metric {
  position: relative;
  background: var(--adm-card);
  border: 1px solid var(--adm-border);
  border-radius: 14px;
  padding: 18px 18px 16px;
  min-height: 118px;
}
.remnant-admin-dash-metric-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.remnant-admin-dash-metric-icon--blue { background: rgba(31, 111, 235, 0.2); }
.remnant-admin-dash-metric-icon--teal { background: rgba(0, 229, 255, 0.15); }
.remnant-admin-dash-metric-icon--yellow { background: rgba(210, 153, 34, 0.2); }
.remnant-admin-dash-metric-icon--pulse { background: rgba(31, 111, 235, 0.18); }
.remnant-admin-dash-metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--adm-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.remnant-admin-dash-metric-val {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.remnant-admin-dash-metric-sub { margin-top: 8px; font-size: 12px; color: var(--adm-muted); }
.remnant-admin-dash-metric-sub--up { color: var(--adm-green); font-weight: 600; }
.remnant-admin-dash-metric--staff {
  min-height: 132px;
  padding-right: 56px;
}
.remnant-admin-dash-staff-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  padding-right: 4px;
  max-width: calc(100% - 4px);
}
.remnant-admin-dash-staff-row {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--adm-muted);
  flex-wrap: wrap;
}
.remnant-admin-dash-staff-row strong {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  font-family: 'Syne', sans-serif;
  letter-spacing: -0.02em;
  min-width: 2ch;
}
.remnant-admin-dash-mid-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.remnant-admin-dash-news-embed {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 2px;
}
.remnant-admin-dash-news-embed-bar {
  width: 4px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #5865f2, #3ba55d);
}
.remnant-admin-dash-news-embed-body {
  padding: 14px 16px 14px 14px;
  flex: 1;
  min-width: 0;
}
.remnant-admin-dash-news-embed-title {
  font-weight: 700;
  color: #fff;
  font-size: 15px;
  margin: 0 0 8px 0;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-dash-news-embed-desc {
  font-size: 13px;
  color: #b8bcc3;
  line-height: 1.45;
  margin: 0;
}
.remnant-admin-dash-news-embed-foot {
  margin-top: 12px;
  font-size: 11px;
  color: var(--adm-muted);
}
.remnant-admin-dash--overview-fit {
  display: flex;
  flex-direction: column;
  max-width: var(--adm-main-content-max);
  width: 100%;
  flex: 1 1 0%;
  min-height: 0;
}
.remnant-admin-dash--overview-fit > .remnant-admin-dash-header,
.remnant-admin-dash--overview-fit > .remnant-admin-dash-cards {
  flex-shrink: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-cards {
  margin-bottom: 10px;
  gap: 12px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-metric {
  min-height: 96px;
  padding: 14px 16px 12px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-metric-icon {
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  font-size: 16px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-metric-label {
  margin-bottom: 6px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-metric-val {
  font-size: 24px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-metric--staff {
  min-height: 104px;
  padding-top: 12px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-staff-row strong {
  font-size: 16px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-mid {
  flex: 1 1 0%;
  min-height: 0;
  align-items: stretch;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-mid > .remnant-admin-dash-panel--activity {
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-mid > .remnant-admin-dash-panel--popgames {
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-page-footer {
  margin-top: 8px;
  flex-shrink: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-page-footer-r {
  position: relative;
  left: -14px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel--news {
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: stretch;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel--news .remnant-admin-dash-panel-title {
  flex-shrink: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel--news .remnant-admin-dash-news-embed {
  flex: 1 1 auto;
  min-height: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel--activity {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel--activity .remnant-admin-dash-panel-title {
  flex-shrink: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel--activity .remnant-admin-dash-log {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 16px 0;
  border: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-hero-text {
  flex: 1 1 240px;
  min-width: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
  margin: 0 0 6px 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-title-hand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-title-hand svg {
  width: 22px;
  height: 22px;
  color: #c4b5fd;
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.4));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-sub {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-dim);
  max-width: 640px;
  margin: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-details {
  margin-top: 2px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-details > summary {
  padding: 7px 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  box-shadow: none;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-details > summary::after {
  content: none;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-details-summary-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-details-zap,
.remnant-admin-dash--overview-fit .remnant-admin-dash-details-chevron {
  flex-shrink: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-details-zap svg {
  width: 18px;
  height: 18px;
  color: #fde047;
  filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.5));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-details-chevron svg {
  width: 18px;
  height: 18px;
  color: var(--adm-muted);
  transition: transform 0.2s ease;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-details[open] .remnant-admin-dash-details-chevron svg {
  transform: rotate(180deg);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-metric {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: var(--adm-overview-card);
  border: 1px solid var(--adm-overview-border);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  min-height: 102px;
  padding: 12px 14px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-metric:hover {
  border-color: rgba(139, 92, 246, 0.22);
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(139, 92, 246, 0.08);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-metric-text {
  flex: 1;
  min-width: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-metric--staff {
  padding-right: 18px;
  align-items: center;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-stat-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-stat-icon-box svg {
  width: 21px;
  height: 21px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-stat-icon-box--users {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.22);
  box-shadow:
    0 0 18px rgba(139, 92, 246, 0.18),
    inset 0 0 18px rgba(255, 255, 255, 0.02);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-stat-icon-box--users svg {
  color: #c4b5fd;
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.55));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-stat-icon-box--server {
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.22);
  box-shadow:
    0 0 18px rgba(34, 211, 238, 0.16),
    inset 0 0 18px rgba(255, 255, 255, 0.02);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-stat-icon-box--server svg {
  color: #67e8f9;
  filter: drop-shadow(0 0 8px rgba(103, 232, 249, 0.5));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-stat-icon-box--gamepad {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  box-shadow:
    0 0 18px rgba(245, 158, 11, 0.15),
    inset 0 0 18px rgba(255, 255, 255, 0.02);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-stat-icon-box--gamepad svg {
  color: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.55));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-stat-icon-box--shield {
  background: linear-gradient(145deg, rgba(248, 113, 113, 0.14), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(248, 113, 113, 0.22);
  box-shadow:
    0 0 18px rgba(248, 113, 113, 0.2),
    inset 0 0 18px rgba(255, 255, 255, 0.02);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-stat-icon-box--shield svg {
  color: #fca5a5;
  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.45));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-staff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
  background: #3fb950;
  box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.28);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-staff-row {
  gap: 8px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel,
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel--popgames {
  background: var(--adm-overview-card);
  border: 1px solid var(--adm-overview-border);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  border-radius: 16px;
  padding: 14px 14px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel:hover {
  border-color: rgba(139, 92, 246, 0.18);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel-head--news {
  justify-content: flex-start;
  gap: 12px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel-head--news .remnant-admin-dash-panel-title {
  margin-bottom: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel-head--activity {
  align-items: flex-start;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel-head-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel-head-title .remnant-admin-dash-panel-title {
  margin: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--adm-muted);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-refresh-icon {
  display: inline-flex;
  opacity: 0.85;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-refresh-icon svg {
  width: 15px;
  height: 15px;
  color: #a5b4fc;
  filter: drop-shadow(0 0 6px rgba(129, 140, 248, 0.4));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel-head--pop {
  margin-bottom: 12px;
  gap: 12px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-panel-head--pop .remnant-admin-dash-panel-title {
  margin-bottom: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-section-title-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-section-title-icon svg {
  width: 21px;
  height: 21px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-section-title-icon--news {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.22);
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.15), inset 0 0 18px rgba(255, 255, 255, 0.02);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-section-title-icon--news svg {
  color: #c4b5fd;
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.5));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-section-title-icon--activity {
  background: rgba(129, 140, 248, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.22);
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.14), inset 0 0 18px rgba(255, 255, 255, 0.02);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-section-title-icon--activity svg {
  color: #93c5fd;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.45));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-section-title-icon--trophy {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.2);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.12), inset 0 0 18px rgba(255, 255, 255, 0.02);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-section-title-icon--trophy svg {
  color: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.4));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-news-embed {
  margin-top: 0;
  border-radius: 14px;
  border: 1px solid rgba(139, 92, 246, 0.15);
  background: rgba(0, 0, 0, 0.28);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-news-embed:hover {
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 0 32px rgba(139, 92, 246, 0.12);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-news-embed-bar {
  width: 5px;
  background: linear-gradient(180deg, #a78bfa 0%, #6366f1 55%, #4f46e5 100%);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-news-embed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-news-embed-title {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-news-embed-time {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--adm-muted);
  margin-top: 2px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-log-item {
  transition: background 0.15s ease;
  border-radius: 10px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;
  margin-right: -8px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-log-item:hover {
  background: rgba(139, 92, 246, 0.06);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-log-ico {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-log-ico svg {
  width: 18px;
  height: 18px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-log-ico--empty {
  background: rgba(129, 140, 248, 0.12) !important;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-log-ico--empty svg {
  color: #a5b4fc;
  filter: drop-shadow(0 0 6px rgba(129, 140, 248, 0.45));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-log-ico--signup {
  background: rgba(34, 197, 94, 0.12) !important;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-log-ico--signup svg {
  color: #4ade80;
  filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.45));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-pop-row--head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--adm-muted);
  padding-top: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-pop-badge {
  font-size: 10px;
  font-weight: 800;
  border-radius: 6px;
  padding: 2px 6px;
  line-height: 1.2;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-pop-badge--mc {
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.45);
  background: rgba(34, 197, 94, 0.1);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-pop-badge--fivem {
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.4);
  background: rgba(59, 130, 246, 0.1);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-pop-badge--cs2 {
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.45);
  background: rgba(249, 115, 22, 0.1);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-pop-badge--rust {
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.45);
  background: rgba(234, 179, 8, 0.1);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-pop-bar--mc > i {
  background: linear-gradient(90deg, #16a34a, #4ade80);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.45);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-pop-bar--fivem > i {
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-pop-bar--cs2 > i {
  background: linear-gradient(90deg, #ea580c, #fb923c);
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.42);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-pop-bar--rust > i {
  background: linear-gradient(90deg, #ca8a04, #facc15);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.4);
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 10px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-page-footer-l {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-footer-lead-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-footer-lead-icon svg {
  width: 16px;
  height: 16px;
  color: #93c5fd;
  filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.45));
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-footer-heart {
  display: inline-flex;
  align-items: center;
  vertical-align: -3px;
  margin: 0 3px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-footer-heart svg {
  width: 14px;
  height: 14px;
  color: #f472b6;
  filter: drop-shadow(0 0 6px rgba(244, 114, 182, 0.55));
}
.remnant-admin-dash-mid {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 16px;
  margin-bottom: 20px;
}
.remnant-admin-dash--overview-fit .remnant-admin-dash-mid {
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 8px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .remnant-admin-dash-mid { grid-template-columns: 1fr; }
}
.remnant-admin-dash-panel {
  background: var(--adm-card);
  border: 1px solid var(--adm-border);
  border-radius: 14px;
  padding: 18px 18px 16px;
  min-height: 0;
}
.remnant-admin-dash-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px 0;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.remnant-admin-dash-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--adm-muted);
  border-bottom: 1px solid var(--adm-border);
}
.remnant-admin-dash-table td { padding: 11px 10px; border-bottom: 1px solid rgba(33, 38, 45, 0.85); color: #e6edf3; }
.remnant-admin-dash-table tr:last-child td { border-bottom: none; }
.remnant-admin-dash-status--ok { color: var(--adm-green); font-weight: 600; }
.remnant-admin-dash-status--off { color: var(--adm-red); font-weight: 600; }
.remnant-admin-dash-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  min-width: 64px;
}
.remnant-admin-dash-bar > i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.remnant-admin-dash-bar--g > i { background: var(--adm-green); }
.remnant-admin-dash-bar--t > i { background: rgba(0, 229, 255, 0.75); }
.remnant-admin-dash-bar--b > i { background: var(--adm-blue); }
.remnant-admin-dash-bar--z > i { background: rgba(139, 148, 158, 0.45); }
.remnant-admin-dash-footbtn {
  margin-top: 14px;
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid var(--adm-border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.remnant-admin-dash-footbtn:hover { background: rgba(31, 111, 235, 0.12); border-color: rgba(31, 111, 235, 0.35); }
.remnant-admin-dash-log { display: flex; flex-direction: column; gap: 0; }
.remnant-admin-dash-log-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(33, 38, 45, 0.75);
  align-items: flex-start;
}
.remnant-admin-dash-log-item:last-child { border-bottom: none; }
.remnant-admin-dash-log-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.remnant-admin-dash-log-body { flex: 1; min-width: 0; }
.remnant-admin-dash-log-text { color: #e6edf3; font-size: 13px; line-height: 1.35; margin: 0; }
.remnant-admin-dash-log-time { font-size: 11px; color: var(--adm-muted); margin-top: 4px; }
.remnant-admin-integrations-root-wrap {
  width: 100%;
  max-width: min(1280px, 98vw);
  margin: 0 auto;
}
.remnant-admin-int-shell {
  max-width: min(1280px, 98vw);
  margin: 0 auto;
  padding: 4px 2px 14px;
}
.remnant-admin-int-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.remnant-admin-int-tab {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(148, 163, 184, 0.95);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.remnant-admin-int-tab:hover {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.12);
  color: #e2e8f0;
}
.remnant-admin-int-tab.is-active {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.55);
  color: #f5e8ff;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.22);
}
.remnant-admin-int-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1150px) {
  .remnant-admin-int-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .remnant-admin-int-grid {
    grid-template-columns: 1fr;
  }
}
.remnant-admin-int-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 24, 0.88);
  border-radius: 16px;
  padding: 14px 14px 10px;
  min-height: 0;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.remnant-admin-int-card:hover {
  border-color: rgba(168, 85, 247, 0.15);
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.42), 0 0 22px rgba(168, 85, 247, 0.06);
}
.remnant-admin-int-card--wide {
  grid-column: 1 / -1;
}
.remnant-admin-int-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.remnant-admin-int-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  min-width: 0;
}
.remnant-admin-int-head-badge {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  align-self: flex-start;
  margin-left: auto;
  padding-top: 1px;
  max-width: min(200px, 50%);
}
.integrations-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}
.integrations-status-badge.ok {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.16);
}
.integrations-status-badge.warning {
  color: #facc15;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.28);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.16);
}
.integrations-status-badge.error {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.16);
}
.integrations-status-badge.prep {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.28);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.16);
}
.remnant-admin-int-ico-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
.remnant-admin-int-ico-wrap svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.2;
}
.remnant-admin-int-ico-wrap--cyan {
  color: #67e8f9;
  border-color: rgba(34, 211, 238, 0.35);
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.35));
}
.remnant-admin-int-ico-wrap--blue {
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.38);
  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.35));
}
.remnant-admin-int-ico-wrap--discord {
  color: #a78bfa;
  border-color: rgba(129, 140, 248, 0.4);
  filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.35));
}
.remnant-admin-int-ico-wrap--amber {
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.4);
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.3));
}
.remnant-admin-int-ico-wrap--purple {
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.4);
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.35));
}
.remnant-admin-int-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.01em;
}
.remnant-admin-int-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.remnant-admin-int-pill--ok {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.4);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.15);
}
.remnant-admin-int-pill--prep {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.38);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.15);
}
.remnant-admin-int-pill--muted {
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.remnant-admin-int-metric-good {
  color: #4ade80 !important;
  text-shadow: 0 0 12px rgba(74, 222, 128, 0.35);
}
.remnant-admin-int-desc {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.95);
  margin: 0 0 10px;
  line-height: 1.45;
}
.remnant-admin-int-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.remnant-admin-int-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
}
.remnant-admin-int-list li:last-child {
  border-bottom: 0;
}
.remnant-admin-int-list span:first-child {
  color: rgba(148, 163, 184, 0.95);
}
.remnant-admin-int-list strong {
  color: #f1f5f9;
  font-weight: 600;
  text-align: right;
  max-width: 56%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* strong saj?t sz?ne fel?l?rn? az OK/Hiba span-t ? gyerekre explicit sz?n */
.remnant-admin-int-list strong .remnant-admin-dash-status--ok {
  color: var(--adm-green);
}
.remnant-admin-int-list strong .remnant-admin-dash-status--off {
  color: var(--adm-red);
}
.remnant-admin-int-hiba-action {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.integrations-status-badge.remnant-admin-int-hiba-action {
  text-decoration: none;
}
.integrations-status-badge.remnant-admin-int-hiba-action:hover {
  filter: brightness(1.06);
}
.remnant-admin-int-hiba-action:focus {
  outline: 1px solid rgba(77, 143, 255, 0.55);
  outline-offset: 2px;
}
.remnant-admin-int-card-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  padding-top: 2px;
}
.remnant-admin-int-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(77, 143, 255, 0.45);
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.1);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 18px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.12);
  transition: box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.remnant-admin-int-clear-btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}
.remnant-admin-int-clear-btn:hover:not(:disabled) {
  border-color: rgba(77, 143, 255, 0.65);
  background: rgba(59, 130, 246, 0.16);
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.22);
}
.remnant-admin-int-clear-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.remnant-admin-int-chip-ok,
.remnant-admin-int-chip-bad {
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
}
.remnant-admin-int-chip-ok {
  color: #52d58a; background: rgba(35,134,54,0.18); border: 1px solid rgba(35,134,54,0.45);
}
.remnant-admin-int-chip-bad {
  color: #ff9c94; background: rgba(248,81,73,0.16); border: 1px solid rgba(248,81,73,0.35);
}
.remnant-admin-int-events {
  margin-top: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: rgba(10, 14, 24, 0.88);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  padding: 16px 16px 14px;
}
.remnant-admin-int-events-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.02em;
}
.remnant-admin-int-ev-thead {
  display: grid;
  grid-template-columns: 26px minmax(180px, 1.3fr) minmax(160px, 1fr) 130px;
  gap: 10px;
  align-items: center;
  padding: 8px 4px 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(148, 163, 184, 0.95);
}
.remnant-admin-int-ev-th-ico {
  width: 26px;
}
.remnant-admin-int-ev-scroll {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(4, 8, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 8px 10px 10px;
  margin-bottom: 12px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.55) rgba(255, 255, 255, 0.04);
}
.remnant-admin-int-ev-scroll::-webkit-scrollbar {
  width: 7px;
}
.remnant-admin-int-ev-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.remnant-admin-int-ev-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.65), rgba(99, 102, 241, 0.55));
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.35);
}
.remnant-admin-int-ev-scroll .remnant-admin-int-ev-row:last-child {
  border-bottom: 0;
}
.remnant-admin-int-ev-row {
  display: grid;
  grid-template-columns: 26px minmax(180px, 1.3fr) minmax(160px, 1fr) 130px;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 8px 4px;
  font-size: 12px;
  color: #e2e8f0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  border-radius: 8px;
}
.remnant-admin-int-ev-row:hover {
  background: rgba(168, 85, 247, 0.06);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.06);
}
.remnant-admin-int-ev-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.remnant-admin-int-ev-ico svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}
.remnant-admin-int-ev-ico--ok {
  background: rgba(16, 185, 129, 0.18);
  color: #4ade80;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.2);
}
.remnant-admin-int-ev-ico--warn {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.18);
}
.remnant-admin-int-ev-ico--err {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.15);
}
.remnant-admin-int-ev-time {
  color: rgba(148, 163, 184, 0.95);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 11px;
}
.remnant-admin-int-more {
  margin: 0 auto 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.08);
  color: #e9d5ff;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.15);
  transition: box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.remnant-admin-int-more svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.remnant-admin-int-more:hover:not(:disabled) {
  border-color: rgba(168, 85, 247, 0.65);
  background: rgba(168, 85, 247, 0.12);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.25);
}
.remnant-admin-int-more:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
@media (max-width: 780px) {
  .remnant-admin-int-ev-thead {
    display: none;
  }
  .remnant-admin-int-ev-row {
    grid-template-columns: 26px 1fr;
    grid-template-areas: 'ico msg' '. type' '. time';
    row-gap: 4px;
    padding: 10px 4px;
  }
  .remnant-admin-int-ev-row > span:nth-child(1) {
    grid-area: ico;
  }
  .remnant-admin-int-ev-row > span:nth-child(2) {
    grid-area: msg;
  }
  .remnant-admin-int-ev-row > span:nth-child(3) {
    grid-area: type;
    color: var(--text-dim);
    font-size: 11px;
  }
  .remnant-admin-int-ev-row > span:nth-child(4) {
    grid-area: time;
    text-align: left;
  }
}
.remnant-admin-dash-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 1020px) {
  .remnant-admin-dash-bottom { grid-template-columns: 1fr; }
}
.remnant-admin-dash-pop-row {
  display: grid;
  grid-template-columns: 1fr auto 120px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(33, 38, 45, 0.75);
  font-size: 13px;
}
.remnant-admin-dash-pop-row:last-child { border-bottom: none; }
.remnant-admin-dash-pop-game { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.remnant-admin-dash-pop-bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.remnant-admin-dash-pop-bar > i { display: block; height: 100%; border-radius: 99px; }
.remnant-admin-dash-pop-bar--p > i { background: var(--adm-purple); }
.remnant-admin-dash-pop-bar--b > i { background: var(--adm-blue); }
.remnant-admin-dash-pop-bar--t > i { background: rgba(0, 229, 255, 0.7); }
.remnant-admin-dash-pop-bar--o > i { background: var(--adm-orange); }
.remnant-admin-dash-res {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 0 4px;
}
.remnant-admin-dash-donut-wrap { text-align: center; width: 104px; }
.remnant-admin-dash-donut-svg { display: block; margin: 0 auto; }
.remnant-admin-dash-donut-pct-below {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
}
.remnant-admin-dash-donut-lab { font-size: 12px; font-weight: 600; color: var(--adm-muted); margin-top: 6px; }
.remnant-admin-dash-donut-sub { font-size: 11px; color: var(--adm-muted); margin-top: 4px; line-height: 1.3; }
.remnant-admin-dash-qstat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(33, 38, 45, 0.75);
  font-size: 13px;
}
.remnant-admin-dash-qstat-row:last-child { border-bottom: none; }
.remnant-admin-dash-qstat-l { color: var(--adm-muted); }
.remnant-admin-dash-qstat-m { font-weight: 700; color: #fff; }
.remnant-admin-dash-qstat-trend--up { color: var(--adm-green); font-weight: 700; font-size: 12px; }
.remnant-admin-dash-qstat-trend--down { color: var(--adm-red); font-weight: 700; font-size: 12px; }
.remnant-admin-dash-page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--adm-border);
  font-size: 12px;
  color: var(--adm-muted);
}

/* ? Admin H?rek oldal (mockup st?lus) ? */
#page-admin-news {
  max-width: min(1380px, 98vw);
  margin: 0 auto;
}
.remnant-admin-news-shell {
  --news-card-bg: linear-gradient(180deg, rgba(10, 16, 27, 0.92), rgba(8, 12, 20, 0.95));
  --news-card-border: rgba(117, 133, 161, 0.18);
  --news-glow-blue: rgba(77, 143, 255, 0.3);
  --news-glow-purple: rgba(168, 85, 247, 0.32);
  max-width: min(1320px, 98vw);
  margin: 0 auto;
  padding: 8px 2px 6px;
}
.remnant-admin-news-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.remnant-admin-news-head-l {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.news-header-icon {
  width: 28px;
  height: 28px;
  color: #a855f7;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, .7));
}
.remnant-admin-news-head-title {
  margin: 0;
  color: #f3f6ff;
  font-size: 29px;
  font-family: 'Syne', sans-serif;
  letter-spacing: -0.03em;
}
.remnant-admin-news-head-sub {
  margin: 6px 0 0;
  color: rgba(151, 169, 198, 0.9);
  font-size: 13px;
}
.remnant-admin-news-create {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 11px;
  border: 1px solid rgba(137, 101, 255, 0.55);
  background: linear-gradient(140deg, rgba(112, 56, 255, 0.95), rgba(66, 94, 255, 0.88));
  color: #f9fbff;
  box-shadow: 0 8px 24px rgba(78, 68, 255, 0.22);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
}
.remnant-admin-news-create i[data-lucide] {
  width: 18px;
  height: 18px;
}
.remnant-admin-news-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.remnant-admin-news-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--news-card-border);
  background: var(--news-card-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 28px rgba(4, 7, 13, 0.42);
  padding: 12px 14px 10px;
  /* visible: a ?+ emoji men? absolute poz?ci?ja nem v?g?djon le */
  overflow: visible;
}
.remnant-admin-news-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(77, 143, 255, 0.95), rgba(168, 85, 247, 0.85));
}
.remnant-admin-news-card:hover {
  border-color: rgba(138, 154, 187, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0 0 1px rgba(77, 143, 255, 0.1), 0 18px 38px rgba(7, 11, 20, 0.55);
}
.remnant-admin-news-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-left: 12px;
  margin-bottom: 8px;
}
.remnant-admin-news-author {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.remnant-admin-news-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(77, 143, 255, 0.4);
  background: radial-gradient(circle at 30% 24%, rgba(44, 98, 203, 0.52), rgba(8, 14, 22, 0.9));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ebcff;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-news-avatar--brand {
  overflow: hidden;
  padding: 3px;
  box-sizing: border-box;
}
.remnant-admin-news-avatar--brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}
.remnant-admin-news-author-meta {
  min-width: 0;
}
.remnant-admin-news-author-name {
  margin: 0 0 2px;
  color: #ecf2ff;
  font-size: 14px;
  font-weight: 700;
}
.remnant-admin-news-author-time {
  margin: 0;
  color: rgba(145, 163, 191, 0.8);
  font-size: 12px;
}
.remnant-admin-news-role-chip {
  border: 1px solid rgba(77, 143, 255, 0.5);
  background: rgba(77, 143, 255, 0.14);
  color: #9fc5ff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  margin-left: 8px;
}
.remnant-admin-news-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 5px 10px;
  letter-spacing: 0.05em;
}
.remnant-admin-news-status--live {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.38);
  color: #7af2b8;
}
.remnant-admin-news-status--expired {
  background: rgba(126, 138, 156, 0.15);
  border: 1px solid rgba(126, 138, 156, 0.35);
  color: #b6c2d5;
}
.remnant-admin-news-row {
  margin-left: 12px;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(250px, 400px);
  gap: 12px;
  align-items: center;
  margin-top: -2px;
}
.news-title-row,
.remnant-admin-news-title-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.remnant-upd-preview-type-ico-wrap {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.news-type-icon,
.remnant-admin-news-title-line .news-type-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  stroke-width: 2.4;
}
.news-type-icon.update {
  color: #3b82f6;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, .75));
}
.news-type-icon.bonus {
  color: #a855f7;
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, .75));
}
.news-type-icon.maintenance {
  color: #f59e0b;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, .75));
}
.remnant-admin-news-title {
  margin: 0;
  font-size: 31px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #f9fbff;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-news-excerpt {
  margin: 0;
  color: rgba(190, 203, 225, 0.9);
  font-size: 15px;
  line-height: 1.44;
  max-width: 82%;
  white-space: pre-line;
}
.remnant-admin-news-image {
  width: min(100%, 400px);
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 12px;
  border: 1px solid rgba(111, 126, 150, 0.3);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  justify-self: end;
  margin-right: 118px;
}
.remnant-admin-news-image--a {
  background-image: linear-gradient(145deg, rgba(7, 12, 22, 0.2), rgba(7, 12, 22, 0.72)),
    radial-gradient(circle at 25% 15%, var(--news-glow-blue), transparent 45%),
    linear-gradient(135deg, #0a1324, #111b36 48%, #0d1f3f);
}
.remnant-admin-news-image--b {
  background-image: linear-gradient(145deg, rgba(7, 12, 22, 0.26), rgba(7, 12, 22, 0.75)),
    radial-gradient(circle at 64% 38%, var(--news-glow-purple), transparent 48%),
    linear-gradient(135deg, #130e27, #25103f 45%, #14204a);
}
.remnant-admin-news-image--c {
  background-image: linear-gradient(145deg, rgba(8, 11, 16, 0.32), rgba(8, 11, 16, 0.8)),
    radial-gradient(circle at 72% 40%, rgba(255, 170, 87, 0.35), transparent 48%),
    linear-gradient(135deg, #22130f, #2d1c14 45%, #1f2738);
}
.remnant-admin-news-foot {
  position: relative;
  z-index: 1;
  margin-left: 12px;
  margin-top: 8px;
  display: block;
  align-self: stretch;
}
.remnant-news-reaction-flow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}
.remnant-news-reaction-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.remnant-news-reaction-row .reaction-pill.reaction-chip {
  flex: 0 0 auto;
}
.reaction-pill,
.remnant-admin-news-chip {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .02);
  height: 36px;
  padding: 0 14px;
  font-size: 12px;
  color: #d1d5db;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  cursor: default;
}
.reaction-pill[data-rx-pill],
.reaction-pill--picker {
  cursor: pointer;
}
/* H?r reakci? chip: halv?ny alap; is-mine = csak ha a backend reactedByMe igaz (saj?t account) */
.reaction-pill.reaction-chip {
  opacity: 0.72;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.reaction-pill.reaction-chip .reaction-count {
  color: rgba(207, 214, 228, 0.82);
}
.reaction-pill.reaction-chip:hover {
  opacity: 0.88;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}
.reaction-pill.reaction-chip.is-mine {
  opacity: 1;
  border-color: rgba(168, 120, 255, 0.75);
  background: rgba(124, 78, 255, 0.22);
  box-shadow: 0 0 14px rgba(124, 78, 255, 0.28);
}
.reaction-pill.reaction-chip.is-mine .reaction-emoji {
  filter: saturate(1.2);
}
.reaction-pill.reaction-chip.is-mine .reaction-count {
  color: #ece8ff;
  font-weight: 600;
}
.reaction-pill.reaction-chip.is-mine:hover {
  opacity: 1;
  border-color: rgba(187, 150, 255, 0.88);
  background: rgba(132, 88, 255, 0.3);
  box-shadow: 0 0 18px rgba(124, 78, 255, 0.38);
}
.reaction-pill:hover:not(.reaction-chip),
.remnant-admin-news-chip:hover:not(.reaction-chip) {
  border-color: rgba(139, 92, 246, .45);
  background: rgba(139, 92, 246, .08);
}
.reaction-pill .reaction-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  font-size: 15px;
  line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI", sans-serif;
}
.reaction-pill .reaction-count {
  font-size: 13px;
  color: #cfd6e4;
  font-family: 'Inter', 'Segoe UI', 'Roboto', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-variant-emoji: normal;
}
.remnant-news-reaction-emoji-limit-msg {
  font-size: 11px;
  font-weight: 500;
  color: rgba(248, 113, 113, 0.88);
  line-height: 1.25;
  white-space: normal;
  max-width: 220px;
}
.reaction-picker-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.remnant-news-rx-popover {
  position: fixed;
  z-index: 12050;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 18, 28, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  padding: 0;
}
.remnant-news-rx-popover[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.remnant-news-rx-popover .reaction-picker-scroll {
  max-height: inherit;
  box-sizing: border-box;
}
.reaction-pill--picker {
  padding: 0 10px;
  min-width: 44px;
  justify-content: center;
  cursor: pointer;
}
.reaction-picker-face {
  font-size: 14px;
  line-height: 1;
}
.reaction-picker-plus {
  font-size: 13px;
  color: #b4bfd4;
}
.reaction-picker-menu {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 6px);
  /* 8×30px + 7×4px gap + pad + scrollbar — régi 268px levágta a jobb szélt */
  width: min(300px, calc(100vw - 48px));
  max-height: 210px;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 18, 28, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
  overflow: hidden;
  box-sizing: border-box;
}
.reaction-picker-scroll {
  max-height: 210px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px 10px 8px;
  box-sizing: border-box;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.reaction-picker-cat {
  margin-bottom: 8px;
}
.reaction-picker-cat:last-child {
  margin-bottom: 0;
}
.reaction-picker-cat-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.75);
  margin: 0 0 6px 4px;
}
.reaction-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  justify-content: stretch;
}
.reaction-picker-menu[hidden] {
  display: none;
}
.reaction-picker-option {
  width: 100%;
  height: 30px;
  min-width: 0;
  min-height: 30px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: #d6deea;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.reaction-picker-option:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
}
.remnant-admin-news-note {
  margin-top: 12px;
  border-radius: 10px;
  border: 1px dashed rgba(77, 143, 255, 0.35);
  background: rgba(13, 21, 35, 0.68);
  color: rgba(159, 181, 216, 0.9);
  font-size: 12px;
  padding: 9px 12px;
}
@media (max-width: 960px) {
  .remnant-admin-news-row {
    grid-template-columns: 1fr;
  }
  .remnant-admin-news-image {
    width: 100%;
    max-width: 560px;
    justify-self: start;
    margin-right: 0;
  }
  .remnant-admin-news-title {
    font-size: 23px;
  }
}
@media (max-width: 680px) {
  .remnant-admin-news-head {
    flex-direction: column;
    align-items: stretch;
  }
  .remnant-admin-news-create {
    justify-content: center;
  }
}

/* ? Admin Friss?t?sek oldal (Remnant mockup) ? */
#page-admin-updates {
  max-width: min(1320px, 99vw);
  margin: 0 auto;
}
.remnant-admin-updates-root-wrap {
  width: 100%;
}
#page-admin-updates #remnant-admin-updates-root {
  position: relative;
  z-index: 14000;
}
.remnant-upd-scope {
  --upd-bg: #0a0e18;
  --upd-panel: rgba(10, 14, 24, 0.88);
  --upd-border: rgba(255, 255, 255, 0.06);
  --upd-glow: rgba(168, 85, 247, 0.45);
  color: #e2e8f0;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.remnant-upd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.remnant-upd-head-text h1 {
  margin: 0 0 6px 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f8fafc;
}
.remnant-upd-head-text p {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
  max-width: 520px;
  line-height: 1.45;
}
.remnant-upd-btn-pri {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.55);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(168, 85, 247, 0.85));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.35);
  transition: box-shadow 0.18s ease, transform 0.12s ease;
}
.remnant-upd-btn-pri:hover {
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.48);
}
.remnant-upd-btn-pri svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.remnant-upd-tabs {
  position: relative;
  z-index: 6;
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
/* Admin ? Friss?t?sek: a f? tab s?v mindig a reakci? popover (fixed, z-index ~12050) ?s egy?b bels? r?tegek felett legyen */
#remnant-admin-updates-root .remnant-upd-tabs {
  position: relative;
  z-index: 13000;
  pointer-events: auto;
  isolation: isolate;
}
#remnant-admin-updates-root .remnant-upd-tab {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
#remnant-admin-updates-root [data-remnant-upd-main-wrap] {
  position: relative;
  z-index: 0;
}
#remnant-admin-updates-root .remnant-upd-main-grid {
  position: relative;
  z-index: 0;
}
#remnant-admin-updates-root .remnant-upd-preview-bottom {
  position: relative;
  z-index: 0;
}
#remnant-admin-updates-root .remnant-upd-game-table-filters {
  position: relative;
  z-index: 1;
}
.remnant-upd-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--upd-border);
  background: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.remnant-upd-tab svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.remnant-upd-tab:hover {
  border-color: rgba(168, 85, 247, 0.35);
  color: #cbd5e1;
}
.remnant-upd-tab.is-active {
  border-color: rgba(168, 85, 247, 0.65);
  color: #f5e8ff;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.28);
  background: rgba(168, 85, 247, 0.1);
}
.remnant-upd-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--upd-border);
  background: var(--upd-panel);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  margin-bottom: 18px;
}
.remnant-upd-filter-bar[hidden] {
  display: none !important;
}
.remnant-upd-game-table-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--upd-border);
  background: rgba(6, 10, 18, 0.55);
}
.remnant-upd-game-table-filters[hidden] {
  display: none !important;
}
.remnant-upd-game-filter-label {
  font-size: 13px;
  color: #94a3b8;
  margin-right: 2px;
}
.remnant-upd-game-filter-btn {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.65);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.remnant-upd-game-filter-btn:hover {
  border-color: rgba(167, 139, 250, 0.55);
  color: #f1f5f9;
}
.remnant-upd-game-filter-btn.is-active {
  border-color: rgba(168, 85, 247, 0.65);
  background: rgba(168, 85, 247, 0.18);
  color: #f5e8ff;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.22);
}
.remnant-upd-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 200px;
  min-width: 0;
  max-width: 280px;
}
.remnant-upd-select-wrap--form-cat {
  flex: 0 1 220px;
  max-width: 220px;
  width: 100%;
}
.remnant-upd-select-wrap--form-cat .remnant-upd-select-ico[data-remnant-upd-cat='release'] {
  color: #ddd6fe;
  filter: drop-shadow(0 0 7px rgba(196, 181, 253, 0.5));
}
.remnant-upd-select-wrap--form-cat .remnant-upd-select-ico[data-remnant-upd-cat='event'] {
  color: #f0abfc;
  filter: drop-shadow(0 0 7px rgba(232, 121, 249, 0.45));
}
.remnant-upd-select-wrap--form-cat .remnant-upd-select-ico[data-remnant-upd-cat='maint'] {
  color: #fb923c;
  filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.55));
}
.remnant-upd-select-wrap--form-cat .remnant-upd-select-ico[data-remnant-upd-cat='patch'] {
  color: #22d3ee;
  filter: drop-shadow(0 0 7px rgba(34, 211, 238, 0.45));
}
.remnant-upd-select-wrap--form-cat .remnant-upd-select-ico[data-remnant-upd-cat='hotfix'] {
  color: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}
.remnant-upd-select-ico {
  position: absolute;
  left: 12px;
  z-index: 1;
  display: flex;
  color: #a78bfa;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.35));
}
.remnant-upd-select-ico svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}
.remnant-upd-select-chev {
  position: absolute;
  right: 12px;
  display: flex;
  color: #64748b;
  pointer-events: none;
}
.remnant-upd-select-chev svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.remnant-upd-select {
  width: 100%;
  appearance: none;
  padding: 10px 38px 10px 40px;
  border-radius: 10px;
  border: 1px solid var(--upd-border);
  background: rgba(6, 10, 18, 0.85);
  color: #e2e8f0;
  font-size: 0.8rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.remnant-upd-select:focus {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.18), 0 0 18px rgba(168, 85, 247, 0.15);
}
.remnant-upd-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 22px;
}
#remnant-admin-updates-root .remnant-upd-main-grid > .remnant-upd-panel {
  display: flex;
  flex-direction: column;
  min-height: min(520px, 58vh);
  min-width: 0;
}
#remnant-admin-updates-root .remnant-upd-main-grid > .remnant-upd-panel:first-of-type .remnant-upd-editor-foot {
  margin-top: auto;
}
@media (max-width: 1040px) {
  .remnant-upd-main-grid {
    grid-template-columns: 1fr;
  }
}
.remnant-upd-active-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
#remnant-admin-updates-root .remnant-upd-active-panel .remnant-upd-table-wrap {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: min(320px, 38vh);
  max-height: none;
  overflow: auto;
}
.remnant-upd-preview-bottom {
  border-radius: 16px;
  border: 1px solid var(--upd-border);
  background: var(--upd-panel);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  padding: 16px 16px 18px;
  margin-top: 14px;
}
.remnant-upd-preview-bottom-inner {
  margin-top: 6px;
}
.remnant-upd-preview-bottom .remnant-admin-news-feed {
  width: 100%;
  max-width: 100%;
}
.remnant-upd-preview-bottom .remnant-admin-news-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.remnant-admin-news-foot--upd-preview {
  pointer-events: none;
}
.remnant-admin-news-foot--upd-preview .reaction-pill {
  cursor: default;
}
.remnant-upd-panel {
  border-radius: 16px;
  border: 1px solid var(--upd-border);
  background: var(--upd-panel);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  padding: 18px 18px 16px;
}
.remnant-upd-panel-h {
  margin: 0 0 14px 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #f1f5f9;
}
.remnant-upd-field {
  margin-bottom: 14px;
}
.remnant-upd-field label,
.remnant-upd-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.remnant-upd-input,
.remnant-upd-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--upd-border);
  background: rgba(6, 10, 18, 0.72);
  color: #e2e8f0;
  font-size: 0.84rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.remnant-upd-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.remnant-upd-input:focus,
.remnant-upd-textarea:focus {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15);
}
.remnant-upd-upload {
  border: 1px dashed rgba(168, 85, 247, 0.35);
  border-radius: 12px;
  padding: 22px 14px;
  text-align: center;
  background: rgba(6, 10, 18, 0.45);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.remnant-upd-upload:hover {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.12);
}
.remnant-upd-upload input[type='file'] {
  display: none;
}
.remnant-upd-upload-ico {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  color: #a78bfa;
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.35));
}
.remnant-upd-upload-ico svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.2;
}
.remnant-upd-upload p {
  margin: 0;
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.45;
}
.remnant-upd-upload small {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: #64748b;
}
.remnant-upd-form-row2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 18px;
}
.remnant-upd-form-row2 > .remnant-upd-field {
  flex: 0 1 220px;
  min-width: 0;
  margin-bottom: 0;
}
.remnant-upd-form-row2 > .remnant-upd-switch-row {
  flex: 0 0 auto;
}
.remnant-upd-switch-row--split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  justify-content: flex-end;
}
.remnant-upd-switch-row--split .remnant-upd-switch-pair {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 560px) {
  .remnant-upd-form-row2 {
    flex-direction: column;
    align-items: stretch;
  }
  .remnant-upd-form-row2 > .remnant-upd-field {
    flex: 1 1 auto;
    max-width: none;
  }
}
.remnant-upd-switch-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-top: 0;
}
.remnant-upd-switch-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.remnant-upd-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--upd-border);
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.remnant-upd-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}
.remnant-upd-switch-input:checked + .remnant-upd-switch {
  background: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
}
.remnant-upd-switch-input:checked + .remnant-upd-switch .remnant-upd-switch-thumb {
  transform: translateX(20px);
}
.remnant-upd-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.remnant-upd-editor-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-upd-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #64748b;
  max-width: 62%;
}
.remnant-upd-hint svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
  flex-shrink: 0;
  color: #6366f1;
}
.remnant-upd-save {
  margin-left: auto;
  padding: 9px 22px;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.55);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(168, 85, 247, 0.82));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.32);
}
.remnant-upd-save:hover {
  box-shadow: 0 0 26px rgba(168, 85, 247, 0.42);
}
.remnant-upd-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.remnant-upd-save--secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  color: #e2e8f0;
}
.remnant-upd-save--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.remnant-upd-preview-headbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.remnant-upd-preview-headbar h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #f1f5f9;
}
.remnant-upd-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #34d399;
}
.remnant-upd-ready svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}
.remnant-upd-embed {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--upd-border);
  background: linear-gradient(165deg, rgba(12, 18, 30, 0.96), rgba(8, 12, 22, 0.92));
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.remnant-upd-embed-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #38bdf8, #a855f7);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.45);
}
.remnant-upd-embed-inner {
  padding: 14px 14px 14px 18px;
}
.remnant-upd-embed-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.remnant-upd-embed-author {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.remnant-upd-embed-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.35);
}
.remnant-upd-embed-meta {
  min-width: 0;
}
.remnant-upd-embed-name {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: #f8fafc;
}
.remnant-upd-embed-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #e9d5ff;
  vertical-align: middle;
}
.remnant-upd-embed-time {
  margin: 3px 0 0 0;
  font-size: 0.68rem;
  color: #64748b;
  font-family: ui-monospace, monospace;
}
.remnant-upd-embed-status {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.1);
}
.remnant-upd-embed-mid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 38%);
  gap: 12px;
  align-items: start;
}
@media (max-width: 520px) {
  .remnant-upd-embed-mid {
    grid-template-columns: 1fr;
  }
}
.remnant-upd-embed-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.remnant-upd-embed-title-row .remnant-upd-embed-type-ico {
  flex-shrink: 0;
  margin-top: 2px;
}
.remnant-upd-embed-title-row .remnant-upd-embed-type-ico[data-remnant-upd-cat='release'] {
  color: #e9d5ff;
  filter: drop-shadow(0 0 11px rgba(196, 181, 253, 0.58));
}
.remnant-upd-embed-title-row .remnant-upd-embed-type-ico[data-remnant-upd-cat='event'] {
  color: #f0abfc;
  filter: drop-shadow(0 0 11px rgba(232, 121, 249, 0.52));
}
.remnant-upd-embed-title-row .remnant-upd-embed-type-ico[data-remnant-upd-cat='maint'] {
  color: #fb923c;
  filter: drop-shadow(0 0 14px rgba(251, 146, 60, 0.68));
}
.remnant-upd-embed-title-row .remnant-upd-embed-type-ico[data-remnant-upd-cat='patch'] {
  color: #22d3ee;
  filter: drop-shadow(0 0 11px rgba(34, 211, 238, 0.5));
}
.remnant-upd-embed-title-row .remnant-upd-embed-type-ico[data-remnant-upd-cat='hotfix'] {
  color: #fbbf24;
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.55));
}
.remnant-upd-embed-title-row .remnant-upd-embed-type-ico svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}
.remnant-upd-preview-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #f8fafc;
  text-transform: uppercase;
}
.remnant-upd-preview-desc {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: #94a3b8;
}
.remnant-upd-preview-img-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, #0c1528, #111827);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-upd-preview-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.remnant-upd-preview-img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100px;
  color: rgba(148, 163, 184, 0.35);
}
.remnant-upd-preview-img-ph svg {
  width: 36px;
  height: 36px;
  stroke-width: 2;
}
.remnant-upd-embed-reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.remnant-upd-react-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
  color: #cbd5e1;
  cursor: default;
  font-family: inherit;
}
.remnant-upd-react-pill svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}
.remnant-upd-react-pill span {
  font-variant-numeric: tabular-nums;
}
.remnant-upd-react-pill--add {
  cursor: pointer;
  border-color: rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
}
.remnant-upd-react-pill--add:hover {
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.22);
}
.remnant-upd-table-section {
  border-radius: 16px;
  border: 1px solid var(--upd-border);
  background: var(--upd-panel);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  padding: 16px 16px 14px;
}
.remnant-upd-table-section h3 {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #f1f5f9;
}
.remnant-upd-dir-note {
  font-size: 0.72rem;
  color: #64748b;
  margin: 0 0 10px 0;
}
.remnant-upd-dir-note code {
  font-size: 0.7rem;
  color: #94a3b8;
}
.remnant-upd-alert {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: #fecaca;
  font-size: 0.78rem;
}
.remnant-upd-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.remnant-upd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.remnant-upd-table th {
  text-align: left;
  padding: 10px 12px;
  color: #64748b;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
.remnant-upd-table td {
  padding: 11px 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.remnant-upd-table tr:last-child td {
  border-bottom: none;
}
.remnant-upd-td-title {
  font-weight: 600;
  color: #e2e8f0;
  font-family: ui-monospace, monospace;
  font-size: 0.74rem;
}
.remnant-upd-td-excerpt {
  margin-top: 4px;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.35;
  max-width: 420px;
}
.remnant-upd-td-date {
  color: #94a3b8;
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}
.remnant-upd-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.remnant-upd-badge--release {
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #e9d5ff;
}
.remnant-upd-badge--event {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #6ee7b7;
}
.remnant-upd-badge--maint {
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: #fdba74;
}
.remnant-upd-badge--patch {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.35);
  color: #93c5fd;
}
.remnant-upd-badge--hotfix {
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(244, 114, 182, 0.35);
  color: #fbcfe8;
}
.remnant-upd-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 600;
}
.remnant-upd-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.remnant-upd-status--live {
  color: #34d399;
}
.remnant-upd-status--draft {
  color: #94a3b8;
}
.remnant-upd-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.remnant-upd-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  color: #94a3b8;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.remnant-upd-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}
.remnant-upd-icon-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.remnant-upd-icon-btn--danger {
  border-color: rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.remnant-upd-empty-row {
  text-align: center;
  padding: 22px 12px !important;
  color: #64748b;
}
.remnant-upd-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.remnant-upd-page-btn {
  min-width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
  font-size: 0.78rem;
  cursor: not-allowed;
  opacity: 0.55;
  font-family: inherit;
}
.remnant-upd-page-btn.is-active {
  border-color: rgba(168, 85, 247, 0.55);
  background: rgba(168, 85, 247, 0.18);
  color: #f5e8ff;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.22);
  opacity: 1;
  cursor: default;
}
.remnant-upd-featured-pin {
  display: none;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fcd34d;
  vertical-align: middle;
}
.remnant-upd-featured-pin.is-on {
  display: inline-block;
}

/* Launcher update slot (admin el?n?zet, akt?v lista, user Kliens Updates) */
.remnant-lu-slot {
  display: grid;
  grid-template-columns: minmax(100px, 118px) minmax(0, 1fr) minmax(108px, 128px);
  gap: 12px 14px;
  align-items: stretch;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  margin-bottom: 10px;
  position: relative;
}
.remnant-lu-slot:last-child {
  margin-bottom: 0;
}
.remnant-lu-slot--obsolete {
  opacity: 0.72;
}
.remnant-lu-cover {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  min-height: 96px;
  max-height: 132px;
  background: linear-gradient(145deg, #0c1528, #111827);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.remnant-lu-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.remnant-lu-cover-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
}
.remnant-lu-cover-ph svg {
  width: 28px;
  height: 28px;
  opacity: 0.55;
}
.remnant-lu-ver-pill {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.remnant-lu-mid {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.remnant-lu-cat-pill {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid rgba(129, 140, 248, 0.35);
}
.remnant-lu-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
  color: #f1f5f9;
  letter-spacing: 0.02em;
}
.remnant-lu-date {
  margin: 0;
  font-size: 0.68rem;
  color: #64748b;
  font-family: ui-monospace, monospace;
}
.remnant-lu-req-pill {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.remnant-lu-req-pill--mandatory {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.35);
}
.remnant-lu-req-pill--optional {
  color: #bae6fd;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
}
.remnant-update-optional-severity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
}
.remnant-update-optional-severity-lbl {
  font-size: 12px;
  color: var(--text-dim);
}
.remnant-update-optional-severity-pill {
  margin-top: 0;
}
.remnant-lu-desc {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #94a3b8;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 14rem;
  overflow-y: auto;
}
.remnant-lu-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 4px;
}
.remnant-lu-tag {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(51, 65, 85, 0.45);
  border: 1px solid rgba(100, 116, 139, 0.35);
}
.remnant-lu-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}
.remnant-lu-side-k {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.remnant-lu-side-v {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #e2e8f0;
}
.remnant-lu-start-btn {
  margin-top: auto;
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(59, 130, 246, 0.28));
  color: #f0f9ff;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.remnant-lu-start-btn:hover:not(:disabled) {
  filter: brightness(1.06);
}
.remnant-lu-start-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.remnant-lu-start-btn.remnant-lu-start-btn--obsolete:disabled {
  opacity: 1;
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(51, 65, 85, 0.45);
  color: #94a3b8;
}
.remnant-lu-start-btn.remnant-lu-start-btn--installed:disabled {
  opacity: 1;
  cursor: default;
  border-color: rgba(34, 197, 94, 0.55);
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.42), rgba(21, 128, 61, 0.38));
  color: #dcfce7;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.18);
}
.remnant-lu-start-btn--installed .remnant-lu-start-btn-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.remnant-lu-start-btn--installed .remnant-lu-start-btn-inner svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
  flex-shrink: 0;
}
.remnant-lu-slot--installed {
  border-color: rgba(34, 197, 94, 0.22);
}
.remnant-lu-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.remnant-lu-actions .remnant-upd-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
#remnant-admin-updates-root .remnant-upd-thumb-side-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px 20px;
  margin-bottom: 10px;
}
#remnant-admin-updates-root .remnant-upd-thumb-side-toggles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px 14px;
  flex: 1 1 auto;
  min-width: 0;
}
#remnant-admin-updates-root .remnant-upd-thumb-side-toggles .remnant-upd-switch-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  #remnant-admin-updates-root .remnant-upd-thumb-side-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}
.remnant-upd-label--mt {
  display: block;
  margin-top: 10px;
}
.remnant-upd-label-soft {
  font-weight: 500;
  opacity: 0.72;
}
.remnant-upd-launcher-dl-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(100, 116, 139, 0.25);
}
.remnant-upd-launcher-dl-hint svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  opacity: 0.85;
}
.remnant-upd-launcher-dl-hint code {
  font-size: 0.68em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(30, 41, 59, 0.9);
}
#remnant-admin-updates-root .remnant-upd-field--thumb-upload {
  margin-bottom: 0;
  flex: 0 0 auto;
}
/* Launcher el?n?zet (admin): bor?t? 16:9, magass?g ~104px; sz?lesebb els? oszlop */
#remnant-admin-updates-root #remnant-upd-preview-launcher-inner .remnant-lu-slot {
  grid-template-columns: minmax(168px, calc(104px * 16 / 9)) minmax(0, 1fr) minmax(100px, 128px);
}
#remnant-admin-updates-root #remnant-upd-preview-launcher-inner .remnant-lu-cover {
  aspect-ratio: 16 / 9;
  height: 104px;
  min-height: 104px;
  max-height: 104px;
  width: 100%;
  max-width: calc(104px * 16 / 9);
  justify-self: start;
}
#remnant-admin-updates-root .remnant-upd-upload.remnant-upd-upload--compact {
  flex: 0 0 auto;
  width: calc(104px * 16 / 9);
  max-width: 100%;
  height: 104px;
  min-height: 104px;
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
}
#remnant-admin-updates-root .remnant-upd-upload.remnant-upd-upload--mc-slot {
  width: 96px;
  height: 96px;
  min-height: 96px;
  aspect-ratio: 1 / 1;
}
#remnant-admin-updates-root .remnant-upd-upload.remnant-upd-upload--mc-slot p {
  font-size: 0.62rem;
}
#remnant-admin-updates-root .remnant-upd-upload.remnant-upd-upload--mc-slot small {
  font-size: 0.56rem;
}
#remnant-admin-updates-root .remnant-upd-upload.remnant-upd-upload--compact .remnant-upd-upload-ico {
  margin-bottom: 4px;
}
#remnant-admin-updates-root .remnant-upd-upload.remnant-upd-upload--compact .remnant-upd-upload-ico svg {
  width: 22px;
  height: 22px;
}
#remnant-admin-updates-root .remnant-upd-upload.remnant-upd-upload--compact p {
  font-size: 0.65rem;
  line-height: 1.25;
}
#remnant-admin-updates-root .remnant-upd-upload.remnant-upd-upload--compact small {
  font-size: 0.58rem;
  margin-top: 2px;
}
.remnant-upd-launcher-badges-field {
  margin-bottom: 0;
  margin-top: 0;
  clear: both;
}
.remnant-upd-launcher-badges-addrow {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.remnant-upd-launcher-badges-addrow .remnant-upd-input--badge {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  font-size: 0.78rem;
}
.remnant-upd-badge-plus {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: rgba(124, 58, 237, 0.25);
  color: #e9d5ff;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.remnant-upd-launcher-badges-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  min-height: 22px;
}
.remnant-upd-launcher-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #e2e8f0;
  background: rgba(51, 65, 85, 0.55);
  border: 1px solid rgba(100, 116, 139, 0.35);
}
.remnant-upd-launcher-badge-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
}
#remnant-admin-updates-root #remnant-upd-launcher-active-cards {
  max-height: none;
  overflow: visible;
  padding-right: 4px;
}
/* J?t?k / admin h?r f?l: launcher slot r?teg ne vegyen el kattint?st (async reload el?tti ?llapot, WebView). */
#remnant-admin-updates-root:not(.remnant-upd--launcher-active-slots-on) #remnant-upd-launcher-active-cards {
  pointer-events: none !important;
}
/* Akt?v lista: rejtett t?bla/k?rty?k ne fogjanak kattint?st (r?tegz?s + WebView). */
#remnant-admin-updates-root #remnant-upd-launcher-active-cards[hidden],
#remnant-admin-updates-root #remnant-upd-active-table[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* User ? Friss?t?sek ? Kliens Updates: k?toszlopos elrendez?s + jobb oldali launcher ?llapot */
.remnant-user-updates-client-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(252px, 292px);
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: min(1600px, 100%);
}
.remnant-user-updates-client-feedcol {
  min-width: 0;
}
.remnant-user-updates-client-layout .remnant-user-updates-wrap .remnant-lu-slot {
  max-width: none;
  width: 100%;
  grid-template-columns: minmax(168px, calc(104px * 16 / 9)) minmax(0, 1fr) minmax(100px, 128px);
}
.remnant-user-launcher-status-card {
  position: sticky;
  top: 10px;
  align-self: start;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.45);
}
.remnant-user-launcher-status-title {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.remnant-user-launcher-status-headrow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.remnant-user-launcher-status-ico {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.65);
  box-sizing: border-box;
  position: relative;
}
.remnant-user-launcher-status-ico--ok {
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(22, 163, 74, 0.14);
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.18);
}
.remnant-user-launcher-status-ico--ok::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 9px;
  height: 5px;
  border: 2px solid #4ade80;
  border-top: none;
  border-right: none;
  transform: translate(-50%, -50%) rotate(-52deg);
  box-sizing: border-box;
}
.remnant-user-launcher-status-ico--pending {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(245, 158, 11, 0.12);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.16);
}
.remnant-user-launcher-status-ico--pending::after {
  content: '!';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  font-size: 1.05rem;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1;
}
.remnant-user-launcher-status-headtext {
  min-width: 0;
  flex: 1;
}
.remnant-user-launcher-status-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.remnant-user-launcher-status-desc {
  margin: 6px 0 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: #94a3b8;
}
.remnant-user-launcher-status-rows {
  margin: 0 0 12px;
  padding: 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.remnant-user-launcher-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 10px;
}
.remnant-user-launcher-status-row dt {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.remnant-user-launcher-status-row dd {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.remnant-user-launcher-status-recheck {
  width: 100%;
  margin-top: 2px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(59, 130, 246, 0.28));
  color: #f0f9ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    filter 0.15s ease,
    transform 0.12s ease;
}
.remnant-user-launcher-status-recheck:hover:not(:disabled) {
  filter: brightness(1.06);
}
.remnant-user-launcher-status-recheck:active:not(:disabled) {
  transform: translateY(1px);
}
.remnant-user-launcher-status-recheck:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
@media (max-width: 900px) {
  .remnant-user-updates-client-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .remnant-user-launcher-status-card {
    position: static;
    order: -1;
    max-width: 100%;
  }
}

.remnant-user-updates-wrap .remnant-lu-slot {
  max-width: 720px;
  grid-template-columns: minmax(168px, calc(104px * 16 / 9)) minmax(0, 1fr) minmax(100px, 128px);
}
.remnant-user-updates-wrap .remnant-lu-cover {
  aspect-ratio: 16 / 9;
  height: 104px;
  min-height: 104px;
  max-height: 104px;
  width: 100%;
  max-width: calc(104px * 16 / 9);
  justify-self: start;
}
@media (max-width: 640px) {
  .remnant-lu-slot,
  .remnant-user-updates-client-layout .remnant-user-updates-wrap .remnant-lu-slot {
    grid-template-columns: 1fr;
  }
  .remnant-lu-cover {
    max-height: 160px;
    aspect-ratio: 16 / 9;
  }
  .remnant-user-updates-wrap .remnant-lu-cover {
    height: auto;
    min-height: 0;
    max-height: 160px;
    max-width: 100%;
    justify-self: stretch;
  }
  .remnant-lu-actions {
    position: static;
    margin-bottom: 6px;
    justify-content: flex-end;
  }
}

/* ? Admin Jelent?sek oldal (mockup st?lus) ? */
#page-admin-reports {
  max-width: min(1580px, 99vw);
  margin: 0 auto;
}
.remnant-admin-reports-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 18px;
  margin-bottom: 14px;
}
.remnant-admin-reports-pagehead-text {
  flex: 1 1 240px;
  min-width: 0;
}
#page-admin-reports .remnant-admin-reports-pagehead .page-title {
  margin-bottom: 4px;
}
#page-admin-reports .remnant-admin-reports-pagehead .page-subtitle {
  margin-bottom: 0;
}
.remnant-admin-reports-hero-gamebar {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.remnant-admin-rp-gamebar-btns--hero {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.remnant-admin-reports-shell {
  max-width: min(1520px, 99vw);
  margin: 0 auto;
  padding: 2px 2px 8px;
}
.remnant-admin-reports-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(960px, 2.12fr);
  gap: 14px;
}
.remnant-admin-reports-panel {
  background: rgba(10, 14, 24, .88);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 0 40px rgba(0, 0, 0, .35);
  border-radius: 20px;
  overflow: hidden;
}
.remnant-admin-reports-panel--left {
  display: flex;
  flex-direction: column;
  height: min(76vh, 860px);
}
.remnant-admin-reports-panel-head {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.remnant-admin-rp-gamebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 12px;
}
.remnant-admin-rp-gamebar-l {
  min-width: 0;
  flex: 1 1 200px;
}
.remnant-admin-rp-gamebar-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  color: #f1f5f9;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-rp-gamebar-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
.remnant-admin-rp-gamebar-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  flex: 0 1 auto;
}
.remnant-admin-rp-game-btn {
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.remnant-admin-rp-game-btn:hover {
  border-color: rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.1);
  color: #f8fafc;
}
.remnant-admin-rp-game-btn.is-active {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.22);
  background: rgba(35, 22, 62, 0.45);
  color: #faf5ff;
}
.remnant-admin-rp-evidence--side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.remnant-admin-rp-statbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}
.remnant-admin-rp-stat {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: #d6deed;
  font-size: 11px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.remnant-admin-rp-stat-btn {
  font: inherit;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.remnant-admin-rp-stat-btn:hover {
  border-color: rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.08);
}
.remnant-admin-rp-stat-btn.is-active {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.22), 0 0 14px rgba(168, 85, 247, 0.12);
  background: rgba(35, 22, 62, 0.35);
}
.remnant-admin-rp-stat b {
  display: inline-flex;
  min-width: 15px;
  justify-content: center;
  border-radius: 6px;
  font-size: 10px;
  padding: 1px 5px;
}
.remnant-admin-rp-stat b.total { background: rgba(139, 92, 246, 0.32); color: #e9dcff; }
.remnant-admin-rp-stat b.open { background: rgba(16, 185, 129, 0.24); color: #bbf7d0; }
.remnant-admin-rp-stat b.wip { background: rgba(59, 130, 246, 0.24); color: #bfdbfe; }
.remnant-admin-rp-stat b.closed { background: rgba(248, 113, 113, 0.24); color: #fecaca; }
.remnant-admin-rp-filters {
  margin-top: 12px;
}
.remnant-admin-rp-filters .remnant-admin-rp-search {
  display: block;
  width: 100%;
}
.remnant-admin-rp-field {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  height: 38px;
  color: #d2dbeb;
  font-size: 12px;
  padding: 0 10px;
  font-family: inherit;
  min-width: 0;
}
.remnant-admin-rp-search {
  position: relative;
}
.remnant-admin-rp-search i[data-lucide] {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: rgba(173, 184, 203, 0.8);
}
.remnant-admin-rp-search input {
  padding-left: 34px;
}
.remnant-admin-rp-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 8px;
  display: grid;
  gap: 8px;
  align-content: start;
  grid-auto-rows: 92px;
}
.remnant-admin-rp-list-empty {
  min-height: 160px;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  color: #aebbd0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  grid-column: 1 / -1;
  grid-row: span 2;
}
.remnant-admin-rp-list-empty p {
  margin: 0;
  font-size: 13px;
}
.remnant-admin-rp-item {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(15, 22, 35, 0.9), rgba(10, 16, 28, 0.92));
  padding: 10px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
  height: 92px;
  min-height: 92px;
  max-height: 92px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.remnant-admin-rp-item > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
}
.remnant-admin-rp-item .remnant-admin-rp-right {
  align-self: center;
}
.remnant-admin-rp-item:hover {
  border-color: rgba(139, 92, 246, 0.26);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.12);
  transform: translateY(-1px);
}
.remnant-admin-rp-item.is-active {
  border-color: rgba(168, 85, 247, 0.58);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 0 18px rgba(168, 85, 247, 0.2);
  background: linear-gradient(180deg, rgba(35, 22, 62, 0.55), rgba(12, 16, 28, 0.95));
}
.remnant-admin-rp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(77, 143, 255, 0.55), rgba(168, 85, 247, 0.55));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}
.remnant-admin-rp-avatar--img {
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.remnant-admin-rp-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.remnant-admin-rp-name { margin: 0; color: #eef4ff; font-size: 14px; font-weight: 700; }
.remnant-admin-rp-meta { margin: 2px 0 0; color: #93a4bf; font-size: 12px; }
.remnant-admin-rp-prev {
  margin: 7px 0 0;
  color: #b8c5da;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-admin-rp-right { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.remnant-admin-rp-badge {
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  padding: 3px 9px;
  font-weight: 700;
}
.remnant-admin-rp-cat--rule { color: #fda4af; background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.36); }
.remnant-admin-rp-cat--spam { color: #93c5fd; background: rgba(59, 130, 246, 0.16); border-color: rgba(59, 130, 246, 0.36); }
.remnant-admin-rp-cat--toxic { color: #fdba74; background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.36); }
.remnant-admin-rp-st--open { color: #6ee7b7; font-weight: 700; }
.remnant-admin-rp-st--wip { color: #93c5fd; font-weight: 700; }
.remnant-admin-rp-st--closed { color: #fca5a5; font-weight: 700; }
.remnant-admin-rp-time { color: #8ea0bc; font-size: 12px; }
.remnant-admin-rp-mid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: min(76vh, 860px);
  min-height: 0;
}
.remnant-admin-rp-mid-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
.remnant-admin-rp-mid-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
}
.remnant-admin-rp-head-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.remnant-admin-rp-title {
  margin: 0;
  color: #eef4ff;
  font-size: 18px;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-rp-tools {
  display: flex;
  gap: 8px;
}
.remnant-admin-rp-tool {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #c9d5ea;
  border-radius: 10px;
  font-size: 12px;
  padding: 7px 10px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.remnant-admin-rp-tool i[data-lucide] { width: 16px; height: 16px; }
.remnant-admin-rp-tool.danger { color: #fca5a5; border-color: rgba(248, 113, 113, 0.28); background: rgba(248, 113, 113, 0.12); }
.remnant-admin-rp-info-grid {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 10px;
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.remnant-admin-rp-info-grid.remnant-admin-rp-info-grid--flat {
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.remnant-admin-rp-details-panel {
  border-radius: 14px;
  min-height: 200px;
  flex: 0 0 auto;
}
.remnant-admin-rp-details-grid {
  margin-top: 8px;
  padding-top: 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
}
.remnant-admin-rp-details-grid .remnant-admin-rp-info {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 14px 14px 15px;
}
.remnant-admin-rp-details-grid .remnant-admin-rp-info:nth-child(-n+4) {
  grid-column: span 4;
  border-right: 1px solid rgba(255,255,255,0.05);
}
.remnant-admin-rp-details-grid .remnant-admin-rp-info:nth-child(3) {
  border-right: none;
}
.remnant-admin-rp-details-grid .remnant-admin-rp-info:nth-child(n+4) {
  grid-column: span 4;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-right: 1px solid rgba(255,255,255,0.05);
}
.remnant-admin-rp-details-grid .remnant-admin-rp-info:nth-child(6) {
  border-right: none;
}
.remnant-admin-rp-info-grid.remnant-admin-rp-info-grid--flat .remnant-admin-rp-info {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 10px 10px 12px;
  border-right: 1px solid rgba(255,255,255,0.05);
}
.remnant-admin-rp-info-grid.remnant-admin-rp-info-grid--flat .remnant-admin-rp-info:nth-child(4n) {
  border-right: none;
}
.remnant-admin-rp-info {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px;
}
.remnant-admin-rp-info-l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #97a8c3;
  font-size: 11px;
  margin-bottom: 6px;
}
.remnant-admin-rp-info-l i[data-lucide] { width: 13px; height: 13px; opacity: .78; }
.remnant-admin-rp-details-grid .remnant-admin-rp-info-l {
  gap: 8px;
  align-items: center;
}
.remnant-admin-rp-details-grid .remnant-admin-rp-info-l i[data-lucide] {
  width: auto;
  height: auto;
  opacity: 1;
}
.remnant-admin-rp-details-grid .remnant-admin-rp-info-l svg.report-detail-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  stroke-width: 2.2;
  flex-shrink: 0;
  opacity: 1;
  display: block;
}
.report-detail-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
  flex: 0 0 18px;
}
.remnant-admin-rp-details-grid .remnant-admin-rp-info-l .report-detail-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  stroke-width: 2.2;
  flex-shrink: 0;
  opacity: 1;
}
.remnant-admin-rp-details-grid .remnant-admin-rp-person {
  gap: 10px;
}
.report-detail-icon.user {
  color: #60a5fa;
  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.45));
}
.report-detail-icon.category {
  color: #ef4444;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.45));
}
.report-detail-icon.status {
  color: #f97316;
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.45));
}
.report-detail-icon.reporter {
  color: #2dd4bf;
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.45));
}
.report-detail-icon.server {
  color: #8b5cf6;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.45));
}
.report-detail-icon.priority {
  color: #f59e0b;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.45));
}
.remnant-admin-rp-details-grid .remnant-admin-rp-person-av {
  width: 38px;
  height: 38px;
  font-size: 13px;
}
.remnant-admin-rp-info-v { color: #e8efff; font-size: 13px; font-weight: 700; line-height: 1.35; }
.remnant-admin-rp-info-sub { color: #8ea0bc; font-size: 12px; margin-top: 2px; }
.remnant-admin-rp-person {
  display: flex;
  align-items: center;
  gap: 8px;
}
.remnant-admin-rp-person-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(135deg, rgba(65, 114, 201, 0.58), rgba(145, 79, 213, 0.55));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e8f0ff;
  font-size: 11px;
  font-weight: 800;
}
.remnant-admin-rp-right-col {
  align-self: stretch;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
}
.remnant-admin-rp-side--hist {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.remnant-admin-rp-side--hist .remnant-admin-rp-hist {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.remnant-admin-rp-side--mod {
  flex: 0 0 auto;
  min-height: 0;
}
.remnant-admin-rp-prio--high { color: #fca5a5; }
.remnant-admin-rp-prio--normal { color: #fdba74; }
.remnant-admin-rp-prio--low { color: #6ee7b7; }
.remnant-admin-rp-desc {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: rgba(10, 14, 24, .88);
  padding: 12px 14px;
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
}
.remnant-admin-rp-hist-strip {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: rgba(10, 14, 24, 0.92);
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
  max-height: min(240px, 32vh);
}
.remnant-admin-rp-hist-strip h4 {
  margin: 0;
  flex-shrink: 0;
  color: #eef4ff;
  font-size: 15px;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-rp-hist-strip .remnant-admin-rp-hist {
  flex: 1 1 auto;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.remnant-admin-rp-hist-strip .remnant-admin-rp-hist-item {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
}
.remnant-admin-rp-desc h4,
.remnant-admin-rp-evidence h4,
.remnant-admin-rp-extra h4,
.remnant-admin-rp-side h4 {
  margin: 0 0 10px;
  color: #eef4ff;
  font-size: 15px;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-rp-desc p {
  margin: 0 0 8px;
  color: #c1cee2;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.remnant-admin-rp-evidence {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.remnant-admin-rp-ev {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.remnant-admin-rp-ev-thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  background: linear-gradient(135deg, #1a243a, #1f2f52);
  display: flex;
  align-items: center;
  justify-content: center;
}
.remnant-admin-rp-ev-thumb.video::after {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(5, 8, 14, 0.62);
  box-shadow: 0 0 14px rgba(0,0,0,0.4);
  position: absolute;
}
.remnant-admin-rp-ev-thumb i[data-lucide] {
  width: 18px;
  height: 18px;
  color: #f1f5ff;
  z-index: 1;
}
.remnant-admin-rp-ev-meta {
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.remnant-admin-rp-ev-name {
  font-size: 12px;
  color: #d8e2f2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-admin-rp-ev-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #91a3bf;
}
.remnant-admin-rp-extra-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.remnant-admin-rp-extra-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.remnant-admin-rp-extra-item {
  border-right: 1px solid rgba(255,255,255,0.06);
  padding-right: 10px;
}
.remnant-admin-rp-extra-item:last-child {
  border-right: none;
  padding-right: 0;
}
.remnant-admin-rp-extra-l {
  color: #8fa1bd;
  font-size: 12px;
  margin-bottom: 6px;
}
.remnant-admin-rp-extra-v {
  color: #e7eefc;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.remnant-admin-rp-extra-sub {
  margin-top: 3px;
  color: #95a8c4;
  font-size: 12px;
}
.remnant-admin-rp-side {
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  background: rgba(10,14,24,.88);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.remnant-admin-rp-actions {
  display: grid;
  gap: 8px;
}
.remnant-admin-rp-action-btn {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 10px 12px;
  color: #f2f6ff;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
}
.remnant-admin-rp-action-btn i[data-lucide] { width: 17px; height: 17px; }
.remnant-admin-rp-action-btn.ok { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.35); }
.remnant-admin-rp-action-btn.no { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.35); }
.remnant-admin-rp-action-btn.warn { background: rgba(59, 130, 246, 0.18); border-color: rgba(59, 130, 246, 0.35); }
.remnant-admin-rp-action-btn.temp { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.35); }
.remnant-admin-rp-action-btn.perm { background: rgba(127, 29, 29, 0.38); border-color: rgba(153, 27, 27, 0.5); }
.remnant-admin-rp-note {
  width: 100%;
  min-height: 88px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(7, 11, 18, 0.86);
  color: #d6deed;
  padding: 10px;
  resize: vertical;
  font-family: inherit;
}
.remnant-admin-rp-note:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}
.remnant-admin-rp-note-save {
  margin-top: 8px;
  border: 1px solid rgba(139, 92, 246, 0.5);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(79, 70, 229, 0.9));
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
}
.remnant-admin-rp-timeline {
  margin: 0;
  padding: 2px 0 0 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.remnant-admin-rp-timeline li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
}
.remnant-admin-rp-timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  background: #4d8fff;
  box-shadow: 0 0 0 4px rgba(77, 143, 255, 0.14);
}
.remnant-admin-rp-timeline-t {
  font-size: 11px;
  color: #90a2be;
}
.remnant-admin-rp-timeline-v {
  margin-top: 2px;
  color: #d8e2f2;
  font-size: 12px;
}
.remnant-admin-rp-history-search {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.remnant-admin-rp-history-search .remnant-admin-rp-field {
  height: 34px;
  flex: 1 1 auto;
}
.remnant-admin-rp-history-ok {
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(139, 92, 246, 0.5);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(79, 70, 229, 0.9));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 0 12px;
}
.remnant-admin-rp-history-results {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
}
.remnant-admin-rp-history-empty {
  color: #8ea0bc;
  font-size: 12px;
  padding: 4px 0;
}
.remnant-admin-rp-pager {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}
.remnant-admin-rp-pagebtn {
  min-width: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  color: #d7e0f0;
  font-size: 12px;
  padding: 6px 8px;
}
.remnant-admin-rp-pagebtn.is-active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(79, 70, 229, 0.82));
  border-color: rgba(139, 92, 246, 0.52);
}
@media (max-width: 1380px) {
  .remnant-admin-reports-grid {
    grid-template-columns: minmax(280px, 0.94fr) minmax(520px, 1.24fr);
  }
  .remnant-admin-rp-mid-top {
    grid-template-columns: 1fr;
  }
  .remnant-admin-rp-right-col {
    padding-top: 0;
  }
}
@media (max-width: 980px) {
  .remnant-admin-reports-grid {
    grid-template-columns: 1fr;
  }
  .remnant-admin-rp-mid {
    height: auto;
    min-height: 0;
  }
  .remnant-admin-rp-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .remnant-admin-rp-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .remnant-admin-rp-details-grid .remnant-admin-rp-info:nth-child(-n+4),
  .remnant-admin-rp-details-grid .remnant-admin-rp-info:nth-child(n+5) {
    grid-column: span 1;
    border-right: 1px solid rgba(255,255,255,0.05);
  }
  .remnant-admin-rp-details-grid .remnant-admin-rp-info:nth-child(2n) {
    border-right: none;
  }
  .remnant-admin-rp-info-grid.remnant-admin-rp-info-grid--flat .remnant-admin-rp-info:nth-child(2n) {
    border-right: none;
  }
  .remnant-admin-rp-evidence {
    grid-template-columns: 1fr;
  }
  .remnant-admin-rp-extra-list {
    grid-template-columns: 1fr;
  }
  .remnant-admin-rp-extra-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0 0 10px;
  }
  .remnant-admin-rp-extra-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ? Admin B?ntet?sek ? */
.remnant-admin-pun-shell {
  max-width: min(1540px, 98vw);
  margin: 0 auto;
  padding: 0 2px 4px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.remnant-admin-pun-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
.remnant-admin-pun-layout > * {
  min-height: 0;
}
.remnant-admin-pun-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.remnant-admin-pun-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.remnant-admin-pun-stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 24, 0.88);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.28);
}
.remnant-admin-pun-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.remnant-admin-pun-stat-value {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 800;
  color: #f1f5ff;
  font-family: 'Syne', sans-serif;
  line-height: 1.1;
}
.remnant-admin-pun-stat-trend {
  margin-top: 6px;
  font-size: 11px;
  color: #6ee7b7;
  opacity: 0.9;
}
.stat-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-icon-box.purple {
  background: rgba(139, 92, 246, 0.14);
  color: #8b5cf6;
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.25);
}
.stat-icon-box.red {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.25);
}
.stat-icon-box.orange {
  background: rgba(249, 115, 22, 0.14);
  color: #f97316;
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.25);
}
.stat-icon-box.yellow {
  background: rgba(234, 179, 8, 0.14);
  color: #eab308;
  box-shadow: 0 0 18px rgba(234, 179, 8, 0.25);
}
.stat-icon-box i,
.stat-icon-box svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.3;
}
.remnant-admin-pun-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 24, 0.88);
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.22);
}
.remnant-admin-pun-toolbar .remnant-admin-pun-search {
  flex: 1 1 220px;
  min-width: 180px;
}
.remnant-admin-pun-toolbar .remnant-admin-pun-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  font-size: 12px;
  font-family: inherit;
}
.remnant-admin-pun-field {
  height: 38px;
  padding: 0 32px 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  background: #070b12;
  color: #eef4ff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  min-width: 0;
  color-scheme: dark;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 10px 22px rgba(0, 0, 0, 0.16);
  outline: none;
}
.remnant-admin-pun-field:hover {
  border-color: rgba(168, 85, 247, 0.42);
  background: #0b1020;
}
.remnant-admin-pun-field:focus {
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}
.remnant-admin-pun-field option {
  background: #070b12;
  color: #eef4ff;
  font-weight: 700;
}
.remnant-admin-pun-field--sm {
  flex: 0 1 150px;
  min-width: 130px;
}
.remnant-admin-pun-daterange {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 292px;
  min-width: 260px;
  height: 38px;
  padding: 0 8px 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.22);
  background: #070b12;
  color: #c4b5fd;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 10px 22px rgba(0, 0, 0, 0.16);
}
.remnant-admin-pun-daterange i[data-lucide] {
  width: 16px;
  height: 16px;
  opacity: 0.85;
  flex-shrink: 0;
}
.remnant-admin-pun-daterange input {
  width: 112px;
  min-width: 0;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.92);
  color: #eef4ff;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  color-scheme: dark;
  outline: none;
  padding: 0 6px;
}
.remnant-admin-pun-daterange input::placeholder {
  color: rgba(142, 160, 188, 0.72);
  font-weight: 600;
}
.remnant-admin-pun-daterange input:focus {
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
}
.remnant-admin-pun-daterange span {
  color: #8ea0bc;
}
.remnant-admin-pun-daterange button {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 8px;
  background: rgba(127, 29, 29, 0.14);
  color: #fecaca;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.remnant-admin-pun-daterange button:hover {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(127, 29, 29, 0.28);
}
.remnant-admin-pun-daterange button i[data-lucide],
.remnant-admin-pun-daterange button svg {
  width: 14px;
  height: 14px;
}
.remnant-admin-pun-export {
  margin-left: auto;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.45);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(79, 70, 229, 0.12));
  color: #e9dcff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
}
.remnant-admin-pun-export i[data-lucide] {
  width: 16px;
  height: 16px;
}
.remnant-admin-pun-table-panel {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 24, 0.88);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.remnant-admin-pun-thead {
  display: grid;
  grid-template-columns: minmax(130px, 1.15fr) 0.62fr minmax(100px, 1fr) minmax(88px, 0.85fr) minmax(72px, 0.65fr) 0.58fr 0.52fr 0.62fr;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #7c8ca3;
  text-transform: uppercase;
  flex-shrink: 0;
}
.remnant-admin-pun-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  padding: 4px 0 8px;
}
.remnant-admin-pun-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.remnant-admin-pun-scroll::-webkit-scrollbar-track {
  background: rgba(6, 10, 18, 0.6);
  border-radius: 99px;
}
.remnant-admin-pun-scroll::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.45);
  border-radius: 99px;
}
.remnant-admin-pun-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.5) rgba(6, 10, 18, 0.6);
}
.remnant-admin-pun-empty-slot {
  margin: 20px 14px 28px;
  padding: 32px 20px;
  text-align: center;
  border-radius: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.02);
}
.remnant-admin-pun-empty-slot-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #eef4ff;
}
.remnant-admin-pun-empty-slot-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(180, 192, 220, 0.82);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.remnant-admin-pun-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.15fr) 0.62fr minmax(100px, 1fr) minmax(88px, 0.85fr) minmax(72px, 0.65fr) 0.58fr 0.52fr 0.62fr;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  margin: 0 6px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  min-height: 56px;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.remnant-admin-pun-row:hover {
  background: rgba(139, 92, 246, 0.06);
  border-color: rgba(139, 92, 246, 0.12);
}
.remnant-admin-pun-row.is-active {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.2), 0 0 16px rgba(168, 85, 247, 0.12);
  background: rgba(35, 22, 62, 0.28);
}
.remnant-admin-pun-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.remnant-admin-pun-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, rgba(77, 143, 255, 0.6), rgba(168, 85, 247, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.remnant-admin-pun-av--pic {
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.remnant-admin-pun-av-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.remnant-admin-pun-pname {
  font-size: 13px;
  font-weight: 700;
  color: #eef4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-admin-pun-pid {
  font-size: 11px;
  color: #8ea0bc;
  margin-top: 2px;
}
.remnant-admin-pun-cell {
  font-size: 12px;
  color: #b8c5da;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-admin-pun-badge {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  width: fit-content;
  max-width: 100%;
}
.remnant-admin-pun-badge--ban {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.35);
}
.remnant-admin-pun-badge--mute {
  color: #fdba74;
  background: rgba(249, 115, 22, 0.16);
  border-color: rgba(249, 115, 22, 0.35);
}
.remnant-admin-pun-badge--warn {
  color: #fde047;
  background: rgba(234, 179, 8, 0.14);
  border-color: rgba(234, 179, 8, 0.35);
}
.remnant-admin-pun-srv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.remnant-admin-pun-srv-ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
}
.remnant-admin-pun-srv-ico--purple {
  background: rgba(139, 92, 246, 0.22);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.35);
}
.remnant-admin-pun-srv-ico--green {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.32);
}
.remnant-admin-pun-st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.remnant-admin-pun-st-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.remnant-admin-pun-st--active {
  color: #fca5a5;
}
.remnant-admin-pun-st--active .remnant-admin-pun-st-dot {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.55);
}
.remnant-admin-pun-st--expired {
  color: #6ee7b7;
}
.remnant-admin-pun-st--expired .remnant-admin-pun-st-dot {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.45);
}
.remnant-admin-pun-st--revoked {
  color: #c4b5fd;
}
.remnant-admin-pun-st--revoked .remnant-admin-pun-st-dot {
  background: #8b5cf6;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.45);
}
.remnant-admin-pun-detail {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 24, 0.9);
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.32);
  padding: 16px 16px 18px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: stretch;
}
.remnant-admin-pun-detail::-webkit-scrollbar {
  width: 5px;
}
.remnant-admin-pun-detail::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.4);
  border-radius: 99px;
}
.remnant-admin-pun-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.remnant-admin-pun-detail-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #f1f5ff;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-pun-detail-x {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #9caecf;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.remnant-admin-pun-detail-x:hover {
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}
.remnant-admin-pun-detail-profile {
  display: flex;
  align-items: center;
  gap: 14px;
}
.remnant-admin-pun-detail-av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, rgba(77, 143, 255, 0.65), rgba(168, 85, 247, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.remnant-admin-pun-detail-av--img {
  display: block;
  object-fit: cover;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
.remnant-admin-pun-detail-name {
  font-size: 17px;
  font-weight: 800;
  color: #f1f5ff;
}
.remnant-admin-pun-detail-sub {
  font-size: 12px;
  color: #8ea0bc;
  margin-top: 4px;
}
.remnant-admin-pun-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.remnant-admin-pun-detail-badge-st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.remnant-admin-pun-detail-info {
  display: grid;
  gap: 12px;
}
.remnant-admin-pun-detail-row {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}
.remnant-admin-pun-detail-l {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #7c8ca3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.remnant-admin-pun-detail-l i[data-lucide],
.remnant-admin-pun-detail-l svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.remnant-admin-pun-detail-l .pun-d-ico-id {
  color: #60a5fa;
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.35));
}
.remnant-admin-pun-detail-l .pun-d-ico-reason {
  color: #ef4444;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.35));
}
.remnant-admin-pun-detail-l .pun-d-ico-srv {
  color: #8b5cf6;
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.35));
}
.remnant-admin-pun-detail-l .pun-d-ico-admin {
  color: #2dd4bf;
  filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.35));
}
.remnant-admin-pun-detail-l .pun-d-ico-time {
  color: #f59e0b;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.35));
}
.remnant-admin-pun-detail-l .pun-d-ico-cal {
  color: #38bdf8;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.35));
}
.remnant-admin-pun-detail-v {
  font-size: 13px;
  font-weight: 700;
  color: #e8efff;
  line-height: 1.35;
}
.remnant-admin-pun-detail-desc {
  margin-top: 6px;
  font-size: 12px;
  color: #9fb0cb;
  line-height: 1.45;
}
.remnant-admin-pun-detail-admin {
  display: flex;
  align-items: center;
  gap: 8px;
}
.remnant-admin-pun-detail-admin-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(65, 114, 201, 0.55), rgba(145, 79, 213, 0.52));
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8f0ff;
}
.remnant-admin-pun-evidence {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px;
  background: rgba(7, 11, 18, 0.55);
}
.remnant-admin-pun-evidence-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.remnant-admin-pun-evidence-add {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.13);
  color: #ddd6fe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
}
.remnant-admin-pun-evidence-add:hover {
  border-color: rgba(139, 92, 246, 0.55);
  background: rgba(139, 92, 246, 0.22);
  color: #fff;
}
.remnant-admin-pun-evidence-add i[data-lucide],
.remnant-admin-pun-evidence-add svg {
  width: 16px;
  height: 16px;
}
.remnant-admin-pun-evidence-h span {
  font-size: 14px;
  font-weight: 800;
  color: #eef4ff;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-pun-evidence-count {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.22);
  color: #ddd6fe;
  border: 1px solid rgba(139, 92, 246, 0.35);
}
.remnant-admin-pun-ev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.remnant-admin-pun-ev-item {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.remnant-admin-pun-ev-thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1a243a, #1f2f52);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.remnant-admin-pun-ev-thumb.is-video::after {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(5, 8, 14, 0.55);
}
.remnant-admin-pun-ev-thumb i[data-lucide],
.remnant-admin-pun-ev-thumb svg {
  width: 18px;
  height: 18px;
  color: #f1f5ff;
  z-index: 1;
}
.remnant-admin-pun-ev-meta {
  padding: 6px 8px;
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-admin-pun-ev-all {
  margin-top: 10px;
  width: 100%;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #c9d5ea;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.remnant-admin-pun-ev-all:hover {
  border-color: rgba(139, 92, 246, 0.4);
  color: #fff;
}
.remnant-admin-pun-detail-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.remnant-admin-pun-lift {
  flex: 1 1 auto;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.35), rgba(185, 28, 28, 0.45));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}
.remnant-admin-pun-lift:hover {
  filter: brightness(1.06);
}
.remnant-admin-pun-lift i[data-lucide],
.remnant-admin-pun-lift svg {
  width: 18px;
  height: 18px;
}
.remnant-admin-pun-foot-kebab {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #9caecf;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
@media (max-width: 1240px) {
  .remnant-admin-pun-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(200px, 55vh);
  }
  .remnant-admin-pun-detail {
    max-height: none;
  }
  #page-container:has(#page-admin-punishments.active) {
    overflow-y: auto;
  }
  #page-admin-punishments.active {
    height: auto;
    min-height: min(100%, 100dvh);
    overflow: visible;
  }
  #page-admin-punishments.active #remnant-admin-punishments-root {
    flex: none;
    min-height: 0;
  }
  .remnant-admin-pun-shell {
    flex: none;
  }
  .remnant-admin-pun-layout {
    flex: none;
  }
  .remnant-admin-pun-main {
    overflow: visible;
  }
  .remnant-admin-pun-table-panel {
    flex: none;
    min-height: 280px;
  }
  .remnant-admin-pun-scroll {
    max-height: 55vh;
  }
  .remnant-admin-pun-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .remnant-admin-pun-stats {
    grid-template-columns: 1fr;
  }
}

/* ? Admin Moder?ci?s napl? ? */
.remnant-admin-modlog-shell {
  max-width: min(1540px, 98vw);
  margin: 0 auto;
  padding: 0 2px 4px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.remnant-admin-modlog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
.remnant-admin-modlog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
}
.remnant-admin-modlog-layout > * {
  min-height: 0;
}
.remnant-admin-modlog-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.remnant-admin-modlog-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  flex-shrink: 0;
}
.remnant-admin-modlog-stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 24, 0.88);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
}
.remnant-admin-modlog-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
}
.remnant-admin-modlog-stat-value {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 800;
  color: #f1f5ff;
  font-family: 'Syne', sans-serif;
  line-height: 1.1;
}
.remnant-admin-modlog-stat-trend {
  margin-top: 6px;
  font-size: 11px;
  color: #6ee7b7;
  opacity: 0.92;
}
.remnant-admin-modlog-filters-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 24, 0.88);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  padding: 14px 14px 16px;
  flex-shrink: 0;
}
.remnant-admin-modlog-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.remnant-admin-modlog-filters-h {
  font-size: 15px;
  font-weight: 800;
  color: #eef4ff;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-modlog-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #b8c9e3;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.remnant-admin-modlog-reset-btn:hover {
  border-color: rgba(139, 92, 246, 0.35);
  color: #e9dcff;
}
.remnant-admin-modlog-reset-btn i[data-lucide],
.remnant-admin-modlog-reset-btn svg {
  width: 14px;
  height: 14px;
  opacity: 0.9;
}
.remnant-admin-modlog-filter-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.remnant-admin-modlog-filter-stack .remnant-admin-modlog-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  font-size: 12px;
  font-family: inherit;
  box-sizing: border-box;
}
.remnant-admin-modlog-field {
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #d2dbeb;
  font-size: 12px;
  font-family: inherit;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.remnant-admin-modlog-filter-row2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.remnant-admin-modlog-filter-row2 .remnant-admin-modlog-field {
  flex: 1 1 140px;
  width: auto;
}
.remnant-admin-select-dark,
select.remnant-admin-select-dark {
  background: rgba(6, 10, 18, 0.92);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.12);
}
.remnant-admin-select-dark option,
select.remnant-admin-select-dark option {
  background: #0c1220;
  color: #f1f5f9;
}
.remnant-admin-modlog-daterange {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
  font-size: 12px;
}
.remnant-admin-modlog-daterange i[data-lucide],
.remnant-admin-modlog-daterange svg {
  width: 16px;
  height: 16px;
  opacity: 0.88;
  flex-shrink: 0;
}
.remnant-admin-modlog-export {
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.45);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(79, 70, 229, 0.12));
  color: #e9dcff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
}
.remnant-admin-modlog-export i[data-lucide],
.remnant-admin-modlog-export svg {
  width: 16px;
  height: 16px;
}
.remnant-admin-modlog-stats-side {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 24, 0.88);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  padding: 16px 14px 14px;
  flex: 1 1 auto;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.remnant-admin-modlog-stats-side h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #eef4ff;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-modlog-stats-side-sub {
  margin: 6px 0 0;
  font-size: 11px;
  color: #7c8ca3;
  line-height: 1.4;
}
.remnant-admin-modlog-statlines {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.remnant-admin-modlog-statline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
  color: #c5d0e5;
}
.remnant-admin-modlog-statline:last-child {
  border-bottom: none;
}
.remnant-admin-modlog-statline-l {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.remnant-admin-modlog-statline-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.remnant-admin-modlog-statline-ico.purple {
  background: rgba(139, 92, 246, 0.14);
  color: #a78bfa;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}
.remnant-admin-modlog-statline-ico.red {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.18);
}
.remnant-admin-modlog-statline-ico.orange {
  background: rgba(249, 115, 22, 0.14);
  color: #fb923c;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.18);
}
.remnant-admin-modlog-statline-ico.green {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}
.remnant-admin-modlog-statline-ico.blue {
  background: rgba(59, 130, 246, 0.14);
  color: #60a5fa;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.18);
}
.remnant-admin-modlog-statline-ico i[data-lucide],
.remnant-admin-modlog-statline-ico svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}
.remnant-admin-modlog-statline-v {
  font-weight: 800;
  font-size: 14px;
  color: #f1f5ff;
  font-variant-numeric: tabular-nums;
}
.remnant-admin-modlog-detail-card {
  border-radius: 18px;
  border: 1px solid rgba(168, 85, 247, 0.22);
  background: linear-gradient(180deg, rgba(32, 20, 54, 0.94), rgba(9, 13, 23, 0.94));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38), 0 0 22px rgba(139, 92, 246, 0.12);
  padding: 16px;
  animation: remnantModLogDetailIn 0.18s ease-out both;
}
.remnant-admin-modlog-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.remnant-admin-modlog-detail-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 850;
  color: #f6f0ff;
  font-family: 'Syne', sans-serif;
}
.remnant-admin-modlog-detail-head p {
  margin: 4px 0 0;
  font-size: 11px;
  color: #aeb8cd;
}
.remnant-admin-modlog-detail-close {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #d8c9ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.remnant-admin-modlog-detail-close:hover {
  border-color: rgba(168, 85, 247, 0.45);
  color: #fff;
}
.remnant-admin-modlog-detail-close i[data-lucide],
.remnant-admin-modlog-detail-close svg {
  width: 15px;
  height: 15px;
}
.remnant-admin-modlog-detail-grid {
  display: grid;
  gap: 8px;
}
.remnant-admin-modlog-detail-row {
  display: grid;
  grid-template-columns: minmax(86px, 0.72fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-admin-modlog-detail-row span {
  color: #8492aa;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
.remnant-admin-modlog-detail-row b {
  color: #e9eefb;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.remnant-admin-modlog-detail-row--long {
  grid-template-columns: 1fr;
  gap: 5px;
}
@keyframes remnantModLogDetailIn {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.remnant-admin-modlog-table-panel {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 24, 0.88);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.remnant-admin-modlog-thead {
  display: grid;
  grid-template-columns: minmax(86px, 0.9fr) minmax(80px, 0.72fr) minmax(145px, 1.5fr) minmax(80px, 0.78fr) minmax(88px, 0.9fr) minmax(70px, 0.62fr) minmax(88px, 0.72fr);
  gap: 8px;
  padding: 10px 12px;
  min-width: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #7c8ca3;
  text-transform: uppercase;
  flex-shrink: 0;
}
.remnant-admin-modlog-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0 8px;
}
.remnant-admin-modlog-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.remnant-admin-modlog-scroll::-webkit-scrollbar-track {
  background: rgba(6, 10, 18, 0.6);
  border-radius: 99px;
}
.remnant-admin-modlog-scroll::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.45);
  border-radius: 99px;
}
.remnant-admin-modlog-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.5) rgba(6, 10, 18, 0.6);
}
.remnant-admin-modlog-row {
  display: grid;
  grid-template-columns: minmax(86px, 0.9fr) minmax(80px, 0.72fr) minmax(145px, 1.5fr) minmax(80px, 0.78fr) minmax(88px, 0.9fr) minmax(70px, 0.62fr) minmax(88px, 0.72fr);
  gap: 8px;
  align-items: center;
  padding: 12px 12px;
  margin: 0 6px;
  border-radius: 12px;
  border: 1px solid transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  min-height: 58px;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.remnant-admin-modlog-row:last-child {
  border-bottom-color: transparent;
}
.remnant-admin-modlog-row:hover {
  background: rgba(139, 92, 246, 0.06);
  border-color: rgba(139, 92, 246, 0.14);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.08);
}
.remnant-admin-modlog-row.is-active {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.22), 0 0 16px rgba(168, 85, 247, 0.12);
  background: rgba(35, 22, 62, 0.28);
}
.remnant-admin-modlog-admin {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.remnant-admin-modlog-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, rgba(77, 143, 255, 0.58), rgba(168, 85, 247, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.remnant-admin-modlog-aname {
  font-size: 12px;
  font-weight: 700;
  color: #eef4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-admin-modlog-cell {
  font-size: 11px;
  color: #b8c5da;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.remnant-admin-modlog-cell--activity {
  color: #e2e8f0;
  font-weight: 700;
}
.remnant-admin-modlog-duration--perm {
  color: #fca5a5;
  font-weight: 800;
}
.remnant-admin-modlog-empty {
  padding: 36px 18px;
  text-align: center;
  color: #aebbd0;
  font-size: 13px;
}
.remnant-admin-modlog-badge {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  width: fit-content;
  max-width: 100%;
}
.remnant-admin-modlog-badge--ban {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.35);
}
.remnant-admin-modlog-badge--mute {
  color: #fdba74;
  background: rgba(249, 115, 22, 0.16);
  border-color: rgba(249, 115, 22, 0.35);
}
.remnant-admin-modlog-badge--warn {
  color: #fde047;
  background: rgba(234, 179, 8, 0.14);
  border-color: rgba(234, 179, 8, 0.35);
}
.remnant-admin-modlog-badge--lift {
  color: #86efac;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.35);
}
.remnant-admin-modlog-badge--report {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.35);
}
.remnant-admin-modlog-badge--msg {
  color: #7dd3fc;
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.32);
}
.remnant-admin-modlog-srv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.remnant-admin-modlog-srv-ico {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
  flex-shrink: 0;
}
.remnant-admin-modlog-srv-ico--purple {
  background: rgba(139, 92, 246, 0.22);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.35);
}
.remnant-admin-modlog-srv-ico--green {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.32);
}
.remnant-admin-modlog-st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.remnant-admin-modlog-st-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.remnant-admin-modlog-st--active {
  color: #fca5a5;
}
.remnant-admin-modlog-st--active .remnant-admin-modlog-st-dot {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.55);
}
.remnant-admin-modlog-st--expired {
  color: #6ee7b7;
}
.remnant-admin-modlog-st--expired .remnant-admin-modlog-st-dot {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.45);
}
.remnant-admin-modlog-st--progress {
  color: #93c5fd;
}
.remnant-admin-modlog-st--progress .remnant-admin-modlog-st-dot {
  background: #3b82f6;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.48);
}
@media (max-width: 1240px) {
  .remnant-admin-modlog-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 1fr) auto;
  }
  #page-container:has(#page-admin-mod-log.active) {
    overflow-y: auto;
  }
  #page-admin-mod-log.active {
    height: auto;
    min-height: min(100%, 100dvh);
    overflow: visible;
  }
  #page-admin-mod-log.active #remnant-admin-mod-log-root {
    flex: none;
    min-height: 0;
  }
  .remnant-admin-modlog-shell {
    flex: none;
  }
  .remnant-admin-modlog-layout {
    flex: none;
  }
  .remnant-admin-modlog-main {
    overflow: visible;
  }
  .remnant-admin-modlog-table-panel {
    flex: none;
    min-height: 260px;
  }
  .remnant-admin-modlog-scroll {
    max-height: 50vh;
  }
  .remnant-admin-modlog-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .remnant-admin-modlog-stats {
    grid-template-columns: 1fr;
  }
}

/* ? Admin Szerverek: szerverekoldal tartalom (csak injekt?lt blokk, .remnant-srv-scope) ? */
#page-admin-servers #remnant-admin-servers-root.remnant-admin-servers-root-inner {
  background: rgba(10, 14, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
}
.remnant-srv-scope {
  --rsv-bg-card: rgba(10, 14, 24, 0.88);
  --rsv-border: rgba(255, 255, 255, 0.06);
  --rsv-border-bright: rgba(168, 85, 247, 0.35);
  --rsv-primary: #a855f7;
  --rsv-primary-dim: rgba(168, 85, 247, 0.14);
  --rsv-purple: #8b5cf6;
  --rsv-green: #10b981;
  --rsv-yellow: #f59e0b;
  --rsv-red: #ef4444;
  --rsv-text: #e2e8f0;
  --rsv-text-sec: #94a3b8;
  --rsv-text-dim: #4b6080;
  --rsv-text-mono: #7dd3fc;
  --rsv-radius-lg: 18px;
  --rsv-font: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --rsv-mono: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px;
  color: var(--rsv-text);
  font-family: var(--rsv-font);
}
.remnant-srv-scope button,
.remnant-srv-scope input {
  font-family: inherit;
}
.remnant-srv-scope.rsv-picker-scope {
  max-width: 1180px;
  margin: 0 auto;
}
.remnant-srv-scope .rsv-picker-head {
  margin-bottom: 16px;
}
.remnant-srv-scope .rsv-picker-title {
  margin: 0 0 6px 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--rsv-text);
}
.remnant-srv-scope .rsv-picker-desc {
  margin: 0;
  font-size: 0.85rem;
  color: var(--rsv-text-sec);
  line-height: 1.45;
}
.remnant-srv-scope .rsv-game-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.remnant-srv-scope .rsv-game-tab {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--rsv-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--rsv-text-sec);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.remnant-srv-scope .rsv-game-tab:hover {
  border-color: rgba(168, 85, 247, 0.35);
  color: var(--rsv-text);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.12);
}
.remnant-srv-scope .rsv-game-tab[aria-selected='true'] {
  border-color: rgba(168, 85, 247, 0.65);
  background: linear-gradient(145deg, rgba(88, 28, 135, 0.35), rgba(34, 211, 238, 0.08));
  color: #f3e8ff;
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.35),
    0 0 22px rgba(168, 85, 247, 0.28),
    inset 0 0 24px rgba(168, 85, 247, 0.06);
}
.remnant-srv-scope .rsv-game-panel {
  display: none;
}
.remnant-srv-scope .rsv-game-panel.rsv-game-panel--active {
  display: block;
}
.remnant-srv-scope .rsv-slot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}
.remnant-srv-scope .rsv-slot-card {
  text-align: left;
  cursor: pointer;
  padding: 20px 22px 20px 20px;
  border-radius: var(--rsv-radius-lg);
  border: 1px solid var(--rsv-border);
  background: var(--rsv-bg-card);
  color: inherit;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  transition: border-color 0.18s, box-shadow 0.22s, transform 0.12s;
}
.remnant-srv-scope .rsv-slot-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.85), rgba(34, 211, 238, 0.45));
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
  pointer-events: none;
  opacity: 0.85;
}
.remnant-srv-scope .rsv-slot-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 55%);
  pointer-events: none;
}
.remnant-srv-scope .rsv-slot-card:hover {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(168, 85, 247, 0.12);
  transform: translateY(-1px);
}
.remnant-srv-scope .rsv-slot-card:focus-visible {
  outline: 2px solid var(--rsv-primary);
  outline-offset: 2px;
}
.remnant-srv-scope .rsv-slot-card .rsv-status-badge {
  font-size: 0.72rem;
  padding: 5px 13px;
}
.remnant-srv-scope .rsv-status-badge-live-fut {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.45) !important;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.28);
}
.remnant-srv-scope .rsv-status-badge-live-offline {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(248, 113, 113, 0.42) !important;
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.22);
}
.remnant-srv-scope .rsv-status-badge-live-starting {
  background: rgba(249, 115, 22, 0.14) !important;
  color: #fb923c !important;
  border: 1px solid rgba(249, 115, 22, 0.38) !important;
}
.remnant-srv-scope .rsv-slot-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px 20px;
  min-height: 88px;
}
.remnant-srv-scope .rsv-slot-thumb {
  grid-column: 1;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(24, 12, 40, 0.65);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow:
    0 0 18px rgba(168, 85, 247, 0.15),
    inset 0 0 18px rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0;
  line-height: 0;
}
.remnant-srv-scope .rsv-slot-thumb-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e9d5ff;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.45));
}
.remnant-srv-scope .rsv-slot-thumb-ico svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.25;
}
.remnant-srv-scope .rsv-slot-text {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.remnant-srv-scope .rsv-slot-tags-mid {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  max-width: 200px;
  padding: 4px 8px;
}
.remnant-srv-scope .rsv-slot-tags-mid-placeholder {
  display: block;
  min-height: 1px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
.remnant-srv-scope .rsv-slot-tags-mid .rsv-tag {
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.12);
}
.remnant-srv-scope .rsv-slot-tags-mid .rsv-tag-purple {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.15);
}
.remnant-srv-scope .rsv-slot-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.remnant-srv-scope .rsv-slot-name {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.28;
}
.remnant-srv-scope .rsv-slot-subline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.remnant-srv-scope .rsv-slot-addr {
  font-family: var(--rsv-mono);
  font-size: 0.94rem;
  color: var(--rsv-text-sec);
  word-break: break-all;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}
.remnant-srv-scope .rsv-slot-tags-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-slot-tags-inline .rsv-tag {
  font-size: 0.74rem;
  padding: 4px 11px;
}
.remnant-srv-scope .rsv-slot-live-a2s {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--rsv-text-dim);
}
.remnant-srv-scope .rsv-slot-live-a2s [data-live='map'] {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--rsv-text);
}
.remnant-srv-scope .rsv-slot-metrics-compact {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 14px 16px;
  flex-shrink: 0;
  grid-column: 4;
}
.remnant-srv-scope .rsv-slot-mc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.remnant-srv-scope .rsv-metric-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.02);
}
.remnant-srv-scope .rsv-metric-ico svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.25;
}
.remnant-srv-scope .rsv-metric-ico--users {
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.28);
  color: #67e8f9;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.35));
}
.remnant-srv-scope .rsv-metric-ico--cpu {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.28);
  color: #86efac;
  filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.35));
}
.remnant-srv-scope .rsv-metric-ico--mem {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: #d8b4fe;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.35));
}
.remnant-srv-scope .rsv-metric-ico--wifi {
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.28);
  color: #ddd6fe;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.35));
}
@media (max-width: 1100px) {
  .remnant-srv-scope .rsv-slot-inner {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 0;
  }
  .remnant-srv-scope .rsv-slot-thumb {
    grid-column: 1;
    grid-row: 1;
  }
  .remnant-srv-scope .rsv-slot-text {
    grid-column: 2;
    grid-row: 1;
  }
  .remnant-srv-scope .rsv-slot-tags-mid {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: none;
    padding-top: 4px;
    border-top: 1px solid var(--rsv-border);
    margin-top: 4px;
  }
  .remnant-srv-scope .rsv-slot-metrics-compact {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--rsv-border);
  }
}
@media (max-width: 720px) {
  .remnant-srv-scope .rsv-slot-inner {
    grid-template-columns: auto 1fr;
  }
}
.remnant-srv-scope .rsv-slot-mc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  width: 100px;
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-slot-mc--players {
  width: 124px;
}
.remnant-srv-scope .rsv-slot-mc--mem {
  width: 118px;
}
.remnant-srv-scope .rsv-slot-mc-label {
  font-size: 0.68rem;
  color: var(--rsv-text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--rsv-font);
  line-height: 1.2;
  white-space: nowrap;
}
.remnant-srv-scope .rsv-slot-mc-val {
  font-size: 1.08rem;
  font-weight: 700;
  font-family: var(--rsv-mono);
  color: var(--rsv-text);
  line-height: 1.22;
}
.remnant-srv-scope .rsv-info-val .rsv-slot-v-muted {
  color: var(--rsv-text-dim);
  font-weight: 500;
  font-size: 0.9em;
}
.remnant-srv-scope .rsv-slot-mc-val .rsv-slot-v-muted {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--rsv-text-dim);
}
.remnant-srv-scope .rsv-slot-mc-val.resource-green {
  color: #38d66b;
}
.remnant-srv-scope .rsv-slot-mc-val.resource-blue {
  color: #3aa7ff;
}
.remnant-srv-scope .rsv-slot-mc-val.resource-orange {
  color: #ff9f2d;
}
.remnant-srv-scope .rsv-slot-mc-val.resource-red {
  color: #ff3b3b;
}
.remnant-srv-scope .rsv-slot-mc-val.resource-offline,
.remnant-srv-scope .rsv-slot-mc-val.resource-muted {
  color: rgba(255, 255, 255, 0.35);
}
.remnant-srv-scope .rsv-slot-mc .rsv-hero-progress-fill.resource-green {
  background-color: #38d66b;
}
.remnant-srv-scope .rsv-slot-mc .rsv-hero-progress-fill.resource-blue {
  background-color: #3aa7ff;
}
.remnant-srv-scope .rsv-slot-mc .rsv-hero-progress-fill.resource-orange {
  background-color: #ff9f2d;
}
.remnant-srv-scope .rsv-slot-mc .rsv-hero-progress-fill.resource-red {
  background-color: #ff3b3b;
}
.remnant-srv-scope .rsv-slot-mc .rsv-hero-progress-fill.resource-offline,
.remnant-srv-scope .rsv-slot-mc .rsv-hero-progress-fill.resource-muted {
  background-color: rgba(255, 255, 255, 0.12);
}
.remnant-srv-scope .rsv-slot-mc .rsv-hero-progress-bar {
  height: 7px;
  margin-top: 6px;
  max-width: 100%;
  width: 100%;
  border-radius: 4px;
}
.remnant-srv-scope .rsv-slot-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--rsv-text-dim);
  font-size: 0.88rem;
  border: 1px dashed var(--rsv-border);
  border-radius: var(--rsv-radius-lg);
}
.remnant-admin-srv-detail-top {
  margin-bottom: 12px;
}
.remnant-srv-scope .rsv-card {
  background: var(--rsv-bg-card);
  border: 1px solid var(--rsv-border);
  border-radius: var(--rsv-radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
}
.remnant-srv-scope .rsv-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0%, transparent 60%);
  pointer-events: none;
}
.remnant-srv-scope .rsv-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 10px;
  flex-wrap: wrap;
}
.remnant-srv-scope .rsv-card-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.remnant-srv-scope .rsv-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rsv-text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.remnant-srv-scope .rsv-card-sub {
  color: var(--rsv-text-dim);
  font-weight: 400;
  font-size: 0.8rem;
}
.remnant-srv-scope .rsv-card-badge {
  background: var(--rsv-primary-dim);
  color: var(--rsv-primary);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.remnant-srv-scope .rsv-card-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.remnant-srv-scope .rsv-server-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: 10px 14px !important;
  background: rgba(10, 14, 24, 0.94);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
@media (min-width: 901px) {
  .remnant-srv-scope .rsv-server-hero {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(320px, 2fr) auto;
    gap: 10px 18px;
    align-items: center;
    flex-wrap: nowrap;
    padding: 8px 14px !important;
  }
  .remnant-srv-scope .rsv-server-hero-stats {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 10px 14px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .remnant-srv-scope .rsv-server-hero-actions {
    justify-self: end;
    justify-content: flex-end;
    width: auto;
    flex-wrap: nowrap;
    margin-top: 0;
    margin-left: 0;
  }
}
.remnant-srv-scope .rsv-server-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--rsv-primary), var(--rsv-purple));
  border-radius: var(--rsv-radius-lg) var(--rsv-radius-lg) 0 0;
}

.remnant-srv-scope .rsv-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 16px;
  padding: 0;
  align-items: stretch;
}
.remnant-srv-scope .rsv-server-hero {
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: center;
}
.remnant-srv-scope .rsv-control-panel {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.remnant-srv-scope .rsv-control-panel::after {
  content: '';
  flex: 1 1 auto;
  min-height: 0;
}
.remnant-srv-scope .rsv-server-info-panel {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.remnant-srv-scope .rsv-server-info-panel::after {
  content: '';
  flex: 1 1 auto;
  min-height: 0;
}
.remnant-srv-scope .rsv-players-panel {
  grid-column: 3;
  grid-row: 2 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.remnant-srv-scope .rsv-players-panel .rsv-players-wrap {
  flex: 1;
  min-height: 140px;
}
.remnant-srv-scope .rsv-activity-panel {
  grid-column: 1 / 3;
  grid-row: 3;
  align-self: stretch;
  min-width: 0;
}
.remnant-srv-scope .rsv-log-panel {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: 0;
}
.remnant-srv-scope .rsv-resources-panel {
  grid-column: 1 / -1;
  grid-row: 5;
  min-width: 0;
}
.remnant-srv-scope .rsv-help-panel {
  grid-column: 1 / -1;
  grid-row: 6;
  min-width: 0;
}
.remnant-srv-scope .rsv-help-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.remnant-srv-scope .rsv-help-intro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.remnant-srv-scope .rsv-help-intro-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: #e9d5ff;
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-help-intro-ico svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.45));
}
.remnant-srv-scope .rsv-help-intro-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--rsv-text);
}
.remnant-srv-scope .rsv-help-cmds {
  font-family: var(--rsv-mono);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--rsv-text-sec);
  white-space: pre-wrap;
  margin: 0;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: rgba(4, 8, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.remnant-srv-scope .rsv-card--aux {
  opacity: 0.92;
}
@media (max-width: 1200px) {
  .remnant-srv-scope .rsv-control-panel {
    grid-column: 1;
    grid-row: 2;
  }
  .remnant-srv-scope .rsv-server-info-panel {
    grid-column: 2;
    grid-row: 2;
  }
  .remnant-srv-scope .rsv-players-panel {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .remnant-srv-scope .rsv-activity-panel {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .remnant-srv-scope .rsv-log-panel {
    grid-row: 5;
  }
  .remnant-srv-scope .rsv-resources-panel {
    grid-column: 1 / -1;
    grid-row: 6;
  }
  .remnant-srv-scope .rsv-help-panel {
    grid-column: 1 / -1;
    grid-row: 7;
  }
}
@media (max-width: 900px) {
  .remnant-srv-scope .rsv-dashboard {
    grid-template-columns: 1fr;
  }
  .remnant-srv-scope .rsv-control-panel,
  .remnant-srv-scope .rsv-server-info-panel,
  .remnant-srv-scope .rsv-players-panel,
  .remnant-srv-scope .rsv-activity-panel,
  .remnant-srv-scope .rsv-resources-panel,
  .remnant-srv-scope .rsv-help-panel {
    grid-column: 1;
  }
  .remnant-srv-scope .rsv-control-panel {
    grid-row: auto;
  }
  .remnant-srv-scope .rsv-server-info-panel {
    grid-row: auto;
  }
  .remnant-srv-scope .rsv-players-panel {
    grid-row: auto;
  }
  .remnant-srv-scope .rsv-activity-panel {
    grid-row: auto;
  }
  .remnant-srv-scope .rsv-log-panel {
    grid-row: auto;
  }
  .remnant-srv-scope .rsv-resources-panel,
  .remnant-srv-scope .rsv-help-panel {
    grid-row: auto;
  }
  .remnant-srv-scope .rsv-resources-panel {
    display: flex;
    flex-direction: column;
  }
  .remnant-srv-scope .rsv-resources-panel > .rsv-network-block {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--rsv-border);
    padding-top: 14px;
  }
  .remnant-srv-scope .rsv-server-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .remnant-srv-scope .rsv-server-hero-stats {
    width: 100%;
  }
  .remnant-srv-scope .rsv-resources-grid {
    flex-wrap: wrap;
  }
}
.remnant-srv-scope .rsv-server-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.remnant-srv-scope .rsv-server-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1px;
  flex-wrap: wrap;
}
.remnant-srv-scope .rsv-server-address { margin-bottom: 3px; }
.remnant-srv-scope .rsv-server-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.remnant-srv-scope .rsv-tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
}
.remnant-srv-scope .rsv-tag-blue {
  background: var(--rsv-primary-dim);
  color: var(--rsv-primary);
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.remnant-srv-scope .rsv-tag-purple {
  background: rgba(139, 92, 246, 0.12);
  color: var(--rsv-purple);
  border: 1px solid rgba(139, 92, 246, 0.2);
}
.remnant-srv-scope .rsv-server-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  width: 100%;
  margin-top: 4px;
}
@media (min-width: 901px) {
  .remnant-srv-scope .rsv-server-hero-actions { width: auto; margin-top: 0; margin-left: auto; }
}
.remnant-srv-scope .rsv-server-hero-actions .rsv-btn {
  padding: 6px 11px;
  font-size: 0.72rem;
}
.remnant-srv-scope .rsv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: inherit;
  transition: box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.remnant-srv-scope .rsv-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-btn-ico svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}
.remnant-srv-scope .rsv-btn-hero-settings {
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.42);
  border-color: rgba(167, 139, 250, 0.55) !important;
}
.remnant-srv-scope .rsv-btn-hero-settings:hover:not(:disabled) {
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.55);
}
.remnant-srv-scope .rsv-btn-primary {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}
.remnant-srv-scope .rsv-btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--rsv-text-sec);
  border-color: var(--rsv-border);
}
.remnant-srv-scope .rsv-hero-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
}
.remnant-srv-scope .rsv-hero-stat-label { font-size: 0.68rem; }
.remnant-srv-scope .rsv-hero-stat { min-width: 100px; }
.remnant-srv-scope .rsv-hero-progress-fill {
  animation: rsv-progress-grow 1.2s ease-out forwards;
}
@keyframes rsv-progress-grow {
  from { width: 0; }
  to { width: var(--fill, 51%); }
}
/* Slot k?rtya j?t?kos s?v: ne 1.2s anim?ci? (nem indul ?jra poll-onk?nt) ? --fill azonnal l?tsz?djon */
.remnant-srv-scope .rsv-slot-mc .rsv-hero-progress-fill {
  animation: none;
  width: var(--fill, 0%);
}
.remnant-srv-scope .rsv-control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.remnant-srv-scope .rsv-ctrl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 12px;
  font-size: 0.73rem;
  font-weight: 600;
  border: 1px solid transparent;
  font-family: inherit;
}
.remnant-srv-scope .rsv-ctrl-icon {
  font-size: 1.3rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.remnant-srv-scope .rsv-ctrl-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}
.remnant-srv-scope .rsv-ctrl-green {
  background: rgba(16, 185, 129, 0.08);
  color: var(--rsv-green);
  border-color: rgba(16, 185, 129, 0.2);
}
.remnant-srv-scope .rsv-ctrl-red {
  background: rgba(239, 68, 68, 0.08);
  color: var(--rsv-red);
  border-color: rgba(239, 68, 68, 0.2);
}
.remnant-srv-scope .rsv-ctrl-orange {
  background: rgba(249, 115, 22, 0.08);
  color: #f97316;
  border-color: rgba(249, 115, 22, 0.2);
}
.remnant-srv-scope .rsv-ctrl-blue {
  background: var(--rsv-primary-dim);
  color: var(--rsv-primary);
  border-color: rgba(59, 130, 246, 0.2);
}
.remnant-srv-scope .rsv-control-secondary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.remnant-srv-scope .rsv-control-map-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.remnant-srv-scope .rsv-force-stop-mini {
  min-height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid rgba(249, 115, 22, 0.35);
  background: rgba(249, 115, 22, 0.08);
  color: #fb923c;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  font-family: inherit;
}
.remnant-srv-scope .rsv-force-stop-mini .rsv-force-stop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.remnant-srv-scope .rsv-force-stop-mini .rsv-force-stop-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.remnant-srv-scope .rsv-sec-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-sec-ico svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}
.rsv-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(4, 9, 18, 0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.rsv-modal-card {
  width: min(430px, 95vw);
  background: linear-gradient(180deg, rgba(12, 19, 33, 0.98), rgba(8, 13, 24, 0.98));
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 12px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
  padding: 14px;
  color: var(--rsv-text);
}
.rsv-modal-title {
  font-size: 0.82rem;
  color: var(--rsv-text-dim);
  margin: 0 0 10px 0;
}
.rsv-modal-label {
  display: block;
  font-size: 0.78rem;
  color: var(--rsv-text-sec);
  margin-bottom: 8px;
}
.rsv-modal-input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--rsv-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--rsv-text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.84rem;
}
.rsv-modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.rsv-modal-btn {
  border: 1px solid var(--rsv-border);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--rsv-text-sec);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-family: inherit;
}
.rsv-modal-btn.rsv-modal-btn-primary {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.2);
  color: #dbeafe;
}
.remnant-srv-scope .rsv-sec-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--rsv-border);
  color: var(--rsv-text-sec);
  font-size: 0.78rem;
  font-weight: 500;
  font-family: inherit;
}
.remnant-srv-scope .rsv-sec-select {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--rsv-border);
  color: var(--rsv-text-sec);
  font-size: 0.78rem;
  font-family: inherit;
  padding: 0 10px;
}
.remnant-srv-scope .rsv-sec-select[size] {
  max-height: 140px;
}
.remnant-srv-scope .rsv-sec-select:disabled,
.remnant-srv-scope .rsv-ctrl-btn:disabled,
.remnant-srv-scope .rsv-sec-btn:disabled,
.remnant-srv-scope .rsv-force-stop-mini:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.remnant-srv-scope .rsv-sec-btn-amber {
  background: rgba(245, 158, 11, 0.06);
  color: var(--rsv-yellow);
  border-color: rgba(245, 158, 11, 0.2);
}
.remnant-srv-scope .rsv-server-hero-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-server-thumbnail {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(249, 115, 22, 0.22), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(249, 115, 22, 0.35);
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.remnant-srv-scope .rsv-thumb-img {
  font-size: 1.8rem;
  line-height: 1;
}
.remnant-srv-scope .rsv-thumb-img--lucide {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fb923c;
  filter: drop-shadow(0 0 10px rgba(251, 146, 60, 0.55));
}
.remnant-srv-scope .rsv-thumb-img--lucide svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}
.remnant-srv-scope .rsv-server-meta--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.remnant-srv-scope .rsv-server-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rsv-text);
  margin: 0;
  line-height: 1.25;
}
.remnant-srv-scope .rsv-status-badge {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.remnant-srv-scope .rsv-status-badge-online {
  background: rgba(16, 185, 129, 0.12);
  color: var(--rsv-green);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.remnant-srv-scope .rsv-status-badge-offline {
  background: rgba(239, 68, 68, 0.12);
  color: var(--rsv-red);
  border: 1px solid rgba(239, 68, 68, 0.28);
}
.remnant-srv-scope .rsv-server-address {
  font-family: var(--rsv-mono);
  font-size: 0.72rem;
  color: var(--rsv-text-dim);
}
.remnant-srv-scope .rsv-server-address--copy {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
  margin: -2px -6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.remnant-srv-scope .rsv-server-address--copy:hover {
  background: rgba(59, 130, 246, 0.12);
  color: var(--rsv-text-sec);
}
.remnant-srv-scope .rsv-server-address--copy:focus-visible {
  outline: 2px solid var(--rsv-primary);
  outline-offset: 2px;
}
.remnant-srv-scope .rsv-server-hero-stats {
  display: flex;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
}
.remnant-srv-scope .rsv-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 0 1 auto;
}
.remnant-srv-scope .rsv-hero-stat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
}
.remnant-srv-scope .rsv-hero-stat-head .rsv-hero-stat-label {
  margin: 0;
}
.remnant-srv-scope .rsv-hero-metric-ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.remnant-srv-scope .rsv-hero-metric-ico svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}
.remnant-srv-scope .rsv-hero-metric--players {
  color: #67e8f9;
  border-color: rgba(34, 211, 238, 0.35);
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.35));
}
.remnant-srv-scope .rsv-hero-metric--cpu {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.35);
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.35));
}
.remnant-srv-scope .rsv-hero-metric--mem {
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.35);
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.35));
}
.remnant-srv-scope .rsv-hero-metric--ping {
  color: #6ee7b7;
  border-color: rgba(52, 211, 153, 0.35);
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.35));
}
.remnant-srv-scope .rsv-hero-stat-label {
  font-size: 0.65rem;
  color: var(--rsv-text-dim);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.remnant-srv-scope .rsv-hero-stat-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--rsv-text);
  font-family: var(--rsv-mono);
  line-height: 1.15;
}
.remnant-srv-scope .rsv-hero-stat-max {
  font-size: 0.72rem;
  color: var(--rsv-text-dim);
  font-weight: 500;
}
.remnant-srv-scope .rsv-hero-progress-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1px;
  width: 100%;
  max-width: 100px;
}
.remnant-srv-scope .rsv-hero-progress-fill {
  height: 100%;
  width: var(--fill, 51%);
  background: linear-gradient(90deg, var(--rsv-primary), var(--rsv-purple));
  border-radius: 2px;
}
.remnant-srv-scope .rsv-mini-graph svg {
  width: 64px;
  height: 18px;
  display: block;
}
.remnant-srv-scope .rsv-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 22px;
  align-items: start;
  margin-top: 18px;
}
.remnant-srv-scope .rsv-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
@media (max-width: 1180px) {
  .remnant-srv-scope .rsv-main-grid {
    grid-template-columns: 1fr;
  }
}
.remnant-srv-scope .rsv-activity-panel .rsv-activity-graph {
  padding: 12px 12px 8px;
  border-radius: 14px;
  background: rgba(4, 8, 18, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.remnant-srv-scope .rsv-activity-graph {
  position: relative;
}
.remnant-srv-scope .rsv-graph-tooltip-fake {
  position: absolute;
  background: #1a2542;
  border: 1px solid var(--rsv-border-bright);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
  max-width: 220px;
}
.remnant-srv-scope .rsv-activity-svg .rsv-act-marker {
  fill: #3b82f6;
  stroke: rgba(15, 23, 42, 0.85);
  stroke-width: 1.5;
  cursor: pointer;
  pointer-events: all;
}
.remnant-srv-scope .rsv-activity-svg .rsv-act-marker:hover {
  fill: #60a5fa;
}
.remnant-srv-scope .rsv-gt-label {
  color: var(--rsv-text-dim);
}
.remnant-srv-scope .rsv-gt-val {
  color: var(--rsv-primary);
  font-weight: 600;
}
.remnant-srv-scope .rsv-activity-svg {
  width: 100%;
  height: min(200px, 28vh);
  min-height: 160px;
  display: block;
  margin-bottom: 4px;
}
.remnant-srv-scope .rsv-graph-x-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--rsv-text-dim);
  font-family: var(--rsv-mono);
  padding: 0 2px;
}
.remnant-srv-scope .rsv-graph-y-labels {
  position: absolute;
  left: 0;
  top: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 48px);
  width: 34px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--rsv-text-sec);
  font-family: var(--rsv-mono);
  text-align: right;
  padding-right: 6px;
  box-sizing: border-box;
  z-index: 1;
}
.remnant-srv-scope .rsv-graph-y-labels span {
  line-height: 1;
}
.remnant-srv-scope .rsv-info-list--compact .rsv-info-row {
  padding: 8px 0;
}
.remnant-srv-scope .rsv-info-list--compact .rsv-info-row:first-child {
  padding-top: 4px;
}
.remnant-srv-scope .rsv-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.remnant-srv-scope .rsv-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  gap: 10px;
}
.remnant-srv-scope .rsv-info-row:last-child {
  border-bottom: none;
}
.remnant-srv-scope .rsv-info-key {
  font-size: 0.75rem;
  color: var(--rsv-text-dim);
  font-weight: 500;
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-info-val {
  font-size: 0.8rem;
  color: var(--rsv-text);
  font-weight: 500;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.remnant-srv-scope .rsv-info-mono {
  font-family: var(--rsv-mono);
  color: var(--rsv-text-mono);
  font-size: 0.73rem;
}
.remnant-srv-scope .rsv-info-green {
  color: var(--rsv-green);
}
.remnant-srv-scope .rsv-info-dim {
  color: var(--rsv-text-dim);
}
.remnant-srv-scope .rsv-copy-btn {
  background: none;
  border: none;
  color: var(--rsv-text-dim);
  font-size: 0.8rem;
  cursor: default;
  padding: 2px;
}
.remnant-srv-scope .rsv-tag-mini-btn {
  background: var(--rsv-primary-dim);
  color: var(--rsv-primary);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 20px;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 8px;
  cursor: default;
}
.remnant-srv-scope .rsv-resources-grid {
  display: flex;
  gap: 10px;
  justify-content: space-around;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.remnant-srv-scope .rsv-resource-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.remnant-srv-scope .rsv-ring-wrap {
  position: relative;
  width: 90px;
  height: 90px;
}
.remnant-srv-scope .rsv-ring-svg {
  width: 90px;
  height: 90px;
  transform: rotate(-90deg);
}
.remnant-srv-scope .rsv-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 7;
}
.remnant-srv-scope .rsv-ring-fill {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 238.76;
  stroke-dashoffset: calc(238.76 - (238.76 * var(--pct) / 100));
}
.remnant-srv-scope .rsv-ring-fill-blue {
  stroke: var(--rsv-primary);
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.5));
}
.remnant-srv-scope .rsv-ring-fill-purple {
  stroke: var(--rsv-purple);
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.5));
}
.remnant-srv-scope .rsv-ring-fill-green {
  stroke: var(--rsv-green);
  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
}
.remnant-srv-scope .rsv-ring-fill--host.resource-green {
  stroke: #38d66b;
  filter: drop-shadow(0 0 4px rgba(56, 214, 107, 0.45));
}
.remnant-srv-scope .rsv-ring-fill--host.resource-blue {
  stroke: #3aa7ff;
  filter: drop-shadow(0 0 4px rgba(58, 167, 255, 0.45));
}
.remnant-srv-scope .rsv-ring-fill--host.resource-orange {
  stroke: #ff9f2d;
  filter: drop-shadow(0 0 4px rgba(255, 159, 45, 0.45));
}
.remnant-srv-scope .rsv-ring-fill--host.resource-red {
  stroke: #ff3b3b;
  filter: drop-shadow(0 0 4px rgba(255, 59, 59, 0.45));
}
.remnant-srv-scope .rsv-ring-fill--host.resource-offline,
.remnant-srv-scope .rsv-ring-fill--host.resource-muted {
  stroke: rgba(255, 255, 255, 0.14);
  filter: none;
}
.remnant-srv-scope .rsv-ring-value.resource-green {
  color: #38d66b;
}
.remnant-srv-scope .rsv-ring-value.resource-blue {
  color: #3aa7ff;
}
.remnant-srv-scope .rsv-ring-value.resource-orange {
  color: #ff9f2d;
}
.remnant-srv-scope .rsv-ring-value.resource-red {
  color: #ff3b3b;
}
.remnant-srv-scope .rsv-ring-value.resource-offline,
.remnant-srv-scope .rsv-ring-value.resource-muted {
  color: rgba(255, 255, 255, 0.35);
}
.remnant-srv-scope .rsv-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.remnant-srv-scope .rsv-ring-value {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--rsv-mono);
  color: var(--rsv-text);
}
.remnant-srv-scope .rsv-ring-name {
  font-size: 0.62rem;
  color: var(--rsv-text-dim);
  font-weight: 500;
}
.remnant-srv-scope .rsv-ring-sub {
  font-size: 0.65rem;
  color: var(--rsv-text-dim);
  font-family: var(--rsv-mono);
  text-align: center;
  min-height: 2.4em;
  line-height: 1.25;
}
.remnant-srv-scope .rsv-resources-panel .rsv-card-header {
  align-items: flex-start;
}
.remnant-srv-scope .rsv-resources-panel .rsv-card-header .rsv-card-sub {
  margin-left: auto;
  text-align: right;
  max-width: 55%;
  line-height: 1.35;
}
@media (min-width: 901px) {
  .remnant-srv-scope .rsv-resources-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 1.08fr);
    grid-template-rows: auto auto;
    gap: 8px 22px;
    align-items: start;
  }
  .remnant-srv-scope .rsv-resources-panel > .rsv-card-header {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .remnant-srv-scope .rsv-resources-panel > .rsv-resources-grid {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
    justify-content: flex-start;
  }
  .remnant-srv-scope .rsv-resources-panel > .rsv-network-block {
    grid-column: 2;
    grid-row: 2;
    border-top: none;
    border-left: 1px solid var(--rsv-border);
    padding-top: 0;
    padding-left: 20px;
    align-self: stretch;
  }
}
.remnant-srv-scope .rsv-network-block {
  border-top: 1px solid var(--rsv-border);
  padding-top: 14px;
}
.remnant-srv-scope .rsv-network-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rsv-text-sec);
  margin-bottom: 4px;
}
.remnant-srv-scope .rsv-network-iface {
  font-size: 0.65rem;
  color: var(--rsv-text-dim);
  margin: 0 0 10px;
  font-family: var(--rsv-mono);
}
.remnant-srv-scope .rsv-network-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.remnant-srv-scope .rsv-network-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.remnant-srv-scope .rsv-net-label {
  font-size: 0.67rem;
  color: var(--rsv-text-dim);
  font-weight: 500;
}
.remnant-srv-scope .rsv-net-value {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--rsv-mono);
}
.remnant-srv-scope .rsv-net-green {
  color: var(--rsv-green);
}
.remnant-srv-scope .rsv-net-blue {
  color: var(--rsv-primary);
}
.remnant-srv-scope .rsv-net-graph svg {
  width: 100%;
  height: 28px;
  display: block;
}
.remnant-srv-scope .rsv-net-graph [data-rsv-host-spark-line] {
  vector-effect: non-scaling-stroke;
}
.remnant-srv-scope .rsv-network-divider {
  width: 1px;
  height: 50px;
  background: var(--rsv-border);
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.remnant-srv-scope .rsv-data-table th {
  text-align: left;
  padding: 7px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rsv-text-dim);
  border-bottom: 1px solid var(--rsv-border);
}
.remnant-srv-scope .rsv-data-table td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(30, 45, 74, 0.5);
  color: var(--rsv-text-sec);
  vertical-align: middle;
}
.remnant-srv-scope .rsv-data-table tbody tr:last-child td {
  border-bottom: none;
}
.remnant-srv-scope .rsv-data-table tbody tr {
  transition: background 0.2s ease;
}
.remnant-srv-scope .rsv-data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}
.remnant-srv-scope .rsv-player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--rsv-text);
}
.remnant-srv-scope .rsv-player-avatar {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-player-avatar--img {
  padding: 0;
  overflow: hidden;
}
.remnant-srv-scope .rsv-player-avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}
.remnant-srv-scope .rsv-pa-blue {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
}
.remnant-srv-scope .rsv-pa-purple {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
}
.remnant-srv-scope .rsv-pa-green {
  background: linear-gradient(135deg, #059669, #10b981);
}
.remnant-srv-scope .rsv-pa-pink {
  background: linear-gradient(135deg, #db2777, #ec4899);
}
.remnant-srv-scope .rsv-pa-orange {
  background: linear-gradient(135deg, #ea580c, #f97316);
}
.remnant-srv-scope .rsv-id-cell {
  font-family: var(--rsv-mono);
  color: var(--rsv-text-dim) !important;
  font-size: 0.72rem;
}
.remnant-srv-scope .rsv-id-type {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rsv-text-dim);
}
.remnant-srv-scope .rsv-ping {
  font-family: var(--rsv-mono);
  font-size: 0.78rem;
  font-weight: 700;
}
.remnant-srv-scope .rsv-ping-green {
  color: var(--rsv-green);
}
.remnant-srv-scope .rsv-ping-yellow {
  color: var(--rsv-yellow);
}
.remnant-srv-scope .rsv-ping-red {
  color: var(--rsv-red);
}
.remnant-srv-scope .rsv-action-cell {
  display: flex;
  gap: 4px;
  align-items: center;
}
.remnant-srv-scope .rsv-tbl-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rsv-border);
  color: var(--rsv-text-dim);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.remnant-srv-scope .rsv-tbl-btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}
.remnant-srv-scope .rsv-tbl-btn-danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--rsv-red);
  border-color: rgba(239, 68, 68, 0.3);
}
.remnant-srv-scope .rsv-table-footer {
  border-top: 1px solid var(--rsv-border);
  padding-top: 12px;
  margin-top: 4px;
}
.remnant-srv-scope .rsv-view-all-link {
  font-size: 0.75rem;
  color: var(--rsv-primary);
  font-weight: 500;
  cursor: default;
}
.remnant-srv-scope .rsv-mini-search {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rsv-border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.72rem;
  color: var(--rsv-text);
  outline: none;
  max-width: 180px;
}
.remnant-srv-scope .rsv-mini-search::placeholder {
  color: var(--rsv-text-dim);
}
.remnant-srv-scope .rsv-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rsv-border);
  color: var(--rsv-text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: default;
}
.remnant-srv-scope .rsv-players-wrap {
  max-height: min(520px, 58vh);
  overflow-x: hidden;
  overflow-y: auto;
}
.remnant-srv-scope .rsv-player-slots {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.remnant-srv-scope .rsv-player-slot {
  padding: 12px 4px 12px 0;
  border-bottom: 1px solid rgba(30, 45, 74, 0.5);
  transition: background 0.2s ease;
}
.remnant-srv-scope .rsv-player-slot:last-child {
  border-bottom: none;
}
.remnant-srv-scope .rsv-player-slot:hover {
  background: rgba(255, 255, 255, 0.02);
}
.remnant-srv-scope .rsv-player-slot-row--main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.remnant-srv-scope .rsv-player-slot-row--main .rsv-player-cell {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.remnant-srv-scope .rsv-player-slot-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.remnant-srv-scope .rsv-player-slot-ping {
  flex-shrink: 0;
  font-family: var(--rsv-mono);
  font-size: 0.78rem;
  font-weight: 700;
}
.remnant-srv-scope .rsv-player-slot-row--main .rsv-action-cell {
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-player-slot-row--meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-left: 36px;
  min-width: 0;
  font-size: 0.72rem;
  color: var(--rsv-text-dim);
}
.remnant-srv-scope .rsv-player-slot-time {
  flex-shrink: 0;
  color: var(--rsv-text-sec);
  white-space: nowrap;
}
.remnant-srv-scope .rsv-steamid-toggle {
  font-family: var(--rsv-mono);
  font-size: 0.72rem;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--rsv-primary);
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.remnant-srv-scope .rsv-steamid-toggle:hover {
  text-decoration: underline;
}
.remnant-srv-scope .rsv-steamid-toggle:focus-visible {
  outline: 2px solid var(--rsv-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.remnant-srv-scope .rsv-steamid-toggle[aria-expanded='true'] {
  white-space: normal;
  word-break: break-all;
  overflow: visible;
  text-overflow: unset;
}
.remnant-srv-scope .rsv-steamid-plain {
  font-family: var(--rsv-mono);
  font-size: 0.72rem;
  color: var(--rsv-text-dim);
  word-break: break-all;
}
.remnant-srv-scope .rsv-player-slots .rsv-empty-hint {
  padding: 18px 8px !important;
  margin: 0;
}

.remnant-srv-scope .rsv-log-panel {
  margin-top: 22px;
}
.remnant-srv-scope .rsv-log-box::-webkit-scrollbar {
  width: 7px;
}
.remnant-srv-scope .rsv-log-box::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.remnant-srv-scope .rsv-log-box::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.65), rgba(99, 102, 241, 0.55));
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.35);
}
.remnant-srv-scope .rsv-log-box {
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.65) rgba(255, 255, 255, 0.04);
}
.remnant-srv-scope .rsv-log-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px 0;
}
.remnant-srv-scope .rsv-log-filter-btn {
  border: 1px solid var(--rsv-border);
  background: rgba(15, 23, 42, 0.6);
  color: var(--rsv-text-sec);
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.remnant-srv-scope .rsv-log-filter-btn:hover {
  background: rgba(59, 130, 246, 0.12);
}
.remnant-srv-scope .rsv-log-filter-btn.is-active {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.18);
  color: var(--rsv-primary);
}
.remnant-srv-scope .rsv-log-dup {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.68rem;
  opacity: 0.88;
  color: var(--rsv-text-dim);
  margin-left: auto;
  padding-left: 8px;
  align-self: center;
}
.remnant-srv-scope .rsv-log-box {
  box-sizing: border-box;
  background: #060b15;
  border: 1px solid var(--rsv-border);
  border-radius: 8px;
  padding: 12px;
  font-family: var(--rsv-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  min-height: 360px;
  max-height: min(560px, 58vh);
  height: min(440px, 52vh);
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-log-compose {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.remnant-srv-scope .rsv-log-compose-input {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rsv-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--rsv-mono);
  font-size: 0.78rem;
  color: var(--rsv-text);
  outline: none;
}
.remnant-srv-scope .rsv-log-compose {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.remnant-srv-scope .rsv-log-compose-input::placeholder {
  color: var(--rsv-text-dim);
}
.remnant-srv-scope .rsv-log-send-enter {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: rgba(168, 85, 247, 0.14);
  color: #f5e8ff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.22);
}
.remnant-srv-scope .rsv-log-send-enter:hover {
  background: rgba(168, 85, 247, 0.22);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.35);
}
.remnant-srv-scope .rsv-empty-hint {
  text-align: center;
  color: var(--rsv-text-dim);
  font-size: 0.78rem;
  padding: 18px 12px !important;
  line-height: 1.45;
}
.remnant-srv-scope .rsv-player-slots .rsv-empty {
  text-align: center;
  color: var(--rsv-text-dim);
  font-size: 0.78rem;
  padding: 12px 12px 8px;
  line-height: 1.45;
  margin: 0;
}
.remnant-srv-scope .rsv-players-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 12px 20px;
  min-height: 200px;
}
.remnant-srv-scope .rsv-players-empty-orb {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 40% 35%, rgba(168, 85, 247, 0.28), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #d8b4fe;
}
.remnant-srv-scope .rsv-players-empty-orb svg {
  width: 38px;
  height: 38px;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 10px rgba(192, 132, 252, 0.55));
}
.remnant-srv-scope .rsv-mini-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  max-width: 220px;
}
.remnant-srv-scope .rsv-mini-search-ico {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--rsv-text-dim);
  pointer-events: none;
}
.remnant-srv-scope .rsv-mini-search-ico svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
  opacity: 0.85;
}
.remnant-srv-scope .rsv-mini-search-wrap .rsv-mini-search {
  padding-left: 30px;
  max-width: none;
  width: 100%;
}
.remnant-srv-scope .rsv-players-toolbar {
  flex-wrap: nowrap;
}
.remnant-srv-scope .rsv-icon-btn svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}
.remnant-srv-scope .rsv-log-clear-btn {
  width: auto;
  min-width: 30px;
  padding: 0 10px;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
}
.remnant-srv-scope .rsv-log-clear-ico {
  display: inline-flex;
}
.remnant-srv-scope .rsv-log-clear-ico svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.remnant-srv-scope .rsv-log-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 1px 4px;
  border-radius: 3px;
}
.remnant-srv-scope .rsv-log-line-warn {
  background: rgba(245, 158, 11, 0.04);
}
.remnant-srv-scope .rsv-log-line-error {
  background: rgba(239, 68, 68, 0.05);
}
.remnant-srv-scope .rsv-log-line--error {
  border-left: 2px solid rgba(239, 68, 68, 0.45);
  padding-left: 6px;
}
.remnant-srv-scope .rsv-log-line--warn {
  border-left: 2px solid rgba(245, 158, 11, 0.45);
  padding-left: 6px;
}
.remnant-srv-scope .rsv-log-line--connect {
  border-left: 2px solid rgba(34, 211, 238, 0.4);
  padding-left: 6px;
}
.remnant-srv-scope .rsv-log-line--kill {
  border-left: 2px solid rgba(74, 222, 128, 0.4);
  padding-left: 6px;
}
.remnant-srv-scope .rsv-log-line--round {
  border-left: 2px solid rgba(56, 189, 248, 0.4);
  padding-left: 6px;
}
.remnant-srv-scope .rsv-log-line--score {
  border-left: 2px solid rgba(148, 163, 184, 0.45);
  padding-left: 6px;
}
.remnant-srv-scope .rsv-log-line--loaded {
  border-left: 2px solid rgba(52, 211, 153, 0.4);
  padding-left: 6px;
}
.remnant-srv-scope .rsv-log-line--start {
  border-left: 2px solid rgba(167, 139, 250, 0.45);
  padding-left: 6px;
}
.remnant-srv-scope .rsv-log-line--cvar {
  border-left: 2px solid rgba(129, 140, 248, 0.4);
  padding-left: 6px;
}
.remnant-srv-scope .rsv-log-line--error .rsv-log-msg {
  color: rgba(252, 165, 165, 0.95);
}
.remnant-srv-scope .rsv-log-line--warn .rsv-log-msg {
  color: rgba(253, 224, 71, 0.9);
}
.remnant-srv-scope .rsv-log-line--connect .rsv-log-msg {
  color: rgba(103, 232, 249, 0.9);
}
.remnant-srv-scope .rsv-log-line--kill .rsv-log-msg {
  color: rgba(134, 239, 172, 0.9);
}
.remnant-srv-scope .rsv-log-line--round .rsv-log-msg {
  color: rgba(125, 211, 252, 0.92);
}
.remnant-srv-scope .rsv-log-line--score .rsv-log-msg {
  color: rgba(203, 213, 225, 0.92);
}
.remnant-srv-scope .rsv-log-line--loaded .rsv-log-msg {
  color: rgba(110, 231, 183, 0.9);
}
.remnant-srv-scope .rsv-log-line--start .rsv-log-msg {
  color: rgba(196, 181, 253, 0.92);
}
.remnant-srv-scope .rsv-log-line--cvar .rsv-log-msg {
  color: rgba(165, 180, 252, 0.9);
}
.remnant-srv-scope .rsv-log-line.rsv-log-ev {
  gap: 5px;
}
.remnant-srv-scope .rsv-log-ev .rsv-log-level {
  font-size: 0.72rem;
  min-width: 2.6rem;
  opacity: 0.9;
}
.remnant-srv-scope .rsv-log-ev .rsv-log-ev-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 5px;
  flex: 1;
  min-width: 0;
  font-size: 0.92em;
  line-height: 1.35;
}
.remnant-srv-scope .rsv-log-ev-name {
  font-weight: 600;
}
.remnant-srv-scope .rsv-log-ev-kw {
  color: var(--rsv-text-dim);
  font-weight: 500;
  font-size: 0.88em;
}
.remnant-srv-scope .rsv-log-ev-chip {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0 3px;
  border-radius: 2px;
  border: 1px solid rgba(251, 113, 133, 0.4);
  color: rgba(254, 205, 211, 0.95);
  line-height: 1.15;
  vertical-align: baseline;
}
.remnant-srv-scope .rsv-log-ev-map {
  font-weight: 600;
  opacity: 0.95;
}
.remnant-srv-scope .rsv-log-line.rsv-log-ev[title] {
  cursor: help;
}
.remnant-srv-scope .rsv-log-line.rsv-log-ev.rsv-log-ev-t-kill {
  border-left: 2px solid rgba(248, 113, 113, 0.38);
  padding-left: 6px;
  background: rgba(248, 113, 113, 0.035);
}
.remnant-srv-scope .rsv-log-line.rsv-log-ev.rsv-log-ev-t-kill.rsv-log-ev-t-hs {
  border-left-color: rgba(251, 113, 133, 0.52);
  background: rgba(248, 113, 113, 0.06);
}
.remnant-srv-scope .rsv-log-line.rsv-log-ev.rsv-log-ev-t-kill .rsv-log-ev-name {
  color: rgba(254, 202, 202, 0.94);
}
.remnant-srv-scope .rsv-log-line.rsv-log-ev.rsv-log-ev-t-kill .rsv-log-ev-kw {
  color: rgba(252, 165, 165, 0.62);
}
.remnant-srv-scope .rsv-log-line.rsv-log-ev.rsv-log-ev-t-score {
  border-left: 2px solid rgba(34, 211, 238, 0.38);
  padding-left: 6px;
  background: rgba(34, 211, 238, 0.04);
}
.remnant-srv-scope .rsv-log-line.rsv-log-ev.rsv-log-ev-t-score .rsv-log-ev-name,
.remnant-srv-scope .rsv-log-line.rsv-log-ev.rsv-log-ev-t-score .rsv-log-ev-map {
  color: rgba(103, 232, 249, 0.9);
}
.remnant-srv-scope .rsv-log-line.rsv-log-ev.rsv-log-ev-t-score .rsv-log-ev-kw {
  color: rgba(125, 211, 252, 0.58);
}
.remnant-srv-scope .rsv-log-line.rsv-log-ev.rsv-log-ev-t-net {
  border-left: 2px solid rgba(148, 163, 184, 0.38);
  padding-left: 6px;
  background: rgba(148, 163, 184, 0.045);
}
.remnant-srv-scope .rsv-log-line.rsv-log-ev.rsv-log-ev-t-net .rsv-log-ev-name {
  color: rgba(203, 213, 225, 0.9);
}
.remnant-srv-scope .rsv-log-line.rsv-log-ev.rsv-log-ev-t-net .rsv-log-ev-kw {
  color: rgba(148, 163, 184, 0.78);
}
.remnant-srv-scope .rsv-log-time {
  color: var(--rsv-text-dim);
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-log-level {
  font-weight: 700;
  flex-shrink: 0;
  min-width: 52px;
}
.remnant-srv-scope .rsv-log-info {
  color: var(--rsv-primary);
}
.remnant-srv-scope .rsv-log-warn {
  color: var(--rsv-yellow);
}
.remnant-srv-scope .rsv-log-err {
  color: var(--rsv-red);
}
.remnant-srv-scope .rsv-log-msg {
  color: var(--rsv-text-sec);
}
.remnant-srv-scope .rsv-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.remnant-srv-scope .rsv-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.remnant-srv-scope .rsv-toggle-track {
  width: 30px;
  height: 16px;
  background: var(--rsv-border);
  border-radius: 8px;
  position: relative;
}
.remnant-srv-scope .rsv-toggle-input:checked + .rsv-toggle-track {
  background: rgba(168, 85, 247, 0.92);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
}
.remnant-srv-scope .rsv-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s ease;
}
.remnant-srv-scope .rsv-toggle-input:checked + .rsv-toggle-track .rsv-toggle-thumb {
  left: 16px;
}
.remnant-srv-scope .rsv-toggle-label {
  font-size: 0.72rem;
  color: var(--rsv-text-sec);
}
.remnant-srv-scope .rsv-mini-select-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rsv-border);
  color: var(--rsv-text-sec);
  font-size: 0.72rem;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: default;
}
.remnant-srv-scope .rsv-icon-btn-red:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--rsv-red);
  border-color: rgba(239, 68, 68, 0.25);
}

.remnant-srv-scope .rsv-bottom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
  align-items: start;
}
@media (max-width: 1180px) {
  .remnant-srv-scope .rsv-bottom-grid {
    grid-template-columns: 1fr;
  }
}
.remnant-srv-scope .rsv-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.remnant-srv-scope .rsv-task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--rsv-border);
  border-radius: 8px;
}
.remnant-srv-scope .rsv-task-ico-wrap {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #93c5fd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.remnant-srv-scope .rsv-task-ico-wrap svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.35));
}
.remnant-srv-scope .rsv-task-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.remnant-srv-scope .rsv-task-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--rsv-text);
}
.remnant-srv-scope .rsv-task-freq {
  font-size: 0.68rem;
  color: var(--rsv-text-dim);
}
.remnant-srv-scope .rsv-task-time {
  font-family: var(--rsv-mono);
  font-size: 0.78rem;
  color: var(--rsv-text-sec);
  font-weight: 600;
}
.remnant-srv-scope .rsv-task-status {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--rsv-green);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.remnant-srv-scope .rsv-add-task-btn {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed var(--rsv-border-bright);
  background: none;
  color: var(--rsv-text-dim);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: default;
}

.remnant-srv-scope .rsv-plugin-name {
  font-weight: 600;
  color: var(--rsv-text);
}
.remnant-srv-scope .rsv-status-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--rsv-green);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.remnant-srv-scope .rsv-plugins-wrap {
  max-height: 280px;
  overflow: auto;
}

.remnant-srv-scope .rsv-backup-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.remnant-srv-scope .rsv-backup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--rsv-border);
  border-radius: 8px;
}
.remnant-srv-scope .rsv-backup-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.28);
  color: #fcd34d;
}
.remnant-srv-scope .rsv-backup-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.35));
}
.remnant-srv-scope .rsv-backup-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.remnant-srv-scope .rsv-backup-name {
  font-family: var(--rsv-mono);
  font-size: 0.7rem;
  color: var(--rsv-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.remnant-srv-scope .rsv-backup-date {
  font-size: 0.68rem;
  color: var(--rsv-text-dim);
}
.remnant-srv-scope .rsv-backup-size {
  font-family: var(--rsv-mono);
  font-size: 0.75rem;
  color: var(--rsv-text-sec);
  font-weight: 600;
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-backup-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.remnant-srv-scope .rsv-btn-pri-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.73rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.55);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(168, 85, 247, 0.88));
  color: #fff;
  cursor: default;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.35);
}
.remnant-srv-scope .rsv-btn-pri-sm .rsv-btn-ico svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

/* Admin ? Szerverek lap fejl?c (a mock tartalom felett, k?l?n a glass k?rty?t?l) */
.remnant-admin-srv-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.remnant-admin-srv-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(420px, 100%);
}
.remnant-admin-srv-search input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--adm-border);
  background: rgba(13, 17, 23, 0.9);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.remnant-admin-srv-search input::placeholder {
  color: var(--adm-muted);
}
.remnant-admin-srv-kbd {
  font-size: 11px;
  font-weight: 600;
  color: var(--adm-muted);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--adm-border);
  background: rgba(22, 27, 34, 0.9);
  white-space: nowrap;
}

/* ???????????????????????????????????????????????
   MAIN CONTENT
??????????????????????????????????????????????? */
#main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Top bar */
#topbar {
  height: 56px;
  background: rgba(10,10,15,0.9);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 14px;
  flex-shrink: 0;
}

.topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
}

.breadcrumb-sep { color: var(--text-faint); }
.breadcrumb-current { color: var(--text); font-weight: 600; }

.topbar-spacer { flex: 1; }

.topbar-lock-status-group {
  display: flex;
  align-items: center;
  margin-left: 4px;
}
.topbar-lock-status-group[hidden] {
  display: none !important;
}
.topbar-btn-lock-status {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 140, 100, 0.45);
  background: rgba(255, 90, 60, 0.16);
  color: #ffb4a4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.topbar-btn-lock-status svg,
.topbar-btn-lock-status i {
  width: 16px;
  height: 16px;
}
.topbar-btn-lock-status.is-development {
  border-color: rgba(120, 170, 255, 0.5);
  background: rgba(70, 120, 220, 0.18);
  color: #a8c8ff;
}
.topbar-btn-lock-status.is-maintenance {
  border-color: rgba(255, 140, 100, 0.45);
  background: rgba(255, 90, 60, 0.16);
  color: #ffb4a4;
}
.topbar-btn-lock-status:hover {
  filter: brightness(1.08);
}

.topbar-social-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-btn-social .topbar-social-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.topbar-btn-social:hover {
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 6px 12px;
  width: 200px;
  transition: var(--transition-fast);
}

.topbar-search:focus-within {
  border-color: rgba(0,229,255,0.4);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.06);
}

.topbar-search input {
  background: none; border: none; outline: none;
  color: var(--text); font-size: 13px; width: 100%;
  font-family: 'DM Sans', sans-serif;
}

.topbar-search input::placeholder { color: var(--text-faint); }

.topbar-btn {
  width: 34px; height: 34px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
}

.topbar-btn:hover {
  background: var(--glass-hover);
  border-color: rgba(0,229,255,0.3);
}

button.topbar-btn {
  font: inherit;
  color: inherit;
  padding: 0;
}
.topbar-btn-friends .topbar-friends-ico {
  color: #c084fc;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.45));
  transition: filter 0.2s, color 0.2s;
}
.topbar-btn-friends:hover {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.35);
}
.topbar-btn-friends:hover .topbar-friends-ico {
  color: #e9d5ff;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.75));
}
.topbar-friends-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
}

.topbar-drag {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.topbar-drag:active { cursor: grabbing; }

.topbar-window-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--glass-border);
  flex-shrink: 0;
  -webkit-app-region: no-drag;
}

.topbar-search,
.topbar-btn,
.topbar-window-controls .topbar-btn,
.remnant-admin-exit-btn {
  -webkit-app-region: no-drag;
}

.topbar-win-btn.topbar-close:hover {
  background: rgba(255,59,48,0.18);
  border-color: rgba(255,59,48,0.45);
  color: #ff6b6b;
}

/* Page container */
#page-container {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}

#page-container::-webkit-scrollbar { width: 4px; }
#page-container::-webkit-scrollbar-track { background: transparent; }
#page-container::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }

/* Main scroll area: launcher art only on selected user pages (not profile/settings/etc.). */
#page-container:has(#page-dashboard.active),
#page-container:has(#page-leaderboard.active),
#page-container:has(#page-community.active),
#page-container:has(#page-friends.active),
#page-container:has(#page-forum.active),
#page-container:has(#page-tickets-reports.active),
#page-container:has(#page-updates.active) {
  background-color: rgba(6, 8, 14, 0.5);
  background-image:
    linear-gradient(180deg, rgba(6, 8, 14, 0.4) 0%, rgba(6, 8, 14, 0.58) 50%, rgba(6, 8, 14, 0.76) 100%),
    url("launcherbackground.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

#page-container:has(#page-crates.active) {
  background-color: rgba(6, 8, 14, 0.5);
  background-image:
    linear-gradient(180deg, rgba(6, 8, 14, 0.42) 0%, rgba(6, 8, 14, 0.62) 45%, rgba(6, 8, 14, 0.82) 100%),
    url("Assets/images/launcher_jutalom_oldal.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#page-container:has(#page-admin-punishments.active),
#page-container:has(#page-admin-mod-log.active),
#page-container:has(#page-admin-chat.active),
#page-container:has(#page-admin-tickets.active),
#page-container:has(#page-admin-users.active),
#page-container:has(#page-admin.page-admin-dash-page.active) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Pages */
.page { display: none; animation: pageIn 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.page.active { display: block; }

#page-admin-punishments.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
#page-admin-chat.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
#page-admin-chat.active > .page-title,
#page-admin-chat.active > .page-subtitle {
  flex-shrink: 0;
}
#page-admin-chat.active > .page-subtitle {
  margin-bottom: 14px;
}
#page-admin-chat.active #remnant-admin-chat-root {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#page-admin-tickets.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
#page-admin-tickets.active > .page-title,
#page-admin-tickets.active > .page-subtitle {
  flex-shrink: 0;
}
#page-admin-tickets.active > .page-subtitle {
  margin-bottom: 14px;
}
#page-admin-tickets.active #remnant-admin-tickets-root {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#page-admin-users.active {
  --adm-main-content-max: min(1320px, 98vw);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#page-admin-users.active > .page-title,
#page-admin-users.active > .page-subtitle {
  flex-shrink: 0;
}
#page-admin-users.active > .page-subtitle {
  margin-bottom: 18px;
}
#page-admin-users.active #remnant-admin-users-root {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: var(--adm-main-content-max);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding-right: 6px;
}
#page-admin-punishments.active .page-title {
  flex-shrink: 0;
  margin-bottom: 8px;
}
#page-admin-punishments.active #remnant-admin-punishments-root {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#page-admin-mod-log.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
#page-admin-mod-log.active .page-title {
  flex-shrink: 0;
  margin-bottom: 8px;
}
#page-admin-mod-log.active #remnant-admin-mod-log-root {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#page-profile {
  max-width: clamp(1380px, 92vw, 1800px);
  margin: 0 auto;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ???????????????????????????????????????????????
   GLASS COMPONENTS
??????????????????????????????????????????????? */
.glass-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: var(--transition);
}

/* Nincs univerz?lis .glass-card:hover ? a nagy profil / chart / szekci? panelek ne ?vil?gosodjanak? eg?szben.
   Hover csak kisebb, k?rtya-jelleg? / lista elemeken + gombok (glass-btn) maradnak. */
.glass-card.stat-card:hover {
  border-color: rgba(255,255,255,0.13);
  background: var(--glass-hover);
}

.glass-card.update-item:hover {
  border-color: rgba(255,255,255,0.13);
  background: var(--glass-hover);
}

.glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition-fast);
  white-space: nowrap;
  /* WebView / ?tl?tsz? r?tegek felett ?lesebb sz?veg */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  letter-spacing: 0.015em;
}

.btn-primary {
  background: linear-gradient(135deg, rgba(0,229,255,0.2), rgba(77,143,255,0.2));
  border-color: rgba(0,229,255,0.4);
  color: #5cf2ff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.btn-primary:hover {
  background: linear-gradient(135deg, rgba(0,229,255,0.3), rgba(77,143,255,0.3));
  box-shadow: 0 0 8px rgba(0,229,255,0.12);
}

.btn-pupak {
  background: linear-gradient(135deg, rgba(212, 165, 90, 0.32), rgba(139, 90, 43, 0.38));
  border-color: rgba(201, 154, 72, 0.55);
  color: #f5e6c8;
  text-shadow: 0 1px 0 rgba(45, 28, 10, 0.65);
}

.btn-pupak:hover {
  background: linear-gradient(135deg, rgba(230, 185, 105, 0.42), rgba(160, 100, 48, 0.48));
  border-color: rgba(218, 175, 95, 0.7);
  box-shadow: 0 0 10px rgba(201, 154, 72, 0.22);
  color: #fff8eb;
}

.btn-ghost {
  background: var(--glass);
  border-color: var(--glass-border);
  /* Nem a glob?lis text-dim (50% opacity) ? az sokszor ?mosottnak? t?nik gombon */
  color: rgba(232, 234, 246, 0.78);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.btn-ghost:hover {
  background: var(--glass-hover);
  color: var(--text);
  border-color: rgba(255,255,255,0.15);
  text-shadow: none;
}

.btn-danger {
  background: rgba(255,59,48,0.15);
  border-color: rgba(255,59,48,0.4);
  color: var(--red);
}

.btn-danger:hover {
  background: rgba(255,59,48,0.25);
  box-shadow: 0 0 16px rgba(255,59,48,0.2);
}

.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 8px; letter-spacing: 0.02em; }
.btn-lg { padding: 11px 22px; font-size: 14px; border-radius: 12px; }

/* Page title */
.page-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.page-subtitle {
  font-size: 13.5px;
  color: var(--text-dim);
  margin-bottom: 24px;
}

/* Section title */
.section-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}

/* Stat cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  min-width: 0;
}

.stat-card {
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.stat-card.cyan::before { background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.stat-card.blue::before { background: linear-gradient(90deg, transparent, var(--blue), transparent); }
.stat-card.purple::before { background: linear-gradient(90deg, transparent, var(--purple), transparent); }
.stat-card.green::before { background: linear-gradient(90deg, transparent, var(--green), transparent); }

.stat-label { font-size: 11px; color: var(--text-faint); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
.stat-value { font-family: 'Syne', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -1px; }
.stat-value.cyan { color: var(--cyan); }
.stat-value.blue { color: var(--blue); }
.stat-value.purple { color: var(--purple); }
.stat-value.green { color: var(--green); }

/* Launcher streak sz?m: 7 / 15 / 30 nap k?sz?b + tieren bel?l --streak-t (0?1) finom ?meleged?s? */
.remnant-streak-num {
  --streak-t: 0;
  transition: color 0.45s ease, text-shadow 0.45s ease, filter 0.45s ease;
}
.remnant-streak-num.remnant-streak-tier-0 {
  color: color-mix(in srgb, var(--text-faint) 40%, var(--blue));
  text-shadow:
    0 0 calc(6px + var(--streak-t) * 14px) rgba(77, 143, 255, calc(0.1 + var(--streak-t) * 0.38)),
    0 0 calc(14px + var(--streak-t) * 22px) rgba(0, 229, 255, calc(0.06 + var(--streak-t) * 0.18));
}
.remnant-streak-num.remnant-streak-tier-1 {
  color: color-mix(in srgb, var(--blue) calc((1 - var(--streak-t)) * 45%), var(--cyan));
  text-shadow:
    0 0 calc(8px + var(--streak-t) * 18px) rgba(0, 229, 255, calc(0.18 + var(--streak-t) * 0.42)),
    0 0 calc(20px + var(--streak-t) * 26px) rgba(77, 143, 255, calc(0.1 + var(--streak-t) * 0.28));
}
.remnant-streak-num.remnant-streak-tier-2 {
  color: color-mix(in srgb, var(--cyan) calc((1 - var(--streak-t)) * 42%), #ffc48a);
  text-shadow:
    0 0 calc(10px + var(--streak-t) * 20px) rgba(0, 229, 255, calc(0.2 + var(--streak-t) * 0.32)),
    0 0 calc(18px + var(--streak-t) * 28px) rgba(255, 149, 0, calc(0.14 + var(--streak-t) * 0.42)),
    0 calc(-1px - var(--streak-t) * 2px) calc(10px + var(--streak-t) * 12px) rgba(255, 220, 160, calc(0.12 + var(--streak-t) * 0.28));
}
.remnant-streak-num.remnant-streak-tier-3 {
  color: color-mix(in srgb, #ffc48a calc((1 - var(--streak-t)) * 38%), #ff5a30);
  text-shadow:
    0 0 calc(12px + var(--streak-t) * 22px) rgba(255, 107, 53, calc(0.28 + var(--streak-t) * 0.42)),
    0 0 calc(24px + var(--streak-t) * 26px) rgba(255, 59, 48, calc(0.16 + var(--streak-t) * 0.36)),
    0 calc(-2px - var(--streak-t) * 3px) calc(8px + var(--streak-t) * 10px) rgba(255, 235, 180, calc(0.2 + var(--streak-t) * 0.3));
}
.remnant-streak-num.remnant-streak-tier-3.remnant-streak-blaze-pulse {
  animation: remnantStreakFireBreath 2.6s ease-in-out infinite;
}
@keyframes remnantStreakFireBreath {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 10px rgba(255, 95, 48, 0.42)) drop-shadow(0 0 22px rgba(255, 55, 30, 0.22));
  }
  50% {
    filter: brightness(1.1) drop-shadow(0 0 18px rgba(255, 130, 70, 0.58)) drop-shadow(0 0 32px rgba(255, 75, 40, 0.34));
  }
}
@media (prefers-reduced-motion: reduce) {
  .remnant-streak-num.remnant-streak-tier-3.remnant-streak-blaze-pulse {
    animation: none;
  }
}

.stat-change { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.stat-change.pos { color: var(--green); }
.stat-change.neg { color: var(--red); }

/* Ranglista (XP) ? design system (Profil / Dashboard panelek) */
.remnant-lb-page .remnant-lb-page-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.remnant-lb-page .remnant-lb-page-head-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(138, 180, 230, 0.92);
  background: rgba(60, 110, 175, 0.12);
  border: 1px solid rgba(60, 110, 175, 0.28);
}
.remnant-lb-page .remnant-lb-page-head-ico svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}
.remnant-lb-page .remnant-lb-page-title {
  margin: 0 0 7px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.remnant-lb-page .remnant-lb-page-sub {
  margin: 0;
  max-width: 720px;
}
.remnant-lb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .remnant-lb-layout { grid-template-columns: 1fr; }
}
.remnant-lb-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
#page-leaderboard .remnant-lb-card,
#page-leaderboard .remnant-lb-you,
#page-leaderboard .remnant-lb-tip,
#page-leaderboard .remnant-lb-stats {
  background: linear-gradient(180deg, rgba(14, 26, 46, 0.96), rgba(7, 14, 27, 0.98));
  border: 1px solid rgba(60, 110, 175, 0.22);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 28px rgba(2, 8, 20, 0.38);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.remnant-lb-card {
  padding: 18px 18px 14px;
  overflow: hidden;
  min-width: 0;
}
.remnant-lb-card-head,
.remnant-lb-side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.remnant-lb-card-head::after,
.remnant-lb-side-head::after {
  display: none;
}
.remnant-lb-card-head-ico,
.remnant-lb-side-head-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(138, 180, 230, 0.9);
}
.remnant-lb-card-head-ico svg,
.remnant-lb-side-head-ico svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.remnant-lb-table-wrap {
  max-height: min(68vh, 620px);
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(60, 110, 175, 0.22);
  background: rgba(4, 8, 18, 0.35);
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 110, 175, 0.35) transparent;
  /* Prevent header/body column shift when the vertical scrollbar appears */
  scrollbar-gutter: stable;
}
.remnant-lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.remnant-lb-col-rank { width: 76px; }
.remnant-lb-col-level { width: 78px; }
.remnant-lb-col-xp { width: 128px; }
.remnant-lb-col-change { width: 100px; }
.remnant-lb-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(8, 12, 22, 0.98);
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(190, 205, 230, 0.72);
  border-bottom: 1px solid rgba(60, 110, 175, 0.2);
}
.remnant-lb-th-rank { width: 76px; }
.remnant-lb-th-level,
.remnant-lb-th-xp,
.remnant-lb-th-change {
  text-align: center;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.remnant-lb-th-level { width: 78px; }
.remnant-lb-th-xp { width: 128px; }
.remnant-lb-th-change { width: 100px; }
.remnant-lb-table tbody td {
  padding: 0;
  border-bottom: 1px solid rgba(60, 100, 155, 0.1);
  vertical-align: middle;
}
.remnant-lb-loading {
  padding: 24px 16px !important;
  color: var(--text-faint);
  text-align: center;
}
.remnant-lb-table tbody tr.remnant-lb-row {
  transition: filter 0.16s ease, background 0.16s ease;
}
.remnant-lb-table tbody tr.remnant-lb-row:hover {
  filter: brightness(1.03);
}
.remnant-lb-rankcell {
  width: 72px;
  padding: 10px 12px 10px 14px !important;
  white-space: nowrap;
}
.remnant-lb-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 36px;
  height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  position: relative;
}
.remnant-lb-rank-badge svg,
.remnant-lb-rank-badge .remnant-lb-rank-badge-ico {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
  flex-shrink: 0;
  display: block;
}
.remnant-lb-rank-badge-num {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.remnant-lb-rank-badge--gold {
  color: #ffe9a8;
  background: linear-gradient(135deg, rgba(255, 210, 120, 0.22), rgba(120, 80, 20, 0.18));
  border: 1px solid rgba(255, 210, 120, 0.42);
  box-shadow: 0 0 14px rgba(255, 200, 90, 0.22);
}
.remnant-lb-rank-badge--silver {
  color: #eef2f8;
  background: linear-gradient(135deg, rgba(210, 220, 235, 0.2), rgba(70, 80, 100, 0.16));
  border: 1px solid rgba(200, 210, 225, 0.38);
  box-shadow: 0 0 12px rgba(200, 210, 230, 0.16);
}
.remnant-lb-rank-badge--bronze {
  color: #e8b88a;
  background: linear-gradient(135deg, rgba(210, 140, 85, 0.2), rgba(90, 50, 25, 0.16));
  border: 1px solid rgba(205, 145, 88, 0.38);
  box-shadow: 0 0 12px rgba(200, 120, 70, 0.16);
}
.remnant-lb-rank-badge--muted {
  color: rgba(160, 178, 205, 0.88);
  background: rgba(14, 22, 38, 0.55);
  border: 1px solid rgba(60, 100, 155, 0.24);
  min-width: 30px;
  padding: 0 8px;
}
.remnant-lb-player {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 18px 14px 0;
  overflow: visible;
}
.remnant-lb-row-avatar.profile-edit-avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 2px solid var(--bg2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.remnant-lb-row-avatar.profile-edit-avatar-preview .remnant-avatar-img,
.remnant-lb-you-avatar.profile-edit-avatar-preview .remnant-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.remnant-lb-row-avatar.profile-edit-avatar-preview.profile-avatar-has-image,
.remnant-lb-you-avatar.profile-edit-avatar-preview.profile-avatar-has-image {
  color: transparent;
  background: transparent;
}
.remnant-lb-name {
  font-weight: 600;
  font-size: 14px;
  color: rgba(248, 252, 255, 0.96);
  min-width: 0;
  max-width: 100%;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Kont?ner hely az anim?ci?nak (bet?m?ret v?ltozatlan) */
  padding: 6px 4px;
  margin: -6px -4px;
  box-sizing: content-box;
}
.remnant-lb-name.remnant-name-anim-wave,
.remnant-lb-name.remnant-name-anim-bounce,
.remnant-lb-name.remnant-name-anim-float,
.remnant-lb-name.remnant-name-anim-spark {
  overflow: visible;
  text-overflow: clip;
  padding: 12px 8px;
  margin: -12px -8px;
}
.remnant-lb-table tbody tr.remnant-lb-row > td:nth-child(2) {
  overflow: visible;
}
.remnant-lb-level-cell {
  width: 78px;
  padding: 8px 14px !important;
  text-align: center;
  vertical-align: middle;
}
.remnant-lb-level-cell .remnant-profile-fr-lvl {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  background: transparent;
  font-family: 'Syne', 'Segoe UI', system-ui, sans-serif;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke: 0.55px rgba(0, 0, 0, 0.92);
  paint-order: stroke fill;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.75);
  user-select: none;
  pointer-events: none;
  vertical-align: middle;
}
.remnant-lb-level-cell .remnant-profile-fr-lvl--sprite .remnant-profile-fr-lvl-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  transform: scale(1.04);
  transform-origin: center center;
  image-rendering: auto;
  filter:
    contrast(1.28)
    saturate(1.22)
    brightness(1.1)
    drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.55))
    drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.75));
}
.remnant-lb-level-cell .remnant-profile-fr-lvl-num {
  position: relative;
  z-index: 1;
  display: block;
  transform: translateY(-1.5px);
  font-weight: 900;
  font-size: inherit;
  line-height: 1;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke: 0.55px rgba(0, 0, 0, 0.92);
  paint-order: stroke fill;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.75);
}
.remnant-lb-level-cell .remnant-profile-fr-lvl--long {
  font-size: 10px;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.92);
}
.remnant-lb-xp {
  width: 128px;
  padding: 10px 14px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 13px;
  color: rgba(168, 130, 255, 0.95);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
.remnant-lb-xp-suffix {
  font-size: 0.92em;
  font-weight: 800;
  opacity: 0.92;
}
.remnant-lb-change-cell {
  width: 100px;
  padding: 10px 12px !important;
  text-align: center;
  vertical-align: middle;
}
.remnant-lb-change {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: rgba(138, 155, 183, 0.85);
}
.remnant-lb-change.pos { color: var(--green); }
.remnant-lb-change.neg { color: var(--red); }
.remnant-lb-row--top1 {
  background:
    linear-gradient(90deg, rgba(255, 200, 90, 0.16) 0%, rgba(255, 210, 130, 0.05) 48%, transparent 78%),
    linear-gradient(180deg, rgba(48, 38, 22, 0.4), rgba(22, 18, 14, 0.2));
  box-shadow: inset 4px 0 0 0 rgba(255, 215, 130, 0.92), inset 0 0 32px rgba(255, 190, 80, 0.04);
}
.remnant-lb-row--top1 .remnant-lb-xp { color: #f0d090; }
.remnant-lb-row--top2 {
  background:
    linear-gradient(90deg, rgba(200, 210, 225, 0.14) 0%, rgba(190, 200, 215, 0.04) 48%, transparent 78%),
    linear-gradient(180deg, rgba(32, 36, 44, 0.38), rgba(18, 20, 26, 0.2));
  box-shadow: inset 4px 0 0 0 rgba(210, 218, 232, 0.88), inset 0 0 28px rgba(200, 210, 230, 0.03);
}
.remnant-lb-row--top2 .remnant-lb-xp { color: #c8d4e8; }
.remnant-lb-row--top3 {
  background:
    linear-gradient(90deg, rgba(200, 130, 75, 0.14) 0%, rgba(180, 110, 65, 0.04) 48%, transparent 78%),
    linear-gradient(180deg, rgba(44, 28, 18, 0.36), rgba(22, 16, 12, 0.2));
  box-shadow: inset 4px 0 0 0 rgba(205, 145, 88, 0.9), inset 0 0 28px rgba(200, 120, 70, 0.03);
}
.remnant-lb-row--top3 .remnant-lb-xp { color: #deb892; }
.remnant-lb-row.me {
  outline: 1px solid rgba(60, 110, 175, 0.32);
  outline-offset: -1px;
}
.remnant-lb-row.me.remnant-lb-row--top1 {
  outline-color: rgba(255, 210, 120, 0.45);
  box-shadow:
    inset 4px 0 0 0 rgba(255, 215, 130, 0.95),
    inset 0 0 28px rgba(255, 190, 80, 0.05);
}
.remnant-lb-row.me.remnant-lb-row--top2 {
  outline-color: rgba(200, 210, 225, 0.4);
  box-shadow:
    inset 4px 0 0 0 rgba(210, 218, 232, 0.9),
    inset 0 0 24px rgba(200, 210, 230, 0.04);
}
.remnant-lb-row.me.remnant-lb-row--top3 {
  outline-color: rgba(205, 145, 88, 0.42);
  box-shadow:
    inset 4px 0 0 0 rgba(205, 145, 88, 0.92),
    inset 0 0 24px rgba(200, 120, 70, 0.04);
}
.remnant-lb-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(60, 100, 155, 0.12);
  font-size: 12px;
  font-weight: 600;
  color: rgba(138, 155, 183, 0.85);
}
.remnant-lb-card-foot-ico {
  display: inline-flex;
  color: rgba(138, 180, 230, 0.85);
  opacity: 0.85;
}
.remnant-lb-card-foot-ico svg {
  width: 14px;
  height: 14px;
}
.remnant-lb-you,
.remnant-lb-tip,
.remnant-lb-stats {
  padding: 16px 16px 14px;
}
.remnant-lb-you-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.remnant-lb-you-avatar.profile-edit-avatar-preview {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.remnant-lb-you-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.remnant-lb-you-level {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.remnant-lb-you-level .remnant-profile-fr-lvl {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  background: transparent;
  font-family: 'Syne', 'Segoe UI', system-ui, sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke: 0.65px rgba(0, 0, 0, 0.92);
  paint-order: stroke fill;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.75);
  user-select: none;
  pointer-events: none;
}
.remnant-lb-you-level .remnant-profile-fr-lvl--sprite .remnant-profile-fr-lvl-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  transform: scale(1.06);
  transform-origin: center center;
  filter:
    contrast(1.26)
    saturate(1.2)
    brightness(1.08)
    drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.5))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.remnant-lb-you-level .remnant-profile-fr-lvl-num {
  position: relative;
  z-index: 1;
  display: block;
  transform: translateY(-1.5px);
  font-weight: 900;
  font-size: inherit;
  line-height: 1;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke: 0.65px rgba(0, 0, 0, 0.92);
  paint-order: stroke fill;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.75);
}
.remnant-lb-you-level .remnant-profile-fr-lvl--long {
  font-size: 17px;
  letter-spacing: -0.05em;
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.92);
}
.remnant-lb-you-rank {
  font-family: 'Syne', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: rgba(160, 178, 205, 0.95);
  line-height: 1;
}
.remnant-lb-you-deltas {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
}
.remnant-lb-you-deltas .stat-change { margin-top: 0; }
.remnant-lb-you--tier1 .remnant-lb-you-rank {
  color: #ffe9a8;
  text-shadow: 0 0 18px rgba(255, 210, 120, 0.35);
}
.remnant-lb-you--tier1 .remnant-lb-you-avatar { border-color: rgba(255, 210, 120, 0.45); box-shadow: 0 0 16px rgba(255, 200, 100, 0.18); }
.remnant-lb-you--tier2 .remnant-lb-you-rank {
  color: #eef2f8;
  text-shadow: 0 0 14px rgba(200, 210, 230, 0.28);
}
.remnant-lb-you--tier2 .remnant-lb-you-avatar { border-color: rgba(200, 210, 225, 0.4); }
.remnant-lb-you--tier3 .remnant-lb-you-rank {
  color: #e8b88a;
  text-shadow: 0 0 14px rgba(205, 140, 90, 0.28);
}
.remnant-lb-you--tier3 .remnant-lb-you-avatar { border-color: rgba(205, 145, 88, 0.4); }
.remnant-lb-tip-text {
  margin: 0;
}
.remnant-lb-stats-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.remnant-lb-stats-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.remnant-lb-stats-row dt {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(138, 155, 183, 0.9);
  line-height: 1.35;
}
.remnant-lb-stats-row dd {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(138, 180, 230, 0.95);
  text-align: right;
  white-space: nowrap;
}

/* Dashboard: top lista ? a # jel kicsit kisebb a sz?mn?l */
.remnant-dash-lb-rank {
  display: inline-flex;
  align-items: baseline;
  gap: 0.06em;
}
.remnant-dash-lb-rank .remnant-dash-lb-hash {
  font-size: 0.68em;
  font-weight: 800;
  opacity: 0.88;
  line-height: 1;
}
.remnant-dash-lb-rank.remnant-dash-lb-rank--empty .remnant-dash-lb-hash {
  display: none;
}

/* XP Bar */
.xp-bar-wrap {
  margin-top: 10px;
}
.xp-bar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.xp-bar-label { font-size: 12px; color: var(--text-dim); }
.xp-bar-value { font-size: 12px; color: var(--cyan); font-weight: 600; }

.xp-bar-bg {
  width: 100%; height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  border-radius: 6px;
  width: 0%;
  transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 0 8px var(--cyan-glow);
}

/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ???????????????????????????????????????????????
   DASHBOARD PAGE
??????????????????????????????????????????????? */
.activity-feed { max-height: 260px; overflow-y: auto; scrollbar-width: none; }
.activity-feed::-webkit-scrollbar { display: none; }
.remnant-profile-recent-activity-feed {
  max-height: 260px;
  margin-top: 4px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.activity-item:last-child { border-bottom: none; }

.activity-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.activity-text { flex: 1; }
.activity-title { font-size: 13px; font-weight: 500; }
.activity-time { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* Dashboard game server blocks */
.dashboard-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  min-width: 0;
}
.dashboard-game-card {
  padding: 12px;
  border-radius: 12px;
}
.dashboard-game-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dashboard-game-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-main);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.dashboard-game-title-wrap { min-width: 0; }
.dashboard-game-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.dashboard-game-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-faint);
}
.dashboard-server-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dashboard-server-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border-radius: 9px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
}
.dashboard-server-status {
  font-size: 12px;
  font-weight: 700;
}
.dashboard-server-status.online { color: var(--green); }
.dashboard-server-status.offline { color: var(--red); }
.dashboard-server-name {
  min-width: 0;
  font-size: 12px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-server-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.dashboard-server-ping {
  font-weight: 700;
  color: var(--text-main);
}

/* Mini chart placeholder */
.mini-chart {
  height: 120px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 4px;
}

.chart-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-height: 8px;
  position: relative;
  cursor: pointer;
  transition: var(--transition-fast);
}

.chart-bar:hover { opacity: 0.8; }

.chart-bar.cyan { background: linear-gradient(to top, rgba(0,229,255,0.3), rgba(0,229,255,0.6)); border: 1px solid rgba(0,229,255,0.3); border-bottom: none; }
.chart-bar.blue { background: linear-gradient(to top, rgba(77,143,255,0.3), rgba(77,143,255,0.6)); border: 1px solid rgba(77,143,255,0.3); border-bottom: none; }
.chart-bar.purple { background: linear-gradient(to top, rgba(168,85,247,0.3), rgba(168,85,247,0.6)); border: 1px solid rgba(168,85,247,0.3); border-bottom: none; }

.chart-labels { display: flex; gap: 6px; padding: 4px; }
.chart-label { flex: 1; text-align: center; font-size: 10px; color: var(--text-faint); }
/* Mai nap (H?V): arany / meleg kiemel?s ? mindig az aktu?lis helyi nap */
.chart-label.remnant-weekly-today {
  color: #ffecc8;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 5px 2px 3px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255, 210, 120, 0.18), rgba(255, 180, 60, 0.08));
  box-shadow:
    0 0 0 1px rgba(255, 205, 110, 0.75),
    0 0 14px rgba(255, 185, 70, 0.22);
  text-shadow: 0 0 12px rgba(255, 200, 100, 0.35);
}
.remnant-weekly-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-width: 0;
  border-radius: 8px;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.remnant-weekly-col--today {
  padding: 0 2px 1px;
  background: rgba(255, 195, 90, 0.07);
  box-shadow:
    0 0 0 1px rgba(255, 205, 120, 0.55),
    inset 0 0 24px rgba(255, 200, 100, 0.06);
}
.chart-bar.remnant-weekly-bar--today {
  box-shadow:
    0 0 0 2px rgba(255, 215, 140, 0.92),
    0 0 16px rgba(255, 185, 70, 0.38),
    0 -6px 22px rgba(255, 200, 100, 0.12);
  filter: saturate(1.1) brightness(1.07);
}

/* Heti diagram: egyedi tooltip (nat?v title helyett) ? glass / launcher hangulat */
.remnant-weekly-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12000;
  pointer-events: none;
  padding: 11px 14px 12px;
  border-radius: var(--radius-sm);
  background: rgba(18, 18, 28, 0.96);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 229, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-width: 128px;
  max-width: min(260px, calc(100vw - 24px));
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px)) scale(0.98);
  transition: opacity 0.14s ease, transform 0.14s ease;
  font-family: 'DM Sans', sans-serif;
}
.remnant-weekly-tooltip.remnant-weekly-tooltip--open {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 12px)) scale(1);
}
.remnant-weekly-tooltip-day {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.2;
}
.remnant-weekly-tooltip-val {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* ???????????????????????????????????????????????
   DASHBOARD ? Remnant mockup (glass, glow, Lucide; logika ?rintetlen)
??????????????????????????????????????????????? */
#page-dashboard {
  --dash-glass: rgba(10, 14, 24, 0.88);
  --dash-border: rgba(255, 255, 255, 0.06);
  --dash-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  max-width: none;
  width: 100%;
  margin: 0;
}
#page-dashboard .remnant-dash-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
#page-dashboard .remnant-dash-page-head-main {
  min-width: 0;
}
#page-dashboard .remnant-dash-welcome-name {
  color: #e9d5ff;
  font-weight: 800;
  text-shadow:
    0 0 18px rgba(168, 85, 247, 0.55),
    0 0 36px rgba(34, 211, 238, 0.2);
}
#page-dashboard .remnant-dash-quick-slot {
  flex-shrink: 0;
  min-width: 140px;
  min-height: 36px;
}
#page-dashboard .remnant-dash-panel.glass-card {
  background: var(--dash-glass);
  border: 1px solid var(--dash-border);
  box-shadow: var(--dash-shadow);
  position: relative;
  overflow: hidden;
}
#page-dashboard .remnant-dash-panel.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.35), rgba(34, 211, 238, 0.25), transparent);
  pointer-events: none;
  opacity: 0.85;
}
#page-dashboard .remnant-dash-section-title {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
  font-size: 15px;
  letter-spacing: -0.02em;
}
#page-dashboard .remnant-dash-section-title::after {
  display: none;
}
#page-dashboard .remnant-dash-section-title--servers {
  margin-bottom: 14px;
}
#page-dashboard .remnant-dash-stat-grid .stat-card.glass-card {
  background: var(--dash-glass);
  border: 1px solid var(--dash-border);
  box-shadow: var(--dash-shadow);
  padding: 18px 18px 18px 20px;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
#page-dashboard .remnant-dash-stat-grid .stat-card.glass-card:hover {
  border-color: rgba(168, 85, 247, 0.22);
  box-shadow:
    var(--dash-shadow),
    0 0 28px rgba(168, 85, 247, 0.08);
}
#page-dashboard .remnant-dash-stat-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
#page-dashboard .remnant-dash-stat-copy {
  flex: 1;
  min-width: 0;
}
#page-dashboard #remnant-dash-playtime-value {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.08;
  letter-spacing: -0.06em;
}
#page-dashboard .remnant-dash-playtime-breakdown {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--text-dim);
  max-width: 100%;
}
#page-dashboard .remnant-dash-playtime-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
}
#page-dashboard .remnant-dash-playtime-line > span:first-child {
  flex-shrink: 0;
}
#page-dashboard .remnant-dash-playtime-line > span:last-child {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#page-dashboard .remnant-dash-stat-iconbox {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 0 18px rgba(0, 0, 0, 0.25),
    inset 0 0 18px rgba(255, 255, 255, 0.02);
}
#page-dashboard .remnant-dash-stat-iconbox svg {
  width: 21px;
  height: 21px;
}
#page-dashboard .remnant-dash-stat-iconbox--cyan {
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.24);
  color: #5cf2ff;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.35));
}
#page-dashboard .remnant-dash-stat-iconbox--purple {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.24);
  color: #d8b4fe;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.45));
}
#page-dashboard .remnant-dash-stat-iconbox--trophy {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.24);
  color: #e9d5ff;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.45));
}
#page-dashboard .remnant-dash-stat-iconbox--green {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.28);
  color: #6ee7b7;
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.35));
}
#page-dashboard .remnant-dash-mid-grid {
  gap: 16px;
  align-items: stretch;
}
#page-dashboard .remnant-dash-weekly-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
#page-dashboard .remnant-dash-weekly-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#page-dashboard .remnant-dash-weekly-body .mini-chart {
  flex: 1 1 auto;
  min-height: 120px;
  height: auto;
  gap: 8px;
  padding: 8px 6px 4px;
}
#page-dashboard .remnant-dash-weekly-body .chart-bar {
  border-radius: 10px 10px 6px 6px;
}
#page-dashboard .remnant-dash-weekly-body .chart-labels {
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: 2px;
  gap: 8px;
}
#page-dashboard .remnant-dash-weekly-body .chart-label {
  font-size: 11px;
  font-weight: 600;
}
#page-dashboard .remnant-dash-activity-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
#page-dashboard .remnant-dash-activity-feed.activity-feed {
  overflow-x: hidden;
  max-height: min(320px, 42vh);
  flex: 1 1 auto;
  padding-right: 4px;
}
#page-dashboard .activity-item {
  padding: 10px 10px;
  margin: 0;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.18s ease, box-shadow 0.2s ease;
}
#page-dashboard .activity-item:hover {
  background: rgba(168, 85, 247, 0.06);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.08);
}
#page-dashboard .activity-icon.remnant-dash-act-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.03);
}
#page-dashboard .activity-icon.remnant-dash-act-ico--level {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.22);
  color: #6ee7b7;
}
#page-dashboard .activity-icon.remnant-dash-act-ico--streak {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.28);
  color: #fdba74;
  filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.25));
}
#page-dashboard .activity-icon.remnant-dash-act-ico--leaderboard {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.28);
  color: #fde047;
  filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.2));
}
#page-dashboard .activity-icon.remnant-dash-act-ico--spin {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.28);
  color: #d8b4fe;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.22));
}
#page-dashboard .activity-icon.remnant-dash-act-ico--pupak {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.28);
  color: #7dd3fc;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.2));
}
#page-dashboard .activity-icon.remnant-dash-act-ico svg {
  width: 18px;
  height: 18px;
}
#page-dashboard .activity-title {
  font-weight: 600;
}
#page-dashboard .remnant-dash-game-grid.dashboard-game-grid {
  gap: 14px;
}
#page-dashboard .dashboard-game-card.glass-card {
  background: var(--dash-glass);
  border: 1px solid var(--dash-border);
  box-shadow: var(--dash-shadow);
  padding: 14px 14px 12px;
  transition: border-color 0.18s ease, box-shadow 0.22s ease;
}
#page-dashboard .dashboard-game-card.glass-card:hover {
  border-color: rgba(168, 85, 247, 0.2);
  box-shadow:
    var(--dash-shadow),
    0 0 26px rgba(0, 0, 0, 0.35);
}
#page-dashboard .dashboard-game-head {
  margin-bottom: 12px;
}
#page-dashboard .dashboard-server-row {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
#page-dashboard .dashboard-server-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 0;
}
#page-dashboard .dashboard-server-status svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
}
#page-dashboard .dashboard-server-status.online {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.35);
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.22);
}
#page-dashboard .dashboard-server-status.offline {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.35);
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.18);
}

/* Ugyanaz az aktivit?s-sor a profil vitrinben: Lucide ikon doboz */
.activity-feed .activity-icon.remnant-dash-act-ico {
  font-size: 0;
}
.activity-feed .activity-icon.remnant-dash-act-ico--level {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.2);
  color: #6ee7b7;
}
.activity-feed .activity-icon.remnant-dash-act-ico--streak {
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.22);
  color: #fdba74;
}
.activity-feed .activity-icon.remnant-dash-act-ico--leaderboard {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.22);
  color: #fde047;
}
.activity-feed .activity-icon.remnant-dash-act-ico--spin {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.22);
  color: #d8b4fe;
}
.activity-feed .activity-icon.remnant-dash-act-ico--pupak {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.22);
  color: #7dd3fc;
}
.activity-feed .activity-icon.remnant-dash-act-ico svg {
  width: 18px;
  height: 18px;
}

/* ???????????????????????????????????????????????
   PROFILE PAGE
??????????????????????????????????????????????? */
.profile-banner {
  height: auto;
  aspect-ratio: var(--profile-banner-aspect) / 1;
  min-height: 140px;
  max-height: 220px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(135deg, rgba(0,229,255,0.2) 0%, rgba(168,85,247,0.2) 50%, rgba(77,143,255,0.2) 100%);
  position: relative;
  overflow: hidden;
}

.profile-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: 
    radial-gradient(circle at 30% 50%, rgba(0,229,255,0.15) 0%, transparent 60%),
    radial-gradient(circle at 70% 50%, rgba(168,85,247,0.15) 0%, transparent 60%);
}
.profile-banner.profile-banner--has-image::before {
  display: none;
}

.profile-banner-grid {
  position: absolute; inset: 0;
  background-image: 
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}
.profile-banner.profile-banner--has-image .profile-banner-grid {
  display: none;
}

.profile-main {
  padding: 12px 28px 28px;
  position: relative;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane)::before {
  content: '';
  position: absolute;
  top: var(--profile-banner-h);
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--top-block-full-bg, linear-gradient(180deg, rgba(66, 70, 82, 0.9), rgba(40, 44, 54, 0.92)));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: -1;
  pointer-events: none;
}
/* Teljes k?perny?s: egyetlen s?v a k?rtya teljes sz?less?g?n (bal sz?rny + k?z?p + jobb sz?rny), ugyanazon a f?gg?leges s?vban mint a m?alkot?s oldals? blokkok. */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-full::before {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: none;
  bottom: auto;
  height: var(--profile-topblock-band-h, calc(100vh - var(--profile-topblock-band-top, var(--profile-banner-h))));
  z-index: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Teljes k?perny?s felszerelt k?p/vide?: kit?lti a s?vot (nincs cover-v?g?s, nincs letterbox) */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-full-has-image::before {
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-full-has-video .remnant-profile-topblock-video {
  object-fit: fill !important;
  object-position: center center !important;
}
/* Teljes h?tt?r: a profil oldallal egy?tt g?rget (#page-container), nem bels? scroll / sticky. */
:is(#remnant-profile-view-pane).profile-topblock-full:is(.profile-topblock-full-has-image, .profile-topblock-full-has-video) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane) .remnant-profile-topblock-video {
  position: absolute;
  top: var(--profile-banner-h);
  left: 0;
  right: 0;
  height: var(--profile-topblock-band-h, calc(100vh - var(--profile-topblock-band-top, var(--profile-banner-h))));
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  z-index: 0;
  pointer-events: none;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-full-has-video::before {
  background: transparent !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-full-has-image.remnant-profile-layout--hud {
  background: transparent !important;
  box-shadow: none !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-full-has-image > .profile-banner,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-full-has-image > .profile-main,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-full-has-image > .profile-edit-wrap {
  position: relative;
  z-index: 2;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).profile-topblock-full-has-image > .remnant-profile-theme-layer {
  top: calc(var(--profile-banner-h, 0px) + var(--profile-topblock-band-h, 0px)) !important;
  bottom: 0 !important;
  height: auto !important;
  opacity: 0.88 !important;
  pointer-events: none;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-full::after {
  content: none;
  display: none;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-side::before {
  left: 0;
  right: auto;
  width: max(0px, calc((100% - min(100%, var(--profile-core-w))) / 2));
  border: none;
  box-shadow: none;
  background: var(--top-block-left-bg, transparent);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-side::after {
  content: '';
  position: absolute;
  top: var(--profile-banner-h);
  right: 0;
  bottom: 0;
  width: max(0px, calc((100% - min(100%, var(--profile-core-w))) / 2));
  border-radius: 12px;
  border: none;
  background: var(--top-block-right-bg, transparent);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
  z-index: -1;
  pointer-events: none;
}
.profile-steam-shell {
  display: grid;
  grid-template-columns: minmax(0, var(--profile-core-w));
  gap: 0;
  justify-content: center;
  align-items: start;
  position: relative;
  z-index: 1;
}
.profile-steam-shell-core { min-width: 0; }
.profile-media-rail {
  display: none;
}
.profile-media-panel {
  width: 100%;
}
.profile-media-rail .profile-media-panel + .profile-media-panel {
  display: none;
}
.profile-notes-card {
  --notes-head-bg: linear-gradient(180deg, rgba(58, 76, 118, 0.64), rgba(26, 36, 68, 0.36));
  --notes-body-bg: linear-gradient(180deg, rgba(20, 28, 48, 0.34), rgba(11, 17, 33, 0.20));
  margin-top: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  background: var(--notes-body-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.profile-steam-shell-core > .profile-notes-card {
  order: 999;
}
.profile-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: var(--notes-head-bg);
}
.profile-notes-title {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(232, 234, 246, 0.98);
}
.profile-notes-follow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(232, 234, 246, 0.86);
  user-select: none;
}
.profile-notes-follow input {
  width: 13px;
  height: 13px;
  accent-color: var(--cyan);
}
.profile-notes-help {
  color: rgba(0,229,255,0.85);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.profile-notes-body {
  padding: 10px 12px 14px;
  background: var(--notes-body-bg);
}
.profile-notes-entry {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.profile-notes-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, rgba(0,229,255,0.18), rgba(168,85,247,0.2));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: rgba(232, 234, 246, 0.96);
}
.profile-notes-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.profile-notes-input {
  width: 100%;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10, 16, 30, 0.72);
  color: rgba(232, 234, 246, 0.92);
  padding: 0 12px;
  font-size: 16px;
  font-style: italic;
  font-weight: 500;
}
.profile-notes-input::placeholder {
  color: rgba(232, 234, 246, 0.45);
}
#remnant-profile-notes-actions[hidden] {
  display: none !important;
}
.profile-notes-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.profile-notes-btn {
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(232, 234, 246, 0.9);
  font-size: 13px;
  font-weight: 700;
  padding: 0 10px;
  cursor: pointer;
}
.profile-notes-btn:hover {
  background: rgba(255,255,255,0.09);
}
.profile-notes-btn-help {
  color: rgba(196, 207, 230, 0.92);
  background: rgba(120, 138, 176, 0.18);
  border-color: rgba(152, 169, 204, 0.28);
}
.profile-notes-btn-emoji {
  width: 30px;
  padding: 0;
}
.profile-notes-btn-send {
  color: #ddf8a8;
  background: linear-gradient(180deg, rgba(106, 146, 31, 0.92), rgba(73, 101, 21, 0.92));
  border-color: rgba(181, 228, 92, 0.42);
}
.profile-notes-list {
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.profile-notes-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.profile-notes-item:last-child {
  border-bottom: none;
}
.profile-notes-item-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.profile-notes-item-name {
  font-size: 16px;
  line-height: 1.15;
  font-weight: 700;
  color: rgba(238, 241, 250, 0.96);
  cursor: pointer;
}
.profile-notes-item-name:hover {
  text-decoration: underline;
}
.profile-notes-item-time {
  font-size: 13px;
  line-height: 1.15;
  font-weight: 600;
  color: rgba(232, 234, 246, 0.42);
}
.profile-notes-item-text {
  margin-top: 5px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: rgba(232, 234, 246, 0.95);
}
.profile-notes-avatar.profile-notes-avatar--clickable { cursor: pointer; }
.profile-notes-item-actions {
  position: absolute;
  right: 0;
  top: 8px;
  display: none;
}
.profile-notes-item:hover .profile-notes-item-actions {
  display: inline-flex;
}
.profile-notes-item-action {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(232,234,246,0.9);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.profile-notes-item-action--report {
  color: #ff9d9d;
  border-color: rgba(255,120,120,0.38);
  background: rgba(255,84,84,0.12);
}
.profile-notes-item.reported .profile-notes-item-text,
.profile-notes-item.reported .profile-notes-item-meta {
  display: none;
}
.profile-notes-item-reported {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
}
.profile-notes-item.reported .profile-notes-item-reported {
  display: flex;
}
.profile-notes-reported-label {
  font-size: 14px;
  font-weight: 700;
  color: rgba(232,234,246,0.78);
}
.profile-notes-undo-btn {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: rgba(232,234,246,0.92);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.profile-note-spoiler {
  background: #000;
  color: #000;
  padding: 0 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.profile-note-spoiler.revealed {
  color: rgba(232,234,246,0.95);
  background: rgba(255,255,255,0.12);
}
.profile-notes-pagination {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.profile-notes-page-btn {
  min-width: 26px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(232,234,246,0.84);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 6px;
}
.profile-notes-page-btn.active {
  color: #fff;
  border-color: rgba(0,229,255,0.35);
  background: rgba(0,229,255,0.15);
}
.profile-notes-page-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.remnant-notes-format-modal {
  width: min(940px, calc(100vw - 40px));
  max-width: 940px;
  background: linear-gradient(180deg, rgba(20, 28, 45, 0.98), rgba(13, 19, 31, 0.98));
}
.remnant-notes-format-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.remnant-notes-format-table th,
.remnant-notes-format-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  text-align: left;
  font-size: 14px;
}
.remnant-notes-format-table th {
  color: rgba(232,234,246,0.62);
  font-weight: 700;
}
.remnant-notes-format-table td:last-child {
  color: rgba(232,234,246,0.9);
}
.remnant-notes-format-sample-title { color: rgba(193, 204, 228, 0.95); font-size: 36px; font-weight: 800; }
.remnant-notes-format-sample-h2 { color: rgba(184, 196, 221, 0.92); font-size: 31px; font-weight: 800; }
.remnant-notes-format-sample-h3 { color: rgba(174, 187, 213, 0.9); font-size: 26px; font-weight: 800; }
.profile-steam-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 14px;
}
.profile-center-col { min-width: 0; }
.remnant-profile-showcase-ordered-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.profile-top-hero {
  margin-bottom: 12px;
}
.profile-right-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-showcase-card {
  padding: 12px;
  border-radius: 12px;
}
.profile-showcase-title {
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.profile-showcase-stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.profile-showcase-stat-num {
  font-family: 'Syne', sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}
.profile-showcase-stat-text {
  font-size: 12px;
  color: var(--text-dim);
}
.profile-items-showcase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.profile-items-showcase-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-width: 0;
}
.profile-items-showcase-head .profile-showcase-title {
  margin-bottom: 0;
  min-width: 0;
}
.profile-items-showcase-head .profile-items-showcase-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
  margin: 0;
}
.profile-items-showcase-head .profile-showcase-stat-num {
  font-size: 18px;
  line-height: 1;
}
.profile-items-showcase-head .profile-showcase-stat-text {
  font-size: 11px;
  white-space: nowrap;
}
.profile-items-showcase-summary {
  min-width: 0;
}
.profile-items-slot-row {
  display: grid;
  grid-template-columns: repeat(5, 112px);
  gap: 12px;
  justify-content: end;
}
.profile-items-equipped-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, 112px);
  gap: 12px;
  justify-content: end;
}
.profile-items-equipped-slot {
  width: 112px;
  height: 112px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
  color: rgba(232,234,246,0.86);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.profile-items-slot {
  width: 112px;
  height: 112px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.04);
  color: rgba(232,234,246,0.82);
  font-family: 'Syne', sans-serif;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}
.profile-items-slot.has-item,
.profile-items-equipped-slot.has-item {
  border-style: solid;
  border-color: rgba(0,229,255,0.42);
  background-color: transparent;
}
.profile-items-slot-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(8, 11, 18, 0.9);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.24) inset;
}
.profile-items-slot-remove:hover {
  background: rgba(220, 40, 60, 0.9);
}
.profile-items-slot-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: rgba(232,234,246,0.82);
}
.profile-items-slot:hover {
  border-color: rgba(0,229,255,0.55);
  background-color: rgba(0,229,255,0.09);
  transform: translateY(-1px);
}
.profile-items-slot:focus-visible {
  outline: 2px solid rgba(0,229,255,0.45);
  outline-offset: 1px;
}
.profile-achv-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}
.profile-achv-tile {
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(255,255,255,0.05);
}
.profile-achv-slot {
  position: relative;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: rgba(255,255,255,0.05);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI", sans-serif;
  font-variant-emoji: emoji;
  transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}
.profile-achv-slot--empty {
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(232,234,246,0.82);
  cursor: default;
  align-self: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 5px 10px;
  border-radius: 8px;
  border-style: dashed;
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
}
.profile-achv-row > .badge {
  align-self: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  white-space: normal;
  word-break: break-word;
  font-family: 'Syne', "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-variant-emoji: emoji;
}
.profile-achv-slot--editor.profile-achv-slot--empty {
  cursor: pointer;
}
.profile-achv-slot--editor.profile-achv-slot--empty:hover {
  border-color: rgba(0,229,255,0.45);
  background-color: rgba(0,229,255,0.08);
  transform: translateY(-1px);
}
.profile-achv-editor-slot-hold {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.profile-achv-editor-slot-hold:hover .badge {
  filter: brightness(1.06);
}
.profile-achv-editor-slot-hold:focus-visible {
  outline: 2px solid rgba(0,229,255,0.45);
  outline-offset: 2px;
  border-radius: 10px;
}
.profile-achv-editor-slot-hold > .badge {
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  white-space: normal;
  word-break: break-word;
  font-family: 'Syne', "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-variant-emoji: emoji;
}
.profile-achv-editor-slot-hold .profile-items-slot-remove {
  width: 22px;
  height: 22px;
  font-size: 14px;
  top: 4px;
  right: 4px;
}
.profile-ach-showcase-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 520px) {
  .profile-ach-showcase-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.profile-ach-showcase-picker-btn {
  text-align: left;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  padding: 8px 10px;
  cursor: pointer;
  color: rgba(232,234,246,0.92);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  transition: border-color 0.12s ease, background 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}
.profile-ach-showcase-picker-btn:hover {
  border-color: rgba(0,229,255,0.4);
  background: rgba(0,229,255,0.08);
}
.profile-ach-showcase-picker-btn.is-selected {
  border-color: rgba(0,229,255,0.65);
  box-shadow: 0 0 0 1px rgba(0,229,255,0.25) inset;
}
.profile-ach-showcase-picker-btn .pick-ico {
  font-size: 16px;
  margin-right: 0;
}
.profile-ach-showcase-picker-btn .pick-banner {
  display: block;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}
.profile-ach-showcase-picker-btn .pick-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.remnant-ach-banner-badge-img--picker {
  display: block;
  width: 100%;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  object-position: center;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
}
.remnant-ach-banner-badge-img--showcase,
.remnant-badge-banner-img--showcase {
  display: block;
  width: 100%;
  height: auto;
  max-height: 68px;
  object-fit: contain;
  object-position: center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
}
.profile-achv-row > .badge.badge--ach-banner,
.profile-achv-row > .badge.badge--design-banner,
.profile-achv-editor-slot-hold > .badge.badge--ach-banner,
.profile-achv-editor-slot-hold > .badge.badge--design-banner {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block;
  line-height: 0;
}
.profile-recent-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.profile-recent-row:last-child { border-bottom: none; }
.profile-recent-game {
  font-size: 12px;
  font-weight: 600;
}
.profile-recent-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.profile-recent-hours {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}
.profile-info-box-card {
  padding: 0;
  overflow: hidden;
}
.profile-info-box-head {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.profile-info-box-frame {
  position: relative;
  padding: 14px 16px 16px;
  background: rgba(6, 10, 18, 0.35);
}
.profile-info-box-corners {
  position: relative;
}
.profile-info-box-corners::before,
.profile-info-box-corners::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.profile-info-box-corners::before {
  top: 6px;
  left: 8px;
  border-right: none;
  border-bottom: none;
}
.profile-info-box-corners::after {
  bottom: 6px;
  right: 8px;
  border-left: none;
  border-top: none;
}
.profile-info-box-meta {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.profile-info-box-body {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  max-height: none;
  height: auto;
  resize: none;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-main);
  font-family: inherit;
}
.profile-info-box-body:focus {
  outline: none;
  border-color: rgba(0, 229, 255, 0.35);
}
.profile-info-box-body--readonly {
  cursor: default;
}
.profile-info-box-body--edit {
  min-height: 0;
  max-height: none;
  height: auto;
}
.profile-info-box-footer {
  text-align: center;
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 10px;
  letter-spacing: 0.25em;
}
.profile-info-box-title-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-info-box-title-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.profile-info-box-title-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.profile-info-box-title-input:focus {
  outline: none;
}
.profile-side-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}
.profile-side-kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}
.profile-side-kv .k { color: var(--text-dim); }
.profile-side-kv .v { color: var(--text); font-weight: 600; }
.profile-mini-group {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.profile-mini-group-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.profile-mini-group-name {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-mini-group-meta {
  font-size: 11px;
  color: var(--text-faint);
}
.profile-edit-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.profile-edit-showcase-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  font-size: 12px;
}
.profile-edit-showcase-opt input { accent-color: var(--cyan); }
.profile-edit-showcase-select-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  max-width: 520px;
  margin-top: 8px;
}
.profile-edit-showcase-select-row .profile-edit-showcase-preview-select-wrap {
  flex: 1 1 200px;
  min-width: 160px;
}
.profile-edit-showcase-preview-select-wrap {
  position: relative;
}
.profile-edit-showcase-preview-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.profile-edit-showcase-preview-trigger::after {
  content: '?';
  flex-shrink: 0;
  font-size: 10px;
  opacity: 0.65;
}
.profile-edit-showcase-preview-menu {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: min(50vh, 280px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(14, 18, 28, 0.98);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.profile-edit-showcase-preview-opt {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(232, 234, 246, 0.95);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.profile-edit-showcase-preview-opt--owned:hover {
  background: rgba(255, 255, 255, 0.06);
}
.profile-edit-showcase-preview-opt--locked {
  position: relative;
  color: rgba(160, 168, 190, 0.75);
  opacity: 0.48;
  filter: blur(0.45px);
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}
.profile-edit-showcase-preview-opt--locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
.profile-edit-showcase-equipped-card {
  margin-top: 12px;
}
.profile-edit-showcase-equip-lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(232, 234, 246, 0.88);
  white-space: nowrap;
}
.profile-edit-showcase-equip-lbl input { accent-color: var(--cyan); }
.profile-edit-showcase-equipped-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  min-height: 0;
}
.profile-edit-showcase-equipped-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.profile-edit-showcase-equipped-row--dragging {
  opacity: 0.96;
  position: relative;
  z-index: 4;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}
.profile-edit-showcase-equipped-grip {
  width: 28px;
  padding: 4px 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(193, 204, 228, 0.85);
  font-size: 14px;
  line-height: 1.2;
  cursor: grab;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  user-select: none;
  touch-action: none;
  -webkit-user-drag: element;
}
.profile-edit-showcase-equipped-grip:active { cursor: grabbing; }
.profile-edit-showcase-equipped-preview-wrap {
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(7, 10, 18, 0.45);
  padding: 8px;
}
.profile-edit-showcase-equipped-preview-wrap .profile-showcase-card {
  margin: 0;
}
.profile-edit-showcase-equipped-remove {
  align-self: center;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 80, 80, 0.12);
  color: rgba(255, 200, 200, 0.95);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.profile-edit-showcase-equipped-remove:hover {
  background: rgba(255, 80, 80, 0.2);
}
.profile-edit-showcase-equipped-drag-ph {
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 10px;
  border: 2px dashed rgba(0, 229, 255, 0.32);
  background: rgba(0, 229, 255, 0.05);
  pointer-events: none;
}
.profile-avatar-area {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: -36px;
  margin-bottom: 20px;
  overflow: visible;
}

/* Profil n?zet: nagyobb avatar, n?v, rang, XP sor ? csak a megjelen?t? k?rty?n */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar-area {
  margin-top: 10px;
  gap: 22px;
  margin-bottom: 22px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  font-size: 38px;
  border-width: 4px;
  box-shadow: 0 10px 36px rgba(0, 229, 255, 0.22);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info {
  margin-left: 18px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar .status-dot {
  width: 18px;
  height: 18px;
  border-width: 3px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-username {
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.9px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-player-tag {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(232, 234, 246, 0.82);
  margin-top: 5px;
  line-height: 1.2;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-player-tag[hidden] {
  display: none !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-rank {
  font-size: 15px;
  margin-top: 6px;
  font-weight: 700;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-wrap {
  max-width: 300px;
  margin-top: 14px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-header {
  margin-bottom: 7px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-label {
  font-size: 13px;
  color: rgba(232, 234, 246, 0.62);
  font-weight: 600;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-value {
  font-size: 14px;
  font-weight: 700;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-bg {
  height: 9px;
  border-radius: 9px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-fill {
  border-radius: 9px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar-frame-overlay {
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% / var(--avatar-frame-inner-ratio, 0.907));
  height: calc(100% / var(--avatar-frame-inner-ratio, 0.907));
  max-width: none;
  max-height: none;
}

.profile-avatar {
  width: 80px; height: 80px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: 28px;
  border: 3px solid var(--bg2);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 8px 32px rgba(0,229,255,0.2);
}
.profile-avatar.profile-avatar-has-frame {
  overflow: visible;
  z-index: 2;
}

.profile-avatar-frame-overlay {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% / var(--avatar-frame-inner-ratio, 0.907));
  height: calc(100% / var(--avatar-frame-inner-ratio, 0.907));
  object-fit: fill;
  object-position: center;
  pointer-events: none;
  z-index: 2;
  display: none;
}
.profile-avatar.profile-avatar-has-frame .profile-avatar-frame-overlay {
  display: block;
}
.avatar#remnant-sidebar-avatar {
  position: relative;
}
.avatar#remnant-sidebar-avatar.profile-avatar-has-frame {
  overflow: visible;
  z-index: 3;
}
.avatar#remnant-sidebar-avatar .profile-avatar-frame-overlay {
  border-radius: inherit;
  z-index: 2;
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% / var(--avatar-frame-inner-ratio, 0.907));
  height: calc(100% / var(--avatar-frame-inner-ratio, 0.907));
  object-fit: fill;
}
.profile-avatar .status-dot { width: 14px; height: 14px; border-width: 3px; }

.profile-info { flex: 1; padding-bottom: 4px; }
.profile-username { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.profile-rank { font-size: 13px; color: var(--cyan); font-weight: 600; margin-top: 2px; }
.profile-actions { display: flex; gap: 8px; align-items: flex-end; padding-bottom: 4px; }
.profile-pane { display: none; }
.profile-pane.active { display: block; }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).active,
#remnant-profile-edit-pane.active {
  display: flex;
  flex-direction: column;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner),
#remnant-profile-edit-pane {
  height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}
#remnant-profile-edit-pane {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner)::-webkit-scrollbar,
#remnant-profile-edit-pane::-webkit-scrollbar { width: 4px; }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner)::-webkit-scrollbar-track,
#remnant-profile-edit-pane::-webkit-scrollbar-track { background: transparent; }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner)::-webkit-scrollbar-thumb,
#remnant-profile-edit-pane::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-shell-core {
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.08);
  padding: 0 10px;
  display: flex;
  flex-direction: column;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-banner,
#remnant-profile-edit-pane .profile-banner {
  flex: 0 0 auto;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-main {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}
#remnant-profile-edit-pane .profile-edit-wrap {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}
.profile-avatar.profile-avatar-has-image,
.avatar.avatar-has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.profile-avatar.profile-avatar-has-image span,
.avatar.avatar-has-image { color: transparent; }

.profile-edit-wrap { padding: 0 24px 24px; }
.profile-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.profile-edit-title {
  font-family: 'Syne', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text);
  text-shadow: none;
}
.profile-edit-sub {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(232, 234, 246, 0.62);
  margin-top: 4px;
  max-width: 62ch;
}
.profile-edit-feed-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 2px 0 14px;
  padding: 4px 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.profile-edit-feed-tab {
  background: transparent;
  border: none;
  color: rgba(232, 234, 246, 0.52);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 8px;
  cursor: pointer;
  font-family: inherit;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.profile-edit-feed-tab:hover {
  color: rgba(232, 234, 246, 0.92);
  background: var(--glass-hover);
}
.profile-edit-feed-tab.active {
  color: var(--cyan);
  box-shadow: inset 0 -2px 0 rgba(0, 229, 255, 0.85);
}
.profile-edit-feed-tab:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.45);
  outline-offset: 2px;
}
.profile-edit-feed-sep {
  color: rgba(232, 234, 246, 0.22);
  font-size: 11px;
  user-select: none;
  padding: 0 2px;
}
.profile-edit-feed-spacer {
  margin-left: auto;
}
.remnant-shop-launch-btn {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
}
.remnant-shop-page {
  position: fixed;
  inset: 0;
  z-index: 250000;
  display: none;
  grid-template-columns: 320px minmax(0, 1fr);
  background: radial-gradient(1200px 520px at 30% 0%, rgba(77,143,255,0.08), transparent 62%), #070912;
  overflow: hidden;
}
.remnant-shop-page.remnant-shop-admin-sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}
.remnant-shop-drag-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12px;
  cursor: grab;
  z-index: 3;
}
.remnant-shop-page.open {
  display: grid;
}
.remnant-shop-sidebar {
  border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(8, 12, 22, 0.95);
  padding: 20px 16px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(176,186,206,0.38) transparent;
  display: flex;
  flex-direction: column;
}
.remnant-shop-page.remnant-shop-admin-sidebar-collapsed .remnant-shop-sidebar {
  width: 0;
  min-width: 0;
  padding: 0;
  border-right: none;
  overflow: hidden;
}
.remnant-shop-sidebar::-webkit-scrollbar { width: 3px; }
.remnant-shop-sidebar::-webkit-scrollbar-track { background: transparent; }
.remnant-shop-sidebar::-webkit-scrollbar-thumb {
  background: rgba(176,186,206,0.38);
  border-radius: 999px;
}
.remnant-shop-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.remnant-shop-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 24px;
}
.remnant-shop-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor: pointer;
}
.remnant-shop-balance {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  margin-bottom: 14px;
}
.remnant-shop-coin {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: block;
  background: transparent;
  border: none;
  font-size: 0;
  color: transparent;
  line-height: 0;
}
.remnant-shop-balance-label { font-size: 12px; color: var(--text-dim); }
.remnant-shop-balance-value { font-size: 20px; font-weight: 800; font-family: 'Syne', sans-serif; }
.remnant-shop-section-label {
  margin: 12px 0 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232,234,246,0.5);
}
.remnant-shop-nav-btn {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.remnant-shop-content {
  padding: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(176,186,206,0.38) transparent;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.remnant-shop-content::-webkit-scrollbar { width: 3px; }
.remnant-shop-content::-webkit-scrollbar-track { background: transparent; }
.remnant-shop-content::-webkit-scrollbar-thumb {
  background: rgba(176,186,206,0.38);
  border-radius: 999px;
}
.remnant-shop-hero {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 18px 0;
}
.remnant-shop-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 800;
}
.remnant-shop-hero-sub {
  margin-top: 6px;
  color: var(--text-dim);
  max-width: 68ch;
}
.remnant-shop-item {
  background: var(--glass-soft);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.remnant-shop-item-title { font-size: 15px; font-weight: 800; font-family: 'Syne', sans-serif; }
.remnant-shop-item-meta { font-size: 12px; color: var(--text-dim); }
.remnant-shop-item-price { font-size: 14px; font-weight: 700; color: var(--cyan); }
.remnant-shop-admin-workspace {
  width: min(1380px, 96%);
  margin-left: auto;
  margin-right: auto;
  padding: 14px;
}
.remnant-shop-admin-tabs {
  display: flex;
  gap: 8px;
  margin: 10px 0 12px 0;
}
.remnant-shop-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 12px 0;
}
.remnant-shop-admin-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
  gap: 14px;
}
.remnant-shop-admin-col {
  display: grid;
  gap: 8px;
  align-content: start;
}
.remnant-shop-admin-label {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 4px;
}
.remnant-shop-admin-preview-col {
  background: rgba(7, 10, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px;
}
.remnant-shop-admin-preview-title {
  color: var(--text);
  font-weight: 700;
  margin-bottom: 6px;
}
.remnant-shop-admin-preview-slot {
  width: var(--remnant-admin-preview-slot-width, 260px);
  max-width: none;
}
.remnant-shop-admin-preview-modal {
  margin-top: 10px;
  width: var(--remnant-admin-preview-panel-width, min(720px, 86vw));
  max-width: var(--remnant-admin-preview-panel-width, min(720px, 86vw));
  min-height: 320px;
}
.remnant-shop-admin-collection-slot-row {
  display: grid;
  grid-template-columns: minmax(110px, 140px) 1fr auto;
  gap: 8px;
  align-items: center;
}
.remnant-shop-admin-preview-collection-grid {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  gap: 10px;
  padding: 8px;
  box-sizing: border-box;
}
.remnant-shop-admin-preview-collection-grid.is-a {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.remnant-shop-admin-preview-collection-grid.is-b {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}
.remnant-shop-admin-preview-collection-grid.is-c {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}
.remnant-shop-admin-preview-collection-cell {
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  background: rgba(5,9,16,0.72);
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 6px;
}
.remnant-shop-admin-preview-collection-cell-thumb {
  width: 100%;
  height: 54px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04) center / contain no-repeat;
}
.remnant-shop-admin-preview-collection-cell-name {
  color: #dce8ff;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Bolt vitrin: teljes k?p a slotban lev?g?s n?lk?l (contain) */
.rb-shop-slot[data-remnant-panel-category="profile_showcase"] .rb-shop-slot-image {
  background-size: contain;
  background-position: center;
}
/* Csak bolt admin slot el?n?zet: vitrin k?p biztosan a kereten bel?l */
.remnant-shop-admin-preview-slot.remnant-shop-admin-preview-slot--vitrin-show .rb-shop-slot-image-wrap {
  overflow: hidden;
}
.remnant-shop-admin-preview-slot.remnant-shop-admin-preview-slot--vitrin-show .rb-shop-slot-image {
  background-size: contain !important;
  background-position: center !important;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}
.remnant-shop-admin-preview-slot.remnant-shop-admin-preview-slot--vitrin-show.rb-shop-slot--sample-a .rb-shop-slot-image,
.remnant-shop-admin-preview-slot.remnant-shop-admin-preview-slot--vitrin-show.rb-shop-slot--sample-b .rb-shop-slot-image,
.remnant-shop-admin-preview-slot.remnant-shop-admin-preview-slot--vitrin-show.rb-shop-slot--sample-d .rb-shop-slot-image {
  width: 100% !important;
  height: 100% !important;
}
.remnant-shop-admin-preview-slot.remnant-shop-admin-preview-slot--vitrin-show.rb-shop-slot--sample-a:hover .rb-shop-slot-image,
.remnant-shop-admin-preview-slot.remnant-shop-admin-preview-slot--vitrin-show.rb-shop-slot--sample-b:hover .rb-shop-slot-image,
.remnant-shop-admin-preview-slot.remnant-shop-admin-preview-slot--vitrin-show.rb-shop-slot--sample-d:hover .rb-shop-slot-image {
  transform: none;
  filter: brightness(1.04);
}
.rshop-pv-item.rshop-pv-item--shop-vitrin-preset {
  object-fit: contain;
  max-height: min(52vh, 420px);
  width: auto;
  height: auto;
}
.rshop-pv-stack--collection-a,
.rshop-pv-stack--collection-b {
  width: min(640px, 84vw);
  max-width: 100%;
}
.rshop-pv-stack--collection-a {
  aspect-ratio: 5 / 1.15;
}
.rshop-pv-stack--collection-b {
  aspect-ratio: 5 / 2.35;
}
.rshop-pv-stack--collection-c {
  width: min(640px, 84vw);
  max-width: 100%;
  aspect-ratio: 5 / 3.55;
}
#remnant-shop-admin-panel select.glass-input {
  background-color: rgba(12, 16, 26, 0.96);
  color: #e8eefc;
  border: 1px solid rgba(140, 170, 220, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.22);
}
#remnant-shop-admin-panel select.glass-input:focus {
  outline: none;
  border-color: rgba(0, 229, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#remnant-shop-admin-panel select.glass-input option {
  background-color: #111827;
  color: #eaf2ff;
}
.remnant-shop-nav-btn.active {
  border-color: rgba(0,229,255,0.45);
  background: rgba(0,229,255,0.09);
  color: #dffaff;
}
.remnant-shop-sidebar-spacer { flex: 1 1 auto; min-height: 18px; }
.remnant-shop-admin-corner {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.remnant-shop-section-pane { display: none; }
.remnant-shop-section-pane.active {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}
.rb-shop-banner-slot {
  width: min(430px, 48vw);
  height: 176px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: transparent;
  flex-shrink: 0;
  overflow: hidden;
}
.rb-shop-banner-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  display: block;
}
.rb-shop-hero-top { display: flex; gap: 16px; align-items: center; }
.rb-shop-hero-copy { min-width: 0; }
.rb-shop-hero-copy .remnant-shop-hero-title { margin: 0; }
.rb-shop-hero-copy .remnant-shop-hero-sub { margin-top: 8px; }
.rb-shop-hero-top { justify-content: center; }
.rb-shop-hero-copy { text-align: center; }
.rb-shop-hero-copy .remnant-shop-hero-sub {
  max-width: 760px;
  line-height: 1.35;
}
.rb-shop-hero-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}
.rb-shop-block {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(26, 30, 40, 0.56);
  padding: 14px;
  overflow: visible;
}
/* Kiemeltek: alapb?l nincs blokk-keret/h?tt?r, kiv?ve az 1. ?s 3. blokkot. */
#remnant-shop-section-featured .rb-shop-block {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin-top: 64px;
}
#remnant-shop-section-featured .rb-shop-block.featured-keep-shell {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(26, 30, 40, 0.56);
  padding: 24px 14px 28px;
}
#remnant-shop-section-featured .rb-shop-block.featured-keep-shell .rb-shop-block-head {
  margin-bottom: 18px;
}
.rb-shop-block-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.rb-shop-block-title {
  font-family: 'Syne', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: rgba(232,234,246,0.94);
}
/* Kiemeltek c?mek k?l?n kisebbek (inline style fel?l?r?sa miatt !important). */
#remnant-shop-section-featured .rb-shop-block-title {
  font-size: 17px !important;
}
.rb-shop-view-all {
  margin-left: 2px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.08);
  color: rgba(232,234,246,0.88);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.rb-shop-block-arrows {
  margin-left: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  gap: 8px;
}
.rb-shop-block-arrows::before {
  content: "";
  display: block;
  flex: 1;
  min-width: 18px;
  height: 1px;
  margin-right: 2px;
  background: linear-gradient(90deg, rgba(190,196,208,0.34), rgba(190,196,208,0.08));
}
.rb-shop-arrow {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06);
  color: var(--text); cursor:pointer; font-weight:700;
}
.rb-shop-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.remnant-shop-viewall-modal {
  width: min(1240px, 95vw);
  max-width: 95vw;
  max-height: 86vh;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.remnant-shop-viewall-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.remnant-shop-viewall-title {
  font-family: 'Syne', sans-serif;
  font-size: 21px;
  font-weight: 800;
}
.remnant-shop-viewall-count {
  font-size: 12px;
  color: var(--text-dim);
}
.remnant-shop-viewall-rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(190,196,208,0.34), rgba(190,196,208,0.08));
}
.remnant-shop-viewall-scroll {
  overflow: auto;
  overflow-x: hidden;
  min-height: 240px;
  max-height: calc(100vh - 200px);
  padding: 14px 18px 24px;
  box-sizing: border-box;
}
.remnant-shop-viewall-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 6px 10px 10px;
  box-sizing: border-box;
}
.remnant-shop-inline-viewall {
  display: none;
}
.remnant-shop-inline-viewall.open {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.remnant-shop-content:has(.remnant-shop-inline-viewall.open) {
  overflow-y: hidden;
}
.remnant-shop-inline-viewall.open .remnant-shop-viewall-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
.remnant-shop-inline-viewall-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.remnant-shop-inline-viewall-close {
  margin-left: auto;
}
.rb-shop-grid-4 { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; padding-left: 28px; padding-right: 28px; box-sizing: border-box; }
.rb-shop-grid-4 > .rb-shop-slot:nth-child(1) { grid-column: 3; }
.rb-shop-grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; padding-left: 28px; padding-right: 28px; box-sizing: border-box; }
.rb-shop-slot {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,24,34,0.88), rgba(14,16,22,0.9));
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.22s ease;
}
.rb-shop-slot-image-wrap {
  position: relative;
  height: 162px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}
.rb-shop-slot-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}
.rb-shop-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(130deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 40%);
  transition: opacity 0.2s ease;
}
.rb-shop-slot:hover {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08) inset;
  z-index: 20;
}
.rb-shop-slot:hover::after { opacity: 1; }
.rb-shop-slot--sample-a .rb-shop-slot-image-wrap {
  height: 174px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.rb-shop-slot--sample-a .rb-shop-slot-image {
  width: 86%;
  height: 84%;
  border-radius: 2px;
}
.rb-shop-slot--sample-a:hover .rb-shop-slot-image {
  transform: scale(1.14);
  filter: brightness(1.06);
}
.rb-shop-slot--sample-b .rb-shop-slot-image-wrap {
  height: 174px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.rb-shop-slot--sample-b .rb-shop-slot-image {
  width: 92%;
  height: 90%;
  border-radius: 2px;
}
.rb-shop-slot--sample-b:hover .rb-shop-slot-image {
  transform: scale(1.1);
  filter: brightness(1.06);
}
.rb-shop-slot--sample-c .rb-shop-slot-image-wrap {
  height: 174px;
  padding: 0;
}
.rb-shop-slot--sample-c .rb-shop-slot-image {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.rb-shop-slot--sample-c:hover .rb-shop-slot-image {
  transform: none;
  filter: brightness(1.07);
}
.rb-shop-slot--sample-d .rb-shop-slot-image-wrap {
  height: 174px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
}
.rb-shop-slot--sample-d .rb-shop-slot-image {
  width: 98%;
  height: 64%;
  border-radius: 2px;
}
.rb-shop-slot--sample-d {
  overflow: visible;
  transform-origin: center center;
}
.rb-shop-slot--sample-d:hover {
  transform: scaleX(1.36);
}
.rb-shop-slot--sample-d:hover .rb-shop-slot-image {
  transform: scale(1.3);
  filter: brightness(1.07);
}
.rb-shop-slot-author {
  position: absolute;
  left: 6px; top: 6px;
  width: 20px; height: 20px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.4);
  background: linear-gradient(135deg, #34d9ff, #8a62ff);
}
.rb-shop-slot-meta { padding: 10px; }
.rb-shop-slot-name {
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: rgba(232,234,246,0.94);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rb-shop-slot-type {
  margin-top: 6px;
  display:flex; align-items:center; gap:6px;
  font-size: 12px; color: rgba(232,234,246,0.7);
}
.rb-shop-slot-foot {
  margin-top: 8px;
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
  color: rgba(173,223,255,0.95);
  font-weight: 700;
}
.rb-shop-slot-foot .rb-shop-rb-mini {
  width: 22px;
  height: 22px;
}
.rb-shop-rb-mini {
  width: 16px; height:16px; border-radius:50%;
  background: linear-gradient(135deg, #b9e4ff, #6bb6ff);
  border: 1px solid rgba(255,255,255,0.7);
}
.rb-shop-placeholder-pane {
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 18px;
  color: rgba(232,234,246,0.78);
  background: rgba(255,255,255,0.02);
}
/* Bolt: slot ? Profilh?tt?r (?s k?s?bb m?s) el?n?zet ? egyszer?, launcherben renderelve; adat/URL a megl?v? kliens logik?b?l, nem a panel ?szerkezete? a szerverben. */
.modal.remnant-shop-preview-modal {
  width: min(640px, 92vw);
  max-width: min(640px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(11, 16, 28, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-sizing: border-box;
  padding: 20px 22px 18px;
}
.rshop-pv-head {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 12px;
}
.rshop-pv-head-main { min-width: 0; flex: 1; }
.rshop-pv-title {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: rgba(248, 250, 255, 0.98);
  margin: 0 0 6px 0;
  word-wrap: break-word;
}
.rshop-pv-cat {
  font-size: 14px;
  font-weight: 600;
  color: rgba(232, 234, 246, 0.85);
  margin: 0 0 5px 0;
}
.rshop-pv-collection {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(180, 195, 220, 0.9);
  margin: 0;
  line-height: 1.3;
}
.rshop-pv-collection-thumb {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rshop-pv-balance { flex-shrink: 0; text-align: right; }
/* RP ikon balra, a ?EGYENLEGED:? ?s az ?rt?k k?z?tt f?gg?legesen k?z?pen, a k?t sorthoz k?pest */
.rshop-pv-balance-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.rshop-pv-balance-rp {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #b9e4ff, #6bb6ff);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 14px rgba(90, 160, 255, 0.4);
  align-self: center;
}
.rshop-pv-balance-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  line-height: 1.15;
}
.rshop-pv-balance-label {
  color: #7ec8ff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.2;
}
.rshop-pv-balance-val {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
  color: rgba(242, 244, 255, 0.98);
  margin: 0;
}
/* K?z?pen: itemk?p m?rete; a profilv?zlat a k?p teljes magass?g?t kit?lti, v?zszintesen k?z?pen, ar?nyosan. */
.rshop-pv-figure {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 0 12px 0;
  min-height: 0;
  box-sizing: border-box;
}
.rshop-pv-stack {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  font-size: 0;
  vertical-align: top;
}
.rshop-pv-item {
  position: relative;
  z-index: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(46vh, 320px);
  border-radius: 2px;
  margin: 0;
}
.rshop-pv-item-video {
  object-fit: cover;
  object-position: center top;
}
.rshop-pv-outline {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  height: 100%;
  width: auto;
  max-width: 100%;
  transform: translateX(-50%) scaleX(0.96);
  transform-origin: 50% 0;
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
  display: block;
  opacity: 0.95;
  margin: 0;
  padding: 0;
  border: none;
}
.rshop-pv-stack--avatar-frame .rshop-pv-item,
.rshop-pv-stack--avatar-frame .rshop-pv-outline {
  display: none;
}
.rshop-pv-art-side {
  display: none;
  position: absolute;
  top: 0;
  height: 100%;
  width: clamp(54px, 16%, 104px);
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  z-index: 0;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}
.rshop-pv-art-side--left {
  left: 0;
  transform: translateX(calc(-100% - 6px));
}
.rshop-pv-art-side--right {
  right: 0;
  transform: translateX(calc(100% + 6px));
}
.rshop-pv-stack--art-showcase {
  width: min(640px, 84vw);
  max-width: 100%;
  aspect-ratio: 16 / 9;
}
.rshop-pv-stack--art-showcase .rshop-pv-item {
  display: none;
}
.rshop-pv-stack--art-showcase .rshop-pv-outline {
  display: block;
  left: 50%;
  top: 0;
  height: 100%;
  width: auto;
  max-width: 100%;
  transform: translateX(-50%);
}
.rshop-pv-stack--art-showcase .rshop-pv-art-side {
  display: block;
  height: 33.333%;
  max-height: 33.333%;
  top: 0;
  object-position: center top;
}
.rshop-pv-stack--art-showcase .rshop-pv-art-side.rshop-pv-art-side--placeholder {
  object-fit: contain;
  object-position: center;
  border: 2px dashed rgba(205, 220, 255, 0.45);
  background: rgba(12, 18, 30, 0.38);
  box-shadow: none;
}
.rshop-pv-avatar-demo {
  display: none;
  position: relative;
  width: clamp(96px, 15vw, 156px);
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: visible;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(14, 18, 30, 0.72);
}
.rshop-pv-avatar-demo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: none;
  margin: 0;
}
.rshop-pv-avatar-demo-avatar {
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  z-index: 1;
  overflow: hidden;
}
.rshop-pv-avatar-demo > .rshop-pv-avatar-demo-frame,
.rshop-pv-avatar-demo.profile-avatar-has-frame > .rshop-pv-avatar-demo-frame {
  display: none;
  object-fit: fill;
  object-position: center;
  inset: auto;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: calc(100% / var(--avatar-frame-inner-ratio, 0.907));
  height: calc(100% / var(--avatar-frame-inner-ratio, 0.907));
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  border-radius: 0;
}
.rshop-pv-avatar-demo.has-frame > .rshop-pv-avatar-demo-frame,
.rshop-pv-avatar-demo.profile-avatar-has-frame > .rshop-pv-avatar-demo-frame {
  display: block;
}
.rshop-pv-stack--avatar-frame-preview .rshop-pv-item,
.rshop-pv-stack--avatar-frame-preview .rshop-pv-outline,
.rshop-pv-stack--avatar-frame-preview .rshop-pv-art-side {
  display: none !important;
}
.rshop-pv-stack--avatar-frame-preview .rshop-pv-avatar-demo {
  display: block;
}
.rshop-pv-avatar-layout {
  display: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(46vh, 320px);
  border-radius: 2px;
}
.rshop-pv-stack--avatar-frame .rshop-pv-avatar-layout {
  display: block;
}
.rshop-pv-avatar-corner {
  display: none;
  position: absolute;
  left: 3%;
  top: 12%;
  width: 20%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(20, 24, 34, 0.68);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
  z-index: 3;
}
.rshop-pv-avatar-corner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.rshop-pv-stack--avatar-frame .rshop-pv-avatar-corner {
  display: block;
}
.rshop-pv-avatar-overlay-anchor {
  display: none;
  position: absolute;
  left: 3%;
  top: 12%;
  width: 20%;
  aspect-ratio: 1 / 1;
  transform: none;
  overflow: visible;
  z-index: 4;
}
.rshop-pv-avatar-overlay {
  width: calc(100% / var(--avatar-frame-inner-ratio, 0.87));
  height: calc(100% / var(--avatar-frame-inner-ratio, 0.87));
  object-fit: fill;
  object-position: center center;
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.rshop-pv-stack--avatar-frame .rshop-pv-avatar-overlay-anchor {
  display: block;
}
.rshop-pv-desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(228, 232, 244, 0.9);
  margin: 0 0 6px 0;
}
.rshop-pv-fine { font-size: 12px; line-height: 1.4; color: rgba(200, 208, 225, 0.55); margin: 0 0 12px 0; }
.rshop-pv-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.profile-edit-tab-panels { margin-bottom: 2px; }
.profile-edit-tab-panel {
  display: none;
  animation: profileEditTabIn 0.18s ease-out;
}
.profile-edit-tab-panel.active {
  display: block;
}
@keyframes profileEditTabIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.profile-edit-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.profile-edit-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 14px;
}
.profile-shop-manager-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.profile-shop-manager-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}
.profile-shop-manager-item {
  position: relative;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  background: rgba(10,14,24,0.62);
  padding: 8px;
  cursor: pointer;
}
.profile-shop-manager-item.selected {
  border-color: rgba(0,229,255,0.55);
  box-shadow: 0 0 0 1px rgba(0,229,255,0.35) inset;
}
.profile-shop-manager-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: rgba(255,255,255,0.05) center / cover no-repeat;
}
.profile-shop-manager-name { margin-top: 6px; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-shop-manager-check {
  position: absolute; right: 8px; top: 8px; width: 20px; height: 20px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
  color: #031019; background: linear-gradient(135deg, #00e5ff, #7de9ff);
}
.profile-shop-manager-item.selected .profile-shop-manager-check { display: flex; }
.profile-shop-manager-preview { margin-top: 12px; }
.profile-inventory-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.profile-inventory-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.profile-inventory-slot {
  min-height: 154px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(120, 130, 160, 0.08));
  border: 1px solid rgba(165, 175, 205, 0.22);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.profile-inventory-slot-thumb {
  height: 90px;
  border-radius: 10px;
  background: rgba(149, 160, 190, 0.22);
  border: 1px solid rgba(185, 195, 225, 0.2);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.profile-inventory-slot-name {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-inventory-slot-type {
  color: var(--text-faint);
  font-size: 11px;
}
.profile-inventory-slot--empty {
  opacity: 0.5;
}
.profile-inventory-pagination {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.profile-inventory-page-btn {
  min-width: 34px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}
.profile-inventory-page-btn.active {
  color: var(--cyan);
  border-color: rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.15);
}
.profile-inventory-page-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
#remnant-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  background: rgba(12,16,24,0.92); border: 1px solid rgba(255,255,255,0.18); color: #e8eefc;
  border-radius: 10px; padding: 10px 14px; z-index: 300000; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
#remnant-toast.show { opacity: 1; }
.profile-edit-card-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.profile-edit-card-actions-start {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.profile-edit-inline-msg {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
  flex: 1 1 140px;
  min-width: 0;
  margin-left: auto;
}
.profile-edit-inline-msg:empty {
  display: none;
}
.profile-edit-inline-msg--ok {
  color: var(--status-ok);
}
.profile-edit-inline-msg--muted {
  color: rgba(232, 234, 246, 0.42);
}
.profile-edit-inline-msg--err {
  color: var(--status-err);
}
.profile-edit-label {
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: rgba(232, 234, 246, 0.78);
  text-transform: uppercase;
  letter-spacing: 1.05px;
  margin-bottom: 10px;
  text-shadow: none;
}
.profile-edit-section-title {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(232, 234, 246, 0.9);
  margin-bottom: 10px;
}
.profile-edit-hint {
  font-size: 13px;
  color: rgba(232, 234, 246, 0.58);
  line-height: 1.42;
  margin: -4px 0 10px;
}
.profile-edit-banner-preview {
  height: auto;
  aspect-ratio: var(--profile-banner-aspect) / 1;
  min-height: 120px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(135deg, rgba(0,229,255,0.2) 0%, rgba(168,85,247,0.2) 50%, rgba(77,143,255,0.2) 100%);
  background-size: cover;
  background-position: center;
  margin-bottom: 10px;
}
.profile-edit-banner-preview.profile-banner--has-image {
  aspect-ratio: 5 / 1 !important;
  min-height: 0 !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
}
.profile-edit-avatar-row { display: flex; align-items: center; gap: 12px; }
.profile-edit-avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 2px solid var(--bg2);
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.profile-edit-avatar-meta {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(232, 234, 246, 0.58);
}
.profile-file-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed var(--glass-border);
  background: rgba(255,255,255,0.02);
  color: rgba(232, 234, 246, 0.55);
  font-size: 13px;
}
.profile-file-input::file-selector-button {
  margin-right: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,229,255,0.35);
  background: rgba(0,229,255,0.12);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.profile-file-input-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.profile-file-input-row .profile-file-input {
  flex: 0 1 auto;
  max-width: 100%;
}
.profile-file-input-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.profile-file-input-name {
  color: rgba(232, 234, 246, 0.58);
  font-size: 13px;
}
.profile-about-content,
.profile-edit-about-preview {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
}
.profile-edit-about-preview-card {
  width: min(100%, 360px);
  margin-left: 0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(7,10,18,0.55);
  padding: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}
.profile-edit-showcase-preview-card {
  width: 100%;
  max-width: none;
}
.profile-edit-showcase-preview-card.profile-edit-showcase-preview-card--measure {
  width: fit-content;
  max-width: 100%;
}
#remnant-profile-edit-showcase-preview-host {
  width: 100%;
  overflow-x: auto;
}
#remnant-profile-edit-showcase-preview-host .profile-showcase-card {
  margin: 0;
}
.profile-edit-about-preview {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 56px;
}
.profile-file-input-error {
  flex: 1 1 160px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  line-height: 1.35;
}
.profile-file-input-error:empty {
  display: none;
}
.profile-edit-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
#remnant-profile-edit-feedback-footer {
  margin-right: auto;
  text-align: left;
  flex: 1 1 200px;
  min-width: 0;
  margin-left: 0;
}
#remnant-profile-edit-feedback-footer:empty {
  display: none;
}

.remnant-profile-theme-layer {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100%, var(--profile-core-w));
  height: 100%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.9;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-banner,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-main {
  position: relative;
  z-index: 1;
}

.profile-edit-theme-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-edit-theme-icon {
  font-size: 18px;
  line-height: 1;
  opacity: 1;
}
.profile-edit-theme-swatches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
  align-items: start;
}
.profile-theme-swatch-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.profile-theme-swatch {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  aspect-ratio: 1.1;
  max-height: 118px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.profile-theme-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.profile-theme-swatch-face {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.profile-theme-swatch-edit {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0,0,0,0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.12);
}
.profile-theme-swatch-caption {
  margin-top: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(232, 234, 246, 0.66);
  text-align: center;
  letter-spacing: 0.02em;
}
.profile-edit-theme-gradient-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.profile-edit-theme-gradient-row .profile-edit-label {
  margin-bottom: 0;
}
.profile-edit-theme-preview-bar {
  margin-top: 12px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
}

.profile-edit-about-wrap {
  position: relative;
  margin-top: 10px;
}
.profile-edit-about-input {
  width: 100%;
  min-height: 120px;
  max-height: 220px;
  resize: vertical;
  padding: 12px 44px 32px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  outline: none;
  box-sizing: border-box;
}
.profile-edit-about-input:focus {
  border-color: rgba(0,229,255,0.38);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.06);
}
.profile-edit-about-emoji-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: rgba(232,234,246,0.92);
}
.profile-edit-about-emoji-btn:hover {
  border-color: rgba(0,229,255,0.35);
  background: rgba(0,229,255,0.12);
}
.profile-edit-about-counter {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(232, 234, 246, 0.4);
  pointer-events: none;
}

.profile-edit-standing-card .remnant-standing-panel {
  margin-top: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.22);
}
.remnant-standing-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.remnant-standing-avatar-wrap {
  flex-shrink: 0;
}
.remnant-standing-avatar.profile-avatar-has-image span {
  color: transparent;
}
.remnant-standing-copy { flex: 1; min-width: 0; }
.remnant-standing-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.3px;
  line-height: 1.25;
  color: rgba(232, 234, 246, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.remnant-standing-hl {
  font-weight: 800;
}
.remnant-standing-hl-0 { color: #22c55e; }
.remnant-standing-hl-1 { color: #f97316; }
.remnant-standing-hl-2 { color: #fb7185; }
.remnant-standing-hl-3 { color: #ef4444; }
.remnant-standing-hl-4 { color: #7f1d1d; }
.remnant-standing-desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(232, 234, 246, 0.58);
}

.remnant-standing-track {
  margin-top: 18px;
  padding-top: 6px;
  position: relative;
}
.remnant-standing-rail {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 14px;
  height: 4px;
  pointer-events: none;
}
.remnant-standing-rail-bg {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.remnant-standing-rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34,197,94,0.95), rgba(249,115,22,0.95));
  opacity: 0.85;
  transition: width 0.35s ease;
}
.remnant-standing-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.remnant-standing-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-top: 2px;
}
.remnant-standing-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.18);
  background: rgba(15,17,26,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: rgba(232,234,246,0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.remnant-standing-step.active .remnant-standing-dot {
  border-color: rgba(255,255,255,0.38);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
  transform: scale(1.06);
}
.remnant-standing-step.active.remnant-standing-dotwrap-0 .remnant-standing-dot {
  background: rgba(34,197,94,0.22);
  border-color: rgba(34,197,94,0.65);
  color: #22c55e;
}
.remnant-standing-step.active.remnant-standing-dotwrap-1 .remnant-standing-dot {
  background: rgba(249,115,22,0.22);
  border-color: rgba(249,115,22,0.65);
  color: #f97316;
}
.remnant-standing-step.active.remnant-standing-dotwrap-2 .remnant-standing-dot {
  background: rgba(251,113,133,0.18);
  border-color: rgba(251,113,133,0.65);
  color: #fb7185;
}
.remnant-standing-step.active.remnant-standing-dotwrap-3 .remnant-standing-dot {
  background: rgba(239,68,68,0.22);
  border-color: rgba(239,68,68,0.72);
  color: #fecaca;
}
.remnant-standing-step.active.remnant-standing-dotwrap-4 .remnant-standing-dot {
  background: rgba(127,29,29,0.48);
  border-color: rgba(127,29,29,0.95);
  color: #fecaca;
}
.remnant-standing-step-label {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  color: rgba(232, 234, 246, 0.55);
  max-width: 92px;
}
.remnant-standing-step-label span {
  display: block;
}
.remnant-standing-step.passed .remnant-standing-dot {
  opacity: 0.55;
}
@media (max-width: 560px) {
  .remnant-standing-steps { gap: 2px; }
  .remnant-standing-step-label { font-size: 10px; max-width: none; }
  .remnant-standing-rail { left: 18px; right: 18px; }
}

.remnant-standing-admin-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.08);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(253, 230, 138, 0.92);
}
.remnant-standing-note-k {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(253, 230, 138, 0.72);
  margin-bottom: 4px;
}
.remnant-perm-standing-panel .remnant-standing-step--selectable {
  cursor: pointer;
}
.remnant-perm-standing-panel .remnant-standing-step--selectable:hover .remnant-standing-dot {
  border-color: rgba(255, 255, 255, 0.42);
  transform: scale(1.04);
}
.remnant-perm-standing-note-ta {
  min-height: 84px;
  resize: vertical;
}

/* Emoji v?laszt?: a bemutatkoz?s gombhoz igaz?tott lebeg? panel (nincs teljes k?perny?s hom?ly). */
.remnant-emoji-popover {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1200;
  display: none;
  width: min(400px, calc(100vw - 24px));
  max-height: min(380px, 52vh);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.remnant-emoji-popover.open {
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  z-index: 100100;
}
.remnant-emoji-panel {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  background: rgba(18, 20, 30, 0.98);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  box-shadow: 0 20px 56px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.remnant-emoji-panel-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.remnant-emoji-search-icon { opacity: 0.55; font-size: 14px; }
.remnant-emoji-panel-search input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.remnant-emoji-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
}
.remnant-emoji-panel-body {
  display: flex;
  min-height: 0;
  flex: 1;
}
.remnant-emoji-rail {
  width: 58px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.08);
  padding: 8px 6px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}
.remnant-emoji-rail::-webkit-scrollbar { width: 4px; }
.remnant-emoji-rail::-webkit-scrollbar-track { background: transparent; }
.remnant-emoji-rail::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}
.remnant-emoji-rail-btn {
  width: 40px;
  height: 36px;
  align-self: center;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.remnant-emoji-rail-btn:hover {
  background: rgba(255,255,255,0.06);
}
.remnant-emoji-rail-btn.active {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
}
.remnant-emoji-scroll {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 10px 12px 10px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}
.remnant-emoji-scroll::-webkit-scrollbar { width: 4px; }
.remnant-emoji-scroll::-webkit-scrollbar-track { background: transparent; }
.remnant-emoji-scroll::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}
.remnant-emoji-section-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dim);
  margin: 4px 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.remnant-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-bottom: 14px;
}
@media (max-width: 420px) {
  .remnant-emoji-grid { grid-template-columns: repeat(7, 1fr); }
}
.remnant-emoji-cell {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.remnant-emoji-cell:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.08);
}
.remnant-emoji-empty {
  font-size: 12px;
  color: var(--text-faint);
  padding: 10px 4px 18px;
  line-height: 1.45;
}
.remnant-emoji-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.remnant-emoji-footer-preview { font-size: 28px; line-height: 1; }
.remnant-emoji-footer-code {
  font-size: 12px;
  color: var(--text-dim);
  word-break: break-all;
}

.profile-edit-identity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 18px;
  align-items: center;
}
@media (max-width: 520px) {
  .profile-edit-identity-grid { grid-template-columns: 1fr; }
}
.profile-edit-identity-form {
  display: grid;
  gap: 10px;
}
.profile-edit-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-edit-tag-prefix {
  font-weight: 800;
  letter-spacing: 0.5px;
  color: rgba(232, 234, 246, 0.62);
  font-size: 15px;
}
.profile-edit-name-preview {
  margin-top: 10px;
}
.profile-edit-name-preview--side {
  margin-top: 0;
  justify-self: center;
  width: min(100%, 280px);
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(8,12,20,0.45);
}
.profile-edit-name-preview-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

/* N?v st?lus el?n?zet a szerkeszt?ben ? preset + saj?t sz?n */
#remnant-profile-edit-pane #remnant-profile-edit-name-style-preview.remnant-name-style-neon_cyan {
  color: #00f0ff !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-shadow:
    0 0 6px rgba(0, 240, 255, 0.95),
    0 0 18px rgba(0, 200, 255, 0.75),
    0 0 42px rgba(0, 140, 255, 0.45),
    0 0 70px rgba(0, 100, 255, 0.22) !important;
}
#remnant-profile-edit-pane #remnant-profile-edit-name-style-preview.remnant-name-style-gold {
  color: #ffe08a !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-shadow:
    0 1px 0 #8a5a00,
    0 2px 0 rgba(90, 50, 0, 0.55),
    0 0 12px rgba(255, 190, 60, 0.65),
    0 0 28px rgba(255, 140, 0, 0.4),
    0 0 48px rgba(200, 90, 0, 0.22) !important;
}
#remnant-profile-edit-pane #remnant-profile-edit-name-style-preview.remnant-name-style-silver_outline {
  color: #0b0e16 !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-shadow:
    -1.5px -1.5px 0 #dfe6f8,
    1.5px -1.5px 0 #dfe6f8,
    -1.5px 1.5px 0 #dfe6f8,
    1.5px 1.5px 0 #dfe6f8,
    0 0 10px rgba(220, 230, 255, 0.55),
    0 0 22px rgba(160, 180, 220, 0.28) !important;
}
#remnant-profile-edit-pane #remnant-profile-edit-name-style-preview.remnant-name-style-ember {
  color: #ff4a1a !important;
  font-weight: 800 !important;
  text-shadow:
    0 0 4px rgba(255, 220, 120, 0.9),
    0 0 14px rgba(255, 90, 20, 0.85),
    0 0 32px rgba(255, 40, 0, 0.55),
    0 0 56px rgba(180, 0, 0, 0.35),
    0 2px 0 rgba(80, 10, 0, 0.65) !important;
}
#remnant-profile-edit-pane #remnant-profile-edit-name-style-preview.remnant-name-style-ice {
  color: #eaf9ff !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-shadow:
    0 0 1px #fff,
    0 0 8px rgba(180, 230, 255, 0.95),
    0 0 18px rgba(100, 190, 255, 0.7),
    0 0 36px rgba(40, 140, 255, 0.4),
    0 1px 0 rgba(120, 190, 255, 0.85) !important;
}
#remnant-profile-edit-pane #remnant-profile-edit-name-style-preview.remnant-name-style-toxic {
  color: #b8ff00 !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-shadow:
    0 0 6px rgba(200, 255, 40, 0.95),
    0 0 16px rgba(120, 255, 0, 0.7),
    0 0 34px rgba(60, 200, 20, 0.45),
    0 0 52px rgba(20, 120, 0, 0.28),
    0 0 2px rgba(0, 40, 0, 0.8) !important;
}
#remnant-profile-edit-pane #remnant-profile-edit-name-style-preview.remnant-name-style-magenta_glow {
  color: #ff2ec8 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-shadow:
    0 0 6px rgba(255, 120, 230, 0.95),
    0 0 18px rgba(255, 40, 200, 0.75),
    0 0 38px rgba(180, 0, 160, 0.5),
    0 0 64px rgba(120, 0, 180, 0.3) !important;
}
#remnant-profile-edit-pane #remnant-profile-edit-name-style-preview.remnant-name-style-chrome {
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
#remnant-profile-edit-pane #remnant-profile-edit-name-style-preview.remnant-name-style-aurora {
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  filter: drop-shadow(0 0 10px rgba(160, 80, 255, 0.35));
}
#remnant-profile-edit-pane #remnant-profile-edit-name-style-preview.remnant-name-style-aurora,
#remnant-profile-edit-pane #remnant-profile-edit-name-style-preview.remnant-name-visual-gradient,
#remnant-profile-edit-pane #remnant-profile-edit-name-style-preview.remnant-name-style-chrome {
  text-shadow: none !important;
}
.profile-edit-select {
  width: 100%;
  padding: 10px 38px 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(170, 184, 218, 0.28);
  background-color: rgba(11, 14, 24, 0.92);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cfd7ff' d='M3 4.25 6 7.75 9 4.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 12px center;
  background-size: auto, 12px 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.profile-edit-select:hover {
  border-color: rgba(188, 202, 236, 0.45);
  background-color: rgba(14, 18, 30, 0.95);
}
.profile-edit-select:focus {
  border-color: rgba(125, 218, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.12);
}
.profile-edit-select:focus-visible {
  border-color: rgba(125, 218, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.12);
}
#remnant-profile-edit-pane .profile-edit-select option,
#remnant-profile-edit-pane .profile-edit-select optgroup {
  background-color: #0f1320;
  color: #f5f7ff;
}
#remnant-profile-edit-pane .profile-edit-select option:checked {
  background-color: #1b2d4a;
  color: #e9f7ff;
}
#remnant-profile-edit-pane #remnant-profile-edit-name-style,
#remnant-profile-edit-pane #remnant-profile-edit-name-font {
  background-color: rgba(10, 11, 18, 0.92);
  color: #f0f2fb;
}
.profile-edit-name-typography-row {
  margin-top: 2px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.profile-edit-name-style-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.profile-edit-name-style-col {
  min-width: 0;
  display: grid;
  gap: 8px;
}
@media (max-width: 640px) {
  .profile-edit-name-style-row {
    grid-template-columns: 1fr;
  }
}

/* N?v kozmetikum custom picker (bet?t?pus / st?lus / anim) */
.remnant-name-cos-picker,
.remnant-name-anim-picker {
  position: relative;
  width: 100%;
}
.remnant-name-cos-picker-trigger,
.remnant-name-anim-picker-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 38px 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(170, 184, 218, 0.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)),
    rgba(10, 11, 18, 0.92);
  color: #f0f2fb;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  text-align: left;
  position: relative;
}
.remnant-name-cos-picker-trigger:hover,
.remnant-name-anim-picker-trigger:hover {
  border-color: rgba(188, 202, 236, 0.45);
}
.remnant-name-cos-picker-trigger:focus-visible,
.remnant-name-anim-picker-trigger:focus-visible,
.remnant-name-cos-picker.is-open .remnant-name-cos-picker-trigger,
.remnant-name-anim-picker.is-open .remnant-name-anim-picker-trigger,
.remnant-name-cos-picker.is-open .remnant-name-anim-picker-trigger {
  border-color: rgba(125, 218, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.12);
  outline: none;
}
.remnant-name-cos-picker-chevron,
.remnant-name-anim-picker-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cfd7ff' d='M3 4.25 6 7.75 9 4.25'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  pointer-events: none;
}
.remnant-name-cos-picker-sample,
.remnant-name-anim-picker-sample {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.remnant-name-cos-picker-menu,
.remnant-name-anim-picker-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(170, 184, 218, 0.28);
  background: rgba(10, 12, 20, 0.98);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}
.remnant-name-cos-picker-option,
.remnant-name-anim-picker-option {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #e8eaf6;
  cursor: pointer;
  text-align: left;
  position: relative;
}
.remnant-name-cos-picker-option:hover,
.remnant-name-cos-picker-option.is-active,
.remnant-name-anim-picker-option:hover,
.remnant-name-anim-picker-option.is-active {
  background: rgba(27, 45, 74, 0.85);
}
.remnant-name-cos-picker-option-label,
.remnant-name-anim-picker-option-label {
  flex: 0 0 72px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(190, 205, 230, 0.62);
}
.remnant-name-cos-picker-option-sample,
.remnant-name-anim-picker-option-sample {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  font-family: 'Syne', sans-serif;
  color: #f0f4ff;
}
.remnant-name-cos-picker-option-lock,
.remnant-name-anim-picker-option-lock {
  display: none;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: auto;
  opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' stroke='%23cfd7ff' stroke-width='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' stroke='%23cfd7ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.remnant-name-cos-picker-option.is-locked .remnant-name-cos-picker-option-lock,
.remnant-name-cos-picker-option.is-locked .remnant-name-anim-picker-option-lock,
.remnant-name-anim-picker-option.is-locked .remnant-name-cos-picker-option-lock,
.remnant-name-anim-picker-option.is-locked .remnant-name-anim-picker-option-lock {
  display: block;
}
.remnant-name-cos-picker-option--font .remnant-name-cos-picker-option-sample {
  font-weight: 700;
  font-size: 14px;
}
.remnant-name-cos-picker-option--style .remnant-name-cos-picker-option-label {
  flex: 0 0 96px;
}

.profile-edit-name-color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  position: relative;
}
.profile-edit-name-color-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(232, 234, 246, 0.6);
  cursor: pointer;
  user-select: none;
}
.profile-edit-name-color-label input {
  width: 16px;
  height: 16px;
  accent-color: var(--cyan);
  cursor: pointer;
}
.profile-edit-name-color-row input[type="color"] {
  width: 44px;
  height: 36px;
  padding: 2px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,0.35);
  cursor: pointer;
}
.profile-edit-name-color-row input[type="color"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.remnant-name-style-neon_cyan {
  color: #00f0ff;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 6px rgba(0, 240, 255, 0.95),
    0 0 18px rgba(0, 200, 255, 0.75),
    0 0 42px rgba(0, 140, 255, 0.45),
    0 0 70px rgba(0, 100, 255, 0.22);
}
.remnant-name-style-aurora {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.02em;
  background-image: linear-gradient(
    100deg,
    #00ffe0 0%,
    #4d8fff 22%,
    #c026ff 48%,
    #ff4d9a 72%,
    #ffd36a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(160, 80, 255, 0.35));
}
.remnant-name-style-gold {
  color: #ffe08a;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-shadow:
    0 1px 0 #8a5a00,
    0 2px 0 rgba(90, 50, 0, 0.55),
    0 0 12px rgba(255, 190, 60, 0.65),
    0 0 28px rgba(255, 140, 0, 0.4),
    0 0 48px rgba(200, 90, 0, 0.22);
}
.remnant-name-style-silver_outline {
  color: #0b0e16;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow:
    -1.5px -1.5px 0 #dfe6f8,
    1.5px -1.5px 0 #dfe6f8,
    -1.5px 1.5px 0 #dfe6f8,
    1.5px 1.5px 0 #dfe6f8,
    0 0 10px rgba(220, 230, 255, 0.55),
    0 0 22px rgba(160, 180, 220, 0.28);
}
.remnant-name-style-ember {
  color: #ff4a1a;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 4px rgba(255, 220, 120, 0.9),
    0 0 14px rgba(255, 90, 20, 0.85),
    0 0 32px rgba(255, 40, 0, 0.55),
    0 0 56px rgba(180, 0, 0, 0.35),
    0 2px 0 rgba(80, 10, 0, 0.65);
}
.remnant-name-style-ice {
  color: #eaf9ff;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 1px #fff,
    0 0 8px rgba(180, 230, 255, 0.95),
    0 0 18px rgba(100, 190, 255, 0.7),
    0 0 36px rgba(40, 140, 255, 0.4),
    0 1px 0 rgba(120, 190, 255, 0.85);
}
.remnant-name-style-toxic {
  color: #b8ff00;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-shadow:
    0 0 6px rgba(200, 255, 40, 0.95),
    0 0 16px rgba(120, 255, 0, 0.7),
    0 0 34px rgba(60, 200, 20, 0.45),
    0 0 52px rgba(20, 120, 0, 0.28),
    0 0 2px rgba(0, 40, 0, 0.8);
}
.remnant-name-style-magenta_glow {
  color: #ff2ec8;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 6px rgba(255, 120, 230, 0.95),
    0 0 18px rgba(255, 40, 200, 0.75),
    0 0 38px rgba(180, 0, 160, 0.5),
    0 0 64px rgba(120, 0, 180, 0.3);
}
.remnant-name-style-chrome {
  display: inline-block;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-image: linear-gradient(
    115deg,
    #4a5160 0%,
    #c8d0e0 18%,
    #ffffff 38%,
    #8a93a8 52%,
    #f2f5ff 68%,
    #6b7388 85%,
    #d7deee 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

/* N?v anim?ci?k (el?n?zet + ?l? profil) ? user v?laszt?s, mindig fut (ne reduced-motion blokkolja) */
.remnant-name-anim-pulse_glow {
  display: inline-block !important;
  animation: remnant-name-anim-pulse-glow 1.4s ease-in-out infinite !important;
}
@keyframes remnant-name-anim-pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 0 rgba(0, 229, 255, 0)); }
  50% { opacity: 0.72; transform: scale(1.04); filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.75)); }
}
.remnant-name-anim-shimmer {
  display: inline-block !important;
  background-image: linear-gradient(90deg, #7dd3fc 0%, #ffffff 45%, #7dd3fc 90%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: remnant-name-anim-shimmer 1.8s linear infinite !important;
}
@keyframes remnant-name-anim-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.remnant-name-anim-rainbow {
  display: inline-block !important;
  background-image: linear-gradient(90deg, #00e5ff, #a855f7, #ff6ad5, #ffd36a, #00e5ff) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: remnant-name-anim-rainbow 2.4s linear infinite !important;
}
@keyframes remnant-name-anim-rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.remnant-name-anim-flicker {
  display: inline-block !important;
  animation: remnant-name-anim-flicker 0.85s linear infinite !important;
}
@keyframes remnant-name-anim-flicker {
  0%, 100% {
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 0 transparent);
    transform: translate(0, 0);
  }
  6% {
    opacity: 0.15;
    filter: brightness(2.4) drop-shadow(0 0 16px rgba(255, 255, 255, 0.95));
    transform: translate(-1px, 0);
  }
  10% {
    opacity: 1;
    filter: brightness(1.8) drop-shadow(0 0 12px rgba(0, 229, 255, 0.9));
    transform: translate(1px, 0);
  }
  14% {
    opacity: 0.25;
    filter: brightness(2.2) drop-shadow(0 0 18px rgba(255, 255, 255, 0.85));
    transform: translate(-1px, 1px);
  }
  18% {
    opacity: 1;
    filter: brightness(1.35) drop-shadow(0 0 10px rgba(0, 229, 255, 0.55));
    transform: translate(0, 0);
  }
  42% {
    opacity: 1;
    filter: brightness(1);
    transform: translate(0, 0);
  }
  48% {
    opacity: 0.2;
    filter: brightness(2.6) drop-shadow(0 0 20px rgba(255, 255, 255, 1));
    transform: translate(1px, -1px);
  }
  52% {
    opacity: 0.85;
    filter: brightness(1.9) drop-shadow(0 0 14px rgba(0, 229, 255, 0.8));
    transform: translate(-1px, 0);
  }
  56% {
    opacity: 1;
    filter: brightness(1.2);
    transform: translate(0, 0);
  }
  78% {
    opacity: 1;
    filter: brightness(1);
  }
  84% {
    opacity: 0.3;
    filter: brightness(2.3) drop-shadow(0 0 16px rgba(255, 255, 255, 0.9));
    transform: translate(0, 1px);
  }
  88% {
    opacity: 1;
    filter: brightness(1.5) drop-shadow(0 0 10px rgba(0, 229, 255, 0.7));
    transform: translate(0, 0);
  }
}
.remnant-name-anim-bounce {
  display: inline-block !important;
  animation: remnant-name-anim-bounce 1.2s ease-in-out infinite !important;
}
@keyframes remnant-name-anim-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
/* Hull?m: karakterenk?nt fut v?gig egy fluid emel?s/ejt?s */
.remnant-name-anim-wave {
  display: inline !important;
  animation: none !important;
  white-space: nowrap;
}
.remnant-name-anim-wave .remnant-name-wave-ch {
  display: inline-block !important;
  will-change: transform;
  transform-origin: center bottom;
  animation: remnant-name-wave-ch 1.55s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite !important;
  animation-delay: calc(var(--wave-i, 0) * 0.09s) !important;
}
@keyframes remnant-name-wave-ch {
  0%, 100% {
    transform: translateY(0) scaleY(1);
  }
  20% {
    transform: translateY(-3px) scaleY(1.02);
  }
  40% {
    transform: translateY(-11px) scaleY(1.06);
  }
  55% {
    transform: translateY(2px) scaleY(0.97);
  }
  70% {
    transform: translateY(-2px) scaleY(1.01);
  }
  85% {
    transform: translateY(0) scaleY(1);
  }
}
.remnant-name-anim-neon_breathe {
  display: inline-block !important;
  animation: remnant-name-anim-neon-breathe 1.6s ease-in-out infinite !important;
}
@keyframes remnant-name-anim-neon-breathe {
  0%, 100% { text-shadow: 0 0 4px rgba(0, 229, 255, 0.35), 0 0 12px rgba(0, 229, 255, 0.18); }
  50% { text-shadow: 0 0 12px rgba(0, 229, 255, 0.95), 0 0 32px rgba(0, 229, 255, 0.65); }
}
.remnant-name-anim-glitch {
  display: inline-block !important;
  animation: remnant-name-anim-glitch 0.9s steps(2, end) infinite !important;
}
@keyframes remnant-name-anim-glitch {
  0%, 100% { transform: translate(0, 0); text-shadow: 2px 0 #00e5ff, -2px 0 #ff4d6d; }
  25% { transform: translate(-2px, 0); }
  50% { transform: translate(2px, 0); }
  75% { transform: translate(0, 2px); }
}
.remnant-name-anim-float {
  display: inline-block !important;
  animation: remnant-name-anim-float 1.8s ease-in-out infinite !important;
}
@keyframes remnant-name-anim-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.remnant-name-anim-spark {
  display: inline-block !important;
  animation: remnant-name-anim-spark 1.1s ease-in-out infinite !important;
}
@keyframes remnant-name-anim-spark {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  35% { filter: brightness(1.45) drop-shadow(0 0 10px rgba(255, 220, 120, 0.7)); }
  55% { filter: brightness(0.85); }
  75% { filter: brightness(1.25) drop-shadow(0 0 8px rgba(0, 229, 255, 0.5)); }
}

.remnant-name-cos-picker-option.is-locked,
.remnant-name-anim-picker-option.is-locked {
  opacity: 0.42;
  cursor: not-allowed !important;
  filter: grayscale(0.35);
}
.remnant-name-cos-picker-option.is-locked:hover,
.remnant-name-anim-picker-option.is-locked:hover {
  background: rgba(22, 28, 42, 0.72);
  opacity: 0.72;
  filter: grayscale(0.15);
  cursor: not-allowed !important;
}
.remnant-name-cos-picker-option.is-locked *,
.remnant-name-anim-picker-option.is-locked * {
  cursor: not-allowed !important;
}
.remnant-name-picker-lock-tip {
  display: none !important;
}
.profile-edit-name-color-lock {
  display: none;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  opacity: 0.7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' stroke='%23cfd7ff' stroke-width='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' stroke='%23cfd7ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.profile-edit-name-color-row--locked .profile-edit-name-color-lock:not([hidden]) {
  display: inline-block;
}
.profile-edit-name-color-row--locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.profile-edit-name-color-row--locked .profile-edit-name-color-label,
.profile-edit-name-color-row--locked input[type="color"] {
  pointer-events: none;
  cursor: not-allowed !important;
}
.profile-edit-name-lock-helper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  max-width: min(220px, 42vw);
  opacity: 0.62;
  pointer-events: none;
  user-select: none;
  line-height: 1.2;
}
.profile-edit-name-lock-helper-ico {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' stroke='%23aeb8d4' stroke-width='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' stroke='%23aeb8d4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.profile-edit-name-lock-helper-eq {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  color: rgba(170, 184, 210, 0.7);
}
.profile-edit-name-lock-helper-txt {
  font-size: 10px;
  font-weight: 550;
  letter-spacing: 0.01em;
  color: rgba(170, 184, 210, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Jutalom / admin slot: n?v kozmetikum el?n?zet */
.remnant-rew-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 28px;
  line-height: 1.1;
}
.remnant-rew-preview--coin {
  display: flex;
  align-items: center;
  justify-content: center;
}
.remnant-rew-coin-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.remnant-rew-preview--lucide,
.remnant-rew-lucide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e8eefc;
}
.remnant-rew-lucide svg {
  width: 100%;
  height: 100%;
  display: block;
}
.crate-item-emoji .remnant-rew-preview--lucide,
.remnant-admin-rew-card-ico .remnant-rew-preview--lucide {
  width: 100%;
  min-height: 28px;
}

/* Admin ? jutalom katal?gus custom picker */
.remnant-admin-rew-catalog-picker {
  position: relative;
  width: 100%;
}
.remnant-admin-rew-catalog-warn {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
  color: rgba(253, 230, 138, 0.95);
  font-size: 12px;
  line-height: 1.35;
}
.remnant-admin-rew-catalog-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 40px 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(10, 10, 16, 0.98);
  color: #f1f5f9;
  cursor: pointer;
  text-align: left;
  position: relative;
}
.remnant-admin-rew-catalog-trigger:hover,
.remnant-admin-rew-catalog-picker.is-open .remnant-admin-rew-catalog-trigger {
  border-color: rgba(129, 140, 248, 0.75);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.22);
}
.remnant-admin-rew-catalog-trigger-ico {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.remnant-admin-rew-catalog-trigger-ico .remnant-rew-preview {
  transform: scale(0.85);
}
.remnant-admin-rew-catalog-trigger-lab {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.remnant-admin-rew-catalog-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  pointer-events: none;
}
.remnant-admin-rew-catalog-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(8, 9, 16, 0.99);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.remnant-admin-rew-catalog-menu[hidden] {
  display: none !important;
}
.remnant-admin-rew-catalog-search {
  margin: 8px;
  width: calc(100% - 16px);
  box-sizing: border-box;
}
.remnant-admin-rew-catalog-scroll {
  overflow: auto;
  max-height: 340px;
  padding: 0 6px 8px;
}
.remnant-admin-rew-cat-group-h {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 8px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(186, 198, 230, 0.55);
  background: rgba(8, 9, 16, 0.96);
}
.remnant-admin-rew-cat-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #e8eaf6;
  cursor: pointer;
  text-align: left;
}
.remnant-admin-rew-cat-option:hover,
.remnant-admin-rew-cat-option.is-active {
  background: rgba(36, 48, 78, 0.9);
}
.remnant-admin-rew-cat-option-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.remnant-admin-rew-cat-option-ico .remnant-rew-preview--minta {
  font-size: 13px;
}
.remnant-admin-rew-cat-option-mid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.remnant-admin-rew-cat-option-lab {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.remnant-admin-rew-cat-option-sub {
  font-size: 11px;
  color: rgba(180, 194, 220, 0.55);
}
.remnant-admin-rew-cat-option-status {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: 46%;
}
.remnant-admin-rew-cat-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.remnant-admin-rew-cat-dot--on {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.22);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.45);
}
.remnant-admin-rew-cat-dot--off {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.2);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.42);
}
.remnant-admin-rew-cat-rarities {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
}
.remnant-admin-rew-cat-rarity {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
}
.remnant-admin-rew-cat-rarity--common {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.18);
}
.remnant-admin-rew-cat-rarity--rare {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.2);
}
.remnant-admin-rew-cat-rarity--epic {
  color: #e9d5ff;
  background: rgba(168, 85, 247, 0.22);
}
.remnant-admin-rew-cat-rarity--legendary {
  color: #fde68a;
  background: rgba(234, 179, 8, 0.2);
}
.remnant-admin-rew-cat-rarity--mythic {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.2);
}

/* Achievement ? Jelv?nyek sor */
.remnant-ach-badges-row-section {
  margin-top: 18px;
}
.remnant-ach-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.remnant-ach-badge-chip {
  flex: 1 1 200px;
  max-width: 280px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(170, 184, 218, 0.22);
  background: rgba(12, 14, 22, 0.72);
  overflow: hidden;
}
.remnant-ach-badge-chip.is-locked {
  opacity: 0.55;
}
.remnant-ach-badge-chip.is-equipped {
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.12);
}
.remnant-ach-badge-chip-ico {
  flex: 0 0 auto;
  align-self: center;
  transform: scale(0.72);
  transform-origin: center;
}
.remnant-ach-badge-chip-ico--banner {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transform: none;
  align-self: stretch;
}
.remnant-ach-banner-badge-img--chip {
  width: 100%;
  max-height: 48px;
  height: auto;
  object-fit: contain;
}
.remnant-ach-badge-chip-body {
  flex: 1 1 auto;
  min-width: 0;
}
.remnant-ach-badge-chip-title {
  font-size: 13px;
  font-weight: 800;
  color: #f0f4ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.remnant-ach-badge-chip-meta {
  display: none;
}
.remnant-ach-badge-chip-actions {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}
.remnant-ach-badge-chip-actions .remnant-ach-status-btn {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  padding: 6px 10px;
  font-size: 11px;
}
.remnant-ach-ring-ico--lucide {
  width: 22px !important;
  height: 22px !important;
}
.remnant-rew-preview--minta {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: #f0f4ff;
  white-space: nowrap;
}
.crate-item-emoji .remnant-rew-preview--minta,
.remnant-admin-rew-card-ico .remnant-rew-preview--minta {
  font-size: 16px;
}
.remnant-admin-rew-side-hero .remnant-rew-preview--minta {
  font-size: 42px;
}
.remnant-rew-preview--color {
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.remnant-rew-rgb-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: conic-gradient(
    from 0deg,
    #ff0040,
    #ff8000,
    #ffef00,
    #00c853,
    #00e5ff,
    #2979ff,
    #d500f9,
    #ff0040
  );
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
}
.remnant-admin-rew-side-hero .remnant-rew-rgb-circle {
  width: 64px;
  height: 64px;
}
.remnant-rew-preview-color-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(210, 222, 252, 0.72);
  max-width: 72px;
  line-height: 1.2;
}
.remnant-admin-rew-side-hero .remnant-rew-preview-color-lbl {
  font-size: 12px;
  max-width: 160px;
}
.remnant-admin-rew-card-ico,
.crate-item-emoji {
  overflow: visible;
}

.remnant-image-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 10, 16, 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.remnant-image-edit-overlay.open { display: flex; }
.remnant-image-edit-modal {
  width: min(440px, calc(100vw - 28px));
  max-height: min(88vh, 640px);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(15, 15, 24, 0.97);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 10px 12px 12px;
}
.remnant-image-edit-title {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}
.remnant-image-edit-stage {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px;
}
.remnant-image-edit-canvas-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.remnant-image-edit-canvas {
  width: min(100%, 520px);
  height: auto;
  border-radius: 10px;
  cursor: grab;
  touch-action: none;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.03) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}
.remnant-image-edit-canvas.remnant-image-edit-canvas--dragging {
  cursor: grabbing;
}
.remnant-image-edit-drag-hint {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(232, 234, 246, 0.45);
  margin-top: 8px;
  text-align: center;
}
.remnant-image-edit-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: transparent;
  box-shadow: none;
  width: 0;
  height: 0;
}
.remnant-image-edit-mask.avatar {
  border-radius: 12px;
}
.remnant-image-edit-mask.banner {
  border-radius: 12px;
}
.remnant-image-edit-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.remnant-image-edit-control {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 10px 12px;
}
.remnant-image-edit-control-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
  font-weight: 700;
}
.remnant-image-edit-control input[type="range"] {
  width: 100%;
}
.remnant-image-edit-overlay.banner-mode .remnant-image-edit-control--rotation {
  display: none;
}
.remnant-image-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.profile-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.profile-stat {
  background: var(--glass);
  padding: 14px;
  text-align: center;
}

.profile-stat-value { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 800; }
.profile-stat-value.purple.remnant-dash-lb-rank {
  color: var(--purple);
  display: inline-flex;
  align-items: baseline;
}
.profile-stat-label { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* Badges */
.badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

.badge.cyan { border-color: rgba(0,229,255,0.3); color: var(--cyan); background: var(--cyan-dim); }
.badge.blue { border-color: rgba(77,143,255,0.3); color: var(--blue); background: var(--blue-dim); }
.badge.purple { border-color: rgba(168,85,247,0.3); color: var(--purple); background: var(--purple-dim); }
.badge.gold { border-color: rgba(255,149,0,0.4); color: var(--orange); background: rgba(255,149,0,0.12); }
.badge.badge--spin-icon {
  gap: 7px;
}
.badge .remnant-profile-badge-ico,
.badge .remnant-badge-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: currentColor;
}
.badge .remnant-badge-svg {
  display: block;
}
.badge .badge-label-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remnant-badge-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 0;
}
.remnant-badge-ico .remnant-badge-svg,
.remnant-rew-preview--badge .remnant-badge-svg,
.remnant-ach-ring-ico--badge {
  display: block;
  color: currentColor;
}
.remnant-rew-preview--badge {
  color: #e8eefc;
}
.remnant-rew-preview--badge-banner {
  width: 100%;
  max-width: 100%;
  height: 42px;
  min-height: 32px;
  max-height: 44px;
  padding: 0 2px;
  box-sizing: border-box;
  overflow: hidden;
}
.remnant-badge-banner-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.remnant-badge-banner-img--preview,
.remnant-badge-ico--banner .remnant-badge-banner-img--inline {
  width: 100%;
  height: 100%;
  max-height: 44px;
  object-fit: contain;
}
.remnant-badge-ico--banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 44px;
  line-height: 0;
}
.crate-item-emoji .remnant-rew-preview--badge-banner,
.remnant-admin-rew-card-ico .remnant-rew-preview--badge-banner,
.remnant-admin-rew-cat-option-ico .remnant-rew-preview--badge-banner,
.remnant-admin-rew-catalog-trigger-ico .remnant-rew-preview--badge-banner {
  width: 100%;
  max-width: 112px;
  height: 40px;
  min-height: 32px;
  max-height: 40px;
  margin: 0 auto;
}
.crate-item-emoji {
  overflow: hidden;
}
.crate-item-emoji .remnant-rew-preview--badge-banner img,
.remnant-admin-rew-card-ico .remnant-rew-preview--badge-banner img,
.remnant-admin-rew-cat-option-ico .remnant-rew-preview--badge-banner img,
.remnant-admin-rew-catalog-trigger-ico .remnant-rew-preview--badge-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.remnant-ach-badge-chip-ico--banner {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transform: none;
  align-self: stretch;
}
.remnant-ach-banner-badge-img--chip {
  width: 100%;
  max-height: 48px;
  height: auto;
  object-fit: contain;
}
.remnant-ach-ring--badge .remnant-ach-ring-center {
  color: #e8eefc;
}
.remnant-ach-badge-chip.rarity-common { color: #b8c4dc; }
.remnant-ach-badge-chip.rarity-rare { color: #4d8fff; }
.remnant-ach-badge-chip.rarity-epic { color: #c084fc; }
.remnant-ach-badge-chip.rarity-legendary { color: #fbbf24; }
.remnant-ach-badge-chip .remnant-ach-ring-center {
  color: inherit;
}
.crate-item.common .remnant-rew-preview--badge,
.remnant-admin-rew-rarity[data-rarity="common"] .remnant-rew-preview--badge { color: #c5d0e6; }
.crate-item.rare .remnant-rew-preview--badge,
.remnant-admin-rew-rarity[data-rarity="rare"] .remnant-rew-preview--badge { color: #60a5fa; }
.crate-item.epic .remnant-rew-preview--badge,
.remnant-admin-rew-rarity[data-rarity="epic"] .remnant-rew-preview--badge { color: #c084fc; }
.crate-item.legendary .remnant-rew-preview--badge,
.remnant-admin-rew-rarity[data-rarity="legendary"] .remnant-rew-preview--badge { color: #fbbf24; }
.crate-item.mythic .remnant-rew-preview--badge,
.remnant-admin-rew-rarity[data-rarity="mythic"] .remnant-rew-preview--badge { color: #fb7185; }

/* Social links */
.social-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.social-link {
  padding: 6px 14px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex; align-items: center; gap: 6px;
}
.social-link.discord { background: rgba(88,101,242,0.15); border: 1px solid rgba(88,101,242,0.4); color: #7289da; }
.social-link.steam { background: rgba(27,40,56,0.4); border: 1px solid rgba(102,170,205,0.3); color: #66aacd; }
.social-link.twitter {
  background: rgba(16, 18, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #9ca3af;
}
.social-link.twitter .social-x-ico {
  color: #52525b;
  font-weight: 700;
}
.social-link.twitch { background: rgba(145,70,255,0.14); border: 1px solid rgba(145,70,255,0.34); color: #b48cff; }
.social-link.youtube { background: rgba(255,0,0,0.14); border: 1px solid rgba(255,0,0,0.34); color: #ff5f5f; }
.social-link.tiktok { background: rgba(36, 36, 36, 0.65); border: 1px solid rgba(255,255,255,0.18); color: #f5f5f5; }
.social-link.social-link--badge {
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  line-height: 0;
}
.social-badge-img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 148px;
  object-fit: contain;
  object-position: left center;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.social-links button.social-link {
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.social-link:hover { transform: translateY(-1px); opacity: 0.9; }
.social-link.social-link--badge:hover { opacity: 0.92; }
.profile-social-editor {
  display: grid;
  gap: 10px;
}
.profile-social-row {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.profile-social-row-title {
  font-size: 12px;
  color: rgba(232,234,246,0.88);
  margin-bottom: 8px;
}
.profile-social-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.profile-social-url-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profile-social-url-prefix {
  font-size: 12px;
  color: rgba(232,234,246,0.62);
}
.profile-social-input {
  width: 180px;
  max-width: 44vw;
}
.profile-social-ok {
  color: #4ade80;
  font-size: 12px;
  font-weight: 700;
}

/* Achievements */
.achievement-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }

.achievement {
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
}

.achievement:hover { transform: scale(1.08); }
.achievement.unlocked { background: var(--glass); border: 1px solid var(--glass-border); }
.achievement.locked { background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.06); opacity: 0.4; }
.achievement-label { font-size: 9px; color: var(--text-faint); margin-top: 4px; text-align: center; line-height: 1.2; }
.profile-ach-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.profile-ach-stat {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  padding: 8px 10px;
  display: grid;
  gap: 2px;
}
.profile-ach-stat .k { font-size: 11px; color: rgba(232,234,246,0.62); }
.profile-ach-stat .v { font-size: 15px; font-family: 'Syne', sans-serif; font-weight: 800; }
.profile-ach-filters { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.profile-ach-filters .glass-btn.active {
  border-color: rgba(0,229,255,0.45);
  box-shadow: 0 0 0 1px rgba(0,229,255,0.22) inset;
}
.profile-ach-equipped-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-ach-equipped-strip .profile-ach-equipped-badge {
  min-width: 172px;
  justify-content: space-between;
  gap: 10px;
  padding-right: 6px;
}
.profile-ach-equipped-strip .profile-ach-equipped-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-ach-equipped-strip .profile-ach-equipped-remove {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.08);
  color: rgba(232,234,246,0.92);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.profile-ach-equipped-strip .profile-ach-equipped-remove:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.36);
  color: #fff;
}
.profile-ach-equipped-strip .profile-ach-equipped-remove:focus-visible {
  outline: 2px solid rgba(0,229,255,0.55);
  outline-offset: 1px;
}
.profile-ach-grid { margin-top: 10px; display: grid; gap: 12px; }
.profile-ach-category {
  border: 1px solid rgba(123, 213, 255, 0.22);
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(0,229,255,0.10) 0%, rgba(0,0,0,0) 48%),
    radial-gradient(120% 120% at 100% 100%, rgba(168,85,247,0.10) 0%, rgba(0,0,0,0) 46%),
    rgba(255,255,255,0.03);
  padding: 12px;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.35), inset 0 0 0 1px rgba(255,255,255,0.02);
  position: relative;
}
.profile-ach-category--global_playtime {
  border-color: rgba(56,189,248,0.34);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(56,189,248,0.14) 0%, rgba(0,0,0,0) 48%),
    radial-gradient(120% 120% at 100% 100%, rgba(14,165,233,0.12) 0%, rgba(0,0,0,0) 46%),
    rgba(255,255,255,0.03);
}
.profile-ach-category--game_playtime {
  border-color: rgba(34,197,94,0.34);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(34,197,94,0.13) 0%, rgba(0,0,0,0) 48%),
    radial-gradient(120% 120% at 100% 100%, rgba(16,185,129,0.11) 0%, rgba(0,0,0,0) 46%),
    rgba(255,255,255,0.03);
}
.profile-ach-category--mc_playtime {
  border-color: rgba(52,211,153,0.34);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(52,211,153,0.13) 0%, rgba(0,0,0,0) 48%),
    radial-gradient(120% 120% at 100% 100%, rgba(16,185,129,0.11) 0%, rgba(0,0,0,0) 46%),
    rgba(255,255,255,0.03);
}
.profile-ach-category--rlrp_playtime {
  border-color: rgba(244,114,182,0.34);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(244,114,182,0.13) 0%, rgba(0,0,0,0) 48%),
    radial-gradient(120% 120% at 100% 100%, rgba(168,85,247,0.11) 0%, rgba(0,0,0,0) 46%),
    rgba(255,255,255,0.03);
}
.profile-ach-category--streak {
  border-color: rgba(251,146,60,0.36);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(251,146,60,0.15) 0%, rgba(0,0,0,0) 48%),
    radial-gradient(120% 120% at 100% 100%, rgba(239,68,68,0.12) 0%, rgba(0,0,0,0) 46%),
    rgba(255,255,255,0.03);
}
.profile-ach-category--level {
  border-color: rgba(250,204,21,0.36);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(250,204,21,0.14) 0%, rgba(0,0,0,0) 48%),
    radial-gradient(120% 120% at 100% 100%, rgba(245,158,11,0.12) 0%, rgba(0,0,0,0) 46%),
    rgba(255,255,255,0.03);
}
.profile-ach-category--leaderboard {
  border-color: rgba(168,85,247,0.38);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(168,85,247,0.16) 0%, rgba(0,0,0,0) 48%),
    radial-gradient(120% 120% at 100% 100%, rgba(129,140,248,0.13) 0%, rgba(0,0,0,0) 46%),
    rgba(255,255,255,0.03);
}
.profile-ach-category--pupak_leaderboard {
  border-color: rgba(245,158,11,0.38);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(245,158,11,0.16) 0%, rgba(0,0,0,0) 48%),
    radial-gradient(120% 120% at 100% 100%, rgba(234,88,12,0.13) 0%, rgba(0,0,0,0) 46%),
    rgba(255,255,255,0.03);
}
.profile-ach-category--shop {
  border-color: rgba(244,114,182,0.36);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(244,114,182,0.14) 0%, rgba(0,0,0,0) 48%),
    radial-gradient(120% 120% at 100% 100%, rgba(236,72,153,0.12) 0%, rgba(0,0,0,0) 46%),
    rgba(255,255,255,0.03);
}
.profile-ach-category::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,229,255,0.0), rgba(0,229,255,0.45), rgba(168,85,247,0.45), rgba(168,85,247,0.0));
  pointer-events: none;
}
.profile-ach-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 4px;
}
.profile-ach-category-title {
  font-size: 14px;
  font-weight: 800;
  color: rgba(241, 248, 255, 0.98);
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(0,229,255,0.22);
}
.profile-ach-category-meta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(233, 242, 255, 0.98);
  border: 1px solid rgba(0,229,255,0.45);
  background: linear-gradient(180deg, rgba(0,229,255,0.24), rgba(168,85,247,0.16));
  border-radius: 999px;
  padding: 3px 10px;
  box-shadow: 0 0 14px rgba(0,229,255,0.22);
}
.profile-ach-category-meta.dynamic {
  border-color: rgba(180, 120, 62, 0.62);
  background: linear-gradient(180deg, rgba(194, 136, 74, 0.34), rgba(128, 82, 44, 0.24));
  color: #ffe7c9;
  box-shadow: 0 0 14px rgba(181, 128, 72, 0.28);
}
.profile-ach-category-meta.static {
  border-color: rgba(0,229,255,0.45);
  background: linear-gradient(180deg, rgba(0,229,255,0.24), rgba(168,85,247,0.16));
  color: rgba(233, 242, 255, 0.98);
}
.profile-ach-category--global_playtime .profile-ach-category-meta {
  border-color: rgba(56,189,248,0.5);
  background: linear-gradient(180deg, rgba(56,189,248,0.24), rgba(14,165,233,0.16));
}
.profile-ach-category--game_playtime .profile-ach-category-meta {
  border-color: rgba(34,197,94,0.5);
  background: linear-gradient(180deg, rgba(34,197,94,0.24), rgba(16,185,129,0.16));
}
.profile-ach-category--mc_playtime .profile-ach-category-meta {
  border-color: rgba(52,211,153,0.5);
  background: linear-gradient(180deg, rgba(52,211,153,0.24), rgba(16,185,129,0.16));
}
.profile-ach-category--rlrp_playtime .profile-ach-category-meta {
  border-color: rgba(244,114,182,0.5);
  background: linear-gradient(180deg, rgba(244,114,182,0.24), rgba(168,85,247,0.16));
}
.profile-ach-category--streak .profile-ach-category-meta {
  border-color: rgba(251,146,60,0.5);
  background: linear-gradient(180deg, rgba(251,146,60,0.24), rgba(239,68,68,0.16));
}
.profile-ach-category--level .profile-ach-category-meta {
  border-color: rgba(250,204,21,0.52);
  background: linear-gradient(180deg, rgba(250,204,21,0.24), rgba(245,158,11,0.16));
}
.profile-ach-category--leaderboard .profile-ach-category-meta {
  border-color: rgba(168,85,247,0.52);
  background: linear-gradient(180deg, rgba(168,85,247,0.24), rgba(129,140,248,0.16));
}
.profile-ach-category--pupak_leaderboard .profile-ach-category-meta {
  border-color: rgba(245,158,11,0.52);
  background: linear-gradient(180deg, rgba(245,158,11,0.24), rgba(234,88,12,0.16));
}
.profile-ach-category--shop .profile-ach-category-meta {
  border-color: rgba(244,114,182,0.52);
  background: linear-gradient(180deg, rgba(244,114,182,0.24), rgba(236,72,153,0.16));
}
/* Pup?k VIP ? rang id?: mediev?l / exkluz?v (arany + m?ly b?bor, mint a pr?mium kateg?ria-blokkok) */
.profile-ach-category--pupak_vip {
  border-color: rgba(201, 162, 39, 0.44);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(212, 175, 55, 0.18) 0%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(120% 120% at 100% 100%, rgba(124, 58, 237, 0.16) 0%, rgba(0, 0, 0, 0) 48%),
    linear-gradient(168deg, rgba(88, 28, 135, 0.14) 0%, rgba(15, 23, 42, 0.52) 42%, rgba(69, 26, 3, 0.2) 100%),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    0 8px 24px rgba(2, 6, 23, 0.48),
    inset 0 0 0 1px rgba(212, 175, 55, 0.1),
    inset 0 1px 0 rgba(255, 248, 220, 0.05);
}
.profile-ach-category--pupak_vip .profile-ach-category-title {
  color: rgba(255, 251, 235, 0.98);
  text-shadow:
    0 0 14px rgba(250, 204, 21, 0.42),
    0 0 22px rgba(168, 85, 247, 0.28),
    0 1px 0 rgba(0, 0, 0, 0.55);
}
.profile-ach-category--pupak_vip::before {
  background: linear-gradient(
    90deg,
    rgba(212, 175, 55, 0),
    rgba(212, 175, 55, 0.55),
    rgba(167, 139, 250, 0.5),
    rgba(212, 175, 55, 0)
  );
}
.profile-ach-category--pupak_vip .profile-ach-category-meta.static {
  border-color: rgba(201, 162, 39, 0.58);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.28), rgba(91, 33, 182, 0.22));
  color: #fff8e8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  box-shadow:
    0 0 16px rgba(212, 175, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Dinamikus c?mke mindig homok/barna legyen kateg?ri?t?l f?ggetlen?l */
.profile-ach-category .profile-ach-category-meta.dynamic {
  border-color: rgba(180, 120, 62, 0.62);
  background: linear-gradient(180deg, rgba(194, 136, 74, 0.34), rgba(128, 82, 44, 0.24));
  color: #ffe7c9;
  box-shadow: 0 0 14px rgba(181, 128, 72, 0.28);
}
.profile-ach-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding-top: 2px;
}
.profile-ach-row.profile-ach-row--vip-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.profile-ach-row.profile-ach-row--reward-spin {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
#remnant-ach-reward-spin-card {
  margin-top: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.remnant-vip-ach-divider {
  text-align: center;
  margin: 36px 0 28px;
  padding: 0 16px;
}
.remnant-vip-ach-divider__label {
  display: inline-block;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255, 251, 235, 0.98);
  text-shadow:
    0 0 10px rgba(253, 224, 71, 0.55),
    0 0 22px rgba(250, 204, 21, 0.5),
    0 0 40px rgba(234, 179, 8, 0.38),
    0 1px 0 rgba(0, 0, 0, 0.45);
}
#remnant-ach-vip-card {
  margin-top: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
#remnant-ach-vip-grid.profile-ach-row.profile-ach-row--vip-8 {
  grid-template-columns: repeat(8, minmax(150px, 1fr));
  gap: 14px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 6px 4px 10px;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1500px) {
  #remnant-ach-vip-grid.profile-ach-row.profile-ach-row--vip-8 {
    grid-template-columns: repeat(4, minmax(168px, 1fr));
  }
}
@media (max-width: 820px) {
  #remnant-ach-vip-grid.profile-ach-row.profile-ach-row--vip-8 {
    grid-template-columns: repeat(2, minmax(148px, 1fr));
  }
}
#remnant-ach-vip-grid .profile-ach-slot {
  min-width: 0;
  grid-template-rows: auto auto auto 1fr;
}
#remnant-ach-vip-grid .profile-ach-slot-badge {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-height: none;
  min-height: 34px;
  padding: 6px 8px;
  font-size: 11.5px;
  line-height: 1.22;
  hyphens: none;
}
#remnant-ach-vip-grid .profile-ach-slot-name {
  font-size: 11px;
  min-height: 32px;
  max-height: 40px;
  -webkit-line-clamp: 2;
}
.profile-ach-slot {
  min-height: 138px;
  border: 1px solid rgba(122, 200, 255, 0.24);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.015) 100%),
    rgba(7, 12, 23, 0.55);
  padding: 7px 6px;
  display: grid;
  grid-template-rows: 30px 36px 30px 1fr;
  align-content: stretch;
  gap: 6px;
  box-shadow:
    0 8px 18px rgba(2, 8, 20, 0.35),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 0 0 1px rgba(86, 171, 255, 0.10);
}
.profile-ach-slot.locked {
  border-style: solid;
  border-color: rgba(148,163,184,0.28);
}
.profile-ach-slot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.26);
  padding: 5px 9px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(244,250,255,0.98);
  background: rgba(255,255,255,0.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI", sans-serif;
  font-variant-emoji: emoji;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 31px;
  max-height: 31px;
}
.profile-ach-slot-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(243,248,255,0.96);
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  margin-top: 4px;
  margin-bottom: -2px;
  min-height: 36px;
  max-height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.profile-ach-slot-progress {
  font-size: 12px;
  line-height: 1.2;
  color: rgba(224,238,255,0.9);
  text-shadow: 0 1px 0 rgba(0,0,0,0.28);
  margin-top: -2px;
  min-height: 30px;
  max-height: 30px;
  overflow: hidden;
}
.profile-ach-slot-actions {
  align-self: end;
  display: flex;
}
.profile-ach-slot-actions .glass-btn {
  width: 100%;
  min-height: 29px;
  font-size: 11px;
  padding: 5px 8px;
}
.profile-ach-slot-actions .glass-btn.btn-primary {
  border-color: rgba(34,197,94,0.55);
  background: linear-gradient(180deg, rgba(34,197,94,0.22), rgba(16,185,129,0.12));
  color: #b6ffd4;
}
.profile-ach-slot-actions .glass-btn.btn-danger {
  border-color: rgba(239,68,68,0.55);
  background: linear-gradient(180deg, rgba(239,68,68,0.24), rgba(220,38,38,0.12));
  color: #ffd0d0;
}
.profile-ach-slot-actions .glass-btn.btn-ach-disabled {
  border-color: rgba(148,163,184,0.35);
  background: linear-gradient(180deg, rgba(100,116,139,0.20), rgba(71,85,105,0.10));
  color: rgba(203,213,225,0.85);
}
.profile-ach-slot-actions .glass-btn:disabled {
  opacity: 0.45;
  filter: grayscale(0.2);
  cursor: not-allowed;
}
.profile-ach-slot.tier-1 .profile-ach-slot-badge { border-color: rgba(148,163,184,0.55); color: #dbe5f2; }
.profile-ach-slot.tier-2 .profile-ach-slot-badge { border-color: rgba(34,197,94,0.55); color: #bbf7d0; }
.profile-ach-slot.tier-3 .profile-ach-slot-badge { border-color: rgba(14,165,233,0.62); color: #bae6fd; box-shadow: 0 0 10px rgba(14,165,233,0.2); }
.profile-ach-slot.tier-4 .profile-ach-slot-badge { border-color: rgba(168,85,247,0.62); color: #ddd6fe; box-shadow: 0 0 12px rgba(168,85,247,0.24); }
.profile-ach-slot.tier-5 .profile-ach-slot-badge { border-color: rgba(244,114,182,0.62); color: #fbcfe8; box-shadow: 0 0 12px rgba(244,114,182,0.24); }
.profile-ach-slot.tier-6 .profile-ach-slot-badge { border-color: rgba(250,204,21,0.68); color: #fde68a; box-shadow: 0 0 12px rgba(250,204,21,0.26); }
.profile-ach-slot.tier-7 .profile-ach-slot-badge { border-color: rgba(251,146,60,0.70); color: #ffedd5; box-shadow: 0 0 14px rgba(251,146,60,0.30); }
.profile-ach-slot.tier-8 .profile-ach-slot-badge { border-color: rgba(56,189,248,0.74); color: #e0f2fe; box-shadow: 0 0 16px rgba(56,189,248,0.34); }
.profile-ach-slot.tier-9 .profile-ach-slot-badge { border-color: rgba(129,140,248,0.76); color: #e0e7ff; box-shadow: 0 0 18px rgba(129,140,248,0.36); }
.profile-ach-slot.tier-10 .profile-ach-slot-badge {
  border-color: rgba(251,191,36,0.88);
  color: #fef3c7;
  box-shadow: 0 0 20px rgba(251,191,36,0.42), 0 0 34px rgba(168,85,247,0.28);
}
.profile-ach-empty { margin-top: 10px; font-size: 12px; color: rgba(232,234,246,0.58); }

/* ???????????????????????????????????????????????
   ACHIEVEMENT EDITOR ? reference visuals (profile edit)
??????????????????????????????????????????????? */
.remnant-ach-page {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* ?? Shared progress ring ?? */
.remnant-ach-ring {
  --ach-ring-pct: 0;
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto;
}
.remnant-ach-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}
.remnant-ach-ring-deco {
  fill: none;
  stroke: rgba(0, 229, 255, 0.08);
  stroke-width: 1.5;
}
.remnant-ach-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 5;
}
.remnant-ach-ring-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 238.76;
  stroke-dashoffset: calc(238.76 - (238.76 * var(--ach-ring-pct, 0) / 100));
  transition: stroke-dashoffset 0.5s ease;
}
.remnant-ach-ring--progress .remnant-ach-ring-fill {
  stroke: #147dff;
  filter: drop-shadow(0 0 4px rgba(20, 125, 255, 0.35));
}
.remnant-ach-ring--unlocked .remnant-ach-ring-fill,
.remnant-ach-ring--equipped .remnant-ach-ring-fill {
  stroke: #147dff;
  filter: drop-shadow(0 0 5px rgba(20, 125, 255, 0.4));
}
.remnant-ach-ring--locked .remnant-ach-ring-fill {
  stroke: rgba(100, 120, 150, 0.28);
  filter: none;
}
.remnant-ach-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(120, 175, 255, 0.95);
}
.remnant-ach-ring--locked .remnant-ach-ring-center {
  color: rgba(130, 150, 180, 0.5);
}
.remnant-ach-ring--equipped .remnant-ach-ring-center {
  color: rgba(120, 175, 255, 0.95);
}
.remnant-ach-ring-ico {
  display: block;
}

/* ?? Shared progress bar ?? */
.remnant-ach-prog-bar {
  width: 100%;
}
.remnant-ach-prog-bar-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(4, 10, 22, 0.95) 0%, rgba(8, 16, 30, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  position: relative;
}
.remnant-ach-prog-bar-fill {
  height: 100%;
  border-radius: inherit;
  position: relative;
  background: linear-gradient(90deg, #0b3d6e 0%, #1258a8 38%, #147dff 72%, #3d9bff 100%);
  box-shadow: 0 0 6px rgba(20, 125, 255, 0.22);
  transition: width 0.45s ease;
  min-width: 0;
}
.remnant-ach-prog-bar-cap {
  display: none;
}
.remnant-ach-prog-bar--summary .remnant-ach-prog-bar-cap {
  display: none;
}
.remnant-ach-prog-bar--unlocked .remnant-ach-prog-bar-fill,
.remnant-ach-prog-bar--progress .remnant-ach-prog-bar-fill,
.remnant-ach-prog-bar--equipped .remnant-ach-prog-bar-fill {
  background: linear-gradient(90deg, #0b3d6e 0%, #1258a8 38%, #147dff 72%, #3d9bff 100%);
  box-shadow: 0 0 6px rgba(20, 125, 255, 0.22);
}
.remnant-ach-prog-bar--locked .remnant-ach-prog-bar-fill {
  background: rgba(70, 90, 120, 0.22);
  box-shadow: none;
}

/* ?? Summary panel ?? */
.remnant-ach-summary {
  --ach-summary-emblem-size: 140px;
  --ach-summary-emblem-gap: 28px;
  border: 1px solid rgba(70, 110, 170, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(14, 24, 46, 0.94) 0%, rgba(8, 14, 30, 0.92) 55%, rgba(6, 12, 26, 0.96) 100%);
  padding: 24px 28px 20px;
  min-height: 190px;
  box-shadow:
    0 12px 36px rgba(2, 8, 20, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}
.remnant-ach-summary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(20, 125, 255, 0.0), rgba(20, 125, 255, 0.35), rgba(20, 125, 255, 0.0));
  pointer-events: none;
}
.remnant-ach-summary-main {
  display: grid;
  grid-template-columns: var(--ach-summary-emblem-size) minmax(0, 1fr);
  column-gap: var(--ach-summary-emblem-gap);
  align-items: center;
  min-height: 170px;
}
.remnant-ach-summary-main > * {
  flex: 0 0 auto;
}
.remnant-ach-summary-emblem-wrap {
  width: var(--ach-summary-emblem-size);
  height: var(--ach-summary-emblem-size);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: -14px;
  justify-self: start;
  filter: drop-shadow(0 0 16px rgba(20, 125, 255, 0.2));
}
.remnant-ach-summary-metrics {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  min-width: 0;
  padding-right: 12px;
}
.remnant-ach-summary-metrics > * {
  flex: 0 0 auto;
}
.remnant-ach-summary-shield-img {
  width: var(--ach-summary-emblem-size);
  height: var(--ach-summary-emblem-size);
  object-fit: contain;
  display: block;
}
.remnant-ach-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 108px;
  align-self: center;
}
.remnant-ach-summary-stat-k {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(150, 170, 200, 0.62);
  white-space: nowrap;
  margin-bottom: 0;
}
.remnant-ach-summary-stat-value-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.remnant-ach-summary-stat-v {
  font-family: 'Syne', sans-serif;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: rgba(248, 252, 255, 0.98);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.remnant-ach-summary-stat-v--equipped {
  font-size: 40px;
  letter-spacing: -0.02em;
}
.remnant-ach-summary-stat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
}
.remnant-ach-summary-stat-ico--trophy {
  color: rgba(70, 165, 255, 0.92);
}
.remnant-ach-summary-stat-ico--lock-open {
  color: rgba(70, 165, 255, 0.92);
}
.remnant-ach-summary-stat-ico--gem {
  color: rgba(167, 139, 250, 0.92);
}
.remnant-ach-summary-stat-ico--shield {
  color: rgba(74, 222, 128, 0.9);
}
.remnant-ach-summary-ring-wrap--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 170px;
}
.remnant-ach-summary-ring {
  --ach-ring-pct: 0;
  --ach-ring-circ: 427.26;
  position: relative;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
  filter:
    drop-shadow(0 7px 22px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 26px rgba(12, 50, 100, 0.18));
}
.remnant-ach-summary-ring-svg {
  grid-area: 1 / 1;
  width: 170px;
  height: 170px;
  transform: rotate(-90deg);
  display: block;
  overflow: visible;
}
.remnant-ach-summary-ring-track {
  fill: none;
  stroke: #0a1220;
  stroke-width: 14;
  opacity: 1;
}
.remnant-ach-summary-ring-progress {
  fill: none;
  stroke: url(#remnantAchSummaryRingGrad);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: var(--ach-ring-circ);
  stroke-dashoffset: calc(var(--ach-ring-circ) - (var(--ach-ring-circ) * var(--ach-ring-pct, 0) / 100));
  filter: url(#remnantAchSummaryRingGlow);
  transition: stroke-dashoffset 0.75s cubic-bezier(0.33, 1, 0.68, 1);
}
.remnant-ach-summary-ring-inner-disc {
  fill: #070d18;
  stroke: rgba(42, 68, 108, 0.42);
  stroke-width: 1.5;
}
.remnant-ach-summary-ring-content {
  grid-area: 1 / 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 90px;
  height: 90px;
  text-align: center;
  pointer-events: none;
}
.remnant-ach-summary-ring-label {
  font-family: 'Syne', sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: rgba(248, 252, 255, 0.98);
  line-height: 1;
}
.remnant-ach-summary-ring-caption {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(145, 165, 195, 0.62);
  line-height: 1.2;
}
.remnant-ach-summary-bar-wrap {
  margin-top: 18px;
  margin-left: calc(var(--ach-summary-emblem-size) + var(--ach-summary-emblem-gap));
  padding-right: 12px;
}
.remnant-ach-summary-bar.remnant-ach-prog-bar {
  margin-top: 0;
}
.remnant-ach-prog-bar--summary .remnant-ach-prog-bar-track {
  height: 8px;
}

/* ?? Main tabs ?? */
.remnant-ach-main-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 2px;
}
.remnant-ach-main-tab {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: rgba(190, 210, 240, 0.68);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.remnant-ach-main-tab:hover {
  color: rgba(232, 240, 255, 0.92);
  background: rgba(255, 255, 255, 0.04);
}
.remnant-ach-main-tab.active {
  color: rgba(241, 248, 255, 0.98);
  background: rgba(20, 125, 255, 0.1);
  border-color: rgba(20, 125, 255, 0.42);
  border-bottom-color: transparent;
  box-shadow: inset 0 1px 0 rgba(20, 125, 255, 0.18);
}
.remnant-ach-main-tab {
  border-radius: 11px 11px 0 0;
  padding: 12px 22px;
}
.remnant-ach-main-panel { display: none; min-width: 0; }
.remnant-ach-main-panel.active { display: block; }
.remnant-ach-page .profile-ach-filters {
  margin: 0 0 16px;
  gap: 6px;
}
.remnant-ach-page .profile-ach-filters .glass-btn {
  font-size: 12px;
  padding: 5px 12px;
  min-height: 30px;
}
.remnant-ach-page .profile-ach-filters .glass-btn.active {
  border-color: rgba(0, 229, 255, 0.38);
  background: rgba(0, 229, 255, 0.1);
  box-shadow: none;
}
.remnant-ach-panel-hint,
.remnant-ach-equipped-empty {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(190, 210, 240, 0.6);
}
.remnant-ach-page-actions {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ?? Accordion categories ?? */
.remnant-ach-page .profile-ach-grid {
  margin-top: 0;
  gap: 14px;
}
.remnant-ach-page .remnant-ach-accordion.profile-ach-category {
  border: 1px solid rgba(70, 110, 170, 0.22);
  border-radius: 12px;
  background: rgba(8, 14, 28, 0.62);
  padding: 0;
  box-shadow: 0 4px 16px rgba(2, 8, 20, 0.28);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.remnant-ach-page .remnant-ach-accordion.is-open.profile-ach-category {
  border-color: rgba(70, 110, 170, 0.32);
  background: linear-gradient(180deg, rgba(12, 20, 38, 0.88) 0%, rgba(8, 14, 28, 0.82) 100%);
  box-shadow: 0 6px 20px rgba(2, 8, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.remnant-ach-page .remnant-ach-accordion.profile-ach-category::before {
  display: none;
}
.remnant-ach-page .remnant-ach-accordion-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 18px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.remnant-ach-page .remnant-ach-accordion-head:hover {
  background: rgba(255, 255, 255, 0.03);
}
.remnant-ach-cat-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(120, 175, 255, 0.88);
  background: linear-gradient(180deg, rgba(16, 28, 48, 0.9) 0%, rgba(10, 18, 34, 0.85) 100%);
  border: 1px solid rgba(70, 110, 170, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.remnant-ach-page .remnant-ach-accordion.is-open .remnant-ach-cat-icon-wrap {
  color: rgba(140, 190, 255, 0.95);
  border-color: rgba(20, 125, 255, 0.32);
  box-shadow: 0 0 10px rgba(20, 125, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.remnant-ach-cat-svg {
  display: block;
}
.remnant-ach-accordion-head-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.remnant-ach-page .remnant-ach-accordion-title {
  font-size: 17px;
  font-weight: 600;
  color: rgba(248, 252, 255, 0.98);
  text-shadow: none;
}
.remnant-ach-accordion-sub {
  font-size: 12px;
  color: rgba(100, 140, 200, 0.72);
}
.remnant-ach-accordion-head-end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.remnant-ach-page .remnant-ach-accordion-count {
  font-size: 13px;
  font-weight: 700;
  color: rgba(180, 215, 245, 0.82);
  font-variant-numeric: tabular-nums;
}
.remnant-ach-page .remnant-ach-accordion-meta {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(140, 165, 200, 0.42);
}
.remnant-ach-page .remnant-ach-accordion-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(170, 200, 235, 0.7);
  transition: transform 0.2s ease, color 0.2s ease;
}
.remnant-ach-page .remnant-ach-accordion.is-open .remnant-ach-accordion-chevron {
  transform: rotate(180deg);
  color: rgba(120, 175, 255, 0.8);
}
.remnant-ach-accordion-chevron-svg {
  display: block;
}
.remnant-ach-prog-bar:not(.remnant-ach-prog-bar--summary) .remnant-ach-prog-bar-track {
  height: 6px;
}
.remnant-ach-page .remnant-ach-accordion-body {
  display: none;
  padding: 0 18px 16px;
  border-top: none;
}
.remnant-ach-page .remnant-ach-accordion.is-open .remnant-ach-accordion-body {
  display: block;
  animation: remnantAchAccordionIn 0.22s ease;
}
@keyframes remnantAchAccordionIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.remnant-ach-page .profile-ach-category-head,
.remnant-ach-page .profile-ach-category-title,
.remnant-ach-page .profile-ach-category-meta {
  display: none;
}

/* ?? Horizontal card scroll ?? */
.remnant-ach-scroll-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 0 4px;
}
.remnant-ach-scroll-wrap::before,
.remnant-ach-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  z-index: 1;
  pointer-events: none;
}
.remnant-ach-scroll-wrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(8, 14, 28, 0.92) 0%, rgba(8, 14, 28, 0) 100%);
}
.remnant-ach-scroll-wrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(8, 14, 28, 0.92) 0%, rgba(8, 14, 28, 0) 100%);
}
.remnant-ach-scroll-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 12px 40px 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.remnant-ach-scroll-track::-webkit-scrollbar {
  display: none;
}
.remnant-ach-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(70, 110, 170, 0.32);
  background: rgba(10, 18, 34, 0.94);
  color: rgba(150, 190, 240, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(2, 8, 20, 0.45);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.remnant-ach-scroll-btn:hover {
  border-color: rgba(20, 125, 255, 0.42);
  background: rgba(14, 24, 44, 0.96);
}
.remnant-ach-scroll-btn--prev {
  left: 2px;
}
.remnant-ach-scroll-btn--next {
  right: 2px;
}
.remnant-ach-scroll-btn-ico--flip {
  transform: scaleX(-1);
}
.remnant-ach-scroll-btn-ico {
  display: block;
}

/* ?? Achievement cards ?? */
.remnant-ach-card {
  flex: 0 0 182px;
  width: 182px;
  min-height: 252px;
  scroll-snap-align: start;
  border: 1px solid rgba(70, 110, 170, 0.24);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(18, 30, 54, 0.92) 0%, rgba(10, 18, 34, 0.88) 48%, rgba(8, 14, 28, 0.92) 100%);
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  box-shadow:
    0 6px 18px rgba(2, 8, 20, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.remnant-ach-card:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 125, 255, 0.36);
  box-shadow: 0 10px 22px rgba(2, 8, 20, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.remnant-ach-card.is-locked {
  opacity: 0.68;
  border-color: rgba(90, 110, 140, 0.24);
}
.remnant-ach-card.is-locked:hover {
  transform: none;
  box-shadow: 0 6px 18px rgba(2, 8, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.remnant-ach-card.is-equipped {
  border-color: rgba(70, 110, 170, 0.3);
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.94) 0%, rgba(10, 18, 34, 0.9) 100%);
}
.remnant-ach-card-ring {
  display: flex;
  justify-content: center;
  padding: 4px 0 6px;
}
.remnant-ach-card-ring--banner {
  width: 100%;
  padding: 6px 0 4px;
  align-items: center;
}
.remnant-ach-banner-badge-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.remnant-ach-banner-badge-img--slot {
  max-height: 86px;
}
.remnant-ach-card.is-locked .remnant-ach-banner-badge-img--slot {
  filter: grayscale(0.82) brightness(0.72);
  opacity: 0.78;
}
.remnant-ach-card-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(248, 252, 255, 0.98);
  text-align: center;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.remnant-ach-card-progress {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: rgba(140, 170, 210, 0.72);
  text-align: center;
  white-space: nowrap;
}
.remnant-ach-card-actions {
  margin-top: auto;
  padding-top: 6px;
}

/* Status buttons */
.remnant-ach-status-btn {
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.remnant-ach-status-btn--equip {
  background: rgba(14, 50, 90, 0.55);
  border-color: rgba(20, 125, 255, 0.42);
  color: rgba(170, 210, 255, 0.96);
}
.remnant-ach-status-btn--equip:hover {
  background: rgba(18, 58, 102, 0.62);
  border-color: rgba(20, 125, 255, 0.55);
  box-shadow: 0 0 10px rgba(20, 125, 255, 0.14);
}
.remnant-ach-status-btn--equipped {
  background: rgba(14, 56, 38, 0.55);
  border-color: rgba(74, 222, 128, 0.42);
  color: rgba(180, 250, 210, 0.94);
}
.remnant-ach-status-btn--equipped:hover {
  background: rgba(18, 64, 44, 0.62);
  border-color: rgba(74, 222, 128, 0.55);
}
.remnant-ach-status-btn--locked {
  background: rgba(40, 50, 65, 0.35);
  border-color: rgba(90, 110, 140, 0.28);
  color: rgba(150, 170, 200, 0.55);
  cursor: not-allowed;
  opacity: 0.85;
}
.remnant-ach-status-btn-ico {
  display: block;
  flex-shrink: 0;
}

/* Rarity accents */
.remnant-ach-card.rarity-rare { border-color: rgba(56, 189, 248, 0.42); }
.remnant-ach-card.rarity-epic { border-color: rgba(168, 85, 247, 0.42); }
.remnant-ach-card.rarity-legendary { border-color: rgba(251, 191, 36, 0.48); }

/* Neutralize legacy slot styles inside editor */
.remnant-ach-page .profile-ach-slot-badge,
.remnant-ach-page .profile-ach-slot-name,
.remnant-ach-page .profile-ach-slot-progress,
.remnant-ach-page .profile-ach-slot-icon,
.remnant-ach-page .profile-ach-slot-title,
.remnant-ach-page .profile-ach-slot-progress-text,
.remnant-ach-page .profile-ach-slot-bar {
  display: none !important;
}
.remnant-ach-page .profile-ach-category--global_playtime,
.remnant-ach-page .profile-ach-category--game_playtime,
.remnant-ach-page .profile-ach-category--mc_playtime,
.remnant-ach-page .profile-ach-category--rlrp_playtime,
.remnant-ach-page .profile-ach-category--streak,
.remnant-ach-page .profile-ach-category--level,
.remnant-ach-page .profile-ach-category--leaderboard,
.remnant-ach-page .profile-ach-category--pupak_leaderboard,
.remnant-ach-page .profile-ach-category--shop,
.remnant-ach-page .profile-ach-category--pupak_vip {
  border-color: rgba(56, 120, 200, 0.22);
  background: rgba(8, 14, 28, 0.62);
  box-shadow: 0 4px 16px rgba(2, 8, 20, 0.28);
}

/* Equipped tab */
.remnant-ach-page .remnant-ach-equipped-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.remnant-ach-equipped-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(52, 211, 153, 0.32);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(12, 28, 22, 0.75) 0%, rgba(8, 18, 16, 0.7) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.remnant-ach-equipped-card:hover {
  border-color: rgba(52, 211, 153, 0.48);
  transform: translateY(-1px);
}
.remnant-ach-equipped-card-ring .remnant-ach-ring {
  width: 52px;
  height: 52px;
  margin: 0;
}
.remnant-ach-equipped-card-ring .remnant-ach-ring-svg {
  width: 52px;
  height: 52px;
}
.remnant-ach-equipped-card-ring--banner {
  flex: 0 0 132px;
  width: 132px;
  max-width: 38%;
}
.remnant-ach-banner-badge-img--equipped {
  width: 100%;
  max-height: 44px;
}
.remnant-ach-equipped-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.remnant-ach-equipped-card-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(241, 248, 255, 0.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-ach-equipped-card-meta {
  font-size: 11px;
  color: rgba(160, 220, 190, 0.62);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-ach-page .profile-ach-equipped-remove {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(220, 235, 255, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.remnant-ach-page .profile-ach-equipped-remove:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #ffd0d0;
}
.remnant-ach-equipped-remove-ico {
  display: block;
}

.remnant-ach-equipped-section {
  margin-bottom: 22px;
}
.remnant-ach-equipped-section:last-child {
  margin-bottom: 0;
}
.remnant-ach-equipped-section-title {
  margin: 0 0 10px;
  padding-bottom: 8px;
  font-size: 15px;
  font-weight: 800;
  color: rgba(255, 251, 235, 0.96);
  border-bottom: 1px solid rgba(170, 190, 230, 0.22);
}
.remnant-ach-equipped-section .remnant-ach-panel-hint {
  margin: 0 0 12px;
}

/* Reward sections */
.remnant-ach-reward-section {
  margin-bottom: 24px;
}
.remnant-ach-reward-section:last-child {
  margin-bottom: 0;
}
.remnant-ach-reward-section-head {
  margin-bottom: 14px;
}
.remnant-ach-reward-section-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  color: rgba(255, 251, 235, 0.96);
}
.remnant-ach-reward-section-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(190, 210, 240, 0.58);
}
.remnant-ach-reward-section--vip .remnant-ach-reward-section-title {
  color: rgba(255, 248, 220, 0.96);
}
.remnant-ach-reward-scroll-host {
  min-width: 0;
}
.remnant-ach-page .profile-ach-empty {
  margin-top: 8px;
  padding: 16px;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* Responsive */
@media (max-width: 1280px) {
  .remnant-ach-page { padding: 22px 22px 26px; }
  .remnant-ach-summary {
    --ach-summary-emblem-size: 132px;
  }
  .remnant-ach-card { flex-basis: 176px; width: 176px; }
}
@media (max-width: 1100px) {
  .remnant-ach-summary-main {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
  }
  .remnant-ach-summary-emblem-wrap {
    grid-row: span 2;
    margin-left: -8px;
  }
  .remnant-ach-summary-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    padding-right: 0;
  }
  .remnant-ach-summary-ring-wrap--center {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .remnant-ach-summary-bar-wrap { margin-left: 0; }
}
@media (max-width: 640px) {
  .remnant-ach-page { padding: 16px 14px 20px; gap: 18px; }
  .remnant-ach-card { flex-basis: 152px; width: 152px; min-height: 236px; }
  .remnant-ach-page .remnant-ach-accordion-meta { display: none; }
}

/* ???????????????????????????????????????????????
   PROFILE CONTENT PAGE (Profil tartalom tab)
   Scoped visual polish ? logic / previews untouched
??????????????????????????????????????????????? */
.profile-content-page.profile-edit-tab-panel {
  flex-direction: column;
  gap: 30px;
}
.profile-content-page.profile-edit-tab-panel.active {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
#remnant-profile-edit-pane .profile-content-page.profile-edit-tab-panel,
#remnant-profile-edit-pane .profile-content-page.profile-edit-tab-panel.active {
  gap: 30px !important;
}
.profile-content-page__header {
  margin: 0 0 10px;
  padding: 0 2px;
}
.profile-content-page__title {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: rgba(248, 252, 255, 0.98);
  text-transform: uppercase;
}
.profile-content-page__desc {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(138, 155, 183, 0.82);
  max-width: 72ch;
}

#remnant-profile-edit-pane .profile-content-page > .profile-edit-card {
  padding: 20px 22px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(60, 110, 175, 0.22) !important;
  background: linear-gradient(180deg, rgba(14, 26, 46, 0.96), rgba(7, 14, 27, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 28px rgba(2, 8, 20, 0.38) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}
#remnant-profile-edit-pane .profile-content-page > .profile-edit-card:hover:not(.profile-edit-standing-card) {
  border-color: rgba(70, 125, 195, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(2, 8, 20, 0.42) !important;
}

.profile-content-page .profile-edit-section-title {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(248, 252, 255, 0.96);
  margin: 0 0 7px;
  line-height: 1.25;
}
.profile-content-page .profile-edit-hint {
  font-size: 13px;
  line-height: 1.48;
  color: rgba(138, 155, 183, 0.78);
  margin: 0 0 16px;
}
.profile-content-page .profile-edit-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(190, 205, 230, 0.72);
  margin-bottom: 8px;
}

.profile-content-page .profile-social-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0 !important;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.profile-content-page .profile-social-row {
  display: grid;
  grid-template-columns: 32px minmax(130px, 170px) minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  min-height: 60px;
  padding: 8px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid rgba(60, 100, 155, 0.14);
  transition: background 0.16s ease;
}
.profile-content-page .profile-social-row:first-child {
  border-top: 1px solid rgba(60, 100, 155, 0.14);
}
.profile-content-page .profile-social-row:last-child {
  border-bottom: 1px solid rgba(60, 100, 155, 0.14);
}
.profile-content-page .profile-social-row:hover {
  background: rgba(12, 22, 42, 0.28);
}
.profile-content-page .profile-social-row--dragging {
  border-color: transparent !important;
  background: linear-gradient(180deg, rgba(12, 22, 42, 0.95), rgba(8, 14, 28, 0.98)) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(26, 140, 255, 0.22) !important;
  border-radius: 10px !important;
}
.profile-content-page .profile-social-grip {
  grid-column: 1;
  width: 28px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(195, 215, 240, 0.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  flex-shrink: 0;
  transition: color 0.16s ease, background 0.16s ease;
}
.profile-content-page .profile-social-grip:hover {
  color: rgba(230, 240, 255, 0.95);
  background: rgba(8, 14, 28, 0.55);
}
.profile-content-page .profile-social-grip:active {
  cursor: grabbing;
}
.profile-content-page .profile-social-grip-svg {
  display: block;
  pointer-events: none;
}
.profile-content-page .profile-social-drag-ph {
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 8px;
  border: 2px dashed rgba(26, 140, 255, 0.24);
  background: rgba(20, 125, 255, 0.04);
  pointer-events: none;
}
.profile-content-page .profile-social-row-label {
  position: relative;
  min-width: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  grid-column: 2;
}
.profile-content-page .profile-social-row-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.profile-content-page .profile-social-row-label .social-links {
  display: flex;
  align-items: center;
  margin: 0;
  gap: 0;
}
.profile-content-page .profile-social-row-label .social-badge-img {
  height: 30px;
  max-width: 156px;
}
.profile-content-page .profile-social-row-actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}
.profile-content-page .profile-social-row-actions .glass-btn {
  flex-shrink: 0;
}

.profile-content-page .profile-social-url-wrap {
  display: inline-flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  border-radius: 9px;
  border: 1px solid rgba(90, 120, 170, 0.28);
  background: rgba(8, 14, 26, 0.96);
  overflow: hidden;
}
.profile-content-page .profile-social-url-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(138, 155, 183, 0.82);
  background: rgba(4, 8, 16, 0.88);
  border-right: 1px solid rgba(90, 120, 170, 0.22);
  white-space: nowrap;
}
.profile-content-page .profile-social-input {
  width: auto;
  flex: 1 1 auto;
  min-width: 80px;
  max-width: none;
  min-height: 40px;
  height: 40px;
  padding: 0 12px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(240, 245, 255, 0.94);
  font-size: 13px;
}
.profile-content-page .profile-social-input::placeholder {
  color: rgba(120, 140, 175, 0.55);
}
.profile-content-page .profile-social-input:focus {
  outline: none !important;
  box-shadow: none !important;
}
.profile-content-page .profile-social-url-wrap:focus-within {
  border-color: rgba(26, 140, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 125, 255, 0.1);
}

.profile-content-page .glass-input:not(.profile-social-input) {
  min-height: 40px;
  height: 40px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid rgba(90, 120, 170, 0.28) !important;
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.96), rgba(7, 12, 24, 0.98)) !important;
  color: rgba(240, 245, 255, 0.94);
  font-size: 13px;
  box-shadow: none !important;
}
.profile-content-page .glass-input:not(.profile-social-input)::placeholder {
  color: rgba(120, 140, 175, 0.55);
}
.profile-content-page .glass-input:not(.profile-social-input):focus {
  outline: none !important;
  border-color: rgba(26, 140, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(20, 125, 255, 0.1) !important;
}

.profile-content-page .profile-edit-select,
.profile-content-page .profile-edit-showcase-preview-trigger {
  min-height: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid rgba(90, 120, 170, 0.28) !important;
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.96), rgba(7, 12, 24, 0.98)) !important;
  color: rgba(240, 245, 255, 0.94) !important;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none !important;
}
.profile-content-page .profile-edit-select:hover,
.profile-content-page .profile-edit-showcase-preview-trigger:hover {
  border-color: rgba(75, 125, 190, 0.38) !important;
}
.profile-content-page .profile-edit-select:focus,
.profile-content-page .profile-edit-showcase-preview-trigger:focus {
  outline: none !important;
  border-color: rgba(26, 140, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(20, 125, 255, 0.1) !important;
}
.profile-content-page .profile-edit-showcase-preview-trigger::after {
  font-size: 11px;
  opacity: 0.72;
  color: rgba(160, 185, 220, 0.9);
}
.profile-content-page .profile-edit-showcase-preview-menu {
  border-radius: 10px;
  border: 1px solid rgba(70, 115, 175, 0.28);
  background: rgba(8, 14, 28, 0.98);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.48);
}

.profile-content-page .glass-btn.btn-sm[data-social-save],
.profile-content-page .glass-btn.btn-sm[data-social-connect] {
  min-height: 38px;
  height: 38px;
  padding: 0 15px;
  border-radius: 9px;
  border: 1px solid rgba(26, 140, 255, 0.42) !important;
  background: linear-gradient(180deg, rgba(12, 42, 88, 0.92), rgba(8, 28, 58, 0.96)) !important;
  color: rgba(120, 190, 255, 0.96) !important;
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.profile-content-page .glass-btn.btn-sm[data-social-save]:hover,
.profile-content-page .glass-btn.btn-sm[data-social-connect]:hover {
  border-color: rgba(45, 160, 255, 0.55) !important;
  background: linear-gradient(180deg, rgba(16, 52, 102, 0.96), rgba(10, 34, 68, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 14px rgba(20, 125, 255, 0.12) !important;
}
.profile-content-page .glass-btn.btn-sm[data-social-save]:active,
.profile-content-page .glass-btn.btn-sm[data-social-connect]:active {
  background: linear-gradient(180deg, rgba(8, 30, 62, 0.98), rgba(6, 22, 46, 1)) !important;
}
.profile-content-page .glass-btn.btn-sm[data-social-save]:disabled,
.profile-content-page .glass-btn.btn-sm[data-social-connect]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none !important;
}

.profile-content-page .glass-btn.btn-sm[data-social-remove] {
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(90, 110, 140, 0.28) !important;
  background: linear-gradient(180deg, rgba(14, 18, 28, 0.95), rgba(9, 12, 22, 0.98)) !important;
  color: rgba(200, 210, 230, 0.82) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none !important;
}
.profile-content-page .glass-btn.btn-sm[data-social-remove]:hover {
  border-color: rgba(220, 90, 90, 0.42) !important;
  background: linear-gradient(180deg, rgba(48, 18, 22, 0.92), rgba(32, 12, 16, 0.96)) !important;
  color: rgba(255, 170, 170, 0.95) !important;
}

.profile-content-page .profile-social-ok {
  font-size: 13px;
  font-weight: 600;
  color: rgba(74, 222, 128, 0.88);
  white-space: nowrap;
}

.profile-content-page .profile-edit-showcase-select-row {
  margin-top: 10px;
  gap: 14px 18px;
}
.profile-content-page .profile-edit-showcase-equip-lbl {
  font-size: 13px;
  font-weight: 600;
  color: rgba(210, 220, 240, 0.88);
  gap: 10px;
}
.profile-content-page .profile-edit-showcase-equip-lbl input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #1a8cff;
  border-radius: 4px;
  cursor: pointer;
}

.profile-content-page .profile-edit-card-actions {
  margin-top: 16px;
  gap: 8px;
}
.profile-content-page .profile-edit-card-actions .glass-btn.btn-ghost.btn-sm[data-remnant-profile-reset="showcases"] {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid rgba(100, 115, 140, 0.3) !important;
  background: linear-gradient(180deg, rgba(14, 18, 28, 0.92), rgba(9, 12, 22, 0.96)) !important;
  color: rgba(190, 200, 220, 0.86) !important;
  font-weight: 600;
  box-shadow: none !important;
}
.profile-content-page .profile-edit-card-actions .glass-btn.btn-ghost.btn-sm[data-remnant-profile-reset="showcases"]:hover {
  border-color: rgba(130, 145, 170, 0.42) !important;
  background: linear-gradient(180deg, rgba(18, 24, 38, 0.96), rgba(12, 16, 28, 0.98)) !important;
  color: rgba(220, 228, 245, 0.94) !important;
}
.profile-content-page #remnant-profile-edit-showcases-save {
  min-height: 40px;
  padding: 0 20px;
  border-radius: 9px;
  border: 1px solid rgba(26, 140, 255, 0.5) !important;
  background: linear-gradient(180deg, #1a7ae8, #1468cc) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(20, 104, 204, 0.28) !important;
}
.profile-content-page #remnant-profile-edit-showcases-save:hover {
  background: linear-gradient(180deg, #2088ff, #1872e0) !important;
  box-shadow: 0 6px 20px rgba(20, 104, 204, 0.34) !important;
}

.profile-content-page .profile-edit-showcase-equipped-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.profile-content-page .profile-edit-showcase-equipped-list {
  gap: 9px;
  margin-top: 12px;
}
#remnant-profile-edit-pane .profile-content-page .profile-edit-showcase-equipped-row {
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid rgba(60, 100, 155, 0.2) !important;
  background: linear-gradient(180deg, rgba(10, 18, 34, 0.88), rgba(7, 13, 26, 0.92)) !important;
  box-shadow: none !important;
  transition: border-color 0.16s ease, background 0.16s ease;
}
#remnant-profile-edit-pane .profile-content-page .profile-edit-showcase-equipped-row:hover {
  border-color: rgba(70, 125, 195, 0.32) !important;
  background: linear-gradient(180deg, rgba(12, 22, 40, 0.92), rgba(9, 16, 30, 0.95)) !important;
}
#remnant-profile-edit-pane .profile-content-page .profile-edit-showcase-equipped-row--dragging {
  border-color: rgba(26, 140, 255, 0.45) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(26, 140, 255, 0.2) !important;
}
.profile-content-page .profile-edit-showcase-equipped-grip {
  width: 32px;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(70, 100, 150, 0.22);
  background: rgba(6, 10, 20, 0.75);
  color: rgba(170, 190, 220, 0.78);
  font-size: 15px;
}
.profile-content-page .profile-edit-showcase-equipped-grip:hover {
  border-color: rgba(75, 125, 190, 0.35);
  background: rgba(10, 16, 30, 0.88);
  color: rgba(200, 215, 240, 0.92);
}
.profile-content-page .profile-edit-showcase-equipped-remove {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(90, 110, 140, 0.28);
  background: linear-gradient(180deg, rgba(14, 18, 28, 0.95), rgba(9, 12, 22, 0.98));
  color: rgba(190, 200, 220, 0.86);
  font-size: 12px;
  font-weight: 700;
}
.profile-content-page .profile-edit-showcase-equipped-remove:hover {
  border-color: rgba(220, 90, 90, 0.38);
  background: linear-gradient(180deg, rgba(40, 16, 20, 0.92), rgba(28, 10, 14, 0.96));
  color: rgba(255, 175, 175, 0.94);
}
.profile-content-page .profile-edit-showcase-equipped-drag-ph {
  border-color: rgba(26, 140, 255, 0.28);
  background: rgba(20, 125, 255, 0.04);
}

@media (max-width: 900px) {
  .profile-content-page .profile-social-row {
    grid-template-columns: 32px 1fr;
    gap: 10px;
    padding: 12px 0;
  }
  .profile-content-page .profile-social-row-label {
    grid-column: 2;
  }
  .profile-content-page .profile-social-row-actions {
    grid-column: 1 / -1;
    padding-left: 42px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .profile-content-page .profile-social-url-wrap {
    width: 100%;
    flex: 1 1 100%;
  }
  .profile-content-page .profile-social-input {
    min-width: 0;
  }
}

/* ???????????????????????????????????????????????
   PROFILE INVENTORY PAGE (Lelt?r tab)
   Scoped visual polish ? grid/slots untouched
??????????????????????????????????????????????? */
#remnant-profile-edit-pane .profile-inventory-page > .profile-edit-card {
  padding: 20px 22px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(60, 110, 175, 0.22) !important;
  background: linear-gradient(180deg, rgba(14, 26, 46, 0.96), rgba(7, 14, 27, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 28px rgba(2, 8, 20, 0.38) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
#remnant-profile-edit-pane .profile-inventory-page > .profile-edit-card:hover:not(.profile-edit-standing-card) {
  border-color: rgba(70, 125, 195, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(2, 8, 20, 0.42) !important;
}

.profile-inventory-page .profile-edit-section-title {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(248, 252, 255, 0.96);
  margin: 0 0 7px;
  line-height: 1.25;
}
.profile-inventory-page .profile-edit-hint {
  font-size: 13px;
  line-height: 1.48;
  color: rgba(138, 155, 183, 0.78);
  margin: 0 0 18px;
}

.profile-inventory-page .profile-inventory-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  padding: 0;
}
.profile-inventory-page .profile-inventory-filters .glass-btn.btn-sm {
  min-height: 36px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none !important;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.profile-inventory-page .profile-inventory-filters .glass-btn.btn-sm[data-remnant-inv-filter].btn-ghost {
  border: 1px solid rgba(90, 120, 170, 0.28) !important;
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.92), rgba(7, 12, 24, 0.96)) !important;
  color: rgba(170, 190, 220, 0.78) !important;
}
.profile-inventory-page .profile-inventory-filters .glass-btn.btn-sm[data-remnant-inv-filter].btn-ghost:hover {
  border-color: rgba(75, 125, 190, 0.38) !important;
  background: linear-gradient(180deg, rgba(14, 22, 40, 0.96), rgba(9, 15, 28, 0.98)) !important;
  color: rgba(210, 222, 245, 0.92) !important;
}
.profile-inventory-page .profile-inventory-filters .glass-btn.btn-sm[data-remnant-inv-filter].btn-primary {
  border: 1px solid rgba(26, 140, 255, 0.48) !important;
  background: linear-gradient(180deg, #1a7ae8, #1468cc) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(20, 104, 204, 0.22) !important;
}
.profile-inventory-page .profile-inventory-filters .glass-btn.btn-sm[data-remnant-inv-filter].btn-primary:hover {
  background: linear-gradient(180deg, #2088ff, #1872e0) !important;
  box-shadow: 0 4px 14px rgba(20, 104, 204, 0.28) !important;
}

.profile-inventory-page .profile-inventory-pagination {
  margin-top: 16px;
  gap: 6px;
}
.profile-inventory-page .profile-inventory-page-btn {
  min-width: 36px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(90, 120, 170, 0.28);
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.92), rgba(7, 12, 24, 0.96));
  color: rgba(170, 190, 220, 0.82);
  font-size: 12px;
  font-weight: 600;
}
.profile-inventory-page .profile-inventory-page-btn:hover:not(:disabled) {
  border-color: rgba(75, 125, 190, 0.38);
  color: rgba(220, 230, 250, 0.94);
}
.profile-inventory-page .profile-inventory-page-btn.active {
  color: #fff;
  border-color: rgba(26, 140, 255, 0.48);
  background: linear-gradient(180deg, rgba(20, 104, 204, 0.88), rgba(14, 78, 168, 0.92));
  box-shadow: 0 2px 10px rgba(20, 104, 204, 0.2);
}

/* ???????????????????????????????????????????????
   PROFILE STATUS PAGE (Fi?k st?tusz tab)
   Scoped visual polish ? standing logic untouched
??????????????????????????????????????????????? */
#remnant-profile-edit-pane .profile-status-page > .profile-edit-card {
  padding: 20px 22px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(60, 110, 175, 0.22) !important;
  background: linear-gradient(180deg, rgba(14, 26, 46, 0.96), rgba(7, 14, 27, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 28px rgba(2, 8, 20, 0.38) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
#remnant-profile-edit-pane .profile-status-page > .profile-edit-card:hover {
  border-color: rgba(70, 125, 195, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(2, 8, 20, 0.42) !important;
}

.profile-status-page .profile-edit-label {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(248, 252, 255, 0.96);
  margin: 0 0 7px;
  line-height: 1.25;
  text-shadow: none;
}
.profile-status-page .profile-edit-hint {
  font-size: 13px;
  line-height: 1.48;
  color: rgba(138, 155, 183, 0.78);
  margin: 0 0 18px;
}

.profile-status-page .profile-edit-standing-card .remnant-standing-panel {
  margin-top: 0;
  padding: 16px 18px;
  border-radius: 11px;
  border: 1px solid rgba(60, 100, 155, 0.2);
  background: linear-gradient(180deg, rgba(8, 14, 28, 0.72), rgba(6, 10, 20, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ???????????????????????????????????????????????
   PROFILE PROFI PAGE (Profil tab)
   Scoped visual polish ? previews/logic untouched
??????????????????????????????????????????????? */
.profile-profi-page .profile-edit-grid {
  gap: 30px;
}
#remnant-profile-edit-pane .profile-profi-page .profile-edit-grid {
  gap: 30px !important;
}

#remnant-profile-edit-pane .profile-profi-page .profile-edit-card {
  padding: 20px 22px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(60, 110, 175, 0.22) !important;
  background: linear-gradient(180deg, rgba(14, 26, 46, 0.96), rgba(7, 14, 27, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 28px rgba(2, 8, 20, 0.38) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
#remnant-profile-edit-pane .profile-profi-page .profile-edit-card:hover:not(.profile-edit-standing-card) {
  border-color: rgba(70, 125, 195, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(2, 8, 20, 0.42) !important;
}

.profile-profi-page .profile-edit-section-title {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(248, 252, 255, 0.96);
  margin: 0 0 7px;
  line-height: 1.25;
}
.profile-profi-page .profile-edit-hint {
  font-size: 13px;
  line-height: 1.48;
  color: rgba(138, 155, 183, 0.78);
  margin: 0 0 16px;
}
.profile-profi-page .profile-edit-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(190, 205, 230, 0.72);
  margin-bottom: 8px;
  text-transform: uppercase;
  text-shadow: none;
}
.profile-profi-page .profile-edit-name-preview-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(170, 190, 220, 0.68);
  text-transform: uppercase;
}

.profile-profi-page .glass-input {
  min-height: 40px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid rgba(90, 120, 170, 0.28) !important;
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.96), rgba(7, 12, 24, 0.98)) !important;
  color: rgba(240, 245, 255, 0.94);
  font-size: 13px;
  box-shadow: none !important;
}
.profile-profi-page .glass-input::placeholder {
  color: rgba(120, 140, 175, 0.55);
}
.profile-profi-page .glass-input:focus {
  outline: none !important;
  border-color: rgba(26, 140, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(20, 125, 255, 0.1) !important;
}

.profile-profi-page .profile-edit-select {
  min-height: 42px;
  padding: 0 38px 0 14px;
  border-radius: 9px;
  border: 1px solid rgba(90, 120, 170, 0.28) !important;
  background-color: rgba(10, 16, 30, 0.96) !important;
  background-image:
    linear-gradient(180deg, rgba(10, 16, 30, 0.96), rgba(7, 12, 24, 0.98)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a8bdd8' d='M3 4.25 6 7.75 9 4.25'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 0, right 12px center !important;
  color: rgba(240, 245, 255, 0.94) !important;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none !important;
}
.profile-profi-page .profile-edit-select:hover {
  border-color: rgba(75, 125, 190, 0.38) !important;
  background-color: rgba(12, 20, 36, 0.98) !important;
}
.profile-profi-page .profile-edit-select:focus,
.profile-profi-page .profile-edit-select:focus-visible {
  border-color: rgba(26, 140, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(20, 125, 255, 0.1) !important;
}

.profile-profi-page .profile-edit-tag-row {
  display: inline-flex;
  align-items: stretch;
  min-height: 40px;
  border-radius: 9px;
  border: 1px solid rgba(90, 120, 170, 0.28);
  background: rgba(8, 14, 26, 0.96);
  overflow: hidden;
}
.profile-profi-page .profile-edit-tag-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(138, 155, 183, 0.82);
  background: rgba(4, 8, 16, 0.88);
  border-right: 1px solid rgba(90, 120, 170, 0.22);
}
.profile-profi-page .profile-edit-tag-row .glass-input {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.profile-profi-page .profile-edit-tag-row:focus-within {
  border-color: rgba(26, 140, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(20, 125, 255, 0.1);
}

.profile-profi-page .profile-edit-about-input {
  border-radius: 10px;
  border: 1px solid rgba(90, 120, 170, 0.28) !important;
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.96), rgba(7, 12, 24, 0.98)) !important;
  color: rgba(240, 245, 255, 0.94);
  box-shadow: none !important;
}
.profile-profi-page .profile-edit-about-input:focus {
  border-color: rgba(26, 140, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(20, 125, 255, 0.1) !important;
}
.profile-profi-page .profile-edit-about-emoji-btn {
  border: 1px solid rgba(90, 120, 170, 0.28);
  background: rgba(8, 14, 26, 0.92);
}
.profile-profi-page .profile-edit-about-emoji-btn:hover {
  border-color: rgba(75, 125, 190, 0.38);
  background: rgba(12, 20, 36, 0.96);
}

.profile-profi-page .profile-edit-name-color-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(190, 205, 230, 0.82);
}
.profile-profi-page .profile-edit-name-color-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #1a8cff;
}

.profile-profi-page .profile-file-input-name {
  font-size: 13px;
  color: rgba(138, 155, 183, 0.72);
}

.profile-profi-page .profile-edit-card-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(60, 100, 155, 0.16);
  gap: 8px;
}
.profile-profi-page .glass-btn.btn-sm[data-remnant-profile-save-card],
.profile-profi-page #remnant-profile-shop-manager-save-btn {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 9px;
  border: 1px solid rgba(26, 140, 255, 0.5) !important;
  background: linear-gradient(180deg, #1a7ae8, #1468cc) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(20, 104, 204, 0.28) !important;
}
.profile-profi-page .glass-btn.btn-sm[data-remnant-profile-save-card]:hover,
.profile-profi-page #remnant-profile-shop-manager-save-btn:hover {
  background: linear-gradient(180deg, #2088ff, #1872e0) !important;
}
.profile-profi-page .glass-btn.btn-sm[data-remnant-profile-reset],
.profile-profi-page .glass-btn.btn-sm[id$="-pick-btn"],
.profile-profi-page .profile-shop-manager-toolbar .glass-btn.btn-sm.btn-ghost {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid rgba(100, 115, 140, 0.3) !important;
  background: linear-gradient(180deg, rgba(14, 18, 28, 0.92), rgba(9, 12, 22, 0.96)) !important;
  color: rgba(190, 200, 220, 0.86) !important;
  font-weight: 600;
  box-shadow: none !important;
}
.profile-profi-page .glass-btn.btn-sm[data-remnant-profile-reset]:hover,
.profile-profi-page .glass-btn.btn-sm[id$="-pick-btn"]:hover,
.profile-profi-page .profile-shop-manager-toolbar .glass-btn.btn-sm.btn-ghost:hover {
  border-color: rgba(130, 145, 170, 0.42) !important;
  color: rgba(220, 228, 245, 0.94) !important;
}
.profile-profi-page .profile-shop-manager-toolbar .glass-btn.btn-sm.btn-primary {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid rgba(26, 140, 255, 0.5) !important;
  background: linear-gradient(180deg, #1a7ae8, #1468cc) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(20, 104, 204, 0.22) !important;
}
.profile-profi-page .profile-shop-manager-toolbar .glass-btn.btn-sm.btn-primary:hover {
  background: linear-gradient(180deg, #2088ff, #1872e0) !important;
}

.profile-profi-page .profile-shop-manager-item {
  border: 1px solid rgba(60, 100, 155, 0.22);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(10, 18, 34, 0.88), rgba(7, 13, 26, 0.92));
}
.profile-profi-page .profile-shop-manager-item:hover {
  border-color: rgba(75, 125, 190, 0.32);
}
.profile-profi-page .profile-shop-manager-item.selected {
  border-color: rgba(26, 140, 255, 0.48) !important;
  box-shadow: 0 0 0 1px rgba(26, 140, 255, 0.22) inset !important;
}
.profile-profi-page .profile-shop-manager-item.selected .profile-shop-manager-check {
  background: linear-gradient(135deg, #1a7ae8, #2088ff);
  color: #fff;
}

.profile-profi-page .profile-theme-swatch {
  border-color: rgba(60, 100, 155, 0.28) !important;
  box-shadow: 0 6px 18px rgba(2, 8, 20, 0.35) !important;
}
.profile-profi-page .profile-theme-swatch-caption {
  color: rgba(138, 155, 183, 0.78);
  font-size: 12px;
}

/* ???????????????????????????????????????????????
   FRIENDS PAGE
??????????????????????????????????????????????? */
.friends-layout.remnant-friends-layout,
.remnant-friends-layout.friends-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  width: 100%;
  max-width: none;
  align-items: stretch;
}
.friends-chat-panel.chat-panel {
  display: none !important;
}

#page-friends.remnant-friends-page.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.remnant-friends-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 2px;
}
.remnant-friends-page-head-text {
  min-width: 0;
}
.remnant-friends-page-title {
  margin: 0 0 4px;
  font-family: 'Syne', 'Orbitron', sans-serif;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(244, 248, 255, 0.98);
  text-shadow: none;
}
.remnant-friends-page-sub {
  margin: 0;
  max-width: 42rem;
}

.remnant-friends-main-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: visible;
  min-height: 0;
  width: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#page-friends .remnant-friends-main-card.glass-card,
#page-friends .remnant-friends-main-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.remnant-friends-head {
  display: none;
}

.remnant-friends-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  align-items: center;
}
.remnant-friends-tab.glass-btn.btn-sm {
  min-height: 36px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  position: relative;
  box-shadow: none !important;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.remnant-friends-tab.glass-btn.btn-sm.btn-ghost {
  border: 1px solid rgba(90, 120, 170, 0.28) !important;
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.92), rgba(7, 12, 24, 0.96)) !important;
  color: rgba(170, 190, 220, 0.78) !important;
  text-shadow: none;
}
.remnant-friends-tab.glass-btn.btn-sm.btn-ghost:hover {
  border-color: rgba(75, 125, 190, 0.38) !important;
  background: linear-gradient(180deg, rgba(14, 22, 40, 0.96), rgba(9, 15, 28, 0.98)) !important;
  color: rgba(210, 222, 245, 0.92) !important;
}
.remnant-friends-tab.glass-btn.btn-sm.btn-primary,
.remnant-friends-tab.glass-btn.btn-sm.active {
  border: 1px solid rgba(26, 140, 255, 0.48) !important;
  background: linear-gradient(180deg, #1a7ae8, #1468cc) !important;
  color: #fff !important;
  text-shadow: none;
  box-shadow: 0 2px 12px rgba(20, 104, 204, 0.22) !important;
}
.remnant-friends-tab.glass-btn.btn-sm.btn-primary:hover,
.remnant-friends-tab.glass-btn.btn-sm.active:hover {
  background: linear-gradient(180deg, #2088ff, #1872e0) !important;
  box-shadow: 0 4px 14px rgba(20, 104, 204, 0.28) !important;
}
.remnant-friends-tab.active::after {
  display: none;
}
.remnant-friends-tab-badge {
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.15rem;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  opacity: 0.95;
}

.remnant-friends-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.remnant-friends-search-wrap {
  flex: 0 1 280px;
  width: 100%;
  max-width: 280px;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(90, 120, 170, 0.28);
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.88), rgba(7, 12, 24, 0.94));
}
.remnant-friends-search-ico {
  width: 15px;
  height: 15px;
  opacity: 0.55;
  flex-shrink: 0;
}
.remnant-friends-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.remnant-friends-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.remnant-friends-add-btn {
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.35) !important;
}
.remnant-friends-tab-panels {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0 8px;
}
.remnant-friends-section {
  margin-bottom: 22px;
}
.remnant-friends-section:last-child {
  margin-bottom: 0;
}
.remnant-friends-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(170, 195, 230, 0.62);
  margin: 0 0 10px;
}
.remnant-friends-section-label::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(90, 120, 170, 0.28), transparent 85%);
}
.remnant-friends-section-label--spaced {
  margin-top: 18px;
}
.remnant-friends-grid {
  display: grid;
  gap: 8px;
}
.remnant-friends-grid--ingame {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.remnant-friends-grid--online {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.remnant-friends-grid--offline {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.remnant-friends-empty {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.45);
  padding: 4px 0 2px;
}
.remnant-friends-empty-state {
  padding: 28px 4px 12px;
  text-align: left;
  border: none;
  border-radius: 0;
  background: transparent;
}
.remnant-friends-empty-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 15px;
  color: rgba(241, 245, 249, 0.92);
}
.remnant-friends-empty-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(148, 163, 184, 0.95);
  line-height: 1.5;
  max-width: 36rem;
}
.remnant-friend-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px 8px 6px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(180deg, rgba(18, 22, 34, 0.98), rgba(12, 15, 24, 0.98));
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  position: relative;
  min-height: 52px;
}
.remnant-friend-card:hover {
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.14);
  background: linear-gradient(180deg, rgba(22, 30, 44, 1), rgba(16, 20, 32, 1));
}
.remnant-friend-card.selected {
  border-color: rgba(0, 229, 255, 0.6);
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.22);
  background: linear-gradient(180deg, rgba(16, 32, 46, 1), rgba(12, 22, 36, 1));
}
.remnant-friend-card--admin-notice {
  border-color: rgba(239, 68, 68, 0.45);
  background: linear-gradient(180deg, rgba(40, 18, 22, 0.95), rgba(22, 14, 18, 0.98));
}
.remnant-friend-card--admin-notice .remnant-friend-card-name {
  color: #fecaca;
}
.remnant-friend-card:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.65);
  outline-offset: 2px;
}
.remnant-friend-card-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  flex-shrink: 0;
}
.remnant-friend-card-bar--ingame,
.remnant-friend-card-bar--online {
  background: linear-gradient(180deg, #4ade80, #22c55e);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.55);
}
.remnant-friend-card-bar--busy {
  background: linear-gradient(180deg, #f87171, #ef4444);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}
.remnant-friend-card-bar--idle {
  background: linear-gradient(180deg, #fb923c, #f97316);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}
.remnant-friend-card-bar--offline {
  background: rgba(100, 116, 139, 0.45);
}
.remnant-friend-card--offline {
  opacity: 1;
  background: linear-gradient(180deg, rgba(22, 26, 36, 0.92), rgba(16, 18, 26, 0.92));
  border-color: rgba(100, 116, 139, 0.28);
}
.remnant-friend-card--offline:hover {
  opacity: 1;
  border-color: rgba(148, 163, 184, 0.45);
  background: linear-gradient(180deg, rgba(28, 32, 44, 0.96), rgba(20, 22, 32, 0.96));
}
.remnant-friend-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.remnant-friend-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.remnant-friend-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-friend-card-game {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-friend-card-last {
  font-size: 10.5px;
  color: rgba(148, 163, 184, 0.88);
  line-height: 1.35;
}
.remnant-friend-card-unread {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cyan);
  color: #0a0a12;
}
.remnant-friend-card-id {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(148, 163, 184, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-friend-card-avatar .remnant-avatar-img,
.remnant-friends-result-avatar .remnant-avatar-img,
.remnant-friends-pending-avatar .remnant-avatar-img,
.friend-avatar .remnant-avatar-img,
.msg-avatar .remnant-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.remnant-friend-card-avatar {
  overflow: hidden;
}
.friend-avatar {
  overflow: hidden;
}
.msg-avatar {
  overflow: hidden;
}

.remnant-friends-add-hint {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(148, 163, 184, 0.95);
}
.remnant-friends-add-fields {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.remnant-friends-add-field {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.remnant-friends-add-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.58);
}
.remnant-friends-add-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.remnant-friends-add-input:focus {
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.18);
}
.remnant-friends-add-sep {
  width: 1px;
  height: 38px;
  margin-bottom: 4px;
  background: rgba(148, 163, 184, 0.22);
  flex-shrink: 0;
}
.remnant-friends-add-actions {
  margin-top: 14px;
}
.remnant-friends-add-result-wrap {
  margin-top: 16px;
}
.remnant-friends-result-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(180deg, rgba(18, 22, 34, 0.98), rgba(12, 15, 24, 0.98));
}
.remnant-friends-result-avatar {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}
.remnant-friends-result-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.remnant-friends-result-name {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
}
.remnant-friends-result-id {
  font-size: 11px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.92);
}
.remnant-friends-add-square-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: linear-gradient(145deg, rgba(0, 229, 255, 0.22), rgba(168, 85, 247, 0.14));
  color: #ecfeff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.2);
}
.remnant-friends-add-square-btn:hover {
  border-color: rgba(0, 229, 255, 0.75);
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.38);
  transform: translateY(-1px);
}
.remnant-friends-add-square-ico {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.remnant-friends-result-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.remnant-friends-add-more-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: rgba(15, 23, 42, 0.52);
  color: rgba(226, 232, 240, 0.94);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.15s ease;
}
.remnant-friends-add-more-btn:hover {
  border-color: rgba(0, 229, 255, 0.42);
  background: rgba(0, 229, 255, 0.09);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.14);
  transform: translateY(-1px);
}
.remnant-friends-add-more-ico {
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  transform: translateY(-2px);
}
.remnant-friends-add-square-btn--pending {
  border-color: rgba(251, 146, 60, 0.75) !important;
  background: linear-gradient(145deg, rgba(251, 146, 60, 0.42), rgba(234, 88, 12, 0.18)) !important;
  box-shadow: 0 0 20px rgba(251, 146, 60, 0.34) !important;
  color: #fff7ed !important;
  cursor: default !important;
  pointer-events: none;
}
.remnant-friends-add-square-btn--pending:hover {
  transform: none !important;
}
.remnant-friends-add-square-btn--friends {
  border-color: rgba(52, 211, 153, 0.65) !important;
  background: linear-gradient(145deg, rgba(52, 211, 153, 0.32), rgba(16, 185, 129, 0.16)) !important;
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.26) !important;
  color: #ecfdf5 !important;
  cursor: default !important;
  pointer-events: none;
}
.remnant-friends-add-square-btn--friends:hover {
  transform: none !important;
}
.remnant-friends-add-result-none {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.12);
  font-size: 13px;
  color: rgba(252, 165, 165, 0.95);
}

.remnant-friends-pending-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.remnant-friends-pending-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(180deg, rgba(18, 22, 34, 0.98), rgba(12, 15, 24, 0.98));
}
.remnant-friends-pending-avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
}
.remnant-friends-pending-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.remnant-friends-pending-name {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
}
.remnant-friends-pending-id {
  font-size: 11px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.92);
}
.remnant-friends-pending-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.remnant-friends-pending-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}
.remnant-friends-pending-btn--ok {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(74, 222, 128, 0.55);
  color: #bbf7d0;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.22);
}
.remnant-friends-pending-btn--ok:hover {
  border-color: rgba(134, 239, 172, 0.85);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.38);
}
.remnant-friends-pending-btn--no {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.18);
}
.remnant-friends-pending-btn--no:hover {
  border-color: rgba(252, 165, 165, 0.85);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.32);
}

.remnant-groups-block {
  margin-bottom: 14px;
  padding: 14px 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(90, 120, 170, 0.14);
  background: rgba(8, 14, 26, 0.28);
}
.remnant-groups-block:last-child {
  margin-bottom: 0;
}
.remnant-groups-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(185, 205, 235, 0.72);
  margin: 0 0 10px;
  font-weight: 700;
}
.remnant-groups-block-title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(90, 120, 170, 0.22), transparent 85%);
}
.remnant-groups-hint {
  font-size: 12px;
  color: rgba(150, 175, 210, 0.72);
  margin: 0 0 10px;
  line-height: 1.45;
}
.remnant-groups-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.remnant-groups-row .remnant-friends-add-input {
  flex: 1 1 auto;
}
.remnant-groups-create-icon-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.remnant-groups-create-icon-preview {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 32, 54, 0.95), rgba(10, 18, 34, 0.9));
  border: 1px solid rgba(70, 110, 170, 0.35);
  color: rgba(140, 175, 230, 0.7);
  font-size: 22px;
  font-weight: 600;
}
.remnant-groups-create-icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.remnant-groups-create-icon-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.remnant-groups-create-icon-name {
  font-size: 11px;
  color: rgba(130, 160, 200, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.remnant-groups-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 36, 60, 0.9);
  border: 1px solid rgba(70, 110, 170, 0.3);
  color: rgba(180, 210, 255, 0.9);
  font-weight: 700;
  font-size: 16px;
}
.remnant-groups-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.remnant-groups-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.remnant-groups-members {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(70, 110, 170, 0.18);
}
.remnant-groups-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid rgba(70, 110, 170, 0.2);
}
.remnant-groups-member-av {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4d8fff, #00e5ff);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.remnant-groups-member-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.remnant-groups-member-main {
  flex: 1 1 auto;
  min-width: 0;
}
.remnant-groups-member-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(240, 248, 255, 0.95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.remnant-groups-member-role {
  font-size: 11px;
  color: rgba(130, 165, 210, 0.72);
  margin-top: 2px;
}
.remnant-groups-member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.remnant-groups-lookup-result,
.remnant-groups-mine-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.remnant-groups-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(14, 24, 42, 0.92), rgba(10, 18, 32, 0.88));
  border: 1px solid rgba(70, 110, 170, 0.28);
}
.remnant-groups-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.remnant-groups-card-name {
  font-size: 15px;
  font-weight: 600;
  color: rgba(245, 250, 255, 0.96);
}
.remnant-groups-card-id {
  font-size: 11px;
  color: rgba(120, 165, 230, 0.78);
  margin-top: 2px;
  letter-spacing: 0.4px;
}
.remnant-groups-card-meta {
  font-size: 12px;
  color: rgba(140, 170, 210, 0.7);
  margin-top: 4px;
}
.remnant-groups-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.remnant-groups-pending {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.remnant-groups-pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(8, 14, 26, 0.55);
  border: 1px solid rgba(70, 110, 170, 0.2);
}
.remnant-groups-pending-name {
  font-size: 13px;
  color: rgba(230, 240, 255, 0.92);
}

@media (max-width: 1100px) {
  .friends-layout.remnant-friends-layout,
  .remnant-friends-layout.friends-layout {
    grid-template-columns: 1fr;
  }
  .friends-chat-panel.chat-panel {
    max-height: 420px;
  }
  .remnant-friends-grid--offline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .remnant-friends-grid--ingame,
  .remnant-friends-grid--online,
  .remnant-friends-grid--offline {
    grid-template-columns: 1fr;
  }
}

.friends-list { overflow-y: auto; scrollbar-width: none; }
.friends-list::-webkit-scrollbar { display: none; }

.friend-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
  margin-bottom: 2px;
}

.friend-item:hover { background: var(--glass-hover); }
.friend-item.selected { background: var(--glass-active); }

.friend-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
  position: relative;
}

.friend-info { flex: 1; min-width: 0; }
.friend-name { font-size: 13px; font-weight: 600; }
.friend-status-text { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.unread-badge { background: var(--cyan); color: var(--bg); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; }

/* Chat */
.chat-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-border);
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}

.msg { display: flex; gap: 10px; max-width: 70%; }
.msg.sent { align-self: flex-end; flex-direction: row-reverse; }

.msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  margin-top: 2px;
}

.msg-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.msg.received .msg-bubble {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-bottom-left-radius: 4px;
}

.msg.sent .msg-bubble {
  background: linear-gradient(135deg, rgba(0,229,255,0.2), rgba(77,143,255,0.2));
  border: 1px solid rgba(0,229,255,0.3);
  border-bottom-right-radius: 4px;
  color: var(--text);
}

#page-friends .friends-chat-panel .msg.received .msg-bubble,
#page-friends .friends-chat-panel .typing-indicator {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#page-friends .friends-chat-panel .msg.sent .msg-bubble {
  background: linear-gradient(135deg, rgba(0, 90, 108, 0.92), rgba(45, 75, 150, 0.9));
  border: 1px solid rgba(0, 229, 255, 0.38);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.msg-time { font-size: 10px; color: var(--text-faint); margin-top: 4px; }
.msg.sent .msg-time { text-align: right; }

.typing-indicator {
  display: flex; gap: 4px; align-items: center;
  padding: 8px 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}

.typing-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: typingBounce 1.2s infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.chat-input-area {
  padding: 12px 20px;
  border-top: 1px solid var(--glass-border);
  display: flex; gap: 8px;
  flex-shrink: 0;
  align-items: flex-end;
}

.chat-sticker-picker-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.chat-emoji-btn,
.chat-sticker-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-fast);
}

.chat-emoji-btn:hover,
.chat-sticker-btn:hover {
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}

.chat-sticker-picker[hidden],
.rfw-chat-sticker-picker[hidden] {
  display: none !important;
}

.chat-sticker-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: min(340px, calc(100vw - 48px));
  max-height: 300px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(165deg, rgba(12, 18, 32, 0.98), rgba(8, 12, 22, 0.96));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.chat-sticker-picker-rail {
  display: flex;
  gap: 6px;
  padding: 0 2px 8px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  margin-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 229, 255, 0.35) rgba(255, 255, 255, 0.04);
}

.chat-sticker-picker-rail::-webkit-scrollbar {
  height: 5px;
}

.chat-sticker-picker-rail::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}

.chat-sticker-picker-rail::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.35);
  border-radius: 4px;
}

.chat-sticker-picker-rail::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.55);
}

.chat-sticker-picker-rail::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.chat-sticker-picker-rail-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.chat-sticker-picker-rail-btn:hover {
  border-color: rgba(0, 229, 255, 0.35);
}

.chat-sticker-picker-rail-btn.active {
  border-color: rgba(0, 229, 255, 0.75);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

.chat-sticker-picker-rail-thumb {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 18px;
  line-height: 34px;
  text-align: center;
}

.chat-sticker-picker-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 229, 255, 0.35) rgba(255, 255, 255, 0.04);
}

.chat-sticker-picker-scroll::-webkit-scrollbar {
  width: 5px;
}

.chat-sticker-picker-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}

.chat-sticker-picker-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.35);
  border-radius: 4px;
}

.chat-sticker-picker-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.55);
}

.chat-sticker-picker-scroll::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.chat-sticker-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.chat-sticker-picker-item {
  aspect-ratio: 1;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.chat-sticker-picker-item:hover {
  border-color: rgba(0, 229, 255, 0.5);
  transform: scale(1.04);
}

.chat-sticker-picker-item--locked {
  cursor: not-allowed;
  opacity: 0.42;
  filter: grayscale(0.85);
}

.chat-sticker-picker-item--locked:hover {
  transform: none;
  border-color: rgba(148, 163, 184, 0.2);
}

.chat-sticker-picker-item {
  position: relative;
}

.chat-sticker-picker-item-lock {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 11px;
  line-height: 1;
  opacity: 0.9;
  pointer-events: none;
}

.chat-sticker-picker-item-thumb {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.chat-sticker-picker-item-thumb-media,
.chat-sticker-picker-rail-thumb .chat-sticker-picker-item-thumb-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  pointer-events: none;
}

.chat-sticker-picker-empty {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
  padding: 8px 4px;
}

.msg-bubble--sticker {
  padding: 6px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.msg-bubble--sticker .msg-sticker-media {
  display: block;
  max-width: 160px;
  max-height: 160px;
  width: auto;
  height: auto;
  border-radius: 8px;
}

.msg-sticker-caption {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

.chat-input {
  flex: 1;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 9px 14px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  outline: none;
  transition: var(--transition-fast);
}

.chat-input:focus {
  border-color: rgba(0,229,255,0.4);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.06);
}

.chat-send {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.chat-send:hover { opacity: 0.85; transform: scale(1.05); box-shadow: 0 0 16px rgba(0,229,255,0.3); }

/* ???????????????????????????????????????????????
   CRATES PAGE
??????????????????????????????????????????????? */
.crate-spinner-wrap {
  padding: 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.crate-roulette {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 14px;
  height: 156px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(168, 85, 247, 0.18);
  margin-bottom: 20px;
}

.jutalmak-reel-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.crate-track {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  box-sizing: border-box;
  width: max-content;
  max-width: none;
  will-change: transform;
}

.crate-roulette-center-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 128px;
  height: 140px;
  border-radius: 14px;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    0 0 0 1px rgba(246, 210, 74, 0.28),
    0 0 18px rgba(246, 210, 74, 0.14),
    inset 0 0 16px rgba(246, 210, 74, 0.05);
  transition: box-shadow 0.45s ease, opacity 0.45s ease;
}

.crate-roulette::before, .crate-roulette::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 3;
  pointer-events: none;
}

.crate-roulette::before { left: 0; background: linear-gradient(to right, rgba(10,10,15,0.95), transparent); }
.crate-roulette::after { right: 0; background: linear-gradient(to left, rgba(10,10,15,0.95), transparent); }

.crate-pointer {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  z-index: 4;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.45);
  border-radius: 2px;
}

.crate-pointer::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 8px solid #fbbf24;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.45));
}

.crate-pointer::after {
  display: none;
}

.crate-item {
  width: 124px;
  height: 136px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 8px 8px 10px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(18, 16, 28, 0.78);
  backdrop-filter: blur(8px);
  transition: var(--transition-fast);
}

.crate-item-emoji {
  font-size: 34px;
  line-height: 1;
  flex-shrink: 0;
}

.crate-item-name {
  flex: 0 1 auto;
  width: 100%;
  min-height: 0;
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.crate-item-rarity.rarity-pill {
  flex-shrink: 0;
  margin-top: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 5px 11px;
  border-radius: 999px;
  line-height: 1.15;
  text-align: center;
}

.rarity-pill--common { background: rgba(148,163,184,0.35); color: #f1f5f9; box-shadow: 0 0 0 1px rgba(148,163,184,0.25); }
.rarity-pill--rare { background: rgba(59,130,246,0.38); color: #dbeafe; box-shadow: 0 0 0 1px rgba(96,165,250,0.35); }
.rarity-pill--epic { background: rgba(168,85,247,0.42); color: #f3e8ff; box-shadow: 0 0 0 1px rgba(192,132,252,0.4); }
.rarity-pill--legendary { background: rgba(234, 179, 8, 0.42); color: #fef9c3; box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.45); }
.rarity-pill--mythic { background: rgba(236, 72, 153, 0.38); color: #fce7f3; box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.42); }

.crate-item.common { border-color: rgba(138,155,176,0.3); }
.crate-item.rare { border-color: rgba(77,143,255,0.4); box-shadow: inset 0 0 20px rgba(77,143,255,0.05); }
.crate-item.epic { border-color: rgba(168,85,247,0.5); box-shadow: inset 0 0 20px rgba(168,85,247,0.08); }
.crate-item.legendary { border-color: rgba(234, 179, 8, 0.55); box-shadow: inset 0 0 22px rgba(234, 179, 8, 0.1), 0 0 14px rgba(234, 179, 8, 0.12); }
.crate-item.mythic { border-color: rgba(236, 72, 153, 0.55); box-shadow: inset 0 0 22px rgba(236, 72, 153, 0.08), 0 0 14px rgba(236, 72, 153, 0.12); }

.crate-item.common .crate-item-name { color: #cbd5e1; }
.crate-item.rare .crate-item-name { color: #bfdbfe; }
.crate-item.epic .crate-item-name { color: #e9d5ff; }
.crate-item.legendary .crate-item-name { color: #fde68a; }
.crate-item.mythic .crate-item-name { color: #fbcfe8; }

.crate-spin-btn {
  position: relative;
  padding: 12px 36px 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Syne', sans-serif;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: linear-gradient(90deg, #9333ea 0%, #6366f1 45%, #06b6d4 100%);
  color: #f8fafc;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 220px;
}

.crate-spin-btn-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.crate-spin-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: text-shadow 0.35s ease, filter 0.35s ease;
}

.crate-spin-btn-main--pulse {
  animation: remnantSpinKeyPulse 0.95s ease-out 1;
}

@keyframes remnantSpinKeyPulse {
  0% {
    text-shadow: 0 0 0 rgba(251, 191, 36, 0);
    filter: brightness(1);
  }
  35% {
    text-shadow: 0 0 18px rgba(251, 191, 36, 0.95), 0 0 28px rgba(6, 182, 212, 0.55);
    filter: brightness(1.25);
  }
  100% {
    text-shadow: 0 0 0 rgba(251, 191, 36, 0);
    filter: brightness(1);
  }
}

.crate-spin-btn-hint {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(248, 250, 252, 0.72);
  line-height: 1.25;
  max-width: 260px;
}

.crate-spin-btn:hover:not(:disabled) {
  box-shadow: 0 0 32px rgba(147, 51, 234, 0.45), 0 0 24px rgba(6, 182, 212, 0.35);
  transform: translateY(-2px);
}

.crate-spin-btn:disabled {
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.52;
}

.crate-spin-btn.crate-spin-btn--no-keys:disabled {
  opacity: 0.38;
  background: linear-gradient(90deg, rgba(147, 51, 234, 0.45) 0%, rgba(99, 102, 241, 0.4) 45%, rgba(6, 182, 212, 0.38) 100%);
}

.crate-spin-btn.crate-spin-btn--no-pool:disabled {
  opacity: 0.4;
  background: linear-gradient(90deg, rgba(100, 116, 139, 0.5) 0%, rgba(71, 85, 105, 0.45) 100%);
}

.crate-spin-btn:disabled .crate-spin-btn-hint {
  color: rgba(248, 250, 252, 0.55);
}

.crate-spin-btn--spinning {
  opacity: 1 !important;
  cursor: wait !important;
  position: relative;
  overflow: hidden;
  animation: remnantSpinBtnGlowPulse 1.15s ease-in-out infinite;
  box-shadow:
    0 0 26px rgba(147, 51, 234, 0.55),
    0 0 40px rgba(6, 182, 212, 0.38),
    inset 0 0 22px rgba(255, 255, 255, 0.08);
}

.crate-spin-btn--spinning::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 120deg, transparent 0%, rgba(255, 255, 255, 0.14) 18%, transparent 38%, rgba(6, 182, 212, 0.12) 55%, transparent 72%);
  animation: remnantSpinBtnShimmer 1.4s linear infinite;
  pointer-events: none;
  opacity: 0.85;
}

.crate-spin-btn--spinning .crate-spin-btn-main {
  position: relative;
  z-index: 1;
  letter-spacing: 0.1em;
  animation: remnantSpinBtnLabelPulse 0.9s ease-in-out infinite;
}

@keyframes remnantSpinBtnGlowPulse {
  0%,
  100% {
    filter: brightness(1);
    box-shadow:
      0 0 22px rgba(147, 51, 234, 0.45),
      0 0 32px rgba(6, 182, 212, 0.28),
      inset 0 0 18px rgba(255, 255, 255, 0.06);
  }
  50% {
    filter: brightness(1.12);
    box-shadow:
      0 0 34px rgba(147, 51, 234, 0.65),
      0 0 48px rgba(6, 182, 212, 0.42),
      inset 0 0 26px rgba(255, 255, 255, 0.1);
  }
}

@keyframes remnantSpinBtnShimmer {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes remnantSpinBtnLabelPulse {
  0%,
  100% {
    opacity: 1;
    text-shadow: 0 0 0 rgba(248, 250, 252, 0);
  }
  50% {
    opacity: 0.92;
    text-shadow: 0 0 14px rgba(248, 250, 252, 0.35);
  }
}

.jutalmak-reel-viewport--spinning {
  cursor: progress;
}

.jutalmak-reel-viewport--spinning .crate-item {
  pointer-events: none;
}

.jutalmak-reel-viewport--spinning .crate-item[title] {
  cursor: default;
}

.crate-item--spin-winner {
  position: relative;
  z-index: 4;
  animation: jutalmakWinnerSlot 0.95s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

.crate-item--spin-winner::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  animation: jutalmakWinnerRing 1.5s ease-out 1 both;
}

@keyframes jutalmakWinnerSlot {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  55% {
    transform: scale(1.035);
    filter: brightness(1.12);
  }
  100% {
    transform: scale(1.015);
    filter: brightness(1.05);
  }
}

@keyframes jutalmakWinnerRing {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  35% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

.crate-item--spin-winner--common::after {
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.4), 0 0 14px rgba(148, 163, 184, 0.16);
}
.crate-item--spin-winner--rare::after {
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.45), 0 0 16px rgba(59, 130, 246, 0.22);
}
.crate-item--spin-winner--epic::after {
  box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.48), 0 0 18px rgba(168, 85, 247, 0.24);
}
.crate-item--spin-winner--legendary::after {
  box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.42), 0 0 20px rgba(234, 179, 8, 0.22);
}
.crate-item--spin-winner--mythic::after {
  box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.45), 0 0 22px rgba(236, 72, 153, 0.24);
}

.crate-item--spin-winner--apex {
  animation: jutalmakWinnerSlotApex 1.15s cubic-bezier(0.2, 1, 0.32, 1) 1 both;
}

.crate-item--spin-winner--apex::before {
  content: '';
  position: absolute;
  top: -36%;
  left: 50%;
  width: 5px;
  height: 150%;
  margin-left: -2.5px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  opacity: 0;
  transform: rotate(12deg) translateY(-8%);
  animation: jutalmakWinnerBeam 0.95s ease-out 1 both;
  pointer-events: none;
  filter: blur(0.6px);
}

@keyframes jutalmakWinnerSlotApex {
  0% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
  42% {
    transform: scale(1.05);
    filter: brightness(1.18) saturate(1.08);
  }
  100% {
    transform: scale(1.02);
    filter: brightness(1.08) saturate(1.04);
  }
}

@keyframes jutalmakWinnerBeam {
  0% {
    opacity: 0;
  }
  28% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: rotate(12deg) translateY(6%);
  }
}

/* Ritka glow: a p?rget? s?v k?r?l (nem teljes k?perny?), szolid build ? peak ? fade */
.crate-roulette.jutalmak-spin-apex--legendary::before,
.crate-roulette.jutalmak-spin-apex--mythic::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(360px, 58%);
  height: 170%;
  transform: translate(-50%, -50%);
  border-radius: 48%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.crate-roulette.jutalmak-spin-apex--legendary::before {
  background: radial-gradient(ellipse at center, rgba(250, 204, 21, 0.2) 0%, rgba(250, 204, 21, 0.06) 42%, transparent 72%);
  box-shadow: 0 0 36px rgba(234, 179, 8, 0.1);
}

.crate-roulette.jutalmak-spin-apex--mythic::before {
  background: radial-gradient(ellipse at center, rgba(244, 114, 182, 0.18) 0%, rgba(236, 72, 153, 0.06) 44%, transparent 72%);
  box-shadow: 0 0 36px rgba(236, 72, 153, 0.1);
}

.crate-roulette.jutalmak-spin-apex--build::before {
  animation: jutalmakReelApexBuild 1.05s ease-out forwards;
}

.crate-roulette.jutalmak-spin-apex--peak::before {
  animation: jutalmakReelApexPeak 2.35s ease-out forwards;
}

.crate-roulette.jutalmak-spin-apex--legendary.jutalmak-spin-apex--build .crate-roulette-center-glow,
.crate-roulette.jutalmak-spin-apex--mythic.jutalmak-spin-apex--build .crate-roulette-center-glow {
  box-shadow:
    0 0 0 1px rgba(246, 210, 74, 0.36),
    0 0 22px rgba(246, 210, 74, 0.2),
    inset 0 0 18px rgba(246, 210, 74, 0.07);
}

.crate-roulette.jutalmak-spin-apex--legendary.jutalmak-spin-apex--peak .crate-roulette-center-glow {
  box-shadow:
    0 0 0 1px rgba(253, 224, 71, 0.48),
    0 0 26px rgba(234, 179, 8, 0.28),
    inset 0 0 20px rgba(250, 204, 21, 0.09);
}

.crate-roulette.jutalmak-spin-apex--mythic.jutalmak-spin-apex--peak .crate-roulette-center-glow {
  box-shadow:
    0 0 0 1px rgba(244, 114, 182, 0.5),
    0 0 28px rgba(236, 72, 153, 0.26),
    inset 0 0 20px rgba(244, 114, 182, 0.08);
}

@keyframes jutalmakReelApexBuild {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes jutalmakReelApexPeak {
  0% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(1);
  }
  18% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1.04);
  }
  55% {
    opacity: 0.48;
    transform: translate(-50%, -50%) scale(1.01);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
  }
}

/* Legacy body overlay (ha m?g fennmarad) ? ne villogjon er?s screen blend */
body.jutalmak-spin-apex--legendary::before,
body.jutalmak-spin-apex--mythic::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.win-result {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transition: var(--transition);
  box-sizing: border-box;
}

.win-result.show { opacity: 1; }
.win-result.legendary { background: rgba(255,149,0,0.15); border: 1px solid rgba(255,149,0,0.4); color: var(--orange); }
.win-result.epic { background: rgba(168,85,247,0.15); border: 1px solid rgba(168,85,247,0.4); color: var(--purple); }
.win-result.rare { background: rgba(77,143,255,0.15); border: 1px solid rgba(77,143,255,0.4); color: var(--blue); }
.win-result.common { background: var(--glass); border: 1px solid var(--glass-border); color: var(--rarity-common); }
.win-result.duplicate {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.48);
  color: #fca5a5;
}

/* PECH — duplikátum a nyert tárgyak listában / rácsban */
.jutalmak-won-grid-cell.jutalmak-won-pech,
.jutalmak-won-row.jutalmak-won-pech {
  position: relative;
  overflow: hidden;
  border-color: rgba(239, 68, 68, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35), 0 0 14px rgba(239, 68, 68, 0.12);
  background: rgba(70, 16, 22, 0.55) !important;
  opacity: 0.78;
  filter: saturate(0.45) brightness(0.88);
}

.jutalmak-won-row.jutalmak-won-pech {
  border-bottom-color: rgba(239, 68, 68, 0.28);
  opacity: 0.82;
}

.jutalmak-won-pech-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%) rotate(-28deg);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(248, 113, 113, 0.92);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 10px rgba(239, 68, 68, 0.35);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
}

.jutalmak-won-row .jutalmak-won-pech-stamp {
  font-size: 13px;
  left: 38%;
}

.jutalmak-won-grid-cell.jutalmak-won-pech .jutalmak-won-grid-ico,
.jutalmak-won-row.jutalmak-won-pech .jutalmak-won-ico {
  opacity: 0.55;
}

/* ??? Jutalmak (Rewards) page layout ??? */
#page-crates.jutalmak-page.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.jutalmak-page {
  background: transparent;
  border-radius: 0;
  padding: 0 0 12px;
}

.jutalmak-page-inner {
  width: 100%;
  max-width: min(1280px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.jutalmak-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}

.jutalmak-page-title { margin-bottom: 4px; }
.jutalmak-page-sub { margin: 0; max-width: 520px; }

.jutalmak-help-btn {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px !important;
  padding-left: 14px !important;
  padding-right: 16px !important;
}

.jutalmak-help-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: rgba(248, 250, 252, 0.92);
}

.jutalmak-premium-stack {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.jutalmak-premium-chest-title {
  margin: 0 0 10px;
  text-align: center;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(248, 250, 252, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.jutalmak-title-spark {
  font-size: 11px;
  color: rgba(168, 85, 247, 0.85);
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.55));
}

.jutalmak-premium-stack .crate-spinner-wrap {
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
}

.jutalmak-reel-panel {
  padding: 18px 16px 16px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(12, 10, 22, 0.82), rgba(8, 8, 16, 0.78));
  border: 1px solid rgba(129, 140, 248, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -12px 32px rgba(0, 0, 0, 0.35),
    0 8px 28px rgba(0, 0, 0, 0.28);
}

.jutalmak-premium-stack .crate-roulette {
  margin-bottom: 0;
  height: 168px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(129, 140, 248, 0.16);
}

.jutalmak-spin-action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
}

.jutalmak-page .crate-spin-btn {
  min-width: min(100%, 340px);
  width: min(100%, 340px);
  padding: 14px 28px 16px;
  border-radius: 999px;
  box-shadow:
    0 0 24px rgba(147, 51, 234, 0.28),
    0 4px 18px rgba(0, 0, 0, 0.25);
}

.jutalmak-page .crate-spin-btn-main::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  background: url('Assets/images/spin_key.png') center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.65));
}

.jutalmak-spinner-wrap .win-result {
  display: inline-block;
  width: fit-content;
  max-width: min(100%, 520px);
  margin-top: 10px;
  padding: 7px 12px;
  font-size: 13px;
}

/* ?? Action cards (Legend?s kulcs + Kuponk?d) ?? */
.jutalmak-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.jutalmak-action-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  min-height: 168px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(160deg, rgba(20, 18, 30, 0.82), rgba(10, 10, 16, 0.72));
  border-radius: 14px;
}

.jutalmak-action-card-title {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
}

.jutalmak-key-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.jutalmak-key-img-wrap {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jutalmak-key-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.45));
}

.jutalmak-key-card-text {
  min-width: 0;
  flex: 1;
}

.jutalmak-key-count {
  margin: 4px 0 6px;
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fde68a;
  text-shadow: 0 0 16px rgba(251, 191, 36, 0.35);
  line-height: 1.1;
}

.jutalmak-key-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-faint);
}

.jutalmak-key-card-spin,
.jutalmak-page .jutalmak-coupon-btn {
  width: 100%;
  border-radius: 10px !important;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  justify-content: center;
}

.jutalmak-key-card-spin:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.jutalmak-redeem-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.jutalmak-redeem-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.4;
}

.jutalmak-redeem-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.jutalmak-page .jutalmak-coupon-input {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0 !important;
  border-radius: 10px;
}

.jutalmak-page .jutalmak-coupon-icon {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(251, 146, 60, 0.45));
}

/* ?? Mid grid: Akt?v kuponok + Nyert t?rgyak r?cs ?? */
.jutalmak-mid-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.38fr) minmax(0, 0.62fr);
  gap: 14px;
  align-items: stretch;
}

.jutalmak-panel-title-with-ico {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.jutalmak-panel-ico {
  font-size: 15px;
  line-height: 1;
  opacity: 0.9;
}

.jutalmak-won-grid-panel,
.jutalmak-page .jutalmak-coupons-panel {
  padding: 14px 16px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(160deg, rgba(20, 18, 30, 0.78), rgba(10, 10, 16, 0.68));
  border-radius: 14px;
  margin: 0;
}

.jutalmak-won-grid {
  flex: 1;
  min-height: 0;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.jutalmak-won-grid-inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.jutalmak-won-grid-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px 8px 12px;
  min-height: 118px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 16, 28, 0.72);
  text-align: center;
  box-sizing: border-box;
}

.jutalmak-won-grid-cell.common { border-color: rgba(148, 163, 184, 0.28); }
.jutalmak-won-grid-cell.rare { border-color: rgba(96, 165, 250, 0.42); box-shadow: 0 0 12px rgba(59, 130, 246, 0.12); }
.jutalmak-won-grid-cell.epic { border-color: rgba(192, 132, 252, 0.45); box-shadow: 0 0 14px rgba(168, 85, 247, 0.14); }
.jutalmak-won-grid-cell.legendary { border-color: rgba(253, 224, 71, 0.5); box-shadow: 0 0 16px rgba(234, 179, 8, 0.16); }
.jutalmak-won-grid-cell.mythic { border-color: rgba(244, 114, 182, 0.52); box-shadow: 0 0 18px rgba(236, 72, 153, 0.18); }

.jutalmak-won-grid-ico {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.jutalmak-won-grid-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.jutalmak-won-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 28px 16px;
  font-size: 12px;
  color: var(--text-faint);
}

.jutalmak-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.jutalmak-side-panel {
  padding: 14px 16px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(160deg, rgba(20, 18, 30, 0.78), rgba(10, 10, 16, 0.68));
  border-radius: 14px;
}

.jutalmak-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.jutalmak-panel-foot {
  margin-top: 12px;
  flex-shrink: 0;
}

.jutalmak-view-all-btn {
  width: 100%;
  border-radius: 10px !important;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  justify-content: center;
}

.jutalmak-won-scroll,
.jutalmak-log-scroll {
  flex: 1;
  min-height: 0;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.jutalmak-page .jutalmak-won-scroll::-webkit-scrollbar,
.jutalmak-page .jutalmak-log-scroll::-webkit-scrollbar,
.jutalmak-page .jutalmak-won-grid::-webkit-scrollbar,
.jutalmak-page .jutalmak-coupons-list::-webkit-scrollbar {
  width: 4px;
}

.jutalmak-page .jutalmak-won-scroll::-webkit-scrollbar-thumb,
.jutalmak-page .jutalmak-log-scroll::-webkit-scrollbar-thumb,
.jutalmak-page .jutalmak-won-grid::-webkit-scrollbar-thumb,
.jutalmak-page .jutalmak-coupons-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 4px;
}

.jutalmak-won-items-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.jutalmak-won-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 4px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
}

.jutalmak-won-row:last-child {
  border-bottom: none;
}

.jutalmak-won-row--legendary .jutalmak-won-name { color: #fde68a; }
.jutalmak-won-row--epic .jutalmak-won-name { color: #e9d5ff; }
.jutalmak-won-row--rare .jutalmak-won-name { color: #bfdbfe; }
.jutalmak-won-row--mythic .jutalmak-won-name { color: #fecaca; }

.jutalmak-won-ico {
  width: 76px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  z-index: 0;
  font-size: 20px;
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
}

.jutalmak-won-mid {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.jutalmak-won-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jutalmak-won-sep { color: var(--text-faint); font-weight: 500; }

.jutalmak-page .rarity-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.jutalmak-won-user {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.jutalmak-won-avatar {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
}

.jutalmak-won-user-name {
  font-size: 11px;
  color: var(--text-dim);
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jutalmak-won-time {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  justify-self: end;
}

.jutalmak-log-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 8px 10px;
  align-items: start;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  line-height: 1.45;
}

.jutalmak-log-row:last-child {
  border-bottom: none;
}

.jutalmak-log-chest {
  font-size: 14px;
  line-height: 1.2;
  padding-top: 2px;
  filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.35));
}

.jutalmak-log-main {
  min-width: 0;
  color: var(--text-dim);
  overflow: hidden;
}

.jutalmak-log-player {
  font-weight: 700;
  color: var(--text);
}

.jutalmak-log-msg {
  font-weight: 500;
  color: var(--text-dim);
}

.jutalmak-log-prize {
  font-weight: 700;
}

.jutalmak-log-prize--rare { color: var(--rarity-rare); }
.jutalmak-log-prize--epic { color: var(--rarity-epic); }
.jutalmak-log-prize--legendary { color: #facc15; text-shadow: 0 0 18px rgba(234, 179, 8, 0.35); }
.jutalmak-log-prize--mythic { color: #f472b6; text-shadow: 0 0 14px rgba(236, 72, 153, 0.3); }
.jutalmak-log-prize--common { color: var(--rarity-common); }

.jutalmak-log-time {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  padding-top: 2px;
}

@media (max-width: 1100px) {
  .jutalmak-won-grid-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .jutalmak-action-grid,
  .jutalmak-mid-grid,
  .jutalmak-bottom-grid {
    grid-template-columns: 1fr;
  }

  .jutalmak-won-grid-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jutalmak-won-row {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
  }

  .jutalmak-won-user,
  .jutalmak-won-time {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .jutalmak-page-head {
    flex-direction: column;
    align-items: stretch;
  }

  .jutalmak-help-btn {
    align-self: flex-start;
  }

  .jutalmak-key-card-body {
    flex-direction: column;
    text-align: center;
  }

  .jutalmak-won-grid-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jutalmak-page .crate-spin-btn {
    width: 100%;
  }
}

/* Crate inventory */
.crate-inventory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.crate-inv-card {
  padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: var(--transition-fast);
  text-align: center;
}

.crate-inv-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.13);
  background: var(--glass-hover);
}
.crate-inv-icon { font-size: 32px; }
.crate-inv-name { font-size: 12px; font-weight: 600; }
.crate-inv-count { font-size: 11px; color: var(--text-faint); }

/* Rarity indicator */
.rarity-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rarity-tag.common { background: rgba(138,155,176,0.2); color: var(--rarity-common); }
.rarity-tag.rare { background: rgba(77,143,255,0.15); color: var(--rarity-rare); }
.rarity-tag.epic { background: rgba(168,85,247,0.15); color: var(--rarity-epic); }
.rarity-tag.legendary { background: rgba(255,149,0,0.15); color: var(--rarity-legendary); }
.rarity-tag.mythic { background: rgba(236, 72, 153, 0.18); color: #f9a8d4; }

/* ???????????????????????????????????????????????
   COMMUNITY GAMES PAGE
??????????????????????????????????????????????? */

/* ?? Community home v2 (J?t?kszerverek) ?? */
#page-community.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#community-home.community-home-v2.servers-page {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(14px, 1.5vw, 24px);
  box-sizing: border-box;
}

#community-home.community-home-v2.servers-page::-webkit-scrollbar { width: 5px; }
#community-home.community-home-v2.servers-page::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 4px;
}

.community-home-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.1vw, 16px);
  max-width: min(1440px, 100%);
  margin: 0 auto;
}

.community-home-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(12px, 1.5vw, 20px);
  flex-shrink: 0;
}

.community-home-title {
  margin: 0 0 4px;
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.community-home-title-brand { color: #f8fafc; }
.community-home-title-accent {
  color: #38bdf8;
  text-shadow: 0 0 22px rgba(56, 189, 248, 0.35);
}

.community-home-subtitle {
  margin: 0 0 10px;
  font-size: clamp(12px, 1vw, 14px);
  color: var(--text-dim);
  line-height: 1.4;
}

.community-home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.server-summary {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(188, 200, 216, 0.88);
  background: rgba(7, 16, 31, 0.76);
  border: 1px solid rgba(124, 174, 221, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.server-summary strong {
  font-weight: 600;
  color: rgba(239, 250, 255, 0.96);
}

.server-summary__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.server-summary__icon svg,
.server-summary__icon i {
  width: 15px;
  height: 15px;
}

.server-summary--servers .server-summary__icon { color: #738cff; }
.server-summary--players .server-summary__icon,
.server-summary--players strong { color: #30dd87; }
.server-summary--maintenance .server-summary__icon,
.server-summary--maintenance strong { color: #f3a43b; }
.server-summary--development .server-summary__icon,
.server-summary--development strong { color: #e8c84a; }

/* Launcher lock: gray button + reason-colored label/icon (toast on click) */
#community-home .server-button--primary.is-launcher-locked,
#community-home .server-button--gold.is-launcher-locked,
#community-home .btn-rynexmc.is-launcher-locked,
#community-home .btn-pupak.is-launcher-locked,
#page-community .server-button--primary.is-launcher-locked,
#page-community .server-button--gold.is-launcher-locked,
#page-community .btn-rynexmc.is-launcher-locked,
#page-community .btn-pupak.is-launcher-locked,
.pupak-launch-btn.is-launcher-locked,
button.is-launcher-locked {
  background: linear-gradient(180deg, rgba(48, 54, 66, 0.96), rgba(32, 36, 46, 0.98)) !important;
  border-color: rgba(130, 140, 160, 0.32) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  filter: none !important;
}
#community-home .server-button.is-launcher-locked--maintenance,
#community-home .btn-pupak.is-launcher-locked--maintenance,
#community-home .btn-rynexmc.is-launcher-locked--maintenance,
#page-community .server-button.is-launcher-locked--maintenance,
#page-community .btn-pupak.is-launcher-locked--maintenance,
#page-community .btn-rynexmc.is-launcher-locked--maintenance,
button.is-launcher-locked.is-launcher-locked--maintenance {
  color: #f3a43b !important;
}
#community-home .server-button.is-launcher-locked--development,
#community-home .btn-pupak.is-launcher-locked--development,
#community-home .btn-rynexmc.is-launcher-locked--development,
#page-community .server-button.is-launcher-locked--development,
#page-community .btn-pupak.is-launcher-locked--development,
#page-community .btn-rynexmc.is-launcher-locked--development,
button.is-launcher-locked.is-launcher-locked--development {
  color: #e8c84a !important;
}
#community-home button.is-launcher-locked svg,
#page-community button.is-launcher-locked svg,
button.is-launcher-locked svg {
  color: inherit !important;
  stroke: currentColor !important;
}
#community-home .server-button--primary.is-launcher-locked:hover,
#community-home .server-button--gold.is-launcher-locked:hover,
#community-home .btn-rynexmc.is-launcher-locked:hover,
#community-home .btn-pupak.is-launcher-locked:hover,
#page-community .server-button--primary.is-launcher-locked:hover,
#page-community .server-button--gold.is-launcher-locked:hover,
#page-community .btn-rynexmc.is-launcher-locked:hover,
#page-community .btn-pupak.is-launcher-locked:hover,
.pupak-launch-btn.is-launcher-locked:hover,
button.is-launcher-locked:hover {
  filter: brightness(1.06);
}

.community-link {
  min-width: 280px;
  min-height: 58px;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  padding: 8px 14px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(100, 190, 255, 0.16) !important;
  background: linear-gradient(155deg, rgba(10, 20, 39, 0.92), rgba(5, 13, 27, 0.94)) !important;
  text-align: left;
}

.community-link:hover {
  border-color: rgba(88, 101, 242, 0.35) !important;
  background: linear-gradient(155deg, rgba(14, 26, 48, 0.94), rgba(8, 16, 32, 0.96)) !important;
}

.community-link__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(88, 101, 242, 0.2);
}

.community-link__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.community-link__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.community-link__url {
  font-size: 11px;
  color: var(--text-faint);
}

.community-link__desc {
  font-size: 11px;
  color: rgba(188, 200, 216, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-rynexbot-block:hover {
  border-color: rgba(56, 189, 248, 0.35) !important;
  background: linear-gradient(155deg, rgba(14, 26, 48, 0.94), rgba(8, 16, 32, 0.96)) !important;
}

.community-rynexbot-block .community-link__icon {
  background: rgba(14, 24, 42, 0.72);
  overflow: hidden;
  padding: 0;
}

.community-rynexbot-block .community-link__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.community-link__arrow {
  display: grid;
  place-items: center;
  color: rgba(248, 250, 252, 0.55);
}

.community-link__arrow svg {
  width: 16px;
  height: 16px;
}

/* Featured Pup?k card */
#community-home .featured-server-card {
  position: relative;
  overflow: hidden;
  height: clamp(240px, 27vh, 300px);
  min-height: 250px;
  border-radius: 16px;
  border: 1px solid rgba(251, 191, 36, 0.38);
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.08);
  cursor: default;
  flex-shrink: 0;
  display: block;
  background-color: #040c19;
}

#community-home .featured-server-card:hover {
  transform: none;
}

#community-home .featured-server-card::after {
  display: none;
}

#community-home .featured-server-card__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(4 12 25 / 0.95) 0%,
    rgb(4 12 25 / 0.95) 30%,
    rgb(4 12 25 / 0.90) 36%,
    rgb(4 12 25 / 0.76) 44%,
    rgb(4 12 25 / 0.54) 50%,
    rgb(4 12 25 / 0.32) 56%,
    rgb(4 12 25 / 0.14) 62%,
    rgb(4 12 25 / 0) 70%
  );
}

#community-home .featured-server-card__slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#community-home .featured-server-card__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 1;
}

#community-home .featured-server-card__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

#community-home .featured-server-card .featured-server-card__image-wrap,
#community-home .featured-server-card .game-card-bg.game-card-cs,
#community-home .featured-server-card .game-card-bg.game-card-mc,
#community-home .featured-server-card .game-card-bg.game-card-fm {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  font-size: 0;
  background-color: transparent;
  background-image: none;
  overflow: hidden;
}

#community-home .featured-server-card .featured-server-card__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 86%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}


#community-home .featured-server-card .featured-server-card__content {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: min(36%, 440px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: clamp(26px, 4.2vh, 42px) clamp(24px, 3vw, 44px) clamp(18px, 2.5vh, 28px);
  box-sizing: border-box;
  min-width: 0;
  pointer-events: auto;
  overflow: visible;
}

.featured-server-card__eyebrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ffcc55;
  text-shadow:
    0 0 6px rgba(255, 196, 50, 0.42),
    0 0 14px rgba(255, 170, 20, 0.22);
}

.featured-server-card__eyebrow svg {
  width: 12px;
  height: 12px;
  color: #ffb820;
  fill: #ffb820;
  stroke: #ffd36a;
  stroke-width: 0.35px;
  filter:
    drop-shadow(0 0 4px rgba(255, 184, 32, 0.62))
    drop-shadow(0 0 10px rgba(255, 196, 50, 0.34));
}

.featured-server-card__eyebrow svg path,
.featured-server-card__eyebrow svg polygon {
  fill: currentColor;
}

.featured-server-card h2 {
  margin: 0 0 8px;
  flex-shrink: 0;
  font-family: 'Syne', sans-serif;
  font-size: clamp(25px, 2.1vw, 34px);
  line-height: 1.08;
  font-weight: 700;
  color: #f8fafc;
}

.featured-server-card__description {
  margin: 0 0 8px;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(188, 200, 216, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

#community-home .featured-server-card .server-status {
  margin-top: 10px;
  margin-bottom: 0;
  flex-shrink: 0;
}

#community-home .server-status {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

#community-home .server-card .server-status {
  margin-bottom: 14px;
}

#community-home .community-server-grid > .server-card .server-status {
  margin-top: 5px;
  margin-bottom: 0;
  flex-shrink: 0;
}

#community-home .server-status::before {
  content: '\2022\00a0';
  font-size: 11px;
  vertical-align: 1px;
}

#community-home .server-status--online {
  color: rgba(108, 178, 142, 0.82);
  font-weight: 500;
  text-shadow: none;
}

#community-home .server-status--online::before {
  color: rgba(88, 168, 124, 0.9);
}

#community-home .server-status--soon {
  color: rgba(158, 142, 198, 0.82);
  font-weight: 500;
  text-shadow: none;
}

#community-home .server-status--soon::before {
  color: rgba(138, 122, 188, 0.9);
}

#community-home .featured-server-card .server-status.server-status--online {
  color: rgba(108, 178, 142, 0.82);
}

#community-home .featured-server-card .server-status.server-status--online::before {
  color: rgba(88, 168, 124, 0.9);
}

#community-home .featured-server-card__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  width: auto;
  max-width: 100%;
  margin-top: 22px;
  flex-shrink: 0;
}

#community-home .featured-server-card__actions .server-button {
  width: auto;
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

#community-home .featured-server-card__actions .server-button--gold {
  flex: 0 1 auto;
  min-width: 148px;
  max-width: 188px;
  color: rgba(255, 255, 255, 0.96);
  background: linear-gradient(
    180deg,
    rgba(205, 158, 88, 0.96) 0%,
    rgba(168, 112, 42, 0.98) 45%,
    rgba(118, 76, 26, 0.98) 100%
  );
  border: 1px solid rgba(212, 168, 88, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.36),
    inset 0 -1px 0 rgba(55, 35, 10, 0.4),
    0 2px 10px rgba(0, 0, 0, 0.28);
  gap: 8px;
  justify-content: center;
}

#community-home .featured-server-card__actions .server-button--gold:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.42),
    inset 0 -1px 0 rgba(55, 35, 10, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.32);
}

#community-home .featured-server-card__actions .server-button--gold svg {
  width: 11px;
  height: 11px;
  color: #fcd34d;
  fill: #fcd34d;
  stroke: #fcd34d;
  flex-shrink: 0;
}

#community-home .featured-server-card__actions .server-button--secondary {
  flex: 0 0 auto;
  min-width: 108px;
  max-width: 124px;
  padding: 0 12px 0 14px;
  color: rgba(235, 242, 255, 0.92);
  background: rgba(4, 12, 25, 0.38);
  border: 1px solid rgba(56, 189, 248, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  justify-content: center;
  gap: 8px;
}

#community-home .featured-server-card__actions .server-button--secondary:hover {
  background: rgba(8, 20, 40, 0.55);
  border-color: rgba(96, 200, 255, 0.58);
}

#community-home .featured-server-card__actions .server-button--secondary svg.server-button__arrow,
#community-home .server-card__actions .server-button--secondary .server-button__arrow {
  width: 14px;
  height: 14px;
  opacity: 0.9;
  flex-shrink: 0;
  display: block;
}

#community-home .featured-server-card__actions .server-button--secondary svg {
  width: 13px;
  height: 13px;
  opacity: 0.88;
  flex-shrink: 0;
}

.featured-server-card__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  width: auto;
}

#community-home .featured-server-card__pagination {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 13px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

#community-home .featured-server-card__discord {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
}

.featured-server-card__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.35);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.featured-server-card__dot:hover {
  background: rgba(251, 191, 36, 0.55);
  transform: scale(1.12);
}

.featured-server-card__dot--active {
  background: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.55);
}

/* Server grid 3?2 */
#community-home .servers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(228px, 268px);
  gap: clamp(12px, 1.1vw, 18px);
}

#community-home .server-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(112px, 58%) minmax(0, 42%);
  min-height: 0;
  height: clamp(228px, 26.5vh, 268px);
  overflow: hidden;
  border-radius: 15px;
  cursor: pointer;
  border: 1px solid rgba(100, 190, 255, 0.16);
  background: linear-gradient(180deg, rgba(10, 20, 39, 0.96), rgba(5, 13, 27, 0.98));
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#community-home .server-card:hover {
  transform: translateY(-2px);
  border-color: rgba(100, 190, 255, 0.32);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

#community-home .server-card.game-card--locked {
  opacity: 0.94;
  cursor: default;
}

.server-card__media {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.server-card__media.game-card-bg {
  font-size: 0;
  height: auto;
  display: block;
}

.server-card__media .game-card-video,
.server-card__media .server-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform 0.35s ease;
  display: block;
}

#community-home .server-card:hover .game-card-video,
#community-home .server-card:hover .server-card__image {
  transform: scale(1.02);
}

#community-home .server-card__media.game-card-mc {
  background-color: #0a1214;
  background-image: url("rynex_mc_servercard_pic.png");
  background-size: cover;
  background-position: center 72%;
  background-repeat: no-repeat;
}

#community-home .community-server-grid > .server-card {
  grid-template-rows: minmax(120px, 61%) minmax(0, 39%);
}

#community-home .community-server-grid > .server-card .server-card__title--overlay {
  position: absolute;
  left: 14px;
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  transform: translateY(8%);
  font-family: 'Syne', sans-serif;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.1;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 28px);
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.82),
    0 0 18px rgba(4, 12, 25, 0.55);
  pointer-events: none;
}

#community-home .community-server-grid > .server-card .server-card__body {
  position: relative;
  z-index: 2;
  padding: 4px 16px 13px;
}

#community-home .community-server-grid > .server-card .server-card__description {
  margin: 0 0 3px;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(188, 200, 216, 0.82);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#community-home .community-server-grid > .server-card .server-card__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

#community-home .community-server-grid > .server-card .server-card__actions .server-button {
  width: 100%;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

#community-home .community-server-grid > .server-card .server-card__actions .server-button--primary,
#community-home .community-server-grid > .server-card .server-card__actions .server-button--notify {
  min-width: 0;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
}

#community-home .community-server-grid > .server-card .server-card__actions .server-button--primary {
  color: rgba(239, 250, 255, 0.96);
  background: linear-gradient(135deg, rgba(0, 158, 225, 0.92), rgba(39, 91, 205, 0.92));
  border: 1px solid rgba(66, 208, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.22);
}

#community-home .community-server-grid > .server-card .server-card__actions .server-button--primary svg {
  width: 11px;
  height: 11px;
  color: #5cf2ff;
  fill: #5cf2ff;
  stroke: #5cf2ff;
  flex-shrink: 0;
}

#community-home .community-server-grid > .server-card .server-card__actions .server-button--notify svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

#community-home .community-server-grid > .server-card .server-card__actions .server-button--secondary {
  width: 100%;
  min-width: 0;
  max-width: none;
  justify-content: center;
  gap: 8px;
  padding: 0 12px 0 14px;
  color: rgba(235, 242, 255, 0.92);
  background: rgba(4, 12, 25, 0.42);
  border: 1px solid rgba(56, 189, 248, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#community-home .server-card--mc .server-card__image {
  object-position: center 72%;
}

#community-home .server-card__media.game-card-fm {
  background-color: #0a1014;
  background-image: url("rynex_rlrp.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

#community-home .server-card--fm .server-card__image {
  object-fit: contain;
  object-position: center center;
}

#community-home .server-card__media.game-card-hy {
  background-color: #0a1018;
  background-image: url("comingsoon_servercard_pic.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#community-home .server-card--hy .server-card__image {
  object-fit: cover;
  object-position: center center;
}

#community-home .community-server-grid > .server-card .server-card__actions .server-button--notify.server-button--disabled,
#community-home .server-card--soon .server-card__actions .server-button--notify {
  opacity: 0.42;
  filter: grayscale(0.9) saturate(0.35);
  cursor: not-allowed;
  pointer-events: none;
  color: rgba(203, 213, 225, 0.72);
  background: rgba(51, 65, 85, 0.55);
  border-color: rgba(100, 116, 139, 0.38);
  box-shadow: none;
}

#community-home .community-server-grid > .server-card .server-card__actions .server-button--notify.server-button--disabled svg,
#community-home .server-card--soon .server-card__actions .server-button--notify svg {
  color: rgba(148, 163, 184, 0.72);
  fill: rgba(148, 163, 184, 0.72);
  stroke: rgba(148, 163, 184, 0.72);
}

#community-home .server-card--hy .server-card__actions .server-button--notify {
  opacity: 1;
  filter: none;
  cursor: pointer;
  pointer-events: auto;
  color: rgba(239, 250, 255, 0.96);
  background: linear-gradient(135deg, rgba(91, 48, 202, 0.78), rgba(115, 72, 206, 0.72));
  border: 1px solid rgba(169, 121, 255, 0.46);
}

#community-home .server-card--hy .server-card__actions .server-button--notify svg {
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}

.server-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(5, 13, 27, 0.72) 88%, rgba(5, 13, 27, 0.98) 100%);
}

.server-card__placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(49, 133, 255, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(8, 29, 52, 0.98), rgba(7, 13, 31, 0.98));
}

.server-card__placeholder--hy {
  background:
    radial-gradient(circle at 50% 45%, rgba(129, 140, 248, 0.2), transparent 42%),
    linear-gradient(145deg, rgba(12, 22, 48, 0.98), rgba(7, 13, 31, 0.98));
}

.server-card__placeholder--fm {
  background:
    radial-gradient(circle at 50% 45%, rgba(168, 85, 247, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(14, 18, 40, 0.98), rgba(7, 13, 31, 0.98));
}

.server-card__placeholder--soon {
  background:
    radial-gradient(circle at 50% 45%, rgba(56, 189, 248, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(10, 22, 42, 0.98), rgba(7, 13, 31, 0.98));
}

#community-home .server-card__media.game-card-soon {
  background-color: #0a1018;
}

.server-card__placeholder svg {
  width: 32px;
  height: 32px;
  color: rgba(148, 163, 184, 0.55);
  opacity: 0.85;
}

.server-card__discord {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.server-card__body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 13px;
  background: linear-gradient(180deg, rgba(10, 20, 39, 0.96), rgba(5, 13, 27, 0.98));
}

.server-card__title {
  margin: 0 0 4px;
  font-family: 'Syne', sans-serif;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.15;
  font-weight: 650;
  color: #f8fafc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-card__description {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(188, 200, 216, 0.72);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.server-card__actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 10px;
}

/* Server buttons */
#community-home .server-button {
  height: 34px;
  min-width: 0;
  padding: 0 14px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  width: 100%;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

#community-home .server-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

#community-home .server-button--primary {
  color: rgba(239, 250, 255, 0.96);
  background: linear-gradient(135deg, rgba(0, 158, 225, 0.88), rgba(39, 91, 205, 0.88));
  border: 1px solid rgba(66, 208, 255, 0.56);
}

#community-home .server-button--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

#community-home .server-button--gold {
  color: #1c1917;
  background: linear-gradient(135deg, #f59e0b 0%, #eab308 45%, #fbbf24 100%);
  border: 1px solid rgba(253, 224, 71, 0.45);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.22);
}

#community-home .server-button--gold:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

#community-home .server-button--secondary {
  height: 34px;
  padding: 0 13px;
  justify-content: center;
  gap: 8px;
  color: rgba(235, 242, 255, 0.9);
  background: rgba(5, 14, 29, 0.78);
  border: 1px solid rgba(107, 169, 225, 0.28);
}

#community-home .server-button--secondary:hover {
  border-color: rgba(107, 169, 225, 0.42);
  background: rgba(8, 20, 40, 0.88);
}

#community-home .server-button--notify {
  color: rgba(239, 250, 255, 0.96);
  background: linear-gradient(135deg, rgba(91, 48, 202, 0.78), rgba(115, 72, 206, 0.72));
  border: 1px solid rgba(169, 121, 255, 0.46);
}

#community-home .server-button--notify:hover {
  filter: brightness(1.06);
}

#community-home .server-button--gold span,
#community-home .server-button--primary span,
#community-home .server-button--notify span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#community-home .game-card-discord-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}

#community-home .game-card-discord-btn:hover {
  opacity: 1;
  border-color: rgba(88, 101, 242, 0.45);
  background: rgba(88, 101, 242, 0.16);
}

#community-home .game-card-discord-btn img {
  display: block;
  width: 16px;
  height: 16px;
}

@media (max-width: 900px) {
  #community-home .servers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .featured-server-card__content {
    width: min(48%, 440px);
  }
}

@media (max-width: 720px) {
  .community-home-header {
    flex-direction: column;
  }
  .community-link {
    min-width: 0;
    width: 100%;
  }
  .featured-server-card__content {
    width: 100%;
    padding-bottom: 36px;
    justify-content: flex-end;
  }
  #community-home .featured-server-card::after {
    background: linear-gradient(180deg, transparent 0%, rgba(4, 12, 25, 0.55) 30%, rgba(4, 12, 25, 0.94) 100%);
  }
  #community-home .servers-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(210px, auto);
  }
  .server-card__actions {
    grid-template-columns: 1fr;
  }
}

/* Legacy bg tokens for subpages */
.game-card-cs {
  background-color: #14100a;
  background-image: url("pupakcs2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.game-card-mc {
  background-color: #0a1214;
}
.game-card-hy { background: transparent; }
.game-card-fm { background: transparent; }

#community-home .game-card:hover { transform: none; }
#community-home .server-card:hover { transform: translateY(-2px); }

@media (max-width: 1100px) {
  #community-home .servers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .community-home-header { flex-direction: column; }
  .community-link { width: 100%; min-width: 0; }
  #community-home .servers-grid { grid-template-columns: 1fr; }
}

/* Legacy / subpage game-cards (unchanged grid fallback) */
.game-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.game-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.game-card:hover { transform: translateY(-4px); }
.game-card:hover .game-card-overlay { opacity: 1; }

.game-card--locked {
  opacity: 0.78;
  cursor: default;
}
.game-card--locked:hover {
  transform: none;
}
.game-card--locked:hover .game-card-overlay {
  opacity: 0.55;
}

.game-card-bg {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  position: relative;
  overflow: hidden;
}

/* Featured card: override legacy .game-card-bg height/flow */
#community-home .featured-server-card.game-card > .game-card-bg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  display: block;
}

.game-card-cs {
  background-color: #14100a;
  background-image: url("pupakcs2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0;
  color: transparent;
}
.game-card-mc {
  background-color: #0a1214;
  background-image: linear-gradient(135deg, rgba(82,163,61,0.2), rgba(134,96,67,0.2)), rgba(12,20,12,0.8);
  font-size: 0;
  color: transparent;
}
.game-card-mc .game-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.game-card-mc .game-card-grid,
.game-card-mc .game-card-overlay {
  z-index: 1;
}
.game-card-hy { background: linear-gradient(135deg, rgba(0,157,255,0.2), rgba(0,255,200,0.1)), rgba(8,15,25,0.8); }
.game-card-fm { background: linear-gradient(135deg, rgba(77,143,255,0.2), rgba(168,85,247,0.15)), rgba(10,12,20,0.8); }

.game-card-grid {
  position: absolute; inset: 0;
  background-image: 
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 30px 30px;
}

.game-card-overlay {
  position: absolute; inset: 0;
  background: rgba(0,229,255,0.06);
  opacity: 0;
  transition: var(--transition);
}

.game-card-body {
  position: relative;
  padding: 16px 20px 20px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.game-card-discord-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}

.game-card-discord-btn:hover {
  opacity: 1;
  border-color: rgba(88, 101, 242, 0.45);
  background: rgba(88, 101, 242, 0.12);
}

.game-card-discord-btn img {
  display: block;
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

#page-community #community-home .game-card-body {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-top: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* J?t?kok ? aloldalak (Server / F?rum / Friss?t?sek): kev?sb? ?tl?tsz? panelek, mint a kliens update slotok */
#page-community .game-subpage .server-row,
#page-community .game-subpage .server-row.glass-card {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#page-community .game-subpage .server-row:hover {
  background: linear-gradient(155deg, rgba(22, 28, 44, 0.96), rgba(12, 16, 28, 0.92));
  border-color: rgba(0, 229, 255, 0.22);
}
#page-community .game-subpage .server-row.selected {
  border-color: rgba(0, 229, 255, 0.45);
  background: linear-gradient(155deg, rgba(16, 36, 48, 0.96), rgba(10, 20, 32, 0.93));
}

.remnant-pupak-cs2-csgo-divider {
  display: flex;
  align-items: center;
  padding: 10px 4px 8px;
  margin: 2px 0 4px;
  pointer-events: none;
  user-select: none;
}
.remnant-pupak-cs2-csgo-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(148, 163, 184, 0.35) 12%,
    rgba(0, 229, 255, 0.45) 50%,
    rgba(148, 163, 184, 0.35) 88%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.12);
}

#page-community .game-subpage .glass-card.server-detail {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#page-community .game-subpage .server-info-body {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.9));
  border-color: rgba(148, 163, 184, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#page-community .game-subpage .server-banner-area {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.14), rgba(168, 85, 247, 0.12));
  border-color: rgba(148, 163, 184, 0.16);
}

#page-community .game-subpage .game-tabs {
  background: linear-gradient(180deg, rgba(12, 16, 26, 0.92), rgba(8, 10, 18, 0.9));
  border-color: rgba(148, 163, 184, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#page-community .game-subpage .game-tab.active {
  background: linear-gradient(155deg, rgba(22, 30, 48, 0.95), rgba(14, 18, 30, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#page-community .game-subpage .glass-input,
#page-community .game-subpage .glass-select {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(10, 14, 22, 0.92));
  border-color: rgba(148, 163, 184, 0.22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#page-community .game-subpage .remnant-admin-news-card {
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px rgba(4, 7, 13, 0.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#page-community .game-subpage .remnant-admin-news-card:hover {
  border-color: rgba(138, 154, 187, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(77, 143, 255, 0.12), 0 18px 38px rgba(7, 11, 20, 0.55);
}

#page-community .game-subpage .forum-post.glass-card {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.16);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#page-community .game-subpage .forum-post:hover {
  background: linear-gradient(155deg, rgba(22, 28, 44, 0.96), rgba(12, 16, 28, 0.92));
  border-color: rgba(0, 229, 255, 0.22);
}

#page-community #hy-overview .glass-card {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.game-card-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.game-card-desc { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5; }
.game-card-footer { display: flex; align-items: center; justify-content: space-between; }
#community-home .game-player-count {
  font-size: 12px;
  font-weight: 500;
  color: rgba(108, 178, 142, 0.82);
  text-shadow: none;
}

#community-home .game-player-count::before {
  content: '\2022\00a0';
  font-size: 11px;
  color: rgba(88, 168, 124, 0.9);
  vertical-align: 1px;
}

/* Game sub-pages */
.game-subpage { display: none; }
.game-subpage.active { display: block; }

.game-tabs {
  display: flex; gap: 6px;
  margin-bottom: 20px;
  background: rgba(0,0,0,0.2);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  width: fit-content;
}

.game-tab {
  padding: 7px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: var(--transition-fast);
  color: var(--text-dim);
}

.game-tab.active { background: var(--glass-active); color: var(--text); }
.game-tab:hover:not(.active) { color: var(--text); }

/* ???????????????????????????????????????????????
   SERVER BROWSER
??????????????????????????????????????????????? */
.server-browser-layout { display: grid; grid-template-columns: 1fr 340px; gap: 14px; }

.server-list-wrap { }

.server-row {
  display: grid;
  grid-template-columns: 1fr 80px 70px 80px auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
  margin-bottom: 4px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}

.server-row:hover { background: var(--glass-hover); border-color: rgba(0,229,255,0.2); }
.server-row.selected { border-color: rgba(0,229,255,0.4); background: rgba(0,229,255,0.04); }

.server-name-cell { }
.server-name { font-size: 13px; font-weight: 600; }
.server-map { font-size: 11px; color: var(--text-faint); margin-top: 1px; }

.server-players { font-size: 12px; font-weight: 600; text-align: center; }
.server-players span { color: var(--text-faint); font-weight: 400; font-size: 11px; }

.ping-badge {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 6px;
  text-align: center;
}
.ping-badge.low { background: rgba(0,255,163,0.15); color: var(--green); }
.ping-badge.mid { background: rgba(255,149,0,0.15); color: var(--orange); }
.ping-badge.high { background: rgba(255,59,48,0.15); color: var(--red); }

.fav-btn {
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--text-faint);
  transition: var(--transition-fast);
  padding: 2px;
}
.fav-btn:hover { color: var(--orange); }
.fav-btn.active { color: var(--orange); }

/* Server detail panel */
.server-detail {
  position: sticky; top: 0;
}

.server-detail-empty {
  height: 300px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  color: var(--text-faint);
  font-size: 13px;
}

.server-detail-empty-icon { font-size: 36px; opacity: 0.3; }

.server-detail-content { display: none; }
.server-detail-content.active { display: block; }

.server-banner-area {
  height: 100px;
  border-radius: 12px 12px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  background: linear-gradient(135deg, rgba(0,229,255,0.1), rgba(168,85,247,0.1));
  border: 1px solid var(--glass-border); border-bottom: none;
  position: relative; overflow: hidden;
}

/* RyneX MC szerver b?ng?sz? (k?z?ss?g ? Minecraft) */
.remnant-mc-browser-list-header {
  display: grid;
  grid-template-columns: 1fr 88px 72px;
  align-items: center;
  gap: 12px;
  padding: 0 12px 8px 4px;
  margin-bottom: 4px;
}

.remnant-mc-browser-list-header-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-align: center;
}

.remnant-mc-browser-list-header-label--ping {
  text-align: right;
  padding-right: 4px;
}

.remnant-mc-browser-section {
  margin-bottom: 14px;
}

.remnant-mc-browser-section-head {
  padding: 4px 4px 8px;
}

.remnant-mc-browser-section-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.remnant-mc-browser-section-badge--pvp {
  background: rgba(255, 59, 48, 0.14);
  color: #ff6b6b;
  border: 1px solid rgba(255, 59, 48, 0.28);
}

.remnant-mc-browser-section-badge--peaceful {
  background: rgba(0, 255, 163, 0.12);
  color: #00ffa3;
  border: 1px solid rgba(0, 255, 163, 0.28);
}

.remnant-mc-slot {
  display: grid;
  grid-template-columns: 132px 1fr 88px 72px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 88px;
  margin-bottom: 6px;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.9));
  text-align: left;
}

.remnant-mc-slot--featured {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.remnant-mc-slot--featured:hover {
  border-color: rgba(0, 229, 255, 0.22);
  background: linear-gradient(155deg, rgba(22, 28, 44, 0.96), rgba(12, 16, 28, 0.92));
}

.remnant-mc-slot--featured.selected {
  border-color: rgba(0, 229, 255, 0.45);
  background: linear-gradient(155deg, rgba(16, 36, 48, 0.96), rgba(10, 20, 32, 0.93));
}

/* Nem kiemelt MC m?d-szerverek (PvP kateg?ria alatt) */
.remnant-mc-slot--entry {
  cursor: pointer;
  min-height: 76px;
  opacity: 0.96;
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  border-color: rgba(148, 163, 184, 0.12);
  background: linear-gradient(155deg, rgba(12, 18, 32, 0.9), rgba(8, 12, 20, 0.88));
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}

.remnant-mc-slot--entry:hover {
  opacity: 1;
  border-color: rgba(148, 163, 184, 0.28);
  background: linear-gradient(155deg, rgba(18, 24, 40, 0.94), rgba(10, 14, 24, 0.9));
}

.remnant-mc-slot--entry.selected {
  border-color: rgba(0, 229, 255, 0.35);
  background: linear-gradient(155deg, rgba(14, 30, 42, 0.94), rgba(10, 18, 28, 0.92));
}

.remnant-mc-slot-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(203, 213, 225, 0.75);
  background:
    linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
}

.remnant-mc-slot--placeholder {
  min-height: 72px;
  pointer-events: none;
  opacity: 0.55;
}

.remnant-mc-slot-placeholder-thumb {
  width: 132px;
  height: 72px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.remnant-mc-slot-thumb {
  position: relative;
  width: 132px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.remnant-mc-slot-thumb img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% * var(--thumb-zoom, 1.06));
  height: calc(100% * var(--thumb-zoom, 1.06));
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: var(--thumb-position, center center);
}

.remnant-mc-slot-body {
  min-width: 0;
}

.remnant-mc-slot-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.remnant-mc-slot-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.remnant-mc-slot-status--online {
  background: #2ecc71;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.65);
}

.remnant-mc-slot-status--offline {
  background: #e74c3c;
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.45);
}

.remnant-mc-slot-status--loading {
  background: rgba(255, 255, 255, 0.35);
}

.remnant-mc-slot-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.remnant-mc-slot-desc {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-faint);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.remnant-mc-slot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.remnant-mc-slot-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}

.remnant-mc-slot-badge--skypvp { background: rgba(77, 143, 255, 0.2); color: #7eb8ff; }
.remnant-mc-slot-badge--duel { background: rgba(255, 149, 0, 0.18); color: #ffb347; }
.remnant-mc-slot-badge--bedwars { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.remnant-mc-slot-badge--hungergames { background: rgba(255, 59, 48, 0.18); color: #ff8a80; }
.remnant-mc-slot-badge--survival { background: rgba(34, 197, 94, 0.18); color: #6ee7a0; }
.remnant-mc-slot-badge--creative { background: rgba(0, 229, 255, 0.15); color: #67e8f9; }
.remnant-mc-slot-badge--skyblock { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
.remnant-mc-slot-badge--more { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }

.remnant-mc-slot-version {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-faint);
  margin-left: 2px;
}

.remnant-mc-slot-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.remnant-mc-slot-players {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.remnant-mc-slot-ping {
  font-size: 10px;
  font-weight: 600;
  color: #19e3e3;
  text-align: center;
}

.remnant-mc-server-detail {
  overflow: hidden;
  border-color: rgba(0, 255, 255, 0.22);
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.06);
}

.remnant-mc-detail-content {
  display: none;
}

.remnant-mc-detail-content.active {
  display: block;
}

.remnant-mc-detail-hero {
  position: relative;
  width: 100%;
  height: 176px;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
}

.remnant-mc-detail-hero-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% * var(--preview-zoom, 1.05));
  height: calc(100% * var(--preview-zoom, 1.05));
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: var(--preview-position, center center);
}

.remnant-mc-detail-body {
  padding: 16px;
}

.remnant-mc-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.remnant-mc-detail-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.remnant-mc-detail-status--online {
  background: #2ecc71;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.75);
}

.remnant-mc-detail-status--offline {
  background: #e74c3c;
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}

.remnant-mc-detail-status--loading {
  background: rgba(255, 255, 255, 0.35);
  animation: remnant-mc-status-pulse 1.2s ease-in-out infinite;
}

@keyframes remnant-mc-status-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.remnant-mc-detail-name {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.remnant-mc-detail-mode {
  font-size: 11px;
  font-weight: 600;
  color: #19e3e3;
  margin-top: 4px;
}

.remnant-mc-detail-desc {
  font-size: 10px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.48);
  margin-top: 10px;
}

.remnant-mc-detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 255, 255, 0.1);
}

.remnant-mc-detail-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.remnant-mc-detail-stat-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.38);
}

.remnant-mc-detail-stat-value {
  font-size: 13px;
  font-weight: 700;
}

.remnant-mc-detail-stat-value--cyan {
  color: #19e3e3;
}

#page-community #game-minecraft .server-list-wrap {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding-right: 4px;
}

.server-info-body {
  padding: 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border); border-top: none;
  border-radius: 0 0 12px 12px;
}

.server-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 14px; }

.server-rules { margin-bottom: 14px; }
.server-rule { font-size: 11px; color: var(--text-dim); padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; gap: 6px; }
.server-rule::before { content: '?'; color: var(--cyan); }

.server-player-list { }
.server-player-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 12px;
}

.mini-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.mini-avatar--img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}
.server-player-item .server-player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ???????????????????????????????????????????????
   FORUM PAGE
??????????????????????????????????????????????? */
.forum-layout { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }

.forum-categories { }

.forum-category {
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
  margin-bottom: 2px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--text-dim);
}

.forum-category:hover { background: var(--glass-hover); color: var(--text); }
.forum-category.active { background: var(--glass-active); color: var(--cyan); }
.forum-cat-icon { font-size: 14px; }

.forum-sub {
  padding: 6px 12px 6px 34px;
  border-radius: 8px;
  cursor: pointer; transition: var(--transition-fast);
  font-size: 12px; color: var(--text-faint);
  margin-bottom: 1px;
}
.forum-sub:hover { background: var(--glass-hover); color: var(--text); }
.forum-sub.active { color: var(--cyan); }

.forum-post {
  padding: 14px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
  margin-bottom: 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.forum-post:hover {
  border-color: rgba(0,229,255,0.2);
  background: var(--glass-hover);
}

.forum-post.pinned { border-color: rgba(255,149,0,0.3); }
.pinned-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--orange); }

.post-title { font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.post-meta { font-size: 11px; color: var(--text-faint); display: flex; gap: 12px; }

.post-meta span { display: flex; align-items: center; gap: 4px; }

.post-stats { text-align: right; }
.post-replies { font-size: 18px; font-weight: 700; font-family: 'Syne', sans-serif; }
.post-replies-label { font-size: 10px; color: var(--text-faint); }

.new-topic-area {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}

.forum-post--thread {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: default;
}
.forum-post--thread[data-forum-topic-toggle] {
  cursor: pointer;
}
.forum-post--thread[data-forum-topic-toggle] .forum-post-head {
  cursor: pointer;
}
.forum-post--thread .forum-post-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 16px;
  align-items: start;
  cursor: pointer;
}
.forum-post--thread .forum-post-main {
  min-width: 0;
}
.forum-post--thread .forum-post-main .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 6px;
}
.forum-post--thread .forum-post-main .post-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: -0.01em;
}
.forum-post-excerpt {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.88);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}
body.remnant-theme-light .forum-post-excerpt {
  color: rgba(30, 41, 59, 0.82);
}
.forum-post--thread .post-stats {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  text-align: right;
  align-self: start;
  padding-top: 2px;
}
.forum-post-status-cell {
  flex: 0 0 auto;
  max-width: min(200px, 42vw);
}
.forum-workflow-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: normal;
  text-align: center;
}
.forum-workflow-badge--new {
  background: rgba(34, 197, 94, 0.35);
  color: #bbf7d0;
  border: 1px solid rgba(74, 222, 128, 0.55);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.22);
}
.forum-workflow-badge--review {
  background: rgba(154, 52, 18, 0.42);
  color: #ffdcc8;
  border: 1px solid rgba(194, 65, 12, 0.5);
}
.forum-workflow-badge--development {
  background: rgba(234, 88, 12, 0.38);
  color: #ffedd5;
  border: 1px solid rgba(251, 146, 60, 0.48);
}
.forum-workflow-badge--done {
  background: rgba(22, 163, 74, 0.38);
  color: #dcfce7;
  border: 1px solid rgba(74, 222, 128, 0.42);
}
.forum-workflow-badge--rejected {
  background: rgba(185, 28, 28, 0.45);
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.55);
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.28);
}
.forum-workflow-select {
  font-size: 10px !important;
  font-weight: 600;
  padding: 5px 8px !important;
  min-height: 30px;
  border-radius: 10px;
  max-width: 100%;
  cursor: pointer;
}
body.remnant-theme-light .forum-workflow-badge--new {
  color: #14532d;
  background: rgba(74, 222, 128, 0.45);
}
body.remnant-theme-light .forum-workflow-badge--review {
  color: #431407;
  background: rgba(251, 146, 60, 0.4);
}
body.remnant-theme-light .forum-workflow-badge--development {
  color: #431407;
  background: rgba(253, 186, 116, 0.5);
}
body.remnant-theme-light .forum-workflow-badge--done {
  color: #14532d;
  background: rgba(134, 239, 172, 0.55);
}
body.remnant-theme-light .forum-workflow-badge--rejected {
  color: #450a0a;
  background: rgba(248, 113, 113, 0.42);
  border: 1px solid rgba(185, 28, 28, 0.45);
}
.forum-post--thread .post-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.forum-compose-hint {
  margin: 0;
  font-size: 12px;
}
.forum-author-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.forum-author-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.12);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.forum-author-avatar--img {
  background-size: cover;
  background-position: center;
  color: transparent;
}
.forum-author-name {
  font-weight: 600;
  color: var(--text);
}
.forum-post-time {
  color: var(--text-faint);
  font-size: 11px;
}
.forum-post--pending {
  border-color: rgba(255, 149, 0, 0.35);
}
.forum-pending-badge {
  color: var(--orange);
  margin-bottom: 6px;
}
.forum-mod-actions {
  padding: 0 16px 10px;
}
.forum-thread-panel {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  margin-top: 4px;
  padding: 12px 16px 14px;
  cursor: default;
}
.forum-thread-panel[hidden] {
  display: none !important;
}
.forum-post--open .forum-thread-panel {
  display: block;
}
.forum-thread-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.forum-thread-body {
  font-size: 14px;
  font-weight: 400;
  color: rgba(241, 245, 249, 0.94);
  line-height: 1.55;
  margin: 0 0 12px;
  white-space: pre-wrap;
}
body.remnant-theme-light .forum-thread-body {
  color: rgba(15, 23, 42, 0.9);
}
.forum-thread-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  max-height: 320px;
  overflow-y: auto;
}
.forum-comment {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.1);
}
.forum-comment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.forum-comment-body {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  white-space: pre-wrap;
}
.forum-comment-actions,
.forum-mod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 8px;
}
.forum-mod-actions {
  margin-top: 0;
  padding-bottom: 4px;
}
.forum-action-btn {
  font-size: 11px;
  padding: 4px 10px;
  min-height: 28px;
}
.forum-action-btn--icon {
  padding: 0;
  width: 34px;
  min-width: 34px;
  height: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.forum-action-ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.92;
}
.forum-action-btn--icon:hover .forum-action-ico {
  opacity: 1;
}
.forum-comment-body-slot {
  margin-top: 2px;
}
.forum-comment-edit-panel {
  margin-top: 8px;
}
.forum-comment-edit-panel[hidden] {
  display: none !important;
}
.forum-comment-edit-textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  font-size: 12.5px;
  line-height: 1.45;
  margin-bottom: 8px;
}
.forum-comment-edit-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.forum-comment-actions[hidden] {
  display: none !important;
}
.forum-comment--editing {
  border-color: rgba(0, 229, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.08);
}
.forum-action-btn[data-forum-delete-topic],
.forum-action-btn[data-forum-delete-comment] {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
}
.forum-action-btn[data-forum-report-topic],
.forum-action-btn[data-forum-report-comment] {
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.35);
}
.forum-thread-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forum-thread-compose .forum-comment-input {
  min-height: 56px;
}
.forum-thread-compose-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.forum-topic-body-compose {
  position: relative;
}
.forum-topic-body-compose .chat-emoji-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
}
.remnant-emoji-grid--recent {
  grid-template-columns: repeat(8, 1fr);
}
.forum-post--thread .remnant-admin-news-foot {
  padding: 4px 16px 8px;
  margin: 0;
}

#page-forum .forum-layout > .glass-card {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.58), rgba(8, 12, 22, 0.52));
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#page-forum .forum-post.glass-card {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.56), rgba(8, 12, 22, 0.5));
  border: 1px solid rgba(148, 163, 184, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#page-forum .forum-post:hover {
  background: linear-gradient(155deg, rgba(22, 28, 44, 0.68), rgba(12, 16, 28, 0.62));
  border-color: rgba(0, 229, 255, 0.22);
}

/* ???????????????????????????????????????????????
   UPDATES PAGE
??????????????????????????????????????????????? */
.update-item {
  padding: 20px;
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  position: relative;
}

.update-version {
  font-family: 'Syne', sans-serif;
  font-size: 18px; font-weight: 800;
  margin-bottom: 4px;
}

.update-date { font-size: 12px; color: var(--text-faint); margin-bottom: 12px; }

.update-badge {
  position: absolute; top: 16px; right: 16px;
  font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 1px;
}

.update-badge.major { background: rgba(0,229,255,0.15); color: var(--cyan); border: 1px solid rgba(0,229,255,0.3); }
.update-badge.minor { background: rgba(168,85,247,0.15); color: var(--purple); border: 1px solid rgba(168,85,247,0.3); }
.update-badge.patch { background: rgba(255,255,255,0.05); color: var(--text-faint); border: 1px solid var(--glass-border); }

.update-changes { list-style: none; }
.update-change {
  font-size: 13px; color: var(--text-dim);
  padding: 4px 0;
  display: flex; align-items: flex-start; gap: 8px;
}

.change-dot {
  width: 6px; height: 6px;
  border-radius: 50%; flex-shrink: 0; margin-top: 6px;
}
.change-dot.add { background: var(--green); }
.change-dot.fix { background: var(--orange); }
.change-dot.remove { background: var(--red); }
.change-dot.update { background: var(--blue); }

/* ???????????????????????????????????????????????
   NOTIFICATIONS PAGE
??????????????????????????????????????????????? */
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  transition: var(--transition-fast);
  margin-bottom: 4px;
  cursor: pointer;
  position: relative;
}

.notif-item:hover { background: var(--glass-hover); }
.notif-item.unread { background: rgba(0,229,255,0.03); }
.notif-unread-dot {
  position: absolute; top: 16px; right: 16px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

.notif-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.notif-content { flex: 1; }
.notif-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.notif-desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

/* ???????????????????????????????????????????????
   SETTINGS PAGE
??????????????????????????????????????????????? */
.settings-grid { display: grid; grid-template-columns: 200px 1fr; gap: 14px; }

.settings-nav-item {
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer; font-size: 13px; font-weight: 500;
  color: rgba(232,234,246,0.92); transition: var(--transition-fast);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
  text-shadow: 0 0 0 transparent;
}
.settings-nav-item:hover { background: var(--glass-hover); color: var(--text); }
.settings-nav-item.active { background: var(--glass-active); color: var(--cyan); }

.settings-section { margin-bottom: 24px; }

.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.setting-row:last-child { border-bottom: none; }

.setting-info { }
.setting-label { font-size: 13px; font-weight: 600; color: var(--text); }
.setting-desc { font-size: 11px; color: rgba(232,234,246,0.78); margin-top: 2px; }

/* Toggle */
.toggle {
  width: 42px; height: 24px;
  background: rgba(255,255,255,0.1);
  border-radius: 24px;
  cursor: pointer;
  position: relative;
  transition: var(--transition-fast);
  flex-shrink: 0;
}
.toggle.on { background: var(--cyan); box-shadow: 0 0 10px rgba(0,229,255,0.3); }
.toggle::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  top: 3px; left: 3px;
  transition: var(--transition-fast);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.toggle.on::after { left: calc(100% - 21px); }

/* Select dropdown */
.glass-select {
  background-color: rgba(255,255,255,0.03);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239aa3c0' d='M3 4.25 6 7.75 9 4.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px 34px 10px 12px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.glass-select:focus {
  border-color: rgba(0,229,255,0.4);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.06);
}

/* Input field */
.glass-input {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 8px; padding: 8px 12px;
  color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px;
  outline: none; transition: var(--transition-fast); width: 100%;
}
.glass-input:focus { border-color: rgba(0,229,255,0.4); box-shadow: 0 0 0 3px rgba(0,229,255,0.06); }
.glass-input[readonly] { opacity: 0.95; color: rgba(232,234,246,0.86); }

.settings-accent-palette { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.settings-accent-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.settings-accent-btn:hover { transform: translateY(-1px); }
.settings-accent-btn.active { border-color: rgba(255,255,255,0.85); box-shadow: 0 0 0 2px rgba(0,0,0,0.18); }

.settings-range-wrap { width: min(280px, 55vw); }
.settings-range {
  width: 100%;
  accent-color: var(--cyan);
}
.settings-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-top: 16px;
}
.settings-actions--account {
  margin-top: 8px;
  align-items: flex-start;
}
.settings-actions-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-inline-msg {
  display: block;
  min-height: 1.35em;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
  color: transparent;
}
.settings-actions--account .settings-inline-msg {
  text-align: left;
}
.settings-inline-msg--ok {
  color: var(--status-ok);
}
.settings-inline-msg--err {
  color: var(--status-err);
}

/* ???????????????????????????????????????????????
   MODALS
??????????????????????????????????????????????? */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; z-index: 100100; }
#remnant-shop-item-preview-modal {
  z-index: 260100;
}
#remnant-ui-dialog-modal {
  z-index: 260300;
}
/* Friss?t?s panel a t?lt?k?perny? (260000) f?l?tt */
#remnant-update-optional-modal {
  z-index: 270000;
}

.modal {
  background: rgba(15,15,24,0.95);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 28px;
  width: 460px;
  max-width: 90vw;
  animation: modalIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-title { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.modal-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 22px; }
.modal-close { position: absolute; top: 16px; right: 16px; background: var(--glass); border: 1px solid var(--glass-border); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-dim); transition: var(--transition-fast); }
.modal-close:hover { background: var(--glass-hover); color: var(--text); }

.modal-actions { display: flex; gap: 8px; margin-top: 20px; justify-content: flex-end; }

.form-group { margin-bottom: 14px; }
.form-label { font-size: 12px; font-weight: 700; color: rgba(232,234,246,0.92); margin-bottom: 6px; display: block; }

body.remnant-theme-light {
  color-scheme: light;
  --bg: #f2f5fb;
  --bg2: #f8faff;
  --glass: rgba(255,255,255,0.92);
  --glass-border: rgba(22, 31, 52, 0.12);
  --glass-hover: rgba(37, 99, 235, 0.08);
  --glass-active: rgba(37, 99, 235, 0.13);
  --text: #111827;
  --text-dim: rgba(17, 24, 39, 0.72);
  --text-faint: rgba(17, 24, 39, 0.5);
}
body.remnant-theme-light #sidebar {
  background-color: rgba(255, 255, 255, 0.88);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 250, 255, 0.92) 100%),
    url("sidebarbackground.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
body.remnant-theme-light #page-container:has(#page-dashboard.active),
body.remnant-theme-light #page-container:has(#page-leaderboard.active),
body.remnant-theme-light #page-container:has(#page-crates.active),
body.remnant-theme-light #page-container:has(#page-community.active),
body.remnant-theme-light #page-container:has(#page-friends.active),
body.remnant-theme-light #page-container:has(#page-forum.active),
body.remnant-theme-light #page-container:has(#page-tickets-reports.active),
body.remnant-theme-light #page-container:has(#page-updates.active) {
  background-color: rgba(248, 250, 255, 0.86);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(245, 248, 255, 0.93) 100%),
    url("launcherbackground.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
body.remnant-theme-light #topbar { background: rgba(255,255,255,0.95); }
body.remnant-theme-light .glass-card { background: rgba(245, 248, 255, 0.88); }
body.remnant-theme-light .sidebar-link-status { background: rgba(240, 244, 252, 0.9); }

body.remnant-theme-light #page-leaderboard .remnant-lb-card.glass-card,
body.remnant-theme-light #page-leaderboard .remnant-lb-you.glass-card {
  background: linear-gradient(155deg, rgba(248, 250, 255, 0.97), rgba(236, 242, 255, 0.95));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-crates .glass-card.jutalmak-coupons-panel,
body.remnant-theme-light #page-crates .glass-card.jutalmak-won-grid-panel,
body.remnant-theme-light #page-crates .glass-card.jutalmak-side-panel,
body.remnant-theme-light #page-crates .glass-card.jutalmak-action-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 255, 0.92));
  border-color: rgba(22, 31, 52, 0.1);
}
body.remnant-theme-light .jutalmak-reel-panel {
  background: linear-gradient(165deg, rgba(248, 250, 255, 0.94), rgba(236, 242, 255, 0.9));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-community #community-home .featured-server-card,
body.remnant-theme-light #page-community #community-home .server-card {
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.97), rgba(236, 242, 255, 0.95));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-community #community-home .community-link {
  background: linear-gradient(155deg, rgba(248, 250, 255, 0.97), rgba(236, 242, 255, 0.94)) !important;
  border-color: rgba(22, 31, 52, 0.12) !important;
}
body.remnant-theme-light #page-community #community-home .server-summary {
  background: rgba(248, 250, 255, 0.92);
  border-color: rgba(22, 31, 52, 0.1);
}
body.remnant-theme-light #page-community #community-home .game-card-body {
  background: linear-gradient(155deg, rgba(248, 250, 255, 0.97), rgba(236, 242, 255, 0.94));
  border-color: rgba(22, 31, 52, 0.12);
  border-top: none;
}
body.remnant-theme-light #page-community .game-subpage .server-row,
body.remnant-theme-light #page-community .game-subpage .server-row.glass-card {
  background: linear-gradient(155deg, rgba(248, 250, 255, 0.97), rgba(236, 242, 255, 0.94));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-community .game-subpage .server-row:hover {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(241, 248, 255, 0.96));
  border-color: rgba(14, 165, 233, 0.28);
}
body.remnant-theme-light #page-community .game-subpage .server-row.selected {
  background: linear-gradient(155deg, rgba(224, 242, 254, 0.98), rgba(219, 234, 254, 0.95));
  border-color: rgba(37, 99, 235, 0.4);
}
body.remnant-theme-light #page-community .game-subpage .glass-card.server-detail,
body.remnant-theme-light #page-community .game-subpage .server-info-body {
  background: linear-gradient(155deg, rgba(248, 250, 255, 0.97), rgba(236, 242, 255, 0.94));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-community .game-subpage .game-tabs {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 255, 0.92));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-community .game-subpage .game-tab.active {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 255, 0.95));
  border-color: rgba(22, 31, 52, 0.1);
}
body.remnant-theme-light #page-community .game-subpage .glass-input,
body.remnant-theme-light #page-community .game-subpage .glass-select {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.94));
  border-color: rgba(22, 31, 52, 0.14);
}
body.remnant-theme-light #page-community .game-subpage .remnant-admin-news-card {
  background: linear-gradient(155deg, rgba(248, 250, 255, 0.97), rgba(236, 242, 255, 0.94));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-community .game-subpage .forum-post.glass-card {
  background: linear-gradient(155deg, rgba(248, 250, 255, 0.97), rgba(236, 242, 255, 0.94));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-community .game-subpage .forum-post:hover {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(241, 248, 255, 0.96));
  border-color: rgba(14, 165, 233, 0.28);
}
body.remnant-theme-light #page-community #hy-overview .glass-card {
  background: linear-gradient(155deg, rgba(248, 250, 255, 0.97), rgba(236, 242, 255, 0.94));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-friends .remnant-friends-main-card.glass-card,
body.remnant-theme-light #page-friends .remnant-friends-main-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.remnant-theme-light #page-friends .remnant-friend-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-friends .remnant-friend-card:hover {
  background: linear-gradient(180deg, #ffffff, rgba(243, 248, 255, 1));
  border-color: rgba(37, 99, 235, 0.35);
}
body.remnant-theme-light #page-friends .remnant-friend-card.selected {
  background: linear-gradient(180deg, rgba(224, 242, 254, 0.98), rgba(219, 234, 254, 0.95));
  border-color: rgba(37, 99, 235, 0.45);
}
body.remnant-theme-light #page-friends .remnant-friend-card--offline {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.94));
  border-color: rgba(148, 163, 184, 0.35);
}
body.remnant-theme-light #page-friends .remnant-friend-card--offline:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  border-color: rgba(100, 116, 139, 0.45);
}
body.remnant-theme-light #page-friends .friends-chat-panel .msg.received .msg-bubble,
body.remnant-theme-light #page-friends .friends-chat-panel .typing-indicator {
  background: linear-gradient(155deg, rgba(248, 250, 255, 0.97), rgba(236, 242, 255, 0.94));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-friends .friends-chat-panel .msg.sent .msg-bubble {
  background: linear-gradient(135deg, rgba(186, 230, 253, 0.95), rgba(199, 210, 254, 0.95));
  border-color: rgba(14, 165, 233, 0.4);
}
body.remnant-theme-light #page-friends .remnant-friends-add-input {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(22, 31, 52, 0.12);
  color: #0f172a;
}
body.remnant-theme-light #page-friends .remnant-friends-result-slot,
body.remnant-theme-light #page-friends .remnant-friends-pending-slot {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-friends .remnant-friends-result-name,
body.remnant-theme-light #page-friends .remnant-friends-pending-name {
  color: #0f172a;
}
body.remnant-theme-light #page-friends .remnant-friends-add-more-btn {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(22, 31, 52, 0.14);
  color: #0f172a;
}
body.remnant-theme-light #page-friends .remnant-friends-add-more-btn:hover {
  border-color: rgba(14, 165, 233, 0.38);
  background: rgba(240, 249, 255, 0.98);
}
body.remnant-theme-light #page-forum .forum-layout > .glass-card,
body.remnant-theme-light #page-forum .forum-post.glass-card {
  background: linear-gradient(155deg, rgba(248, 250, 255, 0.62), rgba(236, 242, 255, 0.56));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-forum .forum-post:hover {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.74), rgba(241, 248, 255, 0.68));
  border-color: rgba(14, 165, 233, 0.28);
}

body.remnant-theme-light #page-tickets-reports [data-remnant-ticket-panel="tickets"].remnant-ticket-panel,
body.remnant-theme-light #page-tickets-reports [data-remnant-ticket-panel="reports"].remnant-ticket-panel {
  background:
    linear-gradient(180deg, rgba(248, 250, 255, 0.55) 0%, rgba(236, 242, 255, 0.58) 100%),
    radial-gradient(circle at 12% 0%, rgba(99, 102, 241, 0.08), transparent 48%),
    rgba(255, 255, 255, 0.42);
  border-color: rgba(22, 31, 52, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.remnant-theme-light #page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-listpane,
body.remnant-theme-light #page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-main {
  background: linear-gradient(155deg, rgba(248, 250, 255, 0.62), rgba(236, 242, 255, 0.56));
  border-color: rgba(22, 31, 52, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.remnant-theme-light #page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-slot {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.68), rgba(245, 248, 255, 0.62));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-chat-feed {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(248, 250, 255, 0.52));
}
body.remnant-theme-light #page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-composer.remnant-admin-tickets-composer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(248, 250, 255, 0.58));
}
body.remnant-theme-light #page-updates #game-updates .remnant-admin-news-card {
  background: linear-gradient(155deg, rgba(248, 250, 255, 0.97), rgba(236, 242, 255, 0.94));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-updates #remnant-updates-game-inner > .game-tabs {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 248, 255, 0.92));
  border-color: rgba(22, 31, 52, 0.12);
}
body.remnant-theme-light #page-updates #remnant-updates-game-inner > .game-tabs .game-tab.active {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 255, 0.95));
  border-color: rgba(22, 31, 52, 0.1);
}

/* ???????????????????????????????????????????????
   UTILITY
??????????????????????????????????????????????? */
.divider { height: 1px; background: var(--glass-border); margin: 20px 0; }

.tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text-dim);
}

.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.justify-between { justify-content: space-between; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.p-20 { padding: 20px; }
.text-dim { color: var(--text-dim); }
.text-faint { color: var(--text-faint); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.font-bold { font-weight: 700; }
.font-syne { font-family: 'Syne', sans-serif; }

/* Glow text effects */
.glow-cyan { color: var(--cyan); text-shadow: 0 0 20px rgba(0,229,255,0.4); }
.glow-purple { color: var(--purple); text-shadow: 0 0 20px rgba(168,85,247,0.4); }

/* Scrollable containers */
.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--glass-border) transparent; }
.scroll-y::-webkit-scrollbar { width: 3px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }

/* Responsive */
@media (max-width: 1100px) {
  :root { --sidebar-w: 56px; }
  :root { --profile-pane-h: min(78vh, 700px); }
  .sidebar-logo, .sidebar-user-info, .sidebar-rynexcoin, .nav-item span:not(.nav-icon), .nav-badge, .nav-section-label { display: none; }
  .nav-item { justify-content: center; padding: 10px; }
  .sidebar-user { justify-content: center; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .game-cards { grid-template-columns: 1fr; }
  .server-browser-layout { grid-template-columns: 1fr; }
  .friends-layout.remnant-friends-layout,
  .remnant-friends-layout.friends-layout {
    grid-template-columns: 1fr;
  }
  .dashboard-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-steam-shell { grid-template-columns: minmax(0, 1fr); }
  .profile-media-rail { display: none; }
  .profile-steam-layout { grid-template-columns: minmax(0, 1fr) 270px; }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-shell-core {
    border-left: none;
    border-right: none;
    padding: 0;
  }
  .profile-edit-showcase-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1500px) {
  .profile-steam-shell { grid-template-columns: minmax(0, 1fr); }
  .profile-media-rail { display: none; }
}
@media (max-width: 760px) {
  .dashboard-game-grid { grid-template-columns: 1fr; }
  .profile-steam-layout { grid-template-columns: 1fr; }
}

/* Pulse animation for online dots */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse { animation: pulse 2s ease infinite; }

/* Startup loading overlay ? minimal layout */
#remnant-startup-loading {
  position: fixed;
  inset: 0;
  z-index: 260000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: #05060a;
  opacity: 1;
  transition: opacity 180ms ease;
}
#remnant-startup-loading.remnant-loading-hidden { display: none !important; }
#remnant-startup-loading.remnant-loading-fadeout {
  opacity: 0;
  pointer-events: none;
}
#remnant-startup-loading video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}
#remnant-startup-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(5,7,13,0.18) 0%, rgba(5,7,13,0.62) 72%, rgba(5,7,13,0.84) 100%);
  pointer-events: none;
}
.remnant-startup-card {
  position: relative;
  z-index: 2;
  width: min(980px, 92vw);
  margin-bottom: 44px;
  padding: 0 14px;
}
.remnant-startup-caption {
  margin: 0 0 10px;
  text-align: center;
  color: rgba(226, 234, 255, 0.88);
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.remnant-startup-progress-wrap {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.23);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.remnant-startup-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00dcff 0%, #5f8dff 52%, #a855f7 100%);
  box-shadow: 0 0 18px rgba(0, 220, 255, 0.45);
  transition: width 140ms linear;
}
.remnant-startup-progress-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.36) 46%, transparent 66%);
  transform: translateX(-120%);
  animation: remnantStartupShine 1.6s linear infinite;
  pointer-events: none;
}
@keyframes remnantStartupShine {
  to { transform: translateX(120%); }
}
#remnant-startup-enter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 200px;
  min-height: 46px;
  display: none;
  z-index: 3;
}
#remnant-startup-enter.remnant-show {
  display: inline-flex;
}
.remnant-startup-loading-done .remnant-startup-caption,
.remnant-startup-loading-done .remnant-startup-progress-wrap {
  display: none;
}

/* Tray teljes kil?p?s ? shutdown overlay (main window) */
#remnant-shutdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 265000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
#remnant-shutdown-overlay[hidden] {
  display: none !important;
}
body.remnant-shutdown-active {
  overflow: hidden !important;
}
.remnant-shutdown-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 7, 14, 0.72);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.remnant-shutdown-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 88vw);
  padding: 36px 32px 32px;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(0, 220, 255, 0.28);
  background: linear-gradient(165deg, rgba(12, 18, 32, 0.94) 0%, rgba(6, 10, 20, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(0, 200, 255, 0.12);
}
.remnant-shutdown-logo {
  font-family: "Orbitron", "Syne", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #e8f8ff;
  text-shadow: 0 0 24px rgba(0, 220, 255, 0.45);
  margin-bottom: 22px;
}
.remnant-shutdown-spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 2px solid rgba(0, 220, 255, 0.22);
  border-top-color: #00dcff;
  box-shadow: 0 0 22px rgba(0, 220, 255, 0.35);
  animation:
    remnantShutdownSpin 0.85s linear infinite,
    remnantShutdownGlow 1.6s ease-in-out infinite;
}
@keyframes remnantShutdownSpin {
  to { transform: rotate(360deg); }
}
@keyframes remnantShutdownGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(0, 220, 255, 0.28); }
  50% { box-shadow: 0 0 32px rgba(0, 220, 255, 0.55); }
}
.remnant-shutdown-title {
  margin: 0 0 8px;
  font-family: "Syne", "DM Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(232, 244, 255, 0.96);
  letter-spacing: 0.02em;
}
.remnant-shutdown-sub {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(160, 200, 230, 0.82);
  letter-spacing: 0.01em;
}

/* Remnant auth gate (t?lt? / bel?p?s / Steam?Discord ?sszek?t?s) ? h?tt?r ?les (k?s?bb loop MP4), nincs teljes k?perny?s sz?rk?t?s / blur */
#remnant-auth-gate {
  position: fixed; inset: 0; z-index: 200000;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif;
  background-color: #07070c;
}
#remnant-auth-gate .remnant-auth-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(1.08) contrast(1.04);
}
#remnant-auth-gate.remnant-auth-lite {
  background-image: none;
  background-color: rgba(7, 7, 12, 0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#remnant-auth-gate .remnant-auth-inner {
  position: relative;
  z-index: 1;
}
/* Keret n?lk?li ablak: a teljes k?perny?s auth alatt is lehessen mozgatni (WebView2 ? postMessage drag) */
.remnant-auth-drag-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44px;
  z-index: 2;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.remnant-auth-drag-strip:active { cursor: grabbing; }
/* Jobb fels? sarok: t?lc?z?s / bez?r?s (ugyanaz a host postMessage mint a f? topbar) */
.remnant-auth-window-controls {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.remnant-auth-window-controls .topbar-btn {
  color: rgba(232, 234, 246, 0.72);
}
#remnant-auth-gate.remnant-auth-hidden { display: none !important; }

.remnant-pupak-launch-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}
.remnant-pupak-guild-gate {
  max-width: 420px;
  padding: 14px 16px;
  text-align: left;
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(12, 14, 24, 0.92);
}
.remnant-pupak-guild-gate[hidden] {
  display: none !important;
}
.remnant-pupak-guild-gate-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #fbbf24;
  margin-bottom: 8px;
}
.remnant-pupak-guild-gate-text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 0 0 12px;
}
.remnant-pupak-guild-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.remnant-pupak-guild-gate-status {
  font-size: 11px;
  color: var(--text-faint);
  margin: 10px 0 0;
  line-height: 1.4;
}
.remnant-pupak-guild-gate-status[hidden] {
  display: none !important;
}
#remnant-pupak-launch-btn[hidden] {
  display: none !important;
}

body.remnant-auth-pending #app {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.remnant-auth-inner {
  max-width: 420px; padding: 28px; text-align: center;
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  /* Csak a panel m?g? s?r? ?veg ? a teljes h?tt?r nem blur, hogy vide? / k?p ?les maradjon */
  background: rgba(10, 10, 18, 0.94);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}
#remnant-auth-title { font-size: 1.1rem; margin-bottom: 8px; color: var(--text); }
#remnant-auth-status { font-size: 0.9rem; color: var(--text-dim); min-height: 1.4em; }
#remnant-auth-status.remnant-auth-status--soft {
  color: rgba(248, 113, 113, 0.72);
  font-weight: 500;
}
#remnant-auth-status.remnant-auth-status--strong {
  color: #f87171;
  font-weight: 600;
}
#remnant-auth-status.remnant-auth-status--ok {
  color: #4ade80;
  font-weight: 500;
}
.remnant-connection-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  z-index: 40;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-connection-banner:not([hidden]) {
  display: flex;
}
.remnant-connection-banner--connecting,
.remnant-connection-banner--reconnecting {
  color: #fbbf24;
  background: rgba(120, 53, 15, 0.42);
}
.remnant-connection-banner--offline {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.48);
}
.remnant-connection-banner--restored {
  color: #bbf7d0;
  background: rgba(20, 83, 45, 0.45);
}
body.remnant-connection-degraded [data-remnant-profile-save-card],
body.remnant-connection-degraded #remnant-profile-edit-showcases-save,
body.remnant-connection-degraded #remnant-profile-edit-save {
  opacity: 0.55;
}
#remnant-auth-buttons { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
#remnant-auth-buttons.remnant-auth-show { display: flex !important; }
#remnant-auth-buttons .remnant-auth-back-line { flex: 1 1 100%; display: flex; justify-content: center; margin-top: 2px; }
#remnant-auth-tag { display: none; margin-top: 18px; text-align: left; }
#remnant-auth-tag label { font-size: 0.85rem; color: var(--text-dim); }
#remnant-tag-input {
  margin-top: 6px; width: 140px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--glass-border); background: var(--bg2); color: var(--text);
}
#remnant-tag-error { font-size: 0.85rem; margin-top: 8px; }

#remnant-auth-login-panel { margin-top: 12px; }
.remnant-auth-label { display: block; font-size: 0.8rem; color: var(--text-dim); margin-top: 10px; margin-bottom: 4px; }
.remnant-auth-input {
  width: 100%; max-width: 280px; box-sizing: border-box;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--glass-border); background: var(--bg2); color: var(--text);
  font-size: 0.95rem;
}
/* Jelsz? mez? + saj?t megjelen?t?s gomb (a nat?v WebView gomb gyakran halv?ny) */
.remnant-auth-pass-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
.remnant-auth-pass-wrap .remnant-auth-pass-input {
  display: block;
  width: 100%;
  max-width: none;
  padding-right: 46px;
}
.remnant-auth-pass-toggle {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 22, 34, 0.95);
  color: var(--cyan, #5eead4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.remnant-auth-pass-toggle:hover {
  background: rgba(40, 44, 64, 0.98);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.remnant-auth-pass-toggle:focus-visible {
  outline: 2px solid var(--cyan, #5eead4);
  outline-offset: 2px;
}
.remnant-auth-pass-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.remnant-auth-pass-icon-hide {
  display: none;
}
/* Edge / IE jelsz? ?szem? elrejt?se ? a saj?t gombot haszn?ljuk */
.remnant-auth-pass-input::-ms-reveal {
  display: none;
}
#remnant-auth-remember-wrap { display: flex; margin-top: 12px; }
#remnant-auth-remember-wrap.remnant-auth-hidden { display: none !important; }
#remnant-auth-legal-wrap { display: flex; margin-top: 12px; margin-bottom: 2px; }
#remnant-auth-legal-wrap.remnant-auth-hidden { display: none !important; }
#remnant-auth-tag-register-wrap { display: none; margin-top: 10px; }
.remnant-auth-remember { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-dim); cursor: pointer; }
.remnant-auth-legal {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-dim);
  cursor: pointer;
}
.remnant-auth-legal__text { flex: 1; min-width: 0; }
.remnant-auth-legal__link {
  color: #4d8fff;
  text-decoration: none;
  cursor: pointer;
}
.remnant-auth-legal__link:hover,
.remnant-auth-legal__link:focus-visible {
  color: #7eb0ff;
  text-decoration: underline;
}
.remnant-auth-remember input,
.remnant-auth-legal input { cursor: pointer; }
.remnant-auth-remember input[type="checkbox"],
.remnant-auth-legal input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.remnant-auth-legal input[type="checkbox"] { margin-top: 2px; }
.remnant-auth-remember input[type="checkbox"]:hover,
.remnant-auth-legal input[type="checkbox"]:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}
.remnant-auth-remember input[type="checkbox"]:focus-visible,
.remnant-auth-legal input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.45);
  outline-offset: 2px;
}
.remnant-auth-remember input[type="checkbox"]:checked,
.remnant-auth-legal input[type="checkbox"]:checked {
  border-color: rgba(0, 229, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 12px rgba(0, 229, 255, 0.2);
  /* fel?l pipa, alatta ci?n gradiens */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23070a0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E"),
    linear-gradient(145deg, rgba(0, 229, 255, 0.42), rgba(77, 143, 255, 0.32));
  background-size: 10px 8px, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
#remnant-auth-login-panel .glass-btn,
#remnant-auth-actions-register .glass-btn {
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
}
#remnant-auth-buttons .glass-btn {
  min-width: 140px;
  flex: 1 1 140px;
}
#remnant-auth-tag .glass-btn {
  margin-top: 8px;
  margin-left: 8px;
}

#remnant-auth-checklist {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 12px;
  line-height: 1.5;
  text-align: center;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.65em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#remnant-auth-register-hints {
  display: none;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0 0 12px 0;
  text-align: left;
  line-height: 1.45;
}
#remnant-auth-register-hints p { margin: 0 0 6px 0; }
.remnant-auth-forgot-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 6px 0 4px;
}
.remnant-auth-forgot-wrap.remnant-auth-hidden { display: none !important; }
.remnant-auth-forgot-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--cyan, #19e3e3);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.9;
}
.remnant-auth-forgot-link:hover,
.remnant-auth-forgot-link:focus-visible {
  opacity: 1;
  outline: none;
}
.remnant-auth-password-reset-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  text-align: left;
}
.remnant-auth-password-reset-wrap.remnant-auth-hidden { display: none !important; }
.remnant-auth-password-reset-intro,
.remnant-auth-password-reset-hint {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-dim);
}
#remnant-auth-password-reset-discord-step,
.remnant-auth-password-reset-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
#remnant-auth-password-reset-discord-step .glass-btn,
.remnant-auth-password-reset-actions .glass-btn {
  width: 100%;
  max-width: 280px;
}
.remnant-auth-password-reset-new-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.remnant-auth-password-reset-new-wrap.remnant-auth-hidden { display: none !important; }
.remnant-auth-discord-register-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(88, 101, 242, 0.28);
  background: rgba(88, 101, 242, 0.08);
  text-align: left;
}
.remnant-auth-discord-register-wrap.remnant-auth-hidden { display: none !important; }
.remnant-auth-discord-register-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.remnant-auth-discord-register-mark {
  flex-shrink: 0;
  width: 1.25em;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dim);
  line-height: 1;
}
.remnant-auth-discord-register-mark.is-pending { color: #fbbf24; }
.remnant-auth-discord-register-mark.is-linked { color: #4ade80; }
.remnant-auth-discord-register-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}
.remnant-auth-discord-register-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}
.remnant-auth-discord-register-optional {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.remnant-auth-discord-register-btn {
  flex-shrink: 0;
  min-width: 0;
  width: auto;
  padding: 5px 10px;
}
.remnant-auth-discord-register-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.remnant-auth-discord-register-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-dim);
}
#remnant-auth-actions-login,
#remnant-auth-actions-register {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#remnant-auth-actions-login { margin-top: 22px; }
#remnant-auth-actions-register { margin-top: 18px; }
.remnant-auth-clear-wrap {
  margin-top: 18px;
  width: 100%;
  max-width: 280px;
}

.remnant-auth-spinner {
  width: 36px; height: 36px; margin: 0 auto 16px;
  border: 3px solid var(--glass-border);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: remnantSpin 0.85s linear infinite;
}
@keyframes remnantSpin { to { transform: rotate(360deg); } }

/* ????????? Admin ? Economy (bolt admin dashboard, UI-only layout) ????????? */
.remnant-admin-economy-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.remnant-admin-economy-root {
  width: 100%;
  max-width: min(1320px, 98vw);
  margin: 0 auto;
}
.remnant-admin-economy-dash {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.remnant-admin-economy-note {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  line-height: 1.45;
}
.remnant-admin-economy-summary {
  margin: 0;
  font-size: 13px;
}
.remnant-admin-economy-dash .icon-glow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 9px;
  background: rgba(168, 85, 247, 0.12);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.22);
  color: #e9d5ff;
}
.remnant-admin-economy-dash .icon-glow svg {
  stroke: currentColor;
}
.remnant-admin-economy-game--total .icon-glow {
  background: rgba(168, 85, 247, 0.18);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.35);
}

.remnant-admin-economy-games {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.remnant-admin-economy-game {
  position: relative;
  cursor: pointer;
  flex: 1 1 140px;
  min-width: min(160px, 100%);
}
.remnant-admin-economy-game input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.remnant-admin-economy-game-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 72px;
  padding: 12px 14px;
  box-sizing: border-box;
  border-radius: 14px;
  background: rgba(10, 14, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.remnant-admin-economy-game:hover .remnant-admin-economy-game-inner {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
.remnant-admin-economy-game input:checked + .remnant-admin-economy-game-inner {
  border-color: rgba(168, 85, 247, 0.65);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.35),
    0 0 36px rgba(168, 85, 247, 0.28),
    0 0 40px rgba(0, 0, 0, 0.35);
}
.remnant-admin-economy-game--webshop .remnant-admin-economy-game-inner {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.55), rgba(59, 130, 246, 0.22));
  border-color: rgba(192, 132, 252, 0.35);
}
.remnant-admin-economy-game--webshop:hover .remnant-admin-economy-game-inner {
  border-color: rgba(216, 180, 254, 0.55);
}
.remnant-admin-economy-game--webshop input:checked + .remnant-admin-economy-game-inner {
  border-color: rgba(233, 213, 255, 0.65);
  box-shadow:
    0 0 0 1px rgba(192, 132, 252, 0.45),
    0 0 42px rgba(139, 92, 246, 0.45),
    0 0 40px rgba(0, 0, 0, 0.35);
}
.remnant-admin-economy-game-ico {
  flex-shrink: 0;
}
.remnant-admin-economy-game-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.remnant-admin-economy-game-title {
  font-weight: 650;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: 0.02em;
}
.remnant-admin-economy-game-domain {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.remnant-admin-economy-game-ext {
  flex-shrink: 0;
  opacity: 0.45;
  width: 16px;
  height: 16px;
  stroke: currentColor;
}
.remnant-admin-economy-game:hover .remnant-admin-economy-game-ext {
  opacity: 0.85;
  color: #c084fc;
}

.remnant-admin-economy-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1180px) {
  .remnant-admin-economy-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .remnant-admin-economy-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.remnant-admin-economy-stat {
  container-type: inline-size;
  container-name: economy-stat;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(10, 14, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, border-color 0.18s ease;
  min-width: 0;
  overflow: hidden;
}
.remnant-admin-economy-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.1);
}
.remnant-admin-economy-stat-ico {
  flex-shrink: 0;
}
.remnant-admin-economy-dash .icon-glow--purple {
  background: rgba(168, 85, 247, 0.15);
  box-shadow: 0 0 26px rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
}
.remnant-admin-economy-dash .icon-glow--green {
  background: rgba(74, 222, 128, 0.12);
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.28);
  color: #86efac;
}
.remnant-admin-economy-dash .icon-glow--red {
  background: rgba(248, 113, 113, 0.12);
  box-shadow: 0 0 22px rgba(248, 113, 113, 0.28);
  color: #fca5a5;
}
.remnant-admin-economy-dash .icon-glow--cyan {
  background: rgba(56, 189, 248, 0.12);
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.28);
  color: #7dd3fc;
}
.remnant-admin-economy-dash .icon-glow--orange {
  background: rgba(251, 146, 60, 0.12);
  box-shadow: 0 0 22px rgba(251, 146, 60, 0.28);
  color: #fdba74;
}
.remnant-admin-economy-stat-body {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.remnant-admin-economy-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 6px;
  overflow-wrap: break-word;
}
.remnant-admin-economy-stat-val {
  /* Nagy ?sszegek: el?sz?r vw tartal?k, majd k?rtya-sz?less?g (cqi), ha t?mogatott */
  font-size: clamp(11px, 2.35vw, 22px);
  font-size: clamp(11px, calc(8cqi + 5px), 22px);
  font-weight: 750;
  font-family: 'Syne', sans-serif;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.remnant-admin-economy-stat-delta {
  margin-top: 8px;
  font-size: clamp(10px, 1.05vw, 12px);
  font-size: clamp(10px, calc(2.8cqi + 4px), 12px);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.remnant-admin-economy-stat-delta--up {
  color: #4ade80;
  text-shadow: 0 0 16px rgba(74, 222, 128, 0.35);
}
.remnant-admin-economy-stat-delta--down {
  color: #f87171;
  text-shadow: 0 0 16px rgba(248, 113, 113, 0.35);
}

.remnant-admin-economy-mid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr 0.88fr;
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .remnant-admin-economy-mid {
    grid-template-columns: 1fr;
  }
}
.remnant-admin-economy-panel {
  border-radius: 16px;
  background: rgba(10, 14, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  padding: 18px 20px;
}
.remnant-admin-economy-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.remnant-admin-economy-panel-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Syne', sans-serif;
  color: rgba(255, 255, 255, 0.94);
}
.remnant-admin-economy-panel--chart .remnant-admin-economy-panel-title {
  margin-bottom: 0;
}
.remnant-admin-economy-panel--chart .remnant-admin-economy-panel-head .remnant-admin-economy-panel-title {
  margin-bottom: 0;
}
.remnant-admin-economy-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}
.remnant-admin-economy-select-lbl {
  display: none;
}
.remnant-admin-economy-select {
  appearance: none;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 10, 18, 0.95);
  color: rgba(255, 255, 255, 0.88);
  padding: 8px 28px 8px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.remnant-admin-economy-linechart {
  margin-top: 8px;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(168, 85, 247, 0.08), transparent);
}
.remnant-admin-economy-linechart-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
}

.remnant-admin-economy-panel--donut .remnant-admin-economy-panel-title {
  margin-bottom: 16px;
}
.remnant-admin-economy-donut-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}
.remnant-admin-economy-donut-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
}
.remnant-admin-economy-donut-svg {
  width: min(220px, 86%);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.3));
}
@media (min-width: 900px) {
  .remnant-admin-economy-donut-svg {
    width: min(260px, 90%);
  }
}
.remnant-admin-economy-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}
.remnant-admin-economy-legend li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 540px) {
  .remnant-admin-economy-legend li {
    grid-template-columns: 14px 1fr auto;
    grid-template-rows: auto auto;
  }
  .remnant-admin-economy-leg-dot {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }
  .remnant-admin-economy-leg-label {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  .remnant-admin-economy-leg-val {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    white-space: normal;
  }
  .remnant-admin-economy-leg-pct {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
  }
}
.remnant-admin-economy-leg-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  min-width: 0;
  overflow-wrap: anywhere;
}
.remnant-admin-economy-leg-val {
  font-size: 14px;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(200, 220, 255, 0.9);
  text-align: right;
  min-width: 0;
  white-space: nowrap;
}
.remnant-admin-economy-leg-pct {
  font-size: 15px;
  font-weight: 700;
  font-family: 'Syne', sans-serif;
  color: rgba(255, 255, 255, 0.95);
  text-align: right;
  min-width: 3.2ch;
}
.remnant-admin-economy-leg-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
  box-shadow: 0 0 12px currentColor;
  align-self: center;
}

.remnant-admin-economy-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.remnant-admin-economy-top-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.remnant-admin-economy-top-ico {
  flex-shrink: 0;
}
.remnant-admin-economy-top-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-admin-economy-top-rp {
  font-size: 13px;
  font-weight: 650;
  color: #4ade80;
  text-shadow: 0 0 14px rgba(74, 222, 128, 0.35);
  flex-shrink: 0;
}
.remnant-admin-economy-top-empty {
  padding: 14px;
  text-align: center;
  font-size: 13px;
}

.remnant-admin-economy-bottom {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 320px);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .remnant-admin-economy-bottom {
    grid-template-columns: 1fr;
  }
}
.remnant-admin-economy-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.remnant-admin-economy-panel--table .remnant-admin-economy-panel-title {
  margin-bottom: 12px;
}
.remnant-admin-economy-tx-scroll {
  max-height: 420px;
  overflow: auto;
  margin: 0 -4px;
  padding: 0 4px;
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.65) rgba(0, 0, 0, 0.28);
}
.remnant-admin-economy-tx-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.remnant-admin-economy-tx-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 10px;
}
.remnant-admin-economy-tx-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(192, 132, 252, 0.85), rgba(91, 33, 182, 0.75));
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.15);
}
.remnant-admin-economy-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.remnant-admin-economy-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 10px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.38);
  background: rgba(10, 14, 24, 0.97);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
.remnant-admin-economy-table tbody td {
  padding: 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
}
.remnant-admin-economy-table tbody tr:last-child td {
  border-bottom: none;
}
.remnant-admin-economy-td-id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.remnant-admin-economy-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.remnant-admin-economy-player-av {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.35), rgba(59, 130, 246, 0.15));
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}
.remnant-admin-economy-player-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.remnant-admin-economy-player-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-admin-economy-player-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-admin-economy-type {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.2);
}
.remnant-admin-economy-type--coupon {
  background: rgba(251, 146, 60, 0.14);
  color: #fdba74;
  border-color: rgba(251, 146, 60, 0.35);
}
.remnant-admin-economy-amt--pos {
  color: #4ade80;
  font-weight: 650;
  white-space: nowrap;
}
.remnant-admin-economy-amt--neg {
  color: #f87171;
  font-weight: 650;
  white-space: nowrap;
}
.remnant-admin-economy-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.remnant-admin-economy-badge--ok {
  background: rgba(74, 222, 128, 0.14);
  color: #86efac;
  border: 1px solid rgba(74, 222, 128, 0.28);
}
.remnant-admin-economy-badge--bad {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.22);
}
.remnant-admin-economy-td-empty {
  text-align: center;
  padding: 28px 16px !important;
  color: rgba(255, 255, 255, 0.45);
}

.remnant-admin-economy-panel--mini .remnant-admin-economy-panel-title {
  margin-bottom: 14px;
}
.remnant-admin-economy-mini-stats {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.remnant-admin-economy-mini-stats li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
}
.remnant-admin-economy-mini-l {
  color: rgba(255, 255, 255, 0.45);
}
.remnant-admin-economy-mini-v {
  font-weight: 650;
  color: rgba(255, 255, 255, 0.92);
}
.remnant-admin-economy-mini-v--accent {
  color: #c084fc;
  text-shadow: 0 0 14px rgba(192, 132, 252, 0.35);
}
.remnant-admin-economy-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.remnant-admin-economy-mini-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}
.remnant-admin-economy-mini-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.remnant-admin-economy-mini-btn--accent {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(59, 130, 246, 0.12));
  border-color: rgba(168, 85, 247, 0.35);
  color: #e9d5ff;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.2);
}
.remnant-admin-economy-mini-btn--accent:hover {
  border-color: rgba(216, 180, 254, 0.55);
  box-shadow: 0 0 32px rgba(124, 58, 237, 0.35);
}
.remnant-admin-economy-mini-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ==========================================
   PROFILE UI REFACTOR (visual-only overrides)
   ========================================== */
#page-profile {
  max-width: min(98vw, 1760px);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).glass-card,
#remnant-profile-edit-pane.glass-card {
  background: linear-gradient(180deg, rgba(7, 10, 19, 0.84), rgba(4, 7, 14, 0.88));
  border: 1px solid rgba(166, 192, 255, 0.18);
  box-shadow: 0 24px 60px rgba(1, 3, 10, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane)::before {
  border-color: rgba(146, 172, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 36px rgba(95, 130, 255, 0.12);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-side::before {
  display: none;
}
.profile-main {
  padding: 16px 24px 24px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-shell-core {
  border-left-color: rgba(162, 192, 255, 0.16);
  border-right-color: rgba(162, 192, 255, 0.16);
  padding: 0 12px 6px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero {
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(172, 197, 255, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(12, 17, 33, 0.84), rgba(9, 13, 27, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 34px rgba(5, 8, 20, 0.5);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar-area {
  margin-top: 0;
  gap: 24px;
  margin-bottom: 14px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar {
  width: 164px;
  height: 164px;
  border-radius: 20px;
  border: 1px solid rgba(158, 186, 255, 0.42);
  box-shadow:
    0 0 0 2px rgba(107, 136, 255, 0.24),
    0 18px 40px rgba(49, 72, 176, 0.42),
    0 0 36px rgba(116, 90, 255, 0.28);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(126, 154, 255, 0.22);
  pointer-events: none;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar .status-dot {
  box-shadow: 0 0 12px rgba(44, 235, 142, 0.72);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-username {
  font-size: clamp(40px, 3vw, 54px);
  line-height: 1.02;
  text-shadow: 0 6px 22px rgba(88, 116, 240, 0.42);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-player-tag {
  color: rgba(217, 226, 255, 0.76);
  letter-spacing: 0.11em;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-rank {
  color: rgba(150, 241, 255, 0.92);
  text-shadow: 0 0 16px rgba(22, 223, 255, 0.34);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-wrap {
  max-width: 420px;
  margin-top: 12px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-bg {
  height: 11px;
  border-radius: 999px;
  border: 1px solid rgba(140, 171, 255, 0.38);
  background: linear-gradient(180deg, rgba(18, 24, 42, 0.9), rgba(11, 17, 32, 0.94));
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.56);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-fill {
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(105, 162, 255, 0.54), 0 0 22px rgba(157, 92, 255, 0.28);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions .glass-btn {
  min-height: 36px;
  border-radius: 10px;
  border-color: rgba(170, 196, 255, 0.34);
  background: linear-gradient(180deg, rgba(21, 28, 49, 0.85), rgba(12, 17, 32, 0.88));
  color: rgba(235, 241, 255, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 16px rgba(97, 133, 255, 0.18);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions .glass-btn:hover {
  border-color: rgba(199, 219, 255, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 24px rgba(117, 154, 255, 0.32);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row {
  gap: 10px;
  margin-top: 4px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat {
  border: 1px solid rgba(160, 188, 255, 0.2);
  border-radius: 12px;
  padding: 12px 10px 10px;
  background: linear-gradient(180deg, rgba(16, 22, 41, 0.82), rgba(9, 14, 29, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat-label {
  color: rgba(214, 224, 252, 0.62);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(158, 189, 255, 0.18);
  background: linear-gradient(180deg, rgba(15, 21, 38, 0.78), rgba(10, 14, 27, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .section-title {
  color: rgba(225, 233, 255, 0.86);
  letter-spacing: 0.08em;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .badge-grid .badge:not(.badge--ach-banner),
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .social-links a:not(.social-link--badge),
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .social-links button:not(.social-link--badge) {
  border-color: rgba(167, 194, 255, 0.3);
  background: linear-gradient(180deg, rgba(39, 50, 79, 0.52), rgba(20, 28, 48, 0.44));
  box-shadow: 0 0 16px rgba(92, 124, 241, 0.16);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .social-links .social-link--badge {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .social-badge-img {
  height: 26px;
  max-width: 140px;
}
/* Profil Social blokk: mindig 2 badge / sor, a blokk sz?less?g?hez igaz?tva */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .remnant-profile-side-block--social .social-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 8px;
  width: 100%;
  align-items: stretch;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .remnant-profile-side-block--social .social-link--badge {
  width: 100%;
  min-width: 0;
  display: block;
  overflow: visible;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .remnant-profile-side-block--social .social-badge-img {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 698 / 135;
  object-fit: contain;
  object-position: center;
  transform: scale(1.04);
  transform-origin: center center;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
}

.profile-showcase-card {
  border: 1px solid rgba(157, 186, 255, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(12, 17, 34, 0.82), rgba(7, 12, 25, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 30px rgba(3, 6, 15, 0.42);
}
.profile-showcase-title,
.profile-side-title {
  color: rgba(219, 228, 255, 0.82);
  letter-spacing: 0.1em;
}
.profile-items-slot,
.profile-items-equipped-slot {
  border-style: solid;
  border-color: rgba(147, 178, 255, 0.34);
  background: linear-gradient(180deg, rgba(32, 42, 70, 0.34), rgba(14, 20, 38, 0.3));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 22px rgba(3, 7, 18, 0.34);
}
.profile-items-slot.has-item,
.profile-items-equipped-slot.has-item {
  border-color: rgba(107, 224, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(168, 198, 255, 0.2), 0 0 18px rgba(95, 157, 255, 0.32);
}
.profile-items-slot:hover {
  border-color: rgba(121, 233, 255, 0.72);
  background-color: rgba(70, 98, 184, 0.2);
  box-shadow: 0 0 22px rgba(106, 168, 255, 0.34);
}
.profile-achv-slot,
.profile-achv-slot--empty {
  border-color: rgba(157, 186, 255, 0.26);
  background: linear-gradient(180deg, rgba(28, 36, 61, 0.42), rgba(13, 20, 37, 0.34));
}
.profile-info-box-frame {
  background: linear-gradient(180deg, rgba(20, 28, 50, 0.45), rgba(10, 16, 31, 0.36));
}

.profile-right-col {
  gap: 12px;
}
.profile-right-col .profile-showcase-card {
  border-color: rgba(173, 199, 255, 0.24);
  background:
    linear-gradient(160deg, rgba(129, 78, 255, 0.12), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(13, 18, 35, 0.88), rgba(8, 12, 26, 0.9));
}
.profile-side-kv {
  padding: 6px 0;
  border-bottom: 1px solid rgba(157, 186, 255, 0.12);
}
.profile-side-kv:last-child {
  border-bottom: 0;
}
.profile-side-kv .k {
  color: rgba(211, 222, 251, 0.66);
}
.profile-side-kv .v {
  color: rgba(235, 241, 255, 0.94);
}

#remnant-profile-edit-pane .profile-edit-wrap {
  padding: 0 20px 24px;
}
#remnant-profile-edit-pane .profile-edit-card {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(12, 18, 35, 0.78), rgba(7, 11, 24, 0.86));
  border-color: rgba(162, 191, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 30px rgba(4, 8, 18, 0.4);
}
#remnant-profile-edit-pane .profile-edit-about-preview-card,
#remnant-profile-edit-pane .profile-edit-showcase-equipped-preview-wrap,
#remnant-profile-edit-pane .profile-edit-showcase-equipped-row {
  border-color: rgba(160, 189, 255, 0.24);
  background: linear-gradient(180deg, rgba(18, 24, 42, 0.82), rgba(10, 15, 28, 0.88));
}
#remnant-profile-edit-pane .profile-edit-about-input {
  border-color: rgba(160, 188, 255, 0.24);
  background: linear-gradient(180deg, rgba(12, 18, 34, 0.84), rgba(8, 12, 24, 0.9));
}
#remnant-profile-edit-pane .profile-theme-swatch {
  border-color: rgba(169, 194, 255, 0.26);
  box-shadow: 0 10px 28px rgba(5, 8, 20, 0.42), 0 0 20px rgba(98, 130, 245, 0.16);
}

@media (max-width: 1200px) {
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar {
    width: 140px;
    height: 140px;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-username {
    font-size: clamp(34px, 3.1vw, 46px);
  }
}

/* ==========================================
   PROFILE VISUAL POLISH (layout + typography)
   ========================================== */
@keyframes remnantProfileAvatarPulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(107, 136, 255, 0.24),
      0 18px 40px rgba(49, 72, 176, 0.42),
      0 0 28px rgba(116, 90, 255, 0.24);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(126, 162, 255, 0.34),
      0 20px 42px rgba(54, 80, 190, 0.44),
      0 0 40px rgba(125, 98, 255, 0.32);
  }
}
@keyframes remnantXpNeonShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-main {
  padding: 18px 28px 26px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-layout {
  gap: 16px;
}

/* Upper hero card = own block */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero {
  margin-bottom: 12px;
  border-radius: 18px;
  padding: 18px 20px 16px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(12, 18, 36, 0.84), rgba(7, 11, 24, 0.9));
  border: 1px solid rgba(172, 198, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 14px 36px rgba(3, 7, 18, 0.5);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar {
  border-radius: 22px;
  border: 1px solid rgba(172, 199, 255, 0.46);
  animation: remnantProfileAvatarPulse 4.6s ease-in-out infinite;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 28px;
  border: 1px solid rgba(157, 186, 255, 0.12);
  opacity: 0.8;
  pointer-events: none;
}

/* Premium typography */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info {
  padding-bottom: 6px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-username {
  font-size: clamp(42px, 3.25vw, 58px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 8px 24px rgba(96, 126, 248, 0.46);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-player-tag {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  opacity: 0.74;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-rank {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 700;
}

/* XP bar polish with existing dynamic width logic */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-wrap {
  margin-top: 14px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-bg {
  height: 13px;
  border-radius: 999px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-fill {
  background-size: 200% 100%;
  animation: remnantXpNeonShift 5.2s linear infinite;
  filter: saturate(1.08);
}

/* Top buttons smoother */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions .glass-btn {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions .glass-btn:hover {
  transform: translateY(-1px);
}

/* Stats are own separated block */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row {
  margin-top: 2px;
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(169, 196, 255, 0.2);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(11, 16, 31, 0.84), rgba(8, 12, 25, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 26px rgba(3, 7, 16, 0.42);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat {
  border-radius: 11px;
  min-height: 76px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:hover {
  transform: translateY(-1px);
  border-color: rgba(188, 211, 255, 0.3);
  box-shadow: 0 0 18px rgba(106, 142, 255, 0.16);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat-value {
  font-size: clamp(30px, 2.4vw, 38px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 16px rgba(106, 151, 255, 0.28);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat-label {
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* Unified floating blocks */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 {
  margin-bottom: 14px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-notes-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Showcase slots: darker glass + placeholder feel */
.profile-items-slot,
.profile-items-equipped-slot {
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.profile-items-slot::before,
.profile-items-equipped-slot::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.profile-items-slot:not(.has-item) {
  background:
    radial-gradient(circle at 50% 22%, rgba(156, 185, 255, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(22, 31, 53, 0.5), rgba(10, 16, 32, 0.42));
}
.profile-items-slot:not(.has-item)::after {
  content: "";
  position: absolute;
  inset: 22% 28%;
  border-radius: 12px;
  border: 1px dashed rgba(170, 197, 255, 0.2);
  pointer-events: none;
}
.profile-items-slot.has-item .profile-items-slot-fill,
.profile-items-equipped-slot.has-item .profile-items-slot-fill {
  filter: drop-shadow(0 8px 12px rgba(3, 8, 20, 0.5));
}
.profile-items-slot:hover {
  transform: translateY(-2px);
}

/* Right column and generic profile block easing */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col .profile-showcase-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card:hover,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col .profile-showcase-card:hover {
  border-color: rgba(186, 210, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 14px 34px rgba(4, 7, 18, 0.48), 0 0 22px rgba(111, 145, 255, 0.16);
}

/* Editor keeps functionality, just same visual language */
#remnant-profile-edit-pane .profile-edit-card,
#remnant-profile-edit-pane .profile-edit-about-preview-card,
#remnant-profile-edit-pane .profile-edit-showcase-equipped-preview-wrap,
#remnant-profile-edit-pane .profile-edit-showcase-equipped-row {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
#remnant-profile-edit-pane .profile-edit-card:hover:not(.profile-edit-standing-card) {
  border-color: rgba(186, 210, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 32px rgba(4, 7, 16, 0.44);
}

/* ==========================================
   PROFILE 1:1 LAYOUT PASS (UI-only)
   ========================================== */
#page-profile {
  max-width: min(96vw, 1680px);
  margin: 0 auto;
  padding-bottom: 32px;
}

/* Remove inner-pane scrolling: page should scroll */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner),
#remnant-profile-edit-pane {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Remove big wrapper card feeling */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).glass-card,
#remnant-profile-edit-pane.glass-card {
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane)::before,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane)::after {
  display: none !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-full::before {
  display: block !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-side::before,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-side::after {
  display: block !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-main {
  padding: 16px 12px 18px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-shell {
  grid-template-columns: minmax(0, 1320px);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-shell-core {
  border-left: none;
  border-right: none;
  padding: 0;
}

/* Use dynamic theme layer as color source under all cards */
.remnant-profile-theme-layer {
  opacity: 1;
  filter: saturate(1.08) brightness(1.02);
}

/* Shared floating panel style */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-notes-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col .profile-showcase-card {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(170, 194, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(11, 17, 33, 0.74), rgba(7, 12, 24, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 14px 36px rgba(2, 6, 16, 0.48),
    0 0 20px rgba(102, 136, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero::before,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row::before,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div::before,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card::before,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-notes-card::before,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col .profile-showcase-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.1), transparent 60%),
    radial-gradient(90% 140% at 0% 50%, rgba(130, 170, 255, 0.08), transparent 66%);
}

/* 1) HUD block */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero {
  padding: 20px 22px 18px;
  margin-bottom: 12px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar-area {
  align-items: center;
  gap: 24px;
  margin: 0;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar {
  width: 170px;
  height: 170px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-wrap {
  max-width: 520px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions {
  align-self: flex-start;
  margin-left: auto;
  padding-bottom: 0;
  gap: 10px;
}

/* 2) Stat strip block */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row {
  margin: 0 0 14px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat {
  min-height: 88px;
  border: none;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px 10px 34px;
  position: relative;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 0;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(176, 198, 255, 0.32), transparent);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat::before {
  position: absolute;
  left: 10px;
  top: 14px;
  font-size: 16px;
  opacity: 0.9;
  text-shadow: 0 0 12px currentColor;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:nth-child(1)::before { content: "??"; color: #b775ff; }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:nth-child(2)::before { content: "??"; color: #5fa3ff; }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:nth-child(3)::before { content: "?"; color: #53dbff; }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:nth-child(4)::before { content: "?"; color: #63ee9e; }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat-value {
  font-size: clamp(32px, 2.5vw, 40px);
  font-weight: 900;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:nth-child(1) .profile-stat-value { color: #c084fc; text-shadow: 0 0 16px rgba(192, 132, 252, 0.42); }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:nth-child(2) .profile-stat-value { color: #60a5fa; text-shadow: 0 0 16px rgba(96, 165, 250, 0.42); }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:nth-child(3) .profile-stat-value { color: #4ddbff; text-shadow: 0 0 16px rgba(77, 219, 255, 0.4); }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:nth-child(4) .profile-stat-value { color: #4ade80; text-shadow: 0 0 16px rgba(74, 222, 128, 0.38); }

/* 3) Badges + social as one wide block with center divider */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div {
  padding: 12px 14px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div:nth-child(1) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div:nth-child(2) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  position: relative;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div:nth-child(2)::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(180, 201, 255, 0.34), transparent);
}

/* 4) Main content grid */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col {
  gap: 12px;
}

/* 5) Item showcase slots */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card {
  padding: 13px;
}
.profile-items-equipped-row,
.profile-items-slot-row {
  justify-content: start;
}
.profile-items-slot,
.profile-items-equipped-slot {
  width: 110px;
  height: 110px;
  border-radius: 14px;
}
.profile-items-slot:not(.has-item),
.profile-items-equipped-slot:not(.has-item) {
  border: 1px dashed rgba(172, 198, 255, 0.34);
}
.profile-items-slot:hover,
.profile-items-equipped-slot:hover {
  box-shadow: 0 0 24px rgba(94, 154, 255, 0.34), 0 10px 20px rgba(3, 8, 20, 0.4);
}

/* 6) Welcome/info block gets accent top line from current palette */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-box-card {
  overflow: hidden;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-box-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--blue));
  opacity: 0.8;
}

/* 7) Right stats panel rows */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-side-stats-card .profile-side-kv {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 7px 0;
}

/* 8) Team card */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-mini-group {
  border: 1px solid rgba(164, 191, 255, 0.22);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(20, 28, 50, 0.58), rgba(12, 17, 31, 0.7));
  box-shadow: 0 0 16px rgba(106, 136, 247, 0.16);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-mini-group + .profile-mini-group {
  margin-top: 8px;
}

/* 11) Left artwork hidden, right can remain */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner,#remnant-profile-edit-pane).profile-topblock-side::before {
  display: none !important;
}

/* Subtle interactions only */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col .profile-showcase-card {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero:hover,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row:hover,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card:hover,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div:hover,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col .profile-showcase-card:hover {
  border-color: rgba(189, 211, 255, 0.32);
  transform: translateY(-1px);
}

@media (max-width: 1280px) {
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:nth-child(2)::after {
    display: none;
  }
}

/* ==========================================
   PROFILE REFERENCE LOCK (strict visual pass)
   ========================================== */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) {
  --rp-card-bg-a: rgba(7, 10, 20, 0.9);
  --rp-card-bg-b: rgba(10, 14, 28, 0.86);
  --rp-edge: rgba(146, 170, 255, 0.26);
  --rp-edge-soft: rgba(133, 92, 255, 0.2);
  --rp-hi: rgba(255, 255, 255, 0.12);
  --rp-shadow: rgba(2, 5, 14, 0.58);
}

/* block surface closer to reference */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-items-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-achievements-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-recent-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-info-box-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-about-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-side-stats-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col .profile-showcase-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-notes-card {
  border: 1px solid var(--rp-edge) !important;
  background:
    linear-gradient(180deg, var(--rp-card-bg-b), var(--rp-card-bg-a)) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 var(--rp-hi),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 14px 34px var(--rp-shadow),
    0 0 18px rgba(100, 134, 255, 0.14) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero::after,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row::after,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div::after,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-items-card::after,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-achievements-card::after,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-recent-card::after,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-info-box-card::after,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-about-card::after,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-side-stats-card::after,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col .profile-showcase-card::after,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-notes-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(175, 198, 255, 0.06),
    inset 0 -10px 20px rgba(0, 0, 0, 0.16);
}

/* HUD exact hierarchy feel */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero {
  padding: 18px 20px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-username {
  font-size: clamp(44px, 3.3vw, 60px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.022em !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-username:not(.remnant-name-visual-gradient):not([class*="remnant-name-style-"]):not(.remnant-name-custom-visual) {
  color: #f5f7ff !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-player-tag {
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  opacity: 0.62 !important;
  color: #d8e0ff !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-rank {
  color: #5de6ff !important;
}

/* top action buttons like reference */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions .glass-btn {
  min-width: 108px;
  height: 34px;
  border-radius: 10px;
  font-size: 12px;
  border-color: rgba(156, 183, 255, 0.28);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions .btn-primary {
  background: linear-gradient(180deg, rgba(102, 50, 230, 0.34), rgba(74, 34, 168, 0.38));
  border-color: rgba(172, 118, 255, 0.52);
  color: #f0ddff;
  box-shadow: 0 0 14px rgba(141, 74, 255, 0.28);
}

/* XP bar matches neon line style */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-header {
  margin-bottom: 6px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-label {
  color: rgba(216, 225, 250, 0.78) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-value {
  color: #57d9ff !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-bg {
  height: 10px !important;
  border: 1px solid rgba(126, 156, 240, 0.38) !important;
  background: linear-gradient(180deg, rgba(12, 18, 32, 0.94), rgba(8, 12, 24, 0.98)) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-fill {
  background-image: linear-gradient(90deg, #1fdfff 0%, #3fa7ff 48%, #8f57ff 100%) !important;
  box-shadow: 0 0 14px rgba(71, 193, 255, 0.42), 0 0 20px rgba(138, 92, 255, 0.25) !important;
}

/* Stat strip should read as one block with 4 slices */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row {
  padding: 7px 8px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat {
  min-height: 82px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat-label {
  color: rgba(206, 217, 247, 0.66) !important;
  font-size: 11px !important;
}

/* Badges + social row exactly dark neon card */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 > div {
  min-height: 82px;
}

/* TARGY-VITRIN strict look */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-items-card {
  padding: 12px 12px 14px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-items-card .profile-showcase-title {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(210, 221, 252, 0.78);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-equipped-row {
  margin-top: 0 !important;
  gap: 8px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-slot,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-equipped-slot {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(121, 151, 243, 0.38) !important;
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(145, 168, 255, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(18, 25, 44, 0.82), rgba(10, 15, 29, 0.9)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px rgba(3, 8, 18, 0.42) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-slot:not(.has-item),
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-equipped-slot:not(.has-item) {
  border-style: dashed !important;
  border-color: rgba(129, 157, 245, 0.44) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-slot.has-item,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-equipped-slot.has-item {
  border-style: solid !important;
  border-color: rgba(90, 224, 255, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 18px rgba(73, 180, 255, 0.34),
    0 10px 24px rgba(3, 8, 18, 0.5) !important;
}

/* right side floating cards */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col .profile-showcase-card {
  padding: 12px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-side-title {
  color: rgba(233, 239, 255, 0.9) !important;
}

/* tighter, reference-like page rhythm */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero { margin-bottom: 10px !important; }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row { margin-bottom: 10px !important; }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .grid-2.mb-16 { margin-bottom: 10px !important; }
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .remnant-profile-showcase-ordered-stack { gap: 10px !important; }

/* ==========================================
   PROFILE REFERENCE STRUCTURE LOCK (strict)
   ========================================== */
#page-profile {
  max-width: min(95vw, 1560px) !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px, 2.2vw, 34px) 40px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) {
  position: relative;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-main {
  padding: 12px 0 16px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .remnant-profile-theme-layer {
  width: 100% !important;
  left: 0 !important;
  transform: none !important;
  border-radius: 24px !important;
  opacity: 0.95 !important;
  background-position: right center !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-shell {
  grid-template-columns: minmax(0, 1320px) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-shell-core {
  border: none !important;
  padding: 0 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-row #remnant-profile-about-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card {
  border-radius: 18px !important;
  border: 1px solid rgba(160, 118, 255, 0.3) !important;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(170, 102, 255, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(10, 14, 28, 0.9), rgba(6, 10, 20, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 14px 34px rgba(1, 4, 13, 0.56),
    0 0 20px rgba(138, 86, 255, 0.16) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 1) HERO */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero {
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar-area {
  margin: 0 !important;
  gap: 18px !important;
  align-items: center !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar {
  width: 154px !important;
  height: 154px !important;
  border-radius: 16px !important;
  box-shadow:
    0 0 0 2px rgba(128, 74, 255, 0.3),
    0 0 26px rgba(165, 92, 255, 0.34),
    0 16px 30px rgba(4, 9, 20, 0.55) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-username {
  font-size: clamp(40px, 3.1vw, 56px) !important;
  line-height: 1.02 !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-wrap {
  max-width: 500px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-bg {
  height: 8px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions {
  margin-left: auto !important;
  align-self: flex-start !important;
  gap: 10px !important;
}

/* 2) STAT STRIP */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row {
  margin: 0 0 14px !important;
  padding: 8px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 80px !important;
}

/* 3) INFO ROW */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-row {
  margin-bottom: 16px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 16px !important;
  align-items: stretch !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-card {
  padding: 12px 14px !important;
  display: grid !important;
  grid-template-columns: 1fr 1px 1fr !important;
  gap: 14px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-divider {
  background: linear-gradient(180deg, transparent, rgba(168, 122, 255, 0.42), transparent) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-row #remnant-profile-about-card {
  padding: 12px !important;
  min-height: 100%;
}

/* 4) MAIN GRID */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 16px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-center-col {
  min-width: 0;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col {
  gap: 16px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-items-card {
  min-height: 292px !important;
}
/* showcaseOrder: a vizu?lis sorrend a DOM-b?l j?n (remnantReorderProfileShowcaseDom) ? ne legyen fix CSS order. */

@media (max-width: 1280px) {
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-row,
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ==========================================
   PROFILE FINAL REFERENCE ALIGN (layout only)
   ========================================== */
#page-profile {
  max-width: min(96vw, 1600px) !important;
  margin: 0 auto;
  padding: 4px clamp(14px, 2vw, 28px) 40px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) {
  position: relative;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .remnant-profile-theme-layer {
  width: 100%;
  left: 0;
  transform: none;
  border-radius: 24px;
  opacity: 0.92;
  background-position: right center !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-main {
  padding: 18px 0 20px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-shell {
  grid-template-columns: minmax(0, 1360px) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-shell-core {
  padding: 0 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-notes-card {
  border-radius: 20px !important;
  border: 1px solid rgba(173, 127, 255, 0.28) !important;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(190, 104, 255, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(12, 15, 30, 0.88), rgba(6, 10, 22, 0.9)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -14px 24px rgba(0, 0, 0, 0.22),
    0 18px 40px rgba(2, 6, 20, 0.58),
    0 0 26px rgba(149, 80, 255, 0.18) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero {
  padding: 18px 20px 16px !important;
  margin-bottom: 12px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar-area {
  align-items: center;
  margin: 0 !important;
  gap: 18px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar {
  width: 160px !important;
  height: 160px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(188, 135, 255, 0.5) !important;
  box-shadow:
    0 0 0 2px rgba(117, 78, 239, 0.34),
    0 0 30px rgba(180, 96, 255, 0.34),
    0 18px 32px rgba(4, 10, 26, 0.55) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar .status-dot {
  box-shadow: 0 0 16px rgba(68, 255, 156, 0.75) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-wrap {
  max-width: 520px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-bg {
  height: 8px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions {
  margin-left: auto;
  align-self: flex-start;
  gap: 10px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions .glass-btn {
  border-radius: 11px !important;
  min-width: 114px;
  min-height: 34px;
  border: 1px solid rgba(176, 132, 255, 0.45) !important;
  background: linear-gradient(180deg, rgba(35, 22, 65, 0.55), rgba(18, 14, 35, 0.6)) !important;
  box-shadow: 0 0 16px rgba(163, 92, 255, 0.22) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row {
  padding: 6px 8px !important;
  margin-bottom: 14px !important;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 78px !important;
  justify-content: center;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:not(:last-child)::after {
  background: linear-gradient(180deg, transparent, rgba(178, 140, 255, 0.42), transparent) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-card {
  margin-bottom: 14px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 14px;
  align-items: start;
}
.profile-badges-social-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(176, 134, 255, 0.38), transparent);
}
.profile-badges-social-col {
  min-width: 0;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-col .social-links {
  gap: 8px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-col .social-link:not(.social-link--badge) {
  border-radius: 999px;
  border-color: rgba(178, 138, 255, 0.32) !important;
  background: rgba(28, 22, 52, 0.55) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-col .social-link.social-link--badge {
  border-radius: 0;
  border: 0 !important;
  background: transparent !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-col .social-link.twitter:not(.social-link--badge) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(16, 18, 22, 0.92) !important;
  color: #9ca3af !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-col .social-link.twitter .social-x-ico {
  color: #52525b !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-layout {
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 16px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .remnant-profile-showcase-ordered-stack {
  gap: 14px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card {
  padding: 14px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-items-card {
  min-height: 252px;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-equipped-row,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-slot-row {
  justify-content: stretch !important;
  gap: 8px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-slot,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-equipped-slot {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 12px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col {
  gap: 14px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-team-card .profile-mini-group {
  margin-top: 8px;
  min-height: 72px;
  align-items: center;
  background: linear-gradient(180deg, rgba(92, 42, 170, 0.35), rgba(20, 16, 40, 0.72));
  border-color: rgba(183, 136, 255, 0.4);
  box-shadow: 0 0 24px rgba(140, 82, 255, 0.24);
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-team-card .profile-mini-group-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 20px;
}

@media (max-width: 1280px) {
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-card {
    grid-template-columns: 1fr;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-divider {
    display: none;
  }
}

/* ==========================================
   PROFILE LEFT SHIFT + RIGHT ART SPACE
   ========================================== */
#page-profile {
  max-width: min(93vw, 1480px) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: clamp(6px, 0.8vw, 14px) !important;
  padding-right: clamp(10px, 1.2vw, 20px) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-shell {
  grid-template-columns: minmax(0, 1180px) !important;
  justify-content: start !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .remnant-profile-theme-layer {
  background-position: right center !important;
  background-size: cover !important;
}

@media (max-width: 1480px) {
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-shell {
    grid-template-columns: minmax(0, 1120px) !important;
  }
}

/* ==========================================
   ADAPTIVE WINDOW + FULLHD RESPONSIVE PASS
   ========================================== */
:root {
  --sidebar-w: clamp(220px, 16vw, 300px);
}

.remnant-shell {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.remnant-main-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.remnant-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

#sidebar {
  height: 100%;
}
#main {
  min-width: 0;
  min-height: 0;
}
#topbar {
  height: clamp(48px, 5.4vh, 56px);
  padding: 0 clamp(12px, 1.6vw, 24px);
}
.topbar-search {
  width: clamp(140px, 16vw, 220px);
}
#page-container {
  overflow: auto;
  padding: clamp(12px, 1.6vw, 24px);
}
.page {
  min-width: 0;
}

/* Remove viewport-locked profile panes on smaller windows */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner),
#remnant-profile-edit-pane {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Frequently visited grids become screen-width adaptive */
.stat-grid,
.dashboard-game-grid,
.grid-2,
.profile-steam-layout,
.profile-info-row,
.friends-layout {
  min-width: 0;
}

@media (max-width: 1920px) {
  #page-container {
    padding: clamp(10px, 1.25vw, 20px);
  }
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .dashboard-game-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 1366px) {
  #topbar {
    gap: 10px;
  }
  #page-container {
    padding: 10px 12px;
  }
  .stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
  .dashboard-game-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
  .friends-layout.remnant-friends-layout,
  .remnant-friends-layout.friends-layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
}

/* Profile: full-bleed in main scroll area (must follow #page-container padding shorthands) */
#page-container:has(#page-profile.active) {
  /* Banner a fels? s?v alj?hoz simuljon (nincs r?s) */
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: clamp(12px, 1.6vw, 24px) !important;
}

#page-profile.active {
  max-width: none !important;
  width: 100%;
  box-sizing: border-box;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: clamp(16px, 2vw, 40px) !important;
}

#page-profile.active :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .remnant-profile-theme-layer {
  border-radius: 0 0 24px 24px !important;
}

#page-profile.active :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
}

#page-profile.active :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-main {
  padding: 18px clamp(16px, 2.4vw, 36px) 20px !important;
}

/* ???????????????????????????????????????????????
   TICKETS / REPORTS (launcher user page)
   ??????????????????????????????????????????????? */
#page-tickets-reports.page.active {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.3vw, 20px);
  min-height: 0;
}

.remnant-ticket-headline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.remnant-ticket-headline-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(210, 219, 255, 0.94);
  background: linear-gradient(160deg, rgba(28, 36, 60, 0.96), rgba(11, 16, 30, 0.92));
  border: 1px solid rgba(180, 192, 255, 0.2);
  box-shadow: 0 8px 24px rgba(6, 10, 24, 0.42);
}

.remnant-ticket-headline-icon svg {
  width: 17px;
  height: 17px;
}

.remnant-ticket-switch-row {
  display: flex;
  gap: 10px;
}

.remnant-ticket-switch-btn {
  min-height: 40px;
  min-width: 128px;
  padding: 0 18px;
  border-radius: 11px;
  border: 1px solid rgba(130, 145, 206, 0.22);
  color: rgba(214, 223, 250, 0.84);
  background: linear-gradient(180deg, rgba(16, 23, 41, 0.88), rgba(9, 14, 26, 0.92));
  font-size: 13px;
  font-weight: 620;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.remnant-ticket-switch-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(165, 178, 236, 0.4);
  color: rgba(234, 240, 255, 0.95);
}

.remnant-ticket-switch-btn.is-active {
  border-color: rgba(176, 102, 255, 0.72);
  color: rgba(246, 241, 255, 0.97);
  box-shadow:
    0 0 0 1px rgba(178, 107, 255, 0.34),
    0 0 0 4px rgba(149, 95, 255, 0.1),
    0 0 24px rgba(128, 92, 255, 0.3);
}

.remnant-ticket-panel {
  position: relative;
  border-radius: clamp(16px, 1.2vw, 20px);
  border: 1px solid rgba(126, 144, 212, 0.18);
  background:
    linear-gradient(180deg, rgba(22, 30, 51, 0.7) 0%, rgba(8, 14, 28, 0.72) 100%),
    radial-gradient(circle at 12% 0%, rgba(84, 108, 255, 0.13), transparent 48%),
    radial-gradient(circle at 94% 100%, rgba(133, 41, 255, 0.09), transparent 42%),
    rgba(6, 10, 20, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -22px 48px rgba(2, 6, 14, 0.44),
    0 26px 60px rgba(2, 6, 16, 0.48);
  padding: clamp(16px, 1.8vw, 24px);
}

.remnant-ticket-tab-panel {
  display: none;
}

.remnant-ticket-tab-panel.is-active {
  display: block;
}

.remnant-ticket-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(170, 192, 255, 0.07) 0%, transparent 22%, transparent 78%, rgba(165, 124, 246, 0.08) 100%);
}

/* Jegyek / Jelent?sek: f? panel + lista/slotok ?ttetsz?bb glass */
#page-tickets-reports [data-remnant-ticket-panel="tickets"].remnant-ticket-panel,
#page-tickets-reports [data-remnant-ticket-panel="reports"].remnant-ticket-panel {
  background:
    linear-gradient(180deg, rgba(22, 30, 51, 0.42) 0%, rgba(8, 14, 28, 0.46) 100%),
    radial-gradient(circle at 12% 0%, rgba(84, 108, 255, 0.1), transparent 48%),
    radial-gradient(circle at 94% 100%, rgba(133, 41, 255, 0.06), transparent 42%),
    rgba(6, 10, 20, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -18px 40px rgba(2, 6, 14, 0.28),
    0 18px 48px rgba(2, 6, 16, 0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-listpane {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.56), rgba(8, 12, 22, 0.5));
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-slot {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.58), rgba(8, 12, 22, 0.52));
  border-color: rgba(148, 163, 184, 0.16);
}

#page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-slot.is-active {
  border-color: rgba(176, 102, 255, 0.68);
  box-shadow:
    0 0 0 1px rgba(178, 107, 255, 0.3),
    0 0 20px rgba(128, 92, 255, 0.22);
}

#page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-main {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.56), rgba(8, 12, 22, 0.5));
  border: 1px solid rgba(148, 163, 184, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-chat-feed {
  background: linear-gradient(180deg, rgba(10, 14, 24, 0.48), rgba(6, 10, 18, 0.52));
}

#page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-composer.remnant-admin-tickets-composer {
  background: linear-gradient(180deg, rgba(12, 16, 26, 0.55), rgba(8, 10, 18, 0.58));
}

#page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-main .remnant-admin-tickets-msg--user .remnant-admin-tickets-msg-bubble {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.72), rgba(8, 12, 22, 0.68));
  border-color: rgba(148, 163, 184, 0.2);
}
#page-tickets-reports [data-remnant-ticket-panel="tickets"] .remnant-user-tickets-main .remnant-admin-tickets-msg--staff .remnant-admin-tickets-msg-bubble {
  background: linear-gradient(155deg, rgba(40, 22, 72, 0.72), rgba(22, 12, 42, 0.68));
  border-color: rgba(186, 132, 255, 0.4);
}

#page-tickets-reports [data-remnant-ticket-panel="reports"] .remnant-ticket-lead {
  color: rgba(220, 228, 248, 0.9);
}

#page-tickets-reports [data-remnant-ticket-panel="reports"] .remnant-ticket-field label {
  color: rgba(244, 246, 255, 0.98);
}

#page-tickets-reports [data-remnant-ticket-panel="reports"] .remnant-ticket-help {
  color: rgba(195, 206, 236, 0.88);
}

#page-tickets-reports [data-remnant-ticket-panel="reports"] .remnant-ticket-input,
#page-tickets-reports [data-remnant-ticket-panel="reports"] .remnant-ticket-textarea {
  background: linear-gradient(180deg, rgba(14, 20, 36, 1), rgba(10, 15, 28, 1));
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#page-tickets-reports [data-remnant-ticket-panel="reports"] .remnant-ticket-select {
  color-scheme: dark;
  color: #eef2ff;
  background-color: #0b1220;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(205, 215, 252, 0.75) 50%),
    linear-gradient(135deg, rgba(205, 215, 252, 0.75) 50%, transparent 50%),
    linear-gradient(180deg, rgba(14, 20, 36, 1), rgba(10, 15, 28, 1));
  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 12px) 20px,
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#page-tickets-reports [data-remnant-ticket-panel="reports"] .remnant-ticket-pri-btn {
  background: linear-gradient(180deg, rgba(14, 20, 36, 0.98), rgba(10, 15, 28, 1));
  border-color: rgba(148, 163, 184, 0.28);
}

#page-tickets-reports [data-remnant-ticket-panel="tickets"] #remnant-user-tickets-compose .remnant-ticket-input,
#page-tickets-reports [data-remnant-ticket-panel="tickets"] #remnant-user-tickets-compose .remnant-ticket-textarea {
  background: linear-gradient(180deg, rgba(14, 20, 36, 1), rgba(10, 15, 28, 1));
  border-color: rgba(148, 163, 184, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#page-tickets-reports [data-remnant-ticket-panel="tickets"] #remnant-user-tickets-compose .remnant-ticket-select {
  color-scheme: dark;
  color: #eef2ff;
  background-color: #0b1220;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(205, 215, 252, 0.75) 50%),
    linear-gradient(135deg, rgba(205, 215, 252, 0.75) 50%, transparent 50%),
    linear-gradient(180deg, rgba(14, 20, 36, 1), rgba(10, 15, 28, 1));
  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 12px) 20px,
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  border-color: rgba(148, 163, 184, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Light theme: keep ticket/report selects dark (native popup readability) */
body.remnant-theme-light #page-tickets-reports .remnant-ticket-select {
  color-scheme: dark;
  color: #eef2ff;
  background-color: #0b1220;
}
body.remnant-theme-light #page-tickets-reports .remnant-ticket-select option {
  color: #eef2ff;
  background-color: #0b1220;
}
body.remnant-theme-light #page-tickets-reports .remnant-ticket-select option:checked,
body.remnant-theme-light #page-tickets-reports .remnant-ticket-select option:hover,
body.remnant-theme-light #page-tickets-reports .remnant-ticket-select option:focus {
  color: #ffffff !important;
  background-color: #2a3a64 !important;
}

/* Friss?t?sek ? J?t?k updates: h?rk?rty?k + j?t?kf?lek kev?sb? ?tl?tsz?ak */
#page-updates #game-updates .remnant-admin-news-card {
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.94), rgba(8, 12, 22, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px rgba(4, 7, 13, 0.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#page-updates #game-updates .remnant-admin-news-card:hover {
  border-color: rgba(138, 154, 187, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(77, 143, 255, 0.12), 0 18px 38px rgba(7, 11, 20, 0.55);
}

#page-updates #remnant-updates-game-inner > .game-tabs {
  background: linear-gradient(180deg, rgba(12, 16, 26, 0.92), rgba(8, 10, 18, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#page-updates #remnant-updates-game-inner > .game-tabs .game-tab.active {
  background: linear-gradient(155deg, rgba(22, 30, 48, 0.95), rgba(14, 18, 30, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.remnant-ticket-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.remnant-ticket-topbar h3 {
  margin: 0;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 700;
  color: rgba(244, 246, 255, 0.96);
  letter-spacing: -0.01em;
  font-family: 'Syne', sans-serif;
}

.remnant-ticket-lead {
  margin-bottom: clamp(16px, 1.4vw, 20px);
  font-size: clamp(12.5px, 1.05vw, 13.5px);
  color: rgba(214, 220, 244, 0.72);
}

.remnant-ticket-back-btn {
  border: 1px solid rgba(152, 168, 224, 0.24);
  background: linear-gradient(180deg, rgba(20, 27, 44, 0.9), rgba(10, 16, 28, 0.88));
  color: rgba(222, 230, 255, 0.88);
  border-radius: 12px;
  min-height: 38px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.remnant-ticket-back-btn svg {
  width: 14px;
  height: 14px;
}

.remnant-ticket-back-btn:hover {
  transform: translateY(-1px);
  color: rgba(236, 242, 255, 0.96);
  border-color: rgba(179, 196, 255, 0.42);
  box-shadow: 0 0 0 1px rgba(159, 175, 255, 0.14), 0 0 24px rgba(71, 95, 177, 0.28);
}

.remnant-ticket-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
}

.remnant-ticket-field {
  margin-bottom: 12px;
}

.remnant-report-player-field {
  position: relative;
}

.remnant-report-player-wrap {
  position: relative;
}

.remnant-report-player-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  max-height: 220px;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(160deg, rgba(12, 18, 34, 0.96), rgba(8, 12, 22, 0.94));
  box-shadow: 0 16px 40px rgba(2, 6, 16, 0.45);
  padding: 6px;
}

.remnant-report-player-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(232, 238, 255, 0.94);
  font-size: 13px;
  font-weight: 560;
  padding: 8px 10px;
  cursor: pointer;
}

.remnant-report-player-menu-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(8, 12, 22, 0.7);
}

.remnant-report-player-menu-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.remnant-report-player-menu-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remnant-report-player-menu-item:hover,
.remnant-report-player-menu-item:focus {
  background: rgba(90, 120, 210, 0.18);
  outline: none;
}

.remnant-report-player-menu-empty {
  padding: 12px;
  font-size: 12.5px;
  color: rgba(180, 192, 230, 0.72);
}

body.remnant-theme-light .remnant-report-player-menu {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(241, 246, 255, 0.96));
  border-color: rgba(22, 31, 52, 0.14);
}

body.remnant-theme-light .remnant-report-player-menu-item {
  color: #0f172a;
}

body.remnant-theme-light .remnant-report-player-menu-item:hover,
body.remnant-theme-light .remnant-report-player-menu-item:focus {
  background: rgba(14, 165, 233, 0.1);
}

.remnant-ticket-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: rgba(234, 240, 255, 0.93);
  font-weight: 620;
}

.remnant-ticket-input-wrap {
  position: relative;
}

.remnant-ticket-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  opacity: 0.62;
  color: rgba(205, 217, 255, 0.9);
  pointer-events: none;
}

.remnant-ticket-input-icon svg {
  width: 100%;
  height: 100%;
}

.remnant-ticket-input,
.remnant-ticket-select,
.remnant-ticket-textarea {
  width: 100%;
  border: 1px solid rgba(132, 149, 214, 0.2);
  border-radius: 12px;
  color: rgba(236, 239, 249, 0.94);
  background: linear-gradient(180deg, rgba(12, 18, 33, 0.94), rgba(8, 13, 24, 0.96));
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  box-sizing: border-box;
}

.remnant-ticket-input::placeholder,
.remnant-ticket-textarea::placeholder {
  color: rgba(164, 175, 214, 0.68);
}

.remnant-ticket-input,
.remnant-ticket-select {
  height: 44px;
  padding: 0 14px 0 38px;
  font-size: 14px;
}

.remnant-ticket-select {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  color: #eef2ff;
  background-color: #0b1220;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(205, 215, 252, 0.72) 50%),
    linear-gradient(135deg, rgba(205, 215, 252, 0.72) 50%, transparent 50%),
    linear-gradient(180deg, rgba(12, 18, 33, 0.98), rgba(8, 13, 24, 1));
  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 12px) 20px,
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor: pointer;
}

.remnant-ticket-select:invalid {
  color: rgba(186, 198, 232, 0.78);
}

/* Native <select> popup (Windows): force dark, high-contrast options */
#page-tickets-reports .remnant-ticket-select option,
.remnant-ticket-select option {
  color-scheme: dark;
  color: #eef2ff;
  background-color: #0b1220;
  font-weight: 600;
}

#page-tickets-reports .remnant-ticket-select option:disabled,
.remnant-ticket-select option:disabled {
  color: #8b97b5;
  background-color: #0b1220;
  font-weight: 500;
}

#page-tickets-reports .remnant-ticket-select option:checked,
#page-tickets-reports .remnant-ticket-select option:hover,
#page-tickets-reports .remnant-ticket-select option:focus,
.remnant-ticket-select option:checked,
.remnant-ticket-select option:hover,
.remnant-ticket-select option:focus {
  color: #ffffff !important;
  background-color: #2a3a64 !important;
}

.remnant-ticket-input:focus,
.remnant-ticket-select:focus,
.remnant-ticket-textarea:focus {
  outline: none;
  border-color: rgba(176, 102, 255, 0.72);
  box-shadow:
    0 0 0 1px rgba(178, 107, 255, 0.34),
    0 0 0 4px rgba(149, 95, 255, 0.1),
    0 0 24px rgba(128, 92, 255, 0.3);
}

.remnant-ticket-help {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(170, 179, 209, 0.65);
}

.remnant-ticket-priority-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.remnant-ticket-pri-btn {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(132, 149, 214, 0.2);
  background: linear-gradient(180deg, rgba(12, 18, 33, 0.94), rgba(8, 13, 24, 0.96));
  color: rgba(221, 228, 252, 0.87);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.remnant-ticket-pri-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(167, 184, 243, 0.35);
  color: rgba(241, 245, 255, 0.96);
}

.remnant-ticket-pri-btn.is-active {
  border-color: rgba(176, 102, 255, 0.72);
  color: rgba(244, 240, 255, 0.97);
  box-shadow:
    0 0 0 1px rgba(178, 107, 255, 0.34),
    0 0 0 4px rgba(149, 95, 255, 0.1),
    0 0 24px rgba(128, 92, 255, 0.3);
}

.remnant-ticket-pri-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}

.remnant-ticket-pri-dot--low { color: #22c55e; background: #22c55e; }
.remnant-ticket-pri-dot--mid { color: #f59e0b; background: #f59e0b; }
.remnant-ticket-pri-dot--high { color: #ef4444; background: #ef4444; }

.remnant-ticket-textarea {
  min-height: clamp(156px, 19vh, 220px);
  resize: vertical;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 -16px 26px rgba(0, 0, 0, 0.2);
}

.remnant-ticket-footer {
  margin-top: clamp(14px, 1.2vw, 18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.remnant-ticket-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.remnant-ticket-info-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(198, 170, 255, 0.92);
  border: 1px solid rgba(165, 116, 246, 0.45);
  background: linear-gradient(180deg, rgba(30, 20, 50, 0.7), rgba(16, 11, 27, 0.78));
  box-shadow: 0 0 20px rgba(145, 82, 255, 0.24);
}

.remnant-ticket-info-icon svg {
  width: 16px;
  height: 16px;
}

.remnant-ticket-info-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: rgba(244, 247, 255, 0.95);
  font-family: 'Syne', sans-serif;
  margin-bottom: 3px;
}

.remnant-ticket-info-copy {
  font-size: 13px;
  color: rgba(195, 203, 233, 0.76);
}

.remnant-ticket-submit {
  border: 0;
  border-radius: 12px;
  min-height: 44px;
  padding: 0 20px;
  background: linear-gradient(135deg, #6722e0, #8f42ff 58%, #5330ea);
  color: #f7f3ff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 12px 28px rgba(90, 42, 215, 0.42), 0 0 20px rgba(139, 83, 255, 0.46);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.remnant-ticket-submit svg {
  width: 14px;
  height: 14px;
}

.remnant-ticket-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 34px rgba(90, 42, 215, 0.5), 0 0 26px rgba(157, 107, 255, 0.54);
}

.remnant-ticket-evidence-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.remnant-ticket-evidence-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.remnant-ticket-evidence-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  line-height: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 620;
  border: 1px solid rgba(130, 145, 206, 0.24);
  background: linear-gradient(180deg, rgba(18, 25, 44, 0.9), rgba(9, 14, 26, 0.92));
  color: rgba(223, 232, 255, 0.92);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.remnant-ticket-field label.remnant-ticket-evidence-btn {
  display: inline-flex;
  margin-bottom: 0;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}

.remnant-ticket-evidence-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(165, 178, 236, 0.44);
  box-shadow: 0 0 0 1px rgba(151, 168, 235, 0.16), 0 0 22px rgba(88, 107, 182, 0.28);
}

.remnant-ticket-evidence-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.remnant-ticket-evidence-item {
  border-radius: 12px;
  border: 1px solid rgba(129, 145, 207, 0.22);
  background: linear-gradient(180deg, rgba(13, 19, 35, 0.95), rgba(8, 13, 24, 0.96));
  min-height: 106px;
  overflow: hidden;
  position: relative;
}

.remnant-ticket-evidence-item img:not(.remnant-report-ev-static-img),
.remnant-ticket-evidence-item video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.remnant-ticket-evidence-fallback {
  height: 100%;
  min-height: 106px;
  padding: 8px;
  display: flex;
  align-items: flex-end;
  font-size: 11px;
  color: rgba(195, 204, 233, 0.74);
  word-break: break-word;
}

/* User ? jegyek lista + chat */
.remnant-user-tickets-toolbar {
  margin-bottom: clamp(10px, 1vw, 14px);
}

.remnant-user-tickets-new-open {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 11px;
  border: 1px solid rgba(176, 102, 255, 0.45);
  background: linear-gradient(135deg, rgba(103, 34, 224, 0.35), rgba(30, 22, 58, 0.92));
  color: rgba(247, 243, 255, 0.96);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.remnant-user-tickets-new-open:hover {
  transform: translateY(-1px);
  border-color: rgba(210, 170, 255, 0.65);
  box-shadow: 0 0 22px rgba(139, 83, 255, 0.35);
}

.remnant-user-tickets-split {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  align-items: stretch;
  min-height: min(70vh, 620px);
}

.remnant-user-tickets-listpane {
  border-radius: 14px;
  border: 1px solid rgba(126, 144, 212, 0.16);
  background: rgba(8, 12, 24, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.remnant-user-tickets-slot-list {
  flex: 1;
  overflow: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.remnant-user-tickets-list-empty {
  font-size: 12px;
  color: rgba(170, 179, 209, 0.65);
  padding: 14px 10px;
  line-height: 1.45;
}

.remnant-user-tickets-slot {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(130, 145, 206, 0.2);
  background: linear-gradient(180deg, rgba(14, 20, 36, 0.92), rgba(8, 13, 24, 0.94));
  padding: 10px 11px;
  cursor: pointer;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.remnant-user-tickets-slot:hover {
  border-color: rgba(165, 178, 236, 0.35);
  transform: translateY(-1px);
}

.remnant-user-tickets-slot.is-active {
  border-color: rgba(176, 102, 255, 0.65);
  box-shadow:
    0 0 0 1px rgba(178, 107, 255, 0.28),
    0 0 20px rgba(128, 92, 255, 0.22);
}

.remnant-user-tickets-slot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.remnant-user-tickets-slot-id {
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(200, 210, 245, 0.75);
}

.remnant-user-tickets-slot-subj {
  font-size: 13px;
  font-weight: 650;
  color: rgba(236, 240, 255, 0.94);
  margin-bottom: 4px;
}

.remnant-user-tickets-slot-prev {
  font-size: 12px;
  color: rgba(170, 182, 220, 0.72);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.remnant-user-tickets-slot-time {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(148, 158, 198, 0.62);
}

.remnant-user-tickets-main {
  border-radius: 14px;
  border: 1px solid rgba(126, 144, 212, 0.16);
  background: rgba(6, 10, 20, 0.42);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.remnant-user-tickets-chat-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(120, 140, 200, 0.12);
}

.remnant-user-tickets-chat-feed {
  flex: 1;
  min-height: 180px;
  overflow: auto;
  padding: 12px 14px;
  background: rgba(4, 8, 16, 0.25);
}

.remnant-user-tickets-composer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(120, 140, 200, 0.12);
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.remnant-user-tickets-composer .remnant-admin-tickets-compose-box {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.remnant-user-tickets-composer .remnant-admin-tickets-ta {
  width: 100%;
  min-width: 0;
}

.remnant-user-tickets-composer .remnant-ticket-submit {
  flex: 0 0 auto;
}

@media (max-width: 1080px) {
  .remnant-ticket-form-grid {
    grid-template-columns: 1fr;
  }
  .remnant-user-tickets-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .remnant-user-tickets-listpane {
    max-height: 280px;
  }
  .remnant-user-tickets-chat-feed {
    min-height: 220px;
  }
}

@media (max-width: 860px) {
  .remnant-ticket-switch-row {
    flex-wrap: wrap;
  }
  .remnant-ticket-switch-btn {
    flex: 1 1 180px;
  }
  .remnant-ticket-topbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .remnant-ticket-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .remnant-ticket-submit {
    width: 100%;
    justify-content: center;
  }
  .remnant-ticket-priority-wrap {
    grid-template-columns: 1fr;
  }
}

/* ? Tickets / reports UI polish (2026-05) ? */
.remnant-admin-tickets-ro-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}
.remnant-admin-tickets-ro-k { color: #93a4bf; }
.remnant-admin-tickets-ro-v { color: #e8eefc; text-align: right; display: inline-flex; align-items: center; gap: 8px; }
.remnant-admin-tickets-user-av--img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.remnant-admin-tickets-msg-av-r {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #eafcff;
}
.remnant-admin-tickets-staff-pill--private {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #e2e8f0 !important;
}
.remnant-admin-tickets-msg--private .remnant-admin-tickets-msg-bubble {
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(100, 116, 139, 0.35);
}
.remnant-admin-tickets-msg-media {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.remnant-admin-tickets-msg-img {
  max-width: min(420px, 100%);
  border-radius: 10px;
}
.remnant-admin-tickets-msg-vid {
  max-width: min(420px, 100%);
  border-radius: 10px;
}
.remnant-admin-tickets-composer-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: #93a4bf;
}
.remnant-admin-tickets-btn-accept.is-disabled,
.remnant-admin-tickets-btn-handoff.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.remnant-steam-toggle {
  cursor: pointer;
  user-select: none;
}
.remnant-steam-toggle:hover {
  color: #7dd3fc;
}
.remnant-admin-tickets-list-empty--hero {
  padding: 28px 20px;
  text-align: center;
}
.remnant-admin-tickets-list-empty-title {
  margin: 0 0 6px;
  font-weight: 700;
  color: #eef4ff;
}
.remnant-ticket-evidence-item {
  position: relative;
}
.remnant-ticket-evidence-rm {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: rgba(10, 14, 24, 0.72);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.remnant-ticket-evidence-rm:hover {
  background: rgba(239, 68, 68, 0.55);
}
.remnant-admin-rp-ev--click {
  cursor: pointer;
}
.remnant-admin-rp-ev--click:hover {
  outline: 1px solid rgba(56, 189, 248, 0.45);
}
.remnant-report-ev-static {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 14, 24, 0.65);
  pointer-events: none;
  user-select: none;
}
.remnant-report-ev-static-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.remnant-report-ev-static-meta {
  padding: 8px 10px;
  font-size: 11px;
  color: #b8c5da;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-report-ev-video-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  background: linear-gradient(135deg, #1a243a, #1f2f52);
  color: #93c5fd;
}
.remnant-admin-rp-hist {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 12px;
  color: #b8c5da;
  max-height: 220px;
  overflow: auto;
}
.remnant-admin-rp-hist-item {
  margin-bottom: 8px;
}
.remnant-admin-rp-hist-t {
  display: block;
  color: #8ea0bc;
  font-size: 11px;
}
.remnant-admin-rp-hist-a {
  display: block;
  color: #7dd3fc;
  font-size: 11px;
}
.remnant-admin-rp-action-btn.watch {
  border-color: rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
}
.remnant-admin-rp-action-btn.mute {
  border-color: rgba(167, 139, 250, 0.4);
  color: #c4b5fd;
}
.remnant-admin-rp-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.remnant-admin-rp-hist-item--internal .remnant-admin-rp-hist-v {
  font-style: italic;
  color: #94a3b8;
}
.remnant-admin-rp-hist-item--internal .remnant-admin-rp-hist-a::after {
  content: ' ? bels?';
  font-size: 10px;
  color: #64748b;
}
.remnant-admin-rp-person-av-img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.remnant-admin-mod-modal {
  position: fixed;
  inset: 0;
  z-index: 99995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.remnant-admin-mod-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 18, 0.78);
}
.remnant-admin-mod-modal__card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #0c1424;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  padding: 20px 20px 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
.remnant-admin-mod-modal__x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.remnant-admin-mod-modal__title {
  margin: 0 36px 14px 0;
  font-size: 17px;
  font-weight: 700;
  color: #f1f5f9;
}
.remnant-mod-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.remnant-mod-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.15);
}
.remnant-mod-preview-av {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
}
.remnant-mod-preview-av--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.35);
  color: #e0e7ff;
  font-size: 13px;
  font-weight: 700;
}
.remnant-mod-preview-txt strong {
  display: block;
  font-size: 14px;
  color: #f8fafc;
}
.remnant-mod-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #cbd5e1;
}
.remnant-mod-field span {
  font-weight: 600;
}
.remnant-mod-req {
  color: #f87171;
  font-style: normal;
}
.remnant-mod-field input,
.remnant-mod-field select,
.remnant-mod-field textarea {
  font: inherit;
  font-size: 13px;
  color: #e2e8f0;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
}
.remnant-mod-field select {
  min-height: 38px;
  color: #eef4ff;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(6, 10, 20, 0.98)),
    #07101d;
  border-color: rgba(139, 92, 246, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 0 0 1px rgba(15, 23, 42, 0.55);
  color-scheme: dark;
  cursor: pointer;
}
.remnant-mod-field select:hover {
  border-color: rgba(168, 85, 247, 0.52);
  background:
    linear-gradient(180deg, rgba(20, 30, 54, 0.98), rgba(8, 13, 27, 0.98)),
    #07101d;
}
.remnant-mod-field select:focus,
.remnant-mod-field input:focus,
.remnant-mod-field textarea:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.74);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.18), 0 0 20px rgba(99, 102, 241, 0.12);
}
.remnant-mod-field select option {
  color: #e7edf8;
  background: #08111f;
}
.remnant-mod-field select option:disabled {
  color: #7c8ca3;
}
.remnant-mod-field input[readonly] {
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(96, 165, 250, 0.22);
}
.remnant-mod-field textarea {
  resize: vertical;
  min-height: 72px;
}
.remnant-admin-mod-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.remnant-admin-mod-modal__btn {
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.remnant-admin-mod-modal__btn--primary {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.9), rgba(79, 70, 229, 0.95));
  border-color: rgba(129, 140, 248, 0.5);
  color: #fff;
}
.remnant-admin-mod-modal__btn--danger {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.92), rgba(153, 27, 27, 0.96));
  border-color: rgba(248, 113, 113, 0.55);
  color: #fff;
}
.remnant-admin-client-ban-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, #e5e7eb);
}
.remnant-admin-client-ban-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.remnant-admin-client-ban-opt.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.remnant-admin-evidence-modal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.remnant-admin-evidence-modal[hidden] {
  display: none !important;
}
.remnant-admin-evidence-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 18, 0.82);
}
.remnant-admin-evidence-modal__card {
  position: relative;
  z-index: 1;
  max-width: min(960px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 14px;
  padding: 16px;
}
.remnant-admin-evidence-modal__x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.remnant-admin-evidence-modal__img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  border-radius: 10px;
}
.remnant-admin-evidence-modal__video {
  display: block;
  width: 100%;
  max-height: 70vh;
  border-radius: 10px;
}
.remnant-admin-evidence-modal__video-bar {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: #cbd5e1;
}
.remnant-admin-evidence-modal__video-bar .remnant-ev-vc {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.remnant-admin-evidence-modal__video-bar .remnant-ev-seek {
  flex: 1 1 160px;
  min-width: 120px;
}
.remnant-admin-pun-empty-state {
  padding: 48px 24px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.remnant-admin-pun-empty-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #eef4ff;
}
.remnant-admin-pun-detail-admin-av--img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
}
.remnant-admin-pun-detail-admin-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ????????? Admin ? Jogkezel?s (glass + purple glow, UI shell) ????????? */
#page-admin-permissions {
  max-width: min(1540px, 99vw);
  margin: 0 auto;
}
.remnant-admin-permissions-root-wrap {
  padding: 8px 6px 28px;
}
.remnant-perm-scope {
  --perm-purple: #a855f7;
  --perm-purple-dim: rgba(168, 85, 247, 0.45);
  --perm-purple-glow: rgba(168, 85, 247, 0.28);
  --perm-surface: rgba(14, 16, 28, 0.72);
  --perm-border: rgba(168, 85, 247, 0.14);
  color: #e8ecf8;
}
.remnant-perm-glass {
  background: linear-gradient(155deg, rgba(22, 18, 38, 0.92) 0%, rgba(12, 14, 24, 0.82) 55%, rgba(14, 12, 28, 0.88) 100%);
  border: 1px solid var(--perm-border);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 24px 56px rgba(0, 0, 0, 0.42),
    0 0 80px -12px var(--perm-purple-glow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.remnant-perm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  margin-bottom: 20px;
}
@media (max-width: 1080px) {
  .remnant-perm-hero {
    grid-template-columns: 1fr;
  }
}
.remnant-perm-hero-card {
  padding: 22px 24px 20px;
}
.remnant-perm-quick-card {
  padding: 20px 22px;
}
.remnant-perm-profile-top {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.remnant-perm-avatar {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: #faf5ff;
  background: radial-gradient(circle at 35% 30%, rgba(168, 85, 247, 0.35), rgba(30, 22, 52, 0.95));
  border: 1px solid rgba(168, 85, 247, 0.38);
  box-shadow:
    0 0 40px rgba(168, 85, 247, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.remnant-perm-profile-meta {
  min-width: 0;
  flex: 1;
}
.remnant-perm-name-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.remnant-perm-display-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #f8fafc;
}
.remnant-perm-chip {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: rgba(88, 28, 135, 0.35);
  color: #ede9fe;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.22);
}
.remnant-perm-chip--vip {
  border-color: rgba(192, 132, 252, 0.55);
}
.remnant-perm-steam-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.remnant-perm-steam-code {
  font-size: 13px;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.28);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-perm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(168, 85, 247, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: #d8b4fe;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.remnant-perm-icon-btn:hover {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.22);
  background: rgba(168, 85, 247, 0.08);
}
.remnant-perm-online {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #a7f3d0;
}
.remnant-perm-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.75);
}
.remnant-perm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px 18px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-perm-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.remnant-perm-stat--wide {
  grid-column: span 2;
}
@media (max-width: 520px) {
  .remnant-perm-stat--wide {
    grid-column: span 1;
  }
}
.remnant-perm-stat-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.85);
}
.remnant-perm-stat-v {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
}
.remnant-perm-role-foot {
  margin: 16px 0 0;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.95);
}
.remnant-perm-role-foot strong {
  color: #e9d5ff;
  font-weight: 700;
}
.remnant-perm-quick-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(148, 163, 184, 0.85);
  margin-bottom: 14px;
}
.remnant-perm-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.remnant-perm-qbtn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(10, 12, 22, 0.65);
  color: #e2e8f0;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, transform 0.15s ease;
}
.remnant-perm-qbtn i,
.remnant-perm-qbtn svg {
  flex-shrink: 0;
  color: #c4b5fd;
  opacity: 0.95;
}
.remnant-perm-qbtn:hover {
  border-color: rgba(168, 85, 247, 0.42);
  box-shadow: 0 0 26px rgba(168, 85, 247, 0.18);
  background: rgba(49, 32, 86, 0.36);
}
.remnant-perm-qbtn:active {
  transform: scale(0.98);
}
.remnant-perm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 4px 4px 0;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-perm-tab {
  position: relative;
  padding: 12px 16px 14px;
  margin-bottom: -1px;
  border: none;
  background: transparent;
  color: rgba(148, 163, 184, 0.95);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.22s ease;
}
.remnant-perm-tab:hover {
  color: #e9d5ff;
}
.remnant-perm-tab.is-active {
  color: #ede9fe;
}
.remnant-perm-tab.is-active::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.15), var(--perm-purple), rgba(168, 85, 247, 0.15));
  box-shadow: 0 -2px 22px rgba(168, 85, 247, 0.55);
}
.remnant-perm-dash {
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(260px, 0.85fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1024px) {
  .remnant-perm-dash {
    grid-template-columns: 1fr;
  }
}
.remnant-perm-dash-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.remnant-perm-card {
  padding: 22px 24px 24px;
  border-radius: 18px;
}
.remnant-perm-card-h {
  margin: 0 0 18px;
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.02em;
}
.remnant-perm-placeholder-card {
  padding: 28px 26px;
  border-radius: 18px;
}
.remnant-perm-card-p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #cbd5e1;
}
.remnant-perm-card-p:last-child {
  margin-bottom: 0;
}
.remnant-perm-xp-row {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-bottom: 22px;
}
.remnant-perm-level-ring {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #faf5ff;
  border: 3px solid rgba(168, 85, 247, 0.55);
  box-shadow:
    inset 0 0 28px rgba(168, 85, 247, 0.12),
    0 0 36px rgba(168, 85, 247, 0.2);
  background: radial-gradient(circle at 40% 35%, rgba(76, 29, 149, 0.35), rgba(15, 14, 26, 0.92));
}
.remnant-perm-xp-bar-block {
  flex: 1;
  min-width: 0;
}
.remnant-perm-xp-bar-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}
.remnant-perm-xp-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(168, 85, 247, 0.15);
  overflow: hidden;
}
.remnant-perm-xp-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #c084fc);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.45);
  transition: width 0.35s ease;
}
.remnant-perm-xp-next {
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.95);
}
.remnant-perm-rp-balance-line {
  margin: 0 0 18px;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.92);
}
.remnant-perm-rp-balance-line strong {
  color: #faf5ff;
  font-weight: 700;
}
.remnant-perm-xp-rp-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 1100px) {
  .remnant-perm-xp-rp-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .remnant-perm-xp-rp-split {
    grid-template-columns: 1fr;
  }
}
.remnant-perm-xp-rp-split .remnant-perm-subsect {
  border-top: none;
  padding-top: 0;
}
.remnant-perm-spin-key-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
  align-items: stretch;
}
.remnant-perm-spin-key-lbl {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
}
.remnant-perm-spin-key-lbl:first-child {
  margin-top: 0;
}
.remnant-perm-spin-key-btn {
  padding: 8px 6px !important;
  font-size: 12px !important;
  min-height: 36px;
}
.remnant-perm-u-av--img,
.remnant-perm-hud-avatar--img {
  padding: 0;
  overflow: hidden;
}
.remnant-perm-u-av--img img,
.remnant-perm-hud-avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.remnant-perm-subsect {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-perm-subh {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(196, 181, 253, 0.95);
}
.remnant-perm-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.remnant-perm-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.remnant-perm-field:last-child {
  margin-bottom: 0;
}
.remnant-perm-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(148, 163, 184, 0.95);
}
.remnant-perm-input,
.remnant-perm-textarea,
.remnant-perm-select {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 18, 0.72);
  color: #f1f5f9;
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.remnant-perm-input:focus,
.remnant-perm-textarea:focus,
.remnant-perm-select:focus {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15), 0 0 28px rgba(168, 85, 247, 0.12);
}
.remnant-perm-textarea {
  resize: vertical;
  min-height: 88px;
}
.remnant-perm-inline-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.remnant-perm-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.remnant-perm-btn {
  padding: 10px 18px;
  border-radius: 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.remnant-perm-btn--primary {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 50%, #6d28d9 100%);
  color: #faf5ff;
  border-color: rgba(216, 180, 254, 0.35);
  box-shadow: 0 4px 22px rgba(124, 58, 237, 0.35);
}
.remnant-perm-btn--primary:hover {
  box-shadow: 0 6px 30px rgba(168, 85, 247, 0.45);
}
.remnant-perm-btn--outline {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(167, 139, 250, 0.38);
  color: #ddd6fe;
}
.remnant-perm-btn--outline:hover {
  border-color: rgba(192, 132, 252, 0.55);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}
.remnant-perm-btn--danger {
  border-color: rgba(244, 114, 182, 0.35);
  color: #fbcfe8;
}
.remnant-perm-btn--danger:hover {
  border-color: rgba(244, 114, 182, 0.55);
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.18);
}
.remnant-perm-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.remnant-perm-select-ico {
  position: absolute;
  left: 12px;
  pointer-events: none;
  color: #c4b5fd;
  display: flex;
}
.remnant-perm-select-wrap .remnant-perm-select {
  padding-left: 42px;
  appearance: none;
  cursor: pointer;
}
.remnant-perm-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin: 14px 0 6px;
  font-size: 13px;
  color: #cbd5e1;
}
.remnant-perm-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.remnant-perm-toggle-ui {
  width: 42px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.22);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.remnant-perm-toggle-ui::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f5f3ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s ease;
}
.remnant-perm-toggle input:checked + .remnant-perm-toggle-ui {
  background: rgba(109, 40, 217, 0.55);
  border-color: rgba(192, 132, 252, 0.45);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.28);
}
.remnant-perm-toggle input:checked + .remnant-perm-toggle-ui::after {
  transform: translateX(18px);
}
.remnant-perm-toggle-txt {
  font-weight: 600;
}
.remnant-perm-vip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.remnant-perm-vip-tier {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 10, 18, 0.45);
  color: #e2e8f0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.remnant-perm-vip-tier i,
.remnant-perm-vip-tier svg {
  flex-shrink: 0;
  color: #d8b4fe;
}
.remnant-perm-vip-tier span {
  flex: 1;
}
.remnant-perm-vip-tier em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: rgba(148, 163, 184, 0.95);
}
.remnant-perm-vip-tier:hover {
  border-color: rgba(168, 85, 247, 0.28);
}
.remnant-perm-vip-tier.is-active {
  border-color: rgba(168, 85, 247, 0.55);
  background: rgba(58, 32, 92, 0.42);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.18);
}
.remnant-perm-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.remnant-perm-benefits li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #cbd5e1;
}
.remnant-perm-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.38);
  background: rgba(76, 29, 149, 0.28);
  color: #ede9fe;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.15);
}

/* ?? Jogkezel?s ? dashboard layout (lista + r?szletek) ?? */
.remnant-perm-app {
  display: grid;
  grid-template-columns: minmax(272px, 300px) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .remnant-perm-app {
    grid-template-columns: 1fr;
  }
}
.remnant-perm-sidebar {
  display: flex;
  flex-direction: column;
  padding: 16px 14px 14px;
  min-height: 0;
  align-self: stretch;
}
.remnant-perm-side-head {
  margin-bottom: 12px;
}
.remnant-perm-side-title {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f8fafc;
}
.remnant-perm-side-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.16);
  background: rgba(6, 8, 16, 0.55);
}
.remnant-perm-side-search i,
.remnant-perm-side-search svg {
  flex-shrink: 0;
  color: #a78bfa;
  opacity: 0.9;
}
.remnant-perm-side-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: #f1f5f9;
  font: inherit;
  font-size: 13px;
  padding: 11px 0;
  outline: none;
}
.remnant-perm-u-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}
.remnant-perm-u-scroll::-webkit-scrollbar {
  width: 6px;
}
.remnant-perm-u-scroll::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.25);
  border-radius: 99px;
}
.remnant-perm-u-slot {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 10, 18, 0.45);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    transform 0.12s ease;
}
.remnant-perm-u-slot:hover {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.12);
}
.remnant-perm-u-slot.is-selected {
  border-color: rgba(168, 85, 247, 0.55);
  background: rgba(76, 29, 149, 0.28);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.2),
    0 0 28px rgba(168, 85, 247, 0.2);
}
.remnant-perm-u-slot:active {
  transform: scale(0.99);
}
.remnant-perm-u-av {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: #faf5ff;
  background: radial-gradient(circle at 35% 30%, rgba(168, 85, 247, 0.4), rgba(24, 20, 40, 0.95));
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.remnant-perm-u-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.remnant-perm-u-name {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remnant-perm-u-id {
  font-size: 11px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.95);
}
.remnant-perm-u-presence {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  justify-self: end;
}
.remnant-perm-u-presence--on {
  background: #34d399;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.75);
}
.remnant-perm-u-presence--off {
  background: #64748b;
  box-shadow: none;
}
.remnant-perm-u-presence--idle {
  background: rgba(148, 163, 184, 0.35);
  box-shadow: none;
}
.remnant-perm-u-empty {
  padding: 18px 8px;
  text-align: center;
  font-size: 13px;
}
.remnant-perm-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-perm-pagebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid rgba(168, 85, 247, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: #ddd6fe;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.remnant-perm-pagebtn:hover:not(:disabled) {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
  background: rgba(168, 85, 247, 0.1);
}
.remnant-perm-pagebtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.remnant-perm-pager-txt {
  font-size: 12px;
  font-weight: 700;
  color: rgba(203, 213, 225, 0.95);
  min-width: 72px;
  text-align: center;
}
.remnant-perm-main-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
}
.remnant-perm-detail-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1200px) {
  .remnant-perm-detail-top {
    grid-template-columns: 1fr;
  }
}
.remnant-perm-hud {
  padding: 22px 24px 20px;
}
.remnant-perm-hud-grid {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.remnant-perm-hud-avatar {
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: #faf5ff;
  background: radial-gradient(circle at 35% 28%, rgba(168, 85, 247, 0.42), rgba(18, 16, 32, 0.96));
  border: 1px solid rgba(168, 85, 247, 0.42);
  box-shadow:
    0 0 48px rgba(168, 85, 247, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.remnant-perm-hud-main {
  flex: 1;
  min-width: 0;
}
.remnant-perm-hud-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.remnant-perm-hud-title {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #f8fafc;
  line-height: 1.15;
}
.remnant-perm-obadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.remnant-perm-obadge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.remnant-perm-obadge--on {
  color: #a7f3d0;
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(6, 78, 59, 0.28);
}
.remnant-perm-obadge--on i {
  background: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.65);
}
.remnant-perm-obadge--off {
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.45);
}
.remnant-perm-obadge--off i {
  background: #64748b;
}
.remnant-perm-hud-dnline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 8px;
}
.remnant-perm-hud-dn {
  font-size: 15px;
  font-weight: 650;
  color: #e2e8f0;
}
.remnant-perm-hud-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.remnant-perm-hud-idline {
  font-size: 13px;
  color: rgba(148, 163, 184, 0.95);
}
.remnant-perm-hud-idline strong {
  color: #f1f5f9;
  font-weight: 700;
}
.remnant-perm-pill {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.remnant-perm-pill--vip {
  border-color: rgba(250, 204, 21, 0.45);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.45), rgba(66, 32, 6, 0.55));
  color: #fde68a;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.15);
}
.remnant-perm-pill--supporter {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(30, 58, 138, 0.4);
  color: #bfdbfe;
}
.remnant-perm-pill--exp {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(6, 78, 59, 0.32);
  color: #a7f3d0;
}
.remnant-perm-pill--event {
  border-color: rgba(244, 114, 182, 0.45);
  background: rgba(131, 24, 67, 0.35);
  color: #fbcfe8;
}
.remnant-perm-pill--adminrole {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(76, 29, 149, 0.38);
  color: #ede9fe;
}
.remnant-perm-pill--rankxp {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(12, 74, 110, 0.35);
  color: #bae6fd;
}
.remnant-perm-pill--neutral {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.5);
  color: #e2e8f0;
}
.remnant-perm-pill--dim {
  border-color: rgba(148, 163, 184, 0.15);
  background: rgba(15, 23, 42, 0.35);
  color: rgba(148, 163, 184, 0.85);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 11px;
}
.remnant-perm-admin-aside {
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.remnant-perm-aside-h {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
}
.remnant-perm-aside-p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(148, 163, 184, 0.95);
}
.remnant-perm-aside-role {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.remnant-perm-aside-mods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.remnant-perm-aside-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.22);
  background: rgba(0, 0, 0, 0.25);
  color: #cbd5e1;
}
.remnant-perm-aside-foot {
  margin: 8px 0 0;
  font-size: 11px;
}
.remnant-perm-tabbed {
  padding: 4px 4px 18px;
}
.remnant-perm-tabbed .remnant-perm-tabs {
  margin-bottom: 16px;
  padding-left: 8px;
  padding-right: 8px;
}
.remnant-perm-tabbed .remnant-perm-panel-stack {
  padding: 0 12px 8px;
}
.remnant-perm-block-h {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.88);
  margin: 0 0 12px;
}
.remnant-perm-overview-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .remnant-perm-overview-split {
    grid-template-columns: 1fr;
  }
}
.remnant-perm-overview-stats {
  padding: 18px 18px 16px;
}
.remnant-perm-statgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.remnant-perm-statcell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.remnant-perm-statcell-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(148, 163, 184, 0.85);
}
.remnant-perm-statcell-v {
  font-size: 14px;
  font-weight: 650;
  color: #f1f5f9;
  word-break: break-word;
}
.remnant-perm-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 520px) {
  .remnant-perm-action-grid {
    grid-template-columns: 1fr;
  }
}
.remnant-perm-acard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 16px 15px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 18, 0.55);
  color: #f1f5f9;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.14s ease,
    background 0.22s ease;
}
.remnant-perm-acard i,
.remnant-perm-acard svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.remnant-perm-acard-t {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.remnant-perm-acard-s {
  font-size: 11px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.72);
}
.remnant-perm-acard:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.remnant-perm-acard--xpadd {
  border-color: rgba(52, 211, 153, 0.35);
  background: linear-gradient(155deg, rgba(6, 78, 59, 0.42), rgba(8, 12, 18, 0.75));
}
.remnant-perm-acard--xpadd:hover {
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow: 0 0 32px rgba(52, 211, 153, 0.2);
}
.remnant-perm-acard--xpadd i,
.remnant-perm-acard--xpadd svg {
  color: #6ee7b7;
}
.remnant-perm-acard--xpsub {
  border-color: rgba(248, 113, 113, 0.4);
  background: linear-gradient(155deg, rgba(127, 29, 29, 0.42), rgba(10, 10, 16, 0.78));
}
.remnant-perm-acard--xpsub:hover {
  border-color: rgba(248, 113, 113, 0.6);
  box-shadow: 0 0 32px rgba(248, 113, 113, 0.18);
}
.remnant-perm-acard--xpsub i,
.remnant-perm-acard--xpsub svg {
  color: #fca5a5;
}
.remnant-perm-acard--vip {
  border-color: rgba(250, 204, 21, 0.38);
  background: linear-gradient(155deg, rgba(120, 53, 15, 0.38), rgba(12, 10, 22, 0.82));
}
.remnant-perm-acard--vip:hover {
  border-color: rgba(250, 204, 21, 0.55);
  box-shadow: 0 0 32px rgba(250, 204, 21, 0.16);
}
.remnant-perm-acard--vip i,
.remnant-perm-acard--vip svg {
  color: #fcd34d;
}
.remnant-perm-acard--admin {
  border-color: rgba(168, 85, 247, 0.45);
  background: linear-gradient(155deg, rgba(76, 29, 149, 0.45), rgba(10, 10, 18, 0.82));
}
.remnant-perm-acard--admin:hover {
  border-color: rgba(192, 132, 252, 0.55);
  box-shadow: 0 0 36px rgba(168, 85, 247, 0.28);
}
.remnant-perm-acard--admin i,
.remnant-perm-acard--admin svg {
  color: #d8b4fe;
}
.remnant-perm-acard--warn {
  border-color: rgba(250, 204, 21, 0.32);
  background: linear-gradient(155deg, rgba(113, 63, 18, 0.4), rgba(12, 12, 18, 0.8));
}
.remnant-perm-acard--warn:hover {
  box-shadow: 0 0 28px rgba(250, 204, 21, 0.14);
}
.remnant-perm-acard--warn i,
.remnant-perm-acard--warn svg {
  color: #fde047;
}
.remnant-perm-acard--ban {
  border-color: rgba(239, 68, 68, 0.45);
  background: linear-gradient(155deg, rgba(127, 29, 29, 0.5), rgba(10, 8, 14, 0.85));
}
.remnant-perm-acard--ban:hover {
  border-color: rgba(248, 113, 113, 0.55);
  box-shadow: 0 0 32px rgba(239, 68, 68, 0.2);
}
.remnant-perm-acard--ban i,
.remnant-perm-acard--ban svg {
  color: #fecaca;
}
.remnant-perm-acard--clientban {
  border-color: rgba(251, 146, 60, 0.42);
  background: linear-gradient(155deg, rgba(124, 45, 18, 0.42), rgba(12, 10, 16, 0.82));
}
.remnant-perm-acard--clientban:hover {
  border-color: rgba(251, 146, 60, 0.58);
  box-shadow: 0 0 32px rgba(251, 146, 60, 0.16);
}
.remnant-perm-acard--clientban i,
.remnant-perm-acard--clientban svg {
  color: #fdba74;
}
.remnant-perm-acard--hardreset {
  border-color: rgba(244, 63, 94, 0.48);
  background: linear-gradient(155deg, rgba(136, 19, 55, 0.48), rgba(10, 8, 12, 0.88));
}
.remnant-perm-acard--hardreset:hover {
  border-color: rgba(251, 113, 133, 0.58);
  box-shadow: 0 0 34px rgba(244, 63, 94, 0.2);
}
.remnant-perm-acard--hardreset i,
.remnant-perm-acard--hardreset svg {
  color: #fda4af;
}
.remnant-perm-permadelete-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    transform 0.14s ease;
}
.remnant-perm-permadelete-btn:hover {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(153, 27, 27, 0.32);
  transform: translateY(-1px);
}
.remnant-perm-permadelete-btn span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.remnant-perm-permadelete-btn small {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(254, 202, 202, 0.78);
}
.remnant-perm-permadelete-btn i,
.remnant-perm-permadelete-btn svg {
  width: 16px;
  height: 16px;
  color: #f87171;
  margin-bottom: 2px;
}
.remnant-perm-rankov {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 16px;
}
.remnant-perm-rankov-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  align-items: center;
}
.remnant-perm-rankov-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.remnant-perm-rankov-k {
  flex: 0 0 140px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(148, 163, 184, 0.9);
}
.remnant-perm-rankov-v {
  flex: 1;
  min-width: 0;
  color: #e2e8f0;
}
.remnant-perm-rankov-pills {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.remnant-perm-error-card {
  padding: 24px;
  border-radius: 18px;
  max-width: 520px;
}
.remnant-perm-empty-detail {
  padding: 28px 24px;
  border-radius: 18px;
}

.remnant-perm-acard.is-disabled {
  opacity: 0.42;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.remnant-perm-overview-id .remnant-perm-card-h {
  margin-bottom: 14px;
}

.remnant-perm-idgrid {
  margin: 0;
  padding: 0;
}

.remnant-perm-idrow {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  gap: 10px 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: start;
}

.remnant-perm-idrow:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.remnant-perm-idrow dt {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: rgba(148, 163, 184, 0.95);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.remnant-perm-idrow dd {
  margin: 0;
  font-size: 14px;
  color: #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.remnant-perm-idcode {
  font-size: 13px;
  background: rgba(0, 0, 0, 0.35);
  padding: 5px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  word-break: break-all;
}

.remnant-perm-adminrole-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px 22px;
  align-items: start;
  max-width: 1120px;
}
@media (max-width: 900px) {
  .remnant-perm-adminrole-row {
    grid-template-columns: 1fr;
  }
}
.remnant-perm-adminrole-card {
  padding: 22px 24px 24px;
  border-radius: 18px;
  max-width: none;
}
.remnant-perm-active-strip-card {
  padding: 22px 24px 24px;
  border-radius: 18px;
}
.remnant-perm-strip-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.remnant-perm-strip-li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
}
.remnant-perm-strip-txt {
  min-width: 0;
  font-size: 13px;
}

.remnant-perm-overlay {
  position: fixed;
  inset: 0;
  z-index: 12040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  box-sizing: border-box;
}

.remnant-perm-overlay[hidden] {
  display: none !important;
}

.remnant-perm-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(6, 4, 14, 0.78);
  backdrop-filter: blur(8px);
}

.remnant-perm-xp-pop {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 24px 26px 26px;
  border-radius: 20px;
  border: 1px solid rgba(168, 85, 247, 0.38);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.58),
    0 0 48px rgba(124, 58, 237, 0.22);
}

.remnant-perm-xp-pop-h {
  margin: 0 0 16px;
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #faf5ff;
  letter-spacing: -0.02em;
}

.remnant-perm-xp-pop-summary {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.remnant-perm-xp-pop-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: #94a3b8;
}

.remnant-perm-xp-pop-meta strong {
  color: #f1f5f9;
  font-weight: 700;
}

.remnant-perm-xp-pop-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(168, 85, 247, 0.2);
  overflow: hidden;
  margin-bottom: 16px;
}

.remnant-perm-xp-pop-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #c084fc);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.45);
  transition: width 0.35s ease;
}

.remnant-perm-xp-pop-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.remnant-perm-punish-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.remnant-perm-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.remnant-perm-filter-chip {
  padding: 8px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: #ddd6fe;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.remnant-perm-filter-chip:hover {
  border-color: rgba(192, 132, 252, 0.55);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.12);
}

.remnant-perm-filter-chip.is-active {
  border-color: rgba(192, 132, 252, 0.75);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.45), rgba(88, 28, 135, 0.35));
  color: #faf5ff;
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.25);
}

.remnant-perm-punish-list {
  min-height: 120px;
}

.remnant-perm-punish-scroller {
  max-height: min(62vh, 520px);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.remnant-perm-punish-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.remnant-perm-punish-tbl th,
.remnant-perm-punish-tbl td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.remnant-perm-punish-tbl th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(196, 181, 253, 0.95);
  background: rgba(12, 10, 22, 0.96);
  backdrop-filter: blur(6px);
}

.remnant-perm-dur-wrap,
.remnant-perm-tier-row,
.remnant-perm-game-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.remnant-perm-dur-chip,
.remnant-perm-tier-card,
.remnant-perm-game-btn {
  padding: 10px 14px;
  border-radius: 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(167, 139, 250, 0.32);
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.remnant-perm-game-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.remnant-perm-dur-chip:hover:not(:disabled),
.remnant-perm-tier-card:hover:not(:disabled),
.remnant-perm-game-btn:hover:not(:disabled) {
  border-color: rgba(192, 132, 252, 0.55);
}

.remnant-perm-dur-chip.is-active,
.remnant-perm-tier-card.is-active,
.remnant-perm-game-btn.is-active {
  border-color: rgba(216, 180, 254, 0.65);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.42), rgba(76, 29, 149, 0.28));
  color: #faf5ff;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

.remnant-perm-tier-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 120px;
}

.remnant-perm-tier-t {
  font-size: 13px;
  font-weight: 800;
}

.remnant-perm-tier-s {
  font-size: 11px;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.9);
}

/* ??? Jutalmak spin empty + kuponok + mythic rarity ??? */
.jutalmak-reel-viewport { position: relative; }
.jutalmak-spin-empty {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: rgba(10, 10, 14, 0.72);
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.35);
}
.jutalmak-spin-empty[hidden] { display: none !important; }
.jutalmak-spin-empty-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px; margin: 0 0 6px; color: #f8fafc; }
.jutalmak-spin-empty-sub { margin: 0; font-size: 12px; color: var(--text-faint); max-width: 280px; line-height: 1.45; }

.jutalmak-coupons-heading-note {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-faint);
  margin-left: 6px;
}
.jutalmak-page .jutalmak-coupons-panel {
  margin: 0;
  padding: 14px 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.jutalmak-coupons-list { max-height: 260px; min-height: 48px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.jutalmak-coupons-empty {
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 16px 32px;
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.28), rgba(30, 27, 75, 0.16));
}
.jutalmak-coupons-empty-ico {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 14px rgba(96, 165, 250, 0.45));
  opacity: 0.95;
}
.jutalmak-coupons-empty-title {
  margin: 0 0 8px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #e2e8f0;
}
.jutalmak-coupons-empty-sub {
  margin: 0 auto;
  max-width: 320px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-faint);
}
.jutalmak-coupon-card-wrap {
  position: relative;
}
.jutalmak-coupon-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.92);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}
.jutalmak-coupon-dismiss:hover {
  background: #ef4444;
}
.jutalmak-coupon-card-wrap .jutalmak-coupon-card {
  padding-right: 28px;
}
.jutalmak-coupon-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(99, 102, 241, 0.18);
}
.jutalmak-coupon-card-mid { flex: 1; min-width: 0; }
.jutalmak-coupon-card-title { font-size: 13px; font-weight: 700; color: var(--text); }
.jutalmak-coupon-card-code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #a5b4fc; margin-top: 4px; word-break: break-all; }
.jutalmak-coupon-card-status { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.jutalmak-coupon-card-status--pending { color: #fbbf24; }

.jutalmak-coupon-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.jutalmak-coupon-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
}

.jutalmak-coupon-badge--pending {
  color: #fef3c7;
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(251, 191, 36, 0.35);
}

.jutalmak-coupon-badge--active {
  color: #d1fae5;
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(52, 211, 153, 0.35);
}

.jutalmak-coupon-badge--expired {
  color: #e2e8f0;
  background: rgba(100, 116, 139, 0.28);
  border-color: rgba(148, 163, 184, 0.35);
}

.jutalmak-coupon-vip-until {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.35;
}
.jutalmak-side-empty { font-size: 12px; color: var(--text-faint); margin: 0; padding: 4px 0; }

.win-result.mythic { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); color: #fecaca; }
.jutalmak-won-row--mythic { border-left: 3px solid #f87171; }

/* Admin ? Mai / havi c?lok */
.remnant-admin-goals-root-wrap { max-width: min(1480px, 98vw); margin: 0 auto; padding: 0 8px 28px; }
.remnant-admin-goals-layout { display: flex; flex-direction: column; gap: 14px; }
.remnant-admin-goals-head { margin-bottom: 4px; }
.remnant-admin-goals-help {
  background: rgba(18,18,22,0.75);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--text-dim);
  font-size: 13px;
}
.remnant-admin-goals-help summary { cursor: pointer; font-weight: 700; color: #e2e8f0; }
.remnant-admin-goals-metrics { margin: 10px 0 0; padding-left: 18px; line-height: 1.45; }
.remnant-admin-goals-metrics li { margin-bottom: 6px; }
.remnant-admin-goals-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.remnant-admin-goals-col--scroll {
  max-height: min(78vh, 980px);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}
@media (max-width: 1100px) {
  .remnant-admin-goals-cols { grid-template-columns: 1fr; }
  .remnant-admin-goals-col--scroll { max-height: none; overflow: visible; }
}
.remnant-admin-goals-col-title {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248,250,252,0.9);
  margin: 0 0 10px;
}
.remnant-admin-goals-panel {
  background: rgba(18,18,22,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 14px 16px;
  margin-bottom: 12px;
}
.remnant-admin-goals-panel--current {
  border: 1px solid rgba(74, 222, 128, 0.42);
  background:
    linear-gradient(180deg, rgba(34, 80, 52, 0.22) 0%, rgba(18, 18, 22, 0.92) 42%),
    rgba(18, 18, 22, 0.92);
  box-shadow: inset 3px 0 0 rgba(74, 222, 128, 0.75);
}
.remnant-admin-goals-panel--next {
  border: 1px dashed rgba(148, 163, 184, 0.38);
  background: rgba(12, 12, 16, 0.55);
  opacity: 0.92;
  box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.35);
}
.remnant-admin-goals-panel--next .remnant-admin-goals-h3 {
  color: rgba(226, 232, 240, 0.82);
}
.remnant-admin-goals-slot-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
}
.remnant-admin-goals-slot-tag--live {
  background: rgba(74, 222, 128, 0.2);
  color: #86efac;
  border: 1px solid rgba(74, 222, 128, 0.35);
}
.remnant-admin-goals-slot-tag--next {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.28);
}
.remnant-admin-goals-panel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.remnant-admin-goals-h3 {
  margin: 0 0 4px;
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.remnant-admin-goals-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}
.remnant-admin-goals-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.remnant-admin-goals-task {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,10,14,0.65);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.remnant-admin-goals-task-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.remnant-admin-goals-task-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.remnant-admin-goals-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.remnant-admin-goals-task-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 8px;
}
@media (max-width: 700px) {
  .remnant-admin-goals-task-grid { grid-template-columns: 1fr; }
}
.remnant-admin-goals-period-xp { max-width: 220px; margin-top: 6px; }
.remnant-admin-goals-ropts-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.remnant-admin-goals-ropts-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
}
.remnant-admin-goals-ropt {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.remnant-admin-goals-reward-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,10,14,0.55);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
.remnant-admin-goals-reward-card--pupak {
  border-color: rgba(74, 222, 128, 0.28);
  background: rgba(20, 40, 28, 0.45);
}
.remnant-admin-goals-reward-title {
  font-size: 13px;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.remnant-admin-goals-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(148,163,184,0.18);
  color: #cbd5e1;
}
.remnant-admin-goals-badge--live {
  background: rgba(74, 222, 128, 0.18);
  color: #86efac;
}
.remnant-admin-goals-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}

.remnant-rew-preview--img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.remnant-rew-key-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}
.remnant-rew-key-img--spin {
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.45));
}
.remnant-rew-spin-key-fallback {
  font-size: 28px;
  line-height: 1;
  filter:
    hue-rotate(200deg)
    saturate(2.8)
    brightness(1.05)
    drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}
.jutalmak-won-grid-ico .remnant-rew-preview,
.jutalmak-won-ico .remnant-rew-preview {
  min-height: 0;
}
.jutalmak-won-ico .remnant-rew-preview--minta,
.jutalmak-won-ico .remnant-rew-preview--anim {
  font-size: 12px;
  max-width: 72px;
  overflow: hidden;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.jutalmak-won-ico .remnant-name-anim-wave .remnant-name-wave-ch {
  animation-name: remnant-name-wave-ch-wonlist !important;
}
@keyframes remnant-name-wave-ch-wonlist {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  35% {
    transform: translateY(-3px) scaleY(1.02);
  }
  55% {
    transform: translateY(1px) scaleY(0.99);
  }
}
.jutalmak-won-ico .remnant-rew-preview--badge-banner {
  width: 72px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  max-width: 72px;
  padding: 0;
}
.jutalmak-won-ico .remnant-rew-preview--badge-banner img,
.jutalmak-won-ico .remnant-badge-banner-img,
.jutalmak-won-ico .remnant-badge-banner-img--preview {
  width: 72px;
  height: 40px;
  max-height: 40px;
  object-fit: contain;
}
.jutalmak-won-ico .remnant-rew-preview--badge {
  width: 40px;
  height: 40px;
}
.jutalmak-won-ico .remnant-rew-badge-ico,
.jutalmak-won-ico .remnant-rew-badge-ico svg,
.jutalmak-won-ico .remnant-badge-svg {
  width: 36px !important;
  height: 36px !important;
}
.jutalmak-won-grid-ico .remnant-rew-coin-img,
.jutalmak-won-grid-ico .remnant-rew-key-img,
.jutalmak-won-ico .remnant-rew-coin-img,
.jutalmak-won-ico .remnant-rew-key-img {
  width: 28px;
  height: 28px;
}
.win-result-ico {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 8px;
  line-height: 0;
}
.win-result-ico .remnant-rew-coin-img,
.win-result-ico .remnant-rew-key-img {
  width: 28px;
  height: 28px;
}
.win-result-txt {
  vertical-align: middle;
}
.remnant-admin-rew-legendary-odds {
  margin-top: 18px;
  padding: 14px 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: linear-gradient(180deg, rgba(40, 28, 12, 0.55), rgba(14, 16, 24, 0.72));
}
.remnant-admin-rew-legendary-odds-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.remnant-admin-rew-legendary-odds-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.25));
}
.remnant-admin-rew-legendary-odds-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: #fde68a;
}
.remnant-admin-rew-legendary-odds-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}
.remnant-admin-rew-legendary-odds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 12px;
}
.remnant-admin-rew-legendary-odds-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.remnant-admin-rew-legendary-odds-row .remnant-admin-rew-pct-input {
  width: 72px;
  max-width: 72px;
}

.dashboard-page .dashboard-goal--empty {
  opacity: 0.72;
}
.dashboard-page .dashboard-goal--empty .dashboard-goal-text {
  color: var(--text-dim);
  font-style: italic;
}
.dashboard-page .dashboard-reward-claim--ready:not(:disabled) {
  opacity: 1;
  cursor: pointer;
  border-color: rgba(74, 222, 128, 0.45);
  color: #86efac;
}
.dashboard-page .dashboard-reward-claim--claimed {
  opacity: 0.55;
}
.dashboard-page .dashboard-goals-monthly-xp {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

/* Admin ? Jutalom kezel?s */
.remnant-admin-rewards-root-wrap { max-width: min(1400px, 98vw); margin: 0 auto; padding: 0 8px 24px; }
.remnant-admin-rew-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .remnant-admin-rew-layout { grid-template-columns: 1fr; } }
.remnant-admin-rew-main { min-width: 0; }
.remnant-admin-rew-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.remnant-admin-rew-h1 { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 0.06em; margin: 0 0 6px; color: #fff; }
.remnant-admin-rew-sub { margin: 0; font-size: 13px; color: var(--text-dim); max-width: 560px; line-height: 1.45; }
.remnant-admin-rew-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.remnant-admin-rew-rarity { background: rgba(18,18,22,0.85); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px 12px 14px; margin-bottom: 12px; }
.remnant-admin-rew-rarity-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.remnant-admin-rew-rarity-fold {
  margin-left: auto;
  flex-shrink: 0;
  width: 34px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 12, 16, 0.75);
  color: rgba(248, 250, 252, 0.88);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.remnant-admin-rew-rarity-fold:hover {
  background: rgba(30, 30, 40, 0.95);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.remnant-admin-rew-rarity--collapsed .remnant-admin-rew-grid {
  display: none;
}
.remnant-admin-rew-rarity--collapsed .remnant-admin-rew-rarity-head {
  margin-bottom: 0;
}
.remnant-admin-rew-rarity-name { font-weight: 800; font-size: 12px; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; }
.remnant-admin-rew-rarity--common { color: #cbd5e1; background: rgba(148,163,184,0.15); }
.remnant-admin-rew-rarity--rare { color: #93c5fd; background: rgba(59,130,246,0.15); }
.remnant-admin-rew-rarity--epic { color: #e9d5ff; background: rgba(168,85,247,0.18); }
.remnant-admin-rew-rarity--legendary { color: #fde68a; background: rgba(234,179,8,0.15); }
.remnant-admin-rew-rarity--mythic { color: #fecaca; background: rgba(239,68,68,0.15); }
.remnant-admin-rew-pct-label { font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
.remnant-admin-rew-pct-input { width: 72px; padding: 4px 8px; font-size: 13px; }
.remnant-admin-rew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.remnant-admin-rew-card {
  position: relative;
  border-radius: 10px;
  padding: 10px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(15,15,20,0.9);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 108px;
}
.remnant-admin-rew-card--off { opacity: 0.55; }
.remnant-admin-rew-card-ico { font-size: 26px; text-align: center; }
.remnant-admin-rew-card-title { font-size: 11px; font-weight: 700; text-align: center; color: #f1f5f9; line-height: 1.2; }
.remnant-admin-rew-card-sub { font-size: 10px; text-align: center; color: var(--text-faint); }
.remnant-admin-rew-dot { font-size: 10px; color: var(--text-faint); }
.remnant-admin-rew-dot--on { color: #4ade80; }
.remnant-admin-rew-card-menu {
  position: absolute;
  top: 4px;
  right: 4px;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
}
.remnant-admin-rew-side {
  position: sticky;
  top: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(12,12,18,0.95);
  overflow: hidden;
}
.remnant-admin-rew-side-inner { padding: 14px; }
.remnant-admin-rew-side-hero { font-size: 56px; text-align: center; line-height: 1; margin-bottom: 8px; }
.remnant-admin-rew-side-rpill {
  display: inline-block;
  margin: 0 auto 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: rgba(234,179,8,0.15);
  color: #fde68a;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.remnant-admin-rew-side-title { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: #fff; }
.remnant-admin-rew-side-h { margin: 10px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: #cbd5e1; }
.remnant-admin-rew-hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 12px 0; }
.remnant-admin-rew-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 8px; }
.remnant-admin-rew-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #9333ea, #6366f1); border-radius: 999px; }
.remnant-admin-rew-audit-block { padding: 0 14px 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.remnant-admin-rew-audit-list { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; margin-bottom: 8px; }
.remnant-admin-rew-audit-row { display: flex; gap: 10px; align-items: flex-start; }
.remnant-admin-rew-audit-av {
  width: 34px; height: 34px; border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.remnant-admin-rew-audit-mid { flex: 1; min-width: 0; font-size: 12px; color: var(--text); line-height: 1.4; }
.remnant-admin-rew-audit-role { font-size: 10px; color: #a78bfa; margin-left: 4px; }
.remnant-admin-rew-audit-msg { color: var(--text-dim); margin-top: 4px; }
.remnant-admin-rew-audit-time { font-size: 10px; color: var(--text-faint); margin-top: 4px; }
.remnant-admin-pubcoupon-gen-block,
.remnant-admin-pubcoupon-list-block {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.remnant-admin-pubcoupon-gen-block {
  color-scheme: dark;
}
.remnant-admin-pubcoupon-gen-block .remnant-admin-rew-modal-label {
  color: #d8ccf0;
  font-weight: 600;
}
.remnant-admin-pubcoupon-gen-block .glass-input,
.remnant-admin-pubcoupon-gen-block .remnant-admin-rew-select {
  width: 100%;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.remnant-admin-pubcoupon-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-height: 36px;
  padding: 0 34px 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(168, 85, 247, 0.38);
  background-color: rgba(8, 6, 18, 0.96);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c4b5fd' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  color: #f5f0ff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.remnant-admin-pubcoupon-select:hover {
  border-color: rgba(168, 85, 247, 0.55);
  background-color: rgba(14, 10, 26, 0.98);
  color: #fff;
}
.remnant-admin-pubcoupon-select:focus {
  outline: none;
  border-color: rgba(192, 132, 252, 0.75);
  box-shadow:
    0 0 0 2px rgba(168, 85, 247, 0.22),
    0 0 14px rgba(168, 85, 247, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #fff;
}
.remnant-admin-pubcoupon-gen-block .remnant-admin-pubcoupon-select option,
.remnant-admin-pubcoupon-time-pop .remnant-admin-pubcoupon-select option {
  background: #120e1f;
  color: #f5f0ff;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 10px;
}
.remnant-admin-pubcoupon-gen-block .remnant-admin-pubcoupon-select option:checked,
.remnant-admin-pubcoupon-gen-block .remnant-admin-pubcoupon-select option:hover,
.remnant-admin-pubcoupon-time-pop .remnant-admin-pubcoupon-select option:checked,
.remnant-admin-pubcoupon-time-pop .remnant-admin-pubcoupon-select option:hover {
  background: #2a1a42;
  color: #fff;
}
.remnant-admin-pubcoupon-gen-block select.remnant-admin-pubcoupon-select.glass-input:focus,
.remnant-admin-pubcoupon-time-pop select.remnant-admin-pubcoupon-select.glass-input:focus {
  border-color: rgba(192, 132, 252, 0.75);
  box-shadow:
    0 0 0 2px rgba(168, 85, 247, 0.22),
    0 0 14px rgba(168, 85, 247, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.remnant-admin-pubcoupon-datetime-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.remnant-admin-pubcoupon-datetime-row .glass-input {
  width: 100%;
  margin-bottom: 0;
}
.remnant-admin-pubcoupon-time-field {
  position: relative;
  min-width: 0;
}
.remnant-admin-pubcoupon-time-trigger {
  width: 100%;
  margin-bottom: 0;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}
.remnant-admin-pubcoupon-time-pop {
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: rgba(12, 10, 22, 0.98);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  color-scheme: dark;
}
.remnant-admin-pubcoupon-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.remnant-admin-pubcoupon-time-row:last-child {
  margin-bottom: 0;
}
.remnant-admin-pubcoupon-time-lbl {
  flex: 0 0 32px;
  font-size: 11px;
  font-weight: 600;
  color: #d8ccf0;
}
.remnant-admin-pubcoupon-time-sel {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
}
.remnant-admin-pubcoupon-date-field {
  position: relative;
  min-width: 0;
}
.remnant-admin-pubcoupon-date-trigger {
  width: 100%;
  margin-bottom: 0;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.remnant-admin-pubcoupon-cal {
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  min-width: 252px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: rgba(12, 10, 22, 0.98);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
.remnant-admin-pubcoupon-cal-today {
  width: 100%;
  margin: 0 0 8px;
  padding: 5px 8px;
  font-size: 11px;
}
.remnant-admin-pubcoupon-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.remnant-admin-pubcoupon-cal-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e8e4f0);
  text-transform: capitalize;
}
.remnant-admin-pubcoupon-cal-nav {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #e8e4f0);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.remnant-admin-pubcoupon-cal-nav:hover {
  background: rgba(168, 85, 247, 0.25);
}
.remnant-admin-pubcoupon-cal-wd,
.remnant-admin-pubcoupon-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
}
.remnant-admin-pubcoupon-cal-wd {
  margin-bottom: 4px;
}
.remnant-admin-pubcoupon-cal-wd-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint, #9a8fb8);
  padding: 0;
  text-align: center;
}
.remnant-admin-pubcoupon-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text, #e8e4f0);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
}
.remnant-admin-pubcoupon-cal-day:hover {
  background: rgba(168, 85, 247, 0.2);
}
.remnant-admin-pubcoupon-cal-day--muted {
  color: var(--text-faint, #6b6280);
  opacity: 0.75;
}
.remnant-admin-pubcoupon-cal-day--today {
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.65);
}
.remnant-admin-pubcoupon-cal-day--sel {
  background: rgba(168, 85, 247, 0.55);
  color: #fff;
  font-weight: 600;
}
.remnant-admin-pubcoupon-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}
.remnant-admin-pubcoupon-slot {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(168,85,247,0.35);
  background: rgba(15,12,28,0.75);
}
.remnant-admin-pubcoupon-slot--off {
  opacity: 0.55;
  border-color: rgba(255,255,255,0.12);
}
.remnant-admin-pubcoupon-slot-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.remnant-admin-pubcoupon-slot-top-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.remnant-admin-pubcoupon-slot-del {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim, #c4b8e0);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.remnant-admin-pubcoupon-slot-del:hover {
  background: rgba(239, 68, 68, 0.35);
  color: #fff;
}
.remnant-admin-pubcoupon-kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #c4b5fd;
  text-transform: uppercase;
}
.remnant-admin-pubcoupon-badge-off {
  font-size: 10px;
  color: #f87171;
  font-weight: 700;
}
.remnant-admin-pubcoupon-code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  word-break: break-all;
}
.remnant-admin-pubcoupon-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.remnant-admin-pubcoupon-meta strong {
  display: block;
  color: #e2e8f0;
  font-size: 12px;
  margin-top: 2px;
}
.remnant-admin-rew-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.remnant-admin-rew-modal[hidden] { display: none !important; }
.remnant-admin-rew-modal-card {
  position: relative;
  overflow: visible;
  width: min(520px, 100%);
  background: #12121a;
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}
.remnant-admin-rew-modal-card h3 { margin: 0 0 12px; font-size: 16px; }
.remnant-admin-rew-modal-label { display: block; font-size: 11px; color: var(--text-faint); margin: 10px 0 4px; }
.remnant-admin-rew-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Jutalom kezel?s ? s?t?t, j?l olvashat? nat?v select (modal) */
.remnant-admin-rew-modal-card select.remnant-admin-rew-select {
  --rew-sel-bg: rgba(10, 10, 16, 0.98);
  --rew-sel-bg-hover: rgba(18, 18, 28, 0.99);
  --rew-sel-border: rgba(148, 163, 184, 0.32);
  --rew-sel-text: #f1f5f9;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  background-color: var(--rew-sel-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  border: 1px solid var(--rew-sel-border);
  border-radius: 10px;
  color: var(--rew-sel-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  padding: 11px 40px 11px 14px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.remnant-admin-rew-modal-card select.remnant-admin-rew-select:hover {
  background-color: var(--rew-sel-bg-hover);
  border-color: rgba(167, 139, 250, 0.42);
}

.remnant-admin-rew-modal-card select.remnant-admin-rew-select:focus {
  outline: none;
  border-color: rgba(129, 140, 248, 0.85);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.28);
}

.remnant-admin-rew-modal-card select.remnant-admin-rew-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.remnant-admin-rew-modal-card select.remnant-admin-rew-select::-ms-expand {
  display: none;
}

.remnant-admin-rew-modal-card select.remnant-admin-rew-select option {
  background-color: #0a0a10;
  color: #e8ecf4;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 12px;
}

.remnant-admin-rew-modal-card select.remnant-admin-rew-select option:checked {
  background-color: #1e1b2e;
  color: #f8fafc;
}

/* ???????????????????????????????????????????????????????????????
   PROFILE ? Steam-style showcase visual pass (layout/CSS only)
   Cyan-forward glass, compact strips & vitrines, no logic changes
   ??????????????????????????????????????????????????????????????? */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) {
  /* Fix lift ? ne n?j?n vh-val fullscreenn?l (k?l?nben hero+streak felcs?szik) */
  --profile-content-lift: 160px;
  --remnant-hud-xp-pct: 0;
  --remnant-hud-level: 0;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner),
#remnant-profile-edit-pane {
  --p-showcase-border: rgba(0, 229, 255, 0.14);
  --p-showcase-border-hover: rgba(0, 229, 255, 0.32);
  --p-showcase-glow: rgba(0, 229, 255, 0.12);
  --p-surface-0: linear-gradient(165deg, rgba(14, 18, 32, 0.92) 0%, rgba(6, 9, 18, 0.96) 100%);
  --p-surface-1: linear-gradient(180deg, rgba(10, 14, 26, 0.88), rgba(4, 7, 14, 0.94));
  --p-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Deeper backdrop behind panes */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .remnant-profile-theme-layer {
  opacity: 0.88 !important;
  filter: saturate(1.02) brightness(0.92) !important;
}

#page-profile.active :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-banner,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-banner {
  display: block !important;
  flex-shrink: 0;
  border-radius: 0 !important;
  min-height: 180px !important;
  max-height: 280px !important;
  box-shadow: inset 0 -1px 0 rgba(0, 229, 255, 0.08);
  background-color: rgba(5, 8, 16, 0.75);
}

/* Felt?lt?tt banner: szigor? 5:1 (mint a k?pszerkeszt?), ne torz?tson a min-height */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-banner.profile-banner--has-image {
  aspect-ratio: 5 / 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
}

#remnant-profile-edit-pane .profile-banner.profile-banner--has-image {
  aspect-ratio: 5 / 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
}

/* Teljes k?perny?s h?tt?r ? szerkeszt? panel: nincs dekorat?v topblock (csak ?rlapok) */
#remnant-profile-edit-pane > .profile-banner,
#remnant-profile-edit-pane > #remnant-profile-edit-banner-top {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
  background: none !important;
}
#remnant-profile-edit-pane::before,
#remnant-profile-edit-pane::after,
#remnant-profile-edit-pane.profile-topblock-full::before,
#remnant-profile-edit-pane.profile-topblock-side::before,
#remnant-profile-edit-pane.profile-topblock-side::after {
  display: none !important;
  content: none !important;
}
#remnant-profile-edit-pane .remnant-profile-topblock-video {
  display: none !important;
}
#remnant-profile-edit-pane.profile-topblock-full-has-image,
#remnant-profile-edit-pane.profile-topblock-full,
#remnant-profile-edit-pane.profile-topblock-side {
  background: linear-gradient(180deg, rgba(7, 10, 19, 0.84), rgba(4, 7, 14, 0.88)) !important;
  box-shadow: 0 24px 60px rgba(1, 3, 10, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#remnant-profile-edit-pane .profile-edit-wrap {
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
}

/* Tartalom (profile-main) egy?tt cs?szik felfel? a banner alj?ra ? banner + t?ma h?tt?rr?teg helyben marad */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-main {
  margin-top: calc(-1 * var(--profile-content-lift)) !important;
  position: relative;
  z-index: 2;
  padding-top: 6px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero {
  margin-bottom: 10px !important;
  padding: 18px 18px 16px !important;
  border-radius: 14px !important;
  border: 1px solid var(--p-showcase-border) !important;
  background: var(--p-surface-0) !important;
  box-shadow:
    var(--p-inset),
    0 20px 48px rgba(0, 0, 0, 0.55),
    0 0 40px var(--p-showcase-glow) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar-area {
  align-items: center !important;
  gap: 16px !important;
}

/* Csak az avat?r keret ny?lhat t?l ? a hero/area overflow a cinematic szab?lyn?l marad */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar.profile-avatar-has-frame {
  overflow: visible;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-avatar {
  width: clamp(120px, 14vw, 168px) !important;
  height: clamp(120px, 14vw, 168px) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 229, 255, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 12px 36px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(0, 229, 255, 0.15) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-username {
  font-size: clamp(28px, 2.6vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 18px rgba(0, 229, 255, 0.12), 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-rank {
  color: rgba(186, 230, 253, 0.88) !important;
  text-shadow: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-wrap {
  max-width: min(440px, 100%) !important;
  margin-top: 8px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-bg {
  height: 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 229, 255, 0.22) !important;
  background: linear-gradient(180deg, rgba(8, 12, 22, 0.95), rgba(4, 7, 14, 0.98)) !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info .xp-bar-fill {
  border-radius: 999px !important;
  box-shadow:
    0 0 12px rgba(0, 229, 255, 0.45),
    0 0 22px rgba(77, 143, 255, 0.25) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions {
  align-self: center !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions .glass-btn {
  border-radius: 10px !important;
  border: 1px solid rgba(0, 229, 255, 0.22) !important;
  background: linear-gradient(180deg, rgba(16, 22, 40, 0.9), rgba(8, 12, 22, 0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 18px rgba(0, 229, 255, 0.08) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions .glass-btn:hover {
  border-color: rgba(0, 229, 255, 0.42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 22px rgba(0, 229, 255, 0.18) !important;
}

/* Compact stat strip (Toplista / Streak / J?t?kid? / Bar?tok) */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row {
  margin: 0 0 12px !important;
  padding: 4px 6px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-radius: 12px !important;
  border: 1px solid var(--p-showcase-border) !important;
  background: var(--p-surface-1) !important;
  box-shadow: var(--p-inset), 0 10px 28px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat {
  min-height: 0 !important;
  padding: 10px 8px 8px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat:last-child {
  border-right: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat-value {
  font-size: clamp(17px, 1.5vw, 22px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stat-label {
  margin-top: 4px !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(214, 224, 252, 0.45) !important;
}

/* Badges + social ? compact showcase strip */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-row {
  margin-bottom: 12px !important;
  gap: 12px !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-card {
  padding: 10px 12px !important;
  gap: 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--p-showcase-border) !important;
  background: var(--p-surface-0) !important;
  box-shadow: var(--p-inset), 0 12px 32px rgba(0, 0, 0, 0.48) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-divider {
  background: linear-gradient(180deg, transparent, rgba(0, 229, 255, 0.2), transparent) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-card .section-title {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 6px !important;
  color: rgba(214, 224, 252, 0.5) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-row #remnant-profile-about-card {
  border-radius: 12px !important;
  border: 1px solid var(--p-showcase-border) !important;
  background: var(--p-surface-0) !important;
  box-shadow: var(--p-inset), 0 12px 32px rgba(0, 0, 0, 0.48) !important;
  padding: 10px 12px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-side-title {
  font-size: 10px !important;
  letter-spacing: 0.11em !important;
  margin-bottom: 8px !important;
  color: rgba(214, 224, 252, 0.52) !important;
}

/* Main + right column rhythm */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-layout {
  gap: 12px !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col {
  gap: 10px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .remnant-profile-showcase-ordered-stack {
  gap: 10px !important;
}

/* Showcase / vitrine cards */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card {
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--p-showcase-border) !important;
  background: var(--p-surface-0) !important;
  box-shadow: var(--p-inset), 0 14px 36px rgba(0, 0, 0, 0.5) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-card:hover {
  border-color: var(--p-showcase-border-hover) !important;
  box-shadow:
    var(--p-inset),
    0 16px 40px rgba(0, 0, 0, 0.52),
    0 0 28px var(--p-showcase-glow) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-title {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 6px !important;
  color: rgba(214, 224, 252, 0.48) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-showcase-items-card {
  min-height: 0 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-stat-num {
  font-size: 28px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-showcase-stat-text {
  font-size: 11px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-showcase-row {
  align-items: center !important;
  gap: 10px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-showcase-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-showcase-head .profile-showcase-title {
  margin-bottom: 0 !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-showcase-head .profile-showcase-stat {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-showcase-head .profile-showcase-stat-num {
  font-size: 18px !important;
  line-height: 1 !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-showcase-head .profile-showcase-stat-text {
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

/* Item vitrine slots ? 5 equal columns, fill card width without overflow */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-slot-row,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-equipped-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  justify-content: stretch !important;
  width: 100% !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-slot,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-equipped-slot {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 10px !important;
  font-size: clamp(14px, 2.2vw, 22px) !important;
  box-sizing: border-box !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-slot:not(.has-item),
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-equipped-slot:not(.has-item) {
  border: 1px dashed rgba(0, 229, 255, 0.14) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.12)) !important;
  color: rgba(214, 224, 252, 0.28) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-slot.has-item,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-equipped-slot.has-item {
  border: 1px solid rgba(0, 229, 255, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 0 20px rgba(0, 229, 255, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.35) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-slot:hover {
  border-color: rgba(0, 229, 255, 0.45) !important;
  background-color: rgba(0, 229, 255, 0.06) !important;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.14) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-items-slot-fill {
  font-size: 28px !important;
}

/* Achievement vitrine tiles */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-achv-row {
  gap: 6px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-achv-slot,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-achv-slot--empty {
  border-radius: 10px !important;
  border: 1px solid rgba(0, 229, 255, 0.12) !important;
  background: linear-gradient(180deg, rgba(12, 16, 28, 0.75), rgba(6, 9, 16, 0.82)) !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-achv-slot:hover {
  border-color: rgba(0, 229, 255, 0.32) !important;
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.1) !important;
}

/* Right column ? compact stat list */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col .profile-showcase-card {
  padding: 8px 10px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-side-kv {
  padding: 5px 0 !important;
  font-size: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-side-kv:last-child {
  border-bottom: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-side-kv .k {
  color: rgba(214, 224, 252, 0.48) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-side-kv .v {
  font-weight: 700 !important;
  color: rgba(232, 240, 255, 0.92) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-team-card .profile-mini-group {
  padding: 4px 0 !important;
}

/* Info box vitrine */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-box-head {
  border-radius: 8px 8px 0 0 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-box-frame {
  border-radius: 0 0 8px 8px !important;
  border: 1px solid rgba(0, 229, 255, 0.1) !important;
}

/* Neutralize older bundled purple glow on these surfaces */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-badges-social-card,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-row #remnant-profile-about-card {
  border: 1px solid var(--p-showcase-border) !important;
  background: var(--p-surface-1) !important;
  box-shadow: var(--p-inset), 0 10px 28px rgba(0, 0, 0, 0.42) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-stats-row {
  background: var(--p-surface-1) !important;
}

/* Remove duplicate heavy ::before sheen on hero row if present */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero::before {
  opacity: 0.55 !important;
}

/* ??? Profile edit pane ? unified chrome typography ??? */
#remnant-profile-edit-pane .profile-edit-wrap {
  padding: 0 clamp(14px, 2vw, 22px) 18px !important;
}

#remnant-profile-edit-pane .profile-edit-header {
  margin-bottom: 14px !important;
}

#remnant-profile-edit-pane .profile-edit-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: rgba(248, 252, 255, 0.98) !important;
  text-transform: uppercase;
  text-shadow: none !important;
}

#remnant-profile-edit-pane .profile-edit-sub {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(138, 155, 183, 0.82) !important;
  margin-top: 7px !important;
  max-width: 72ch !important;
}

#remnant-profile-edit-pane .profile-edit-feed-bar {
  margin: 0 0 18px !important;
  padding: 0 0 14px !important;
  gap: 6px 8px !important;
  border-bottom: 1px solid rgba(60, 110, 175, 0.22) !important;
}

#remnant-profile-edit-pane .profile-edit-feed-tab {
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
  padding: 8px 12px !important;
  border-radius: 8px;
  color: rgba(138, 155, 183, 0.78) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

#remnant-profile-edit-pane .profile-edit-feed-tab:hover {
  color: rgba(210, 222, 245, 0.94) !important;
  background: rgba(12, 22, 42, 0.38) !important;
}

#remnant-profile-edit-pane .profile-edit-feed-tab.active {
  color: rgba(248, 252, 255, 0.98) !important;
  background: rgba(20, 125, 255, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(26, 140, 255, 0.34) !important;
}

#remnant-profile-edit-pane .profile-edit-feed-tab:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 1px rgba(26, 140, 255, 0.45), 0 0 0 3px rgba(20, 125, 255, 0.1) !important;
}

#remnant-profile-edit-pane .profile-edit-feed-sep {
  color: rgba(60, 100, 155, 0.32) !important;
  font-weight: 400;
  user-select: none;
}

/* Profile edit ? global chrome buttons (all tabs) */
#remnant-profile-edit-pane #remnant-profile-edit-close-top,
#remnant-profile-edit-pane #remnant-profile-edit-cancel {
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(100, 115, 140, 0.3) !important;
  background: linear-gradient(180deg, rgba(14, 18, 28, 0.92), rgba(9, 12, 22, 0.96)) !important;
  color: rgba(190, 200, 220, 0.86) !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: none !important;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
#remnant-profile-edit-pane #remnant-profile-edit-close-top:hover,
#remnant-profile-edit-pane #remnant-profile-edit-cancel:hover {
  border-color: rgba(130, 145, 170, 0.42) !important;
  background: linear-gradient(180deg, rgba(18, 24, 38, 0.96), rgba(12, 16, 28, 0.98)) !important;
  color: rgba(220, 228, 245, 0.94) !important;
}

#remnant-profile-edit-pane #remnant-profile-edit-save,
#remnant-profile-edit-pane #remnant-shop-open-btn {
  min-height: 38px !important;
  padding: 0 18px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(26, 140, 255, 0.5) !important;
  background: linear-gradient(180deg, #1a7ae8, #1468cc) !important;
  color: #fff !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: 0 4px 16px rgba(20, 104, 204, 0.28) !important;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
#remnant-profile-edit-pane #remnant-profile-edit-save:hover,
#remnant-profile-edit-pane #remnant-shop-open-btn:hover {
  background: linear-gradient(180deg, #2088ff, #1872e0) !important;
  box-shadow: 0 6px 20px rgba(20, 104, 204, 0.34) !important;
}
#remnant-profile-edit-pane #remnant-profile-edit-save:active,
#remnant-profile-edit-pane #remnant-shop-open-btn:active {
  background: linear-gradient(180deg, #1468cc, #1158ad) !important;
}

#remnant-profile-edit-pane .profile-edit-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(60, 100, 155, 0.16);
  gap: 8px;
}

#remnant-profile-edit-pane .profile-edit-card,
#remnant-profile-edit-pane .profile-edit-about-preview-card,
#remnant-profile-edit-pane .profile-edit-showcase-preview-card {
  border-radius: 12px !important;
  border: 1px solid rgba(0, 229, 255, 0.14) !important;
  background: linear-gradient(165deg, rgba(14, 18, 32, 0.9), rgba(6, 9, 18, 0.95)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 32px rgba(0, 0, 0, 0.45) !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
}

#remnant-profile-edit-pane .profile-edit-card:hover:not(.profile-edit-standing-card),
#remnant-profile-edit-pane .profile-edit-about-preview-card:hover,
#remnant-profile-edit-pane .profile-edit-showcase-preview-card:hover {
  border-color: rgba(0, 229, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 36px rgba(0, 0, 0, 0.48),
    0 0 24px rgba(0, 229, 255, 0.08) !important;
}

#remnant-profile-edit-pane .profile-edit-grid {
  gap: 12px !important;
}

/* K?t egybef?gg? blokk: (1) cinematic banner + hero + integr?lt stat-s?v, (2) jelv?nyek+social */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-main {
  padding-top: 4px !important;
}

/* Hero r?fut a banner als? r?sz?re ? egy ?sszef?gg? ?jelenet? */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero--cinematic-banner {
  position: relative !important;
  z-index: 2 !important;
  margin: -28px 0 10px !important;
  border: none !important;
  border-radius: 12px !important;
  background: linear-gradient(
    180deg,
    rgba(5, 9, 18, 0.74) 0%,
    rgba(6, 10, 20, 0.9) 42%,
    rgba(4, 7, 14, 0.95) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 40px rgba(0, 0, 0, 0.52) !important;
  backdrop-filter: blur(14px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.04) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-avatar-area {
  padding: 18px 14px 8px !important;
}

/* Vastag keret overhang: ablakm?rettel egy?tt n? ? ne l?gjon a banner / topbar fel? */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-avatar-area:has(.profile-avatar-has-frame) {
  --avatar-frame-box: 164px;
  --avatar-frame-overhang: max(
    0px,
    calc((var(--avatar-frame-box) / var(--avatar-frame-inner-ratio, 0.907) - var(--avatar-frame-box)) / 2)
  );
  padding-top: calc(12px + var(--avatar-frame-overhang)) !important;
  padding-left: calc(10px + var(--avatar-frame-overhang)) !important;
  padding-right: calc(10px + var(--avatar-frame-overhang)) !important;
  padding-bottom: calc(8px + var(--avatar-frame-overhang) * 0.4) !important;
  box-sizing: border-box;
}

/* Egy sor: avatar + n?v/rang + gombok */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-avatar-area--hud-split {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto !important;
  gap: 0 16px !important;
  align-items: center !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-avatar-area--hud-split .profile-avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  width: clamp(100px, 9.2vw, 130px) !important;
  height: clamp(100px, 9.2vw, 130px) !important;
  border-radius: 11px !important;
  border: 1px solid rgba(120, 165, 210, 0.3) !important;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  animation: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-avatar::after {
  display: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-avatar-area--hud-split .profile-info {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  padding-bottom: 0 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-info .xp-bar-wrap {
  display: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username {
  display: inline !important;
  font-size: clamp(28px, 2.75vw, 44px) !important;
  margin-right: 8px !important;
  vertical-align: baseline !important;
}

/* Megjelen?tett n?v st?lusok a hero HUD-ban ? az alap text-shadow fel?l?rn? a preseteket */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-style-neon_cyan {
  color: #00f0ff !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-shadow:
    0 0 6px rgba(0, 240, 255, 0.95),
    0 0 18px rgba(0, 200, 255, 0.75),
    0 0 42px rgba(0, 140, 255, 0.45),
    0 0 70px rgba(0, 100, 255, 0.22) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-style-gold {
  color: #ffe08a !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-shadow:
    0 1px 0 #8a5a00,
    0 2px 0 rgba(90, 50, 0, 0.55),
    0 0 12px rgba(255, 190, 60, 0.65),
    0 0 28px rgba(255, 140, 0, 0.4),
    0 0 48px rgba(200, 90, 0, 0.22) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-style-silver_outline {
  color: #0b0e16 !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-shadow:
    -1.5px -1.5px 0 #dfe6f8,
    1.5px -1.5px 0 #dfe6f8,
    -1.5px 1.5px 0 #dfe6f8,
    1.5px 1.5px 0 #dfe6f8,
    0 0 10px rgba(220, 230, 255, 0.55),
    0 0 22px rgba(160, 180, 220, 0.28) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-style-ember {
  color: #ff4a1a !important;
  font-weight: 800 !important;
  text-shadow:
    0 0 4px rgba(255, 220, 120, 0.9),
    0 0 14px rgba(255, 90, 20, 0.85),
    0 0 32px rgba(255, 40, 0, 0.55),
    0 0 56px rgba(180, 0, 0, 0.35),
    0 2px 0 rgba(80, 10, 0, 0.65) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-style-ice {
  color: #eaf9ff !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-shadow:
    0 0 1px #fff,
    0 0 8px rgba(180, 230, 255, 0.95),
    0 0 18px rgba(100, 190, 255, 0.7),
    0 0 36px rgba(40, 140, 255, 0.4),
    0 1px 0 rgba(120, 190, 255, 0.85) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-style-toxic {
  color: #b8ff00 !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-shadow:
    0 0 6px rgba(200, 255, 40, 0.95),
    0 0 16px rgba(120, 255, 0, 0.7),
    0 0 34px rgba(60, 200, 20, 0.45),
    0 0 52px rgba(20, 120, 0, 0.28),
    0 0 2px rgba(0, 40, 0, 0.8) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-style-magenta_glow {
  color: #ff2ec8 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-shadow:
    0 0 6px rgba(255, 120, 230, 0.95),
    0 0 18px rgba(255, 40, 200, 0.75),
    0 0 38px rgba(180, 0, 160, 0.5),
    0 0 64px rgba(120, 0, 180, 0.3) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-style-aurora {
  font-weight: 800 !important;
  filter: drop-shadow(0 0 10px rgba(160, 80, 255, 0.35));
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-style-chrome {
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-style-aurora,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-style-chrome,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-visual-gradient {
  text-shadow: none !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username:not([class*="remnant-name-style-"]):not(.remnant-name-visual-gradient):not(.remnant-name-custom-visual) {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) :is(.profile-top-hero,.remnant-profile-hero) .profile-username.remnant-name-custom-visual {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-player-tag:not([hidden]) {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-top: 0 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-rank {
  margin-top: 3px !important;
  font-size: 12px !important;
  letter-spacing: 0.03em !important;
  color: rgba(186, 208, 236, 0.76) !important;
  text-shadow: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-avatar-area--hud-split .profile-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  align-self: start !important;
  padding-bottom: 0 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) #remnant-profile-edit-open {
  padding: 5px 11px !important;
  min-height: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(8, 12, 24, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-actions .glass-btn.btn-primary.btn-sm {
  padding: 4px 9px !important;
  min-height: 0 !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  opacity: 0.95;
}

/* Banner als? integr?lt info-s?v (Steam-szer?, nem k?l?n widget) */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-integrated-strip {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  min-height: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.055) !important;
  background: rgba(0, 0, 0, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-integrated-strip .profile-stats-row--inline-hud {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-integrated-strip .profile-stats-row--inline-hud::before,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-integrated-strip .profile-stats-row--inline-hud::after {
  display: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-integrated-strip .profile-stat {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 5px 6px 7px !important;
  margin: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.055) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-integrated-strip .profile-stat:last-of-type {
  border-right: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-integrated-strip .profile-stat::before {
  display: none !important;
  content: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-integrated-strip .profile-stat-value {
  text-shadow: none !important;
  font-size: 15px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-integrated-strip .profile-stat-label {
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(198, 214, 240, 0.4) !important;
  margin-top: 2px !important;
}

/* XP a s?v jobb v?gpontja */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-strip-xp {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 5px 12px 5px 14px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(0, 0, 0, 0.16) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-strip-xp-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  min-width: 0 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-strip-xp-lvl {
  font-family: "Syne", sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: rgba(244, 248, 255, 0.95) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-strip-xp-caption {
  max-width: 150px !important;
  text-align: right !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: rgba(198, 212, 240, 0.52) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-strip-xp-foot {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(168, 188, 218, 0.38) !important;
  letter-spacing: 0.06em !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-strip-xp-ring {
  width: 44px !important;
  height: 44px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-row.mb-16.profile-info-row--badges-only {
  margin-top: 12px !important;
  margin-bottom: 14px !important;
  padding: 10px 12px !important;
  display: block !important;
  border-radius: 14px !important;
  border: 1px solid var(--p-showcase-border) !important;
  background: var(--p-surface-0) !important;
  box-shadow: var(--p-inset), 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-row--badges-only .profile-badges-social-card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

@media (max-width: 1100px) {
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-info-row {
    grid-template-columns: 1fr !important;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-steam-layout {
    grid-template-columns: 1fr !important;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-avatar-area--hud-split {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-avatar-area--hud-split .profile-avatar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-avatar-area--hud-split .profile-info {
    grid-column: 1 !important;
    grid-row: 2 !important;
    text-align: center !important;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-top-hero .profile-avatar-area--hud-split .profile-actions {
    grid-column: 1 !important;
    grid-row: 3 !important;
    flex-direction: row !important;
    justify-content: center !important;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-integrated-strip {
    flex-direction: column !important;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-integrated-strip .profile-stats-row--inline-hud {
    width: 100% !important;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-strip-xp {
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    justify-content: center !important;
    padding: 8px 12px !important;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-strip-xp-text {
    align-items: center !important;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-hero-strip-xp-caption {
    text-align: center !important;
  }
}

/* ???????????????????????????????????????????????????????????????
   PROFILE CINEMATIC ? banner overlay + XP gy?r?
   ??????????????????????????????????????????????????????????????? */

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-banner {
  position: relative !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(3, 6, 14, 0.12) 0%,
    rgba(4, 8, 18, 0.5) 50%,
    rgba(5, 10, 22, 0.88) 100%
  );
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-banner-grid {
  z-index: 0;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-right-col #remnant-profile-about-card {
  border: 1px solid var(--p-showcase-border) !important;
  background: var(--p-surface-0) !important;
  box-shadow: var(--p-inset), 0 10px 26px rgba(0, 0, 0, 0.42) !important;
  padding: 10px 12px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-cinematic-level-ring {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(12, 16, 30, 0.98) 56%, transparent 57.5%),
    conic-gradient(
      from -90deg,
      rgba(0, 229, 255, 0.85) 0deg,
      rgba(77, 143, 255, 0.65) calc(var(--remnant-hud-xp-pct, 0) * 3.6deg),
      rgba(38, 48, 82, 0.5) calc(var(--remnant-hud-xp-pct, 0) * 3.6deg)
    ) !important;
  box-shadow:
    0 0 14px rgba(0, 229, 255, 0.12),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-cinematic-level-num {
  position: relative !important;
  z-index: 1 !important;
  font-family: "Syne", sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  color: rgba(244, 248, 255, 0.96) !important;
  line-height: 1 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner) .profile-cinematic-xp-caption {
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: rgba(210, 222, 252, 0.62) !important;
  max-width: 132px !important;
  letter-spacing: 0.02em !important;
}

/* ???????????????????????????????????????????????????????????????
   PROFILE HUD LAYOUT (referencia: Remnant profil 1:1)
   ??????????????????????????????????????????????????????????????? */

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud {
  --rp-bg: #050a0f;
  --rp-glass: rgba(10, 15, 25, 0.78);
  --rp-glass-2: rgba(8, 12, 22, 0.9);
  --rp-line: rgba(0, 180, 255, 0.22);
  --rp-glow: rgba(0, 170, 255, 0.45);
  background: radial-gradient(120% 80% at 50% 0%, rgba(0, 90, 140, 0.35), transparent 55%), var(--rp-bg);
  border: 1px solid rgba(0, 170, 255, 0.12) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .profile-main {
  position: relative;
  z-index: 2;
  padding: 0 20px 22px !important;
  background: transparent !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .profile-steam-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: none !important;
}

/* Banner a pane tetej?n (nem a hero belsej?ben): a --profile-banner-h ?s a ::before r?teg ?jra illeszkedik. */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud > .profile-banner {
  position: relative;
  z-index: 1;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero {
  position: relative;
  z-index: 2;
  /* ~f?l avat?r + kis extra lift ? hero + stat s?v egy?tt feljebb */
  margin: calc(-0.5 * 164px - 10px) 0 18px;
  border-radius: 0;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 16px;
  align-items: stretch;
  padding: 16px 18px 104px;
  min-height: 244px;
  grid-template-columns: minmax(0, 1fr);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-inner.remnant-profile-hero-inner--art-both {
  grid-template-columns: 122px minmax(0, 1fr) 122px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-inner.remnant-profile-hero-inner--art-left {
  grid-template-columns: 122px minmax(0, 1fr);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-inner.remnant-profile-hero-inner--art-right {
  grid-template-columns: minmax(0, 1fr) 122px;
}

@media (max-width: 980px) {
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-inner {
    grid-template-columns: 1fr !important;
    padding-bottom: 88px;
  }
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-art-slot {
    display: none !important;
  }
}

/* Vend?g profil overlay: m?alkot?s slotok maradjanak l?that?k sz?k ablakban (a saj?t profil HUD egyoszlopos marad). */
@media (max-width: 980px) {
  #remnant-other-profile-inner.remnant-profile-layout--hud .remnant-profile-hero-inner.remnant-profile-hero-inner--art-both {
    grid-template-columns: 122px minmax(0, 1fr) 122px !important;
    padding-bottom: 98px !important;
  }
  #remnant-other-profile-inner.remnant-profile-layout--hud .remnant-profile-hero-inner.remnant-profile-hero-inner--art-left {
    grid-template-columns: 122px minmax(0, 1fr) !important;
  }
  #remnant-other-profile-inner.remnant-profile-layout--hud .remnant-profile-hero-inner.remnant-profile-hero-inner--art-right {
    grid-template-columns: minmax(0, 1fr) 122px !important;
  }
  #remnant-other-profile-inner.remnant-profile-layout--hud .remnant-profile-hero-inner--art-both .remnant-profile-art-slot,
  #remnant-other-profile-inner.remnant-profile-layout--hud .remnant-profile-hero-inner--art-left .remnant-profile-art-slot--left,
  #remnant-other-profile-inner.remnant-profile-layout--hud .remnant-profile-hero-inner--art-right .remnant-profile-art-slot--right {
    display: flex !important;
  }
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-art-slot {
  display: none;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-inner--art-both .remnant-profile-art-slot,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-inner--art-left .remnant-profile-art-slot--left,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-inner--art-right .remnant-profile-art-slot--right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-art-slot-frame {
  width: 100%;
  min-height: 182px;
  border-radius: 11px;
  border: none;
  background-color: transparent;
  background-image: var(--top-block-left-bg, none);
  background-size: cover;
  background-position: center;
  background-blend-mode: normal;
  display: block;
  overflow: hidden;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-art-slot--right .remnant-profile-art-slot-frame {
  background-image: var(--top-block-right-bg, none);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-art-slot-plus,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-art-slot-lbl {
  display: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-inner--art-none .remnant-profile-hero-center,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-inner--art-right .remnant-profile-hero-center {
  margin-left: 0;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-center {
  min-width: 0;
  margin-top: 12px;
  margin-left: 14px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-identity {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  overflow: visible;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-identity > .profile-info {
  /* Extra l?legzet az avatar ?s a n?v/rang/meta k?z?tt ? a jobb oldali gombot nem mozgatja. */
  margin-left: 14px;
  min-width: 0;
  flex: 1 1 auto;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-avatar {
  width: 164px !important;
  height: 164px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  transform: translateY(2px);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-avatar.profile-avatar-has-image {
  background-size: 118% 118% !important;
  background-position: center center !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-avatar::before,
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-avatar::after {
  content: none !important;
  display: none !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-avatar-frame-overlay {
  width: calc(100% / var(--avatar-frame-inner-ratio, 0.907)) !important;
  height: calc(100% / var(--avatar-frame-inner-ratio, 0.907)) !important;
  max-width: none !important;
  max-height: none !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: fill !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .profile-info {
  flex: 1 1 220px;
  min-width: 0;
  padding-bottom: 0 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.remnant-profile-membership-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.remnant-profile-membership-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

.remnant-profile-membership-pill--premium {
  border-color: rgba(147, 197, 253, 0.35);
  background: rgba(30, 58, 138, 0.32);
  color: #dbeafe;
}

.remnant-profile-membership-pill--elit {
  border-color: rgba(250, 204, 21, 0.42);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.42), rgba(49, 24, 6, 0.5));
  color: #fde68a;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.12);
}

.remnant-profile-membership-pill--legend {
  border-color: rgba(251, 191, 36, 0.5);
  background: linear-gradient(135deg, rgba(146, 64, 14, 0.55), rgba(69, 26, 3, 0.62));
  color: #fef3c7;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.16);
}

.remnant-profile-membership-pill--supporter {
  border-color: rgba(74, 222, 128, 0.45);
  background: linear-gradient(135deg, rgba(6, 95, 70, 0.52), rgba(4, 47, 46, 0.62));
  color: #bbf7d0;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.12);
}

.remnant-profile-membership-pill--staff-owner {
  border-color: rgba(248, 113, 113, 0.55);
  background: linear-gradient(135deg, rgba(153, 27, 27, 0.72), rgba(69, 10, 10, 0.82));
  color: #fecaca;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.22);
}

.remnant-profile-membership-pill--staff-superadmin {
  border-color: rgba(252, 165, 165, 0.38);
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.38), rgba(69, 10, 10, 0.48));
  color: #fca5a5;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.1);
}

.remnant-profile-membership-pill--staff-admin {
  border-color: rgba(59, 130, 246, 0.58);
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.62), rgba(23, 37, 84, 0.72));
  color: #eff6ff;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

.remnant-profile-membership-pill--staff-moderator {
  border-color: rgba(147, 197, 253, 0.42);
  background: rgba(30, 58, 138, 0.38);
  color: #dbeafe;
}

.remnant-profile-membership-pill--neutral {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 234, 246, 0.88);
}

.remnant-profile-membership-pill--custom-slate {
  border-color: rgba(148, 163, 184, 0.42);
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.72), rgba(30, 41, 59, 0.82));
  color: #e2e8f0;
}
.remnant-profile-membership-pill--custom-ocean {
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(135deg, rgba(3, 105, 161, 0.62), rgba(12, 74, 110, 0.78));
  color: #e0f2fe;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.12);
}
.remnant-profile-membership-pill--custom-ember {
  border-color: rgba(251, 146, 60, 0.5);
  background: linear-gradient(135deg, rgba(154, 52, 18, 0.7), rgba(69, 26, 3, 0.82));
  color: #ffedd5;
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.14);
}
.remnant-profile-membership-pill--custom-violet {
  border-color: rgba(167, 139, 250, 0.48);
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.62), rgba(46, 16, 101, 0.78));
  color: #ede9fe;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.14);
}
.remnant-profile-membership-pill--custom-jade {
  border-color: rgba(52, 211, 153, 0.48);
  background: linear-gradient(135deg, rgba(6, 95, 70, 0.62), rgba(2, 44, 34, 0.78));
  color: #d1fae5;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.12);
}
.remnant-profile-membership-pill--custom-rose {
  border-color: rgba(244, 114, 182, 0.48);
  background: linear-gradient(135deg, rgba(157, 23, 77, 0.62), rgba(80, 7, 36, 0.78));
  color: #fce7f3;
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.12);
}
.remnant-profile-membership-pill--custom-amber {
  border-color: rgba(251, 191, 36, 0.5);
  background: linear-gradient(135deg, rgba(146, 64, 14, 0.62), rgba(69, 26, 3, 0.78));
  color: #fef3c7;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.14);
}
.remnant-profile-membership-pill--custom-cyan {
  border-color: rgba(34, 211, 238, 0.48);
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.62), rgba(8, 51, 68, 0.78));
  color: #cffafe;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.12);
}
.remnant-profile-membership-pill--custom-crimson {
  border-color: rgba(248, 113, 113, 0.52);
  background: linear-gradient(135deg, rgba(153, 27, 27, 0.68), rgba(69, 10, 10, 0.82));
  color: #fee2e2;
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.16);
}
.remnant-profile-membership-pill--custom-gold {
  border-color: rgba(250, 204, 21, 0.55);
  background: linear-gradient(135deg, rgba(133, 77, 14, 0.7), rgba(69, 26, 3, 0.85));
  color: #fef9c3;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.18);
}

.remnant-perm-custom-badge-card {
  margin-bottom: 16px;
}
.remnant-perm-custom-badge-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.remnant-perm-custom-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.remnant-perm-custom-badge-empty {
  margin: 8px 0 0;
  font-size: 13px;
}
.remnant-perm-custom-badge-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.remnant-perm-custom-badge-swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.remnant-perm-custom-badge-swatch.is-active {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
.remnant-perm-custom-badge-preview-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-verify-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #061018;
  background: linear-gradient(145deg, #00d4ff, #4d8fff);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.45);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-bio {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(220, 230, 250, 0.78);
  max-width: 520px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-rankline {
  margin-top: 6px;
  font-size: 12px !important;
  opacity: 0.85;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(210, 222, 252, 0.72);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-meta-ico {
  opacity: 0.55;
  font-size: 11px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-xp-bar--sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .profile-actions {
  margin-left: auto;
  align-self: flex-start;
  padding-top: 4px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-btn-edit {
  border-radius: 10px !important;
  border: 1px solid rgba(0, 200, 255, 0.28) !important;
  background: rgba(6, 12, 24, 0.65) !important;
  color: rgba(230, 240, 255, 0.92) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px !important;
  box-shadow: 0 0 18px rgba(0, 180, 255, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-btn-edit:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 230, 255, 0.45) !important;
  box-shadow: 0 0 22px rgba(0, 200, 255, 0.18);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-strip {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  border-radius: 12px;
  border: 1px solid var(--pv-panel-border, rgba(60, 110, 175, 0.22));
  background: var(--pv-panel-bg, linear-gradient(180deg, rgba(14, 26, 46, 0.72), rgba(7, 14, 27, 0.82)));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 28px rgba(2, 8, 20, 0.38);
  overflow: hidden;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-strip-stats {
  flex: 1 1 100%;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-strip-level--sidebar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0;
  border: none;
  background: transparent;
  max-width: none;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-strip-level--sidebar .profile-cinematic-level-ring {
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-strip-level--sidebar .profile-cinematic-level-num {
  font-size: 18px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-strip-level--sidebar .remnant-profile-stat-strip-level-copy {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: 5px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-strip-level--sidebar .profile-cinematic-xp-caption {
  max-width: none !important;
  text-align: left !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: rgba(210, 222, 252, 0.78) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-strip-level--sidebar .profile-hero-strip-xp-foot {
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  color: rgba(170, 190, 220, 0.55) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-sidebar-xp-hud .remnant-profile-hud-lvl-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-sidebar-xp-hud .remnant-profile-hud-foot-sr {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  margin: 0 !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-cell {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  justify-content: start;
  justify-items: start;
  text-align: left;
  padding: 8px 10px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-sep {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-ico {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: center;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(0, 200, 255, 0.08);
  border: 1px solid rgba(0, 200, 255, 0.15);
  color: rgba(0, 220, 255, 0.85);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-ico svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-val {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-family: "Syne", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: rgba(244, 248, 255, 0.96);
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-val.remnant-dash-lb-rank {
  display: inline-flex;
  align-items: baseline;
  gap: 0.06em;
  color: var(--purple);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-val.remnant-dash-lb-rank .remnant-dash-lb-hash {
  font-size: 0.68em;
  font-weight: 800;
  opacity: 0.88;
  line-height: 1;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-val.remnant-dash-lb-rank.remnant-dash-lb-rank--empty .remnant-dash-lb-hash {
  display: none;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-lbl {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(190, 205, 235, 0.55);
  line-height: 1.2;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-mid-grid {
  display: grid;
  /* Jobb s?v: alap ~300px, ablakn?vel?skor enyh?n n? (max ~360px), bal tov?bbra is 1fr */
  grid-template-columns: minmax(0, 1fr) clamp(300px, 18vw, 360px);
  gap: 20px;
  align-items: start;
}

@media (max-width: 1100px) {
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-mid-grid {
    grid-template-columns: 1fr;
  }
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel {
  border-radius: 12px !important;
  border: 1px solid var(--pv-panel-border, rgba(60, 110, 175, 0.22)) !important;
  background: var(--pv-panel-bg, linear-gradient(180deg, rgba(14, 26, 46, 0.72), rgba(7, 14, 27, 0.82))) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 28px rgba(2, 8, 20, 0.38) !important;
  padding: 16px 16px 18px !important;
  margin-bottom: 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel:hover {
  transform: translateY(-1px);
  border-color: var(--pv-panel-border-hover, rgba(70, 125, 195, 0.3)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(2, 8, 20, 0.42) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel-head--tight {
  margin-bottom: 10px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel-title {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220, 232, 255, 0.78);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel-link {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0, 200, 255, 0.92);
  text-decoration: none;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel-link:hover {
  text-decoration: underline;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 10, 18, 0.9);
  min-height: 168px;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 200, 255, 0.12);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-cover {
  height: 96px;
  background-size: cover;
  background-position: center;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-cover--cs2 {
  background-color: #0a1018;
  background-image: url("pupak_servercard_pic.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-cover--mc {
  background-color: #0a1018;
  background-image: url("rynex_mc_servercard_pic.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-cover--fm {
  background-color: #0a1018;
  background-image: url("rynex_rlrp.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-cover--hy {
  background-color: #0a1018;
  background-image: url("comingsoon_servercard_pic.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(3, 6, 12, 0.75));
  pointer-events: none;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-body {
  position: relative;
  padding: 10px 10px 12px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-title {
  font-size: 13px;
  font-weight: 800;
  color: rgba(244, 248, 255, 0.95);
  margin-bottom: 4px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-play {
  font-size: 12px;
  font-weight: 700;
  color: rgba(0, 210, 255, 0.88);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-last {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(190, 205, 230, 0.55);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px) {
  :is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row:not(.remnant-profile-ach-feature-row--filled-only) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-card {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 12, 22, 0.72);
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 92px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-card--empty {
  opacity: 0.72;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-card-inner {
  width: 100%;
  text-align: center;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-ghost-ico {
  font-size: 20px;
  color: rgba(0, 200, 255, 0.35);
  margin-bottom: 4px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-top {
  flex: 0 0 auto;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-badge {
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-body {
  flex: 1;
  min-width: 0;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-name {
  font-size: 12px;
  font-weight: 800;
  color: rgba(244, 248, 255, 0.95);
  line-height: 1.2;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-desc {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(200, 210, 235, 0.62);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-meta {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 200, 255, 0.55);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-recent-showcase-body .activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-recent-showcase-body .activity-text {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: start;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-recent-showcase-body .activity-title {
  grid-column: 1;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-recent-showcase-body .activity-time {
  grid-column: 2;
  text-align: right;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: rgba(180, 195, 220, 0.5);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-side-float {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-side-block {
  border-radius: 12px;
  border: 1px solid rgba(0, 200, 255, 0.12);
  background: var(--rp-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 12px 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-side-block.remnant-profile-sidebar-xp-hud {
  position: relative;
  padding: 10px 12px 12px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-standing-hud-line {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 6px);
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: left;
  pointer-events: none;
  white-space: normal;
  z-index: 3;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-standing-hud-line--1 {
  color: #f97316;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-standing-hud-line--2 {
  color: #fb7185;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-standing-hud-line--3 {
  color: #ef4444;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-standing-hud-line--4 {
  color: #fca5a5;
  text-shadow: 0 0 12px rgba(127, 29, 29, 0.45);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-side-h {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(210, 222, 252, 0.62);
  margin: 0 0 10px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-badge-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-height: 36px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-badge-grid .badge:not(.badge--ach-banner) {
  border-radius: 999px;
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-badge-grid .badge.badge--ach-banner {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  overflow: visible !important;
  display: block;
  line-height: 0;
  align-items: stretch;
  justify-content: stretch;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-ach-banner-badge-img--profile {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  /* minim?lisan nagyobb a kor?bbi teljes-sz?less?g? m?retn?l */
  transform: scale(1.04);
  transform-origin: center center;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-badge-grid--square .badge:not(.badge--ach-banner):not(.badge--design-banner) {
  border-radius: 8px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-badge-grid--square .badge.badge--design-banner {
  flex: 0 0 calc(50% - 4px);
  width: calc(50% - 4px);
  max-width: calc(50% - 4px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  overflow: visible !important;
  display: block;
  line-height: 0;
}
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-badge-banner-img--profile {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-badge-more {
  font-size: 12px;
  font-weight: 800;
  color: rgba(0, 210, 255, 0.85);
  padding: 0 4px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-badge-empty {
  font-size: 12px;
  font-weight: 600;
  color: rgba(190, 205, 230, 0.45);
  line-height: 1.35;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-friends-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr:hover {
  background: rgba(0, 200, 255, 0.06);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr--clickable {
  cursor: pointer;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr--clickable:focus-visible {
  outline: 2px solid rgba(0, 200, 255, 0.45);
  outline-offset: 2px;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-av {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: rgba(8, 12, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  overflow: hidden;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-av .remnant-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-mid {
  flex: 1;
  min-width: 0;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-name {
  font-size: 13px;
  font-weight: 800;
  color: rgba(230, 240, 255, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr--ingame .remnant-profile-fr-name {
  color: rgba(0, 220, 255, 0.95);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr--online .remnant-profile-fr-name {
  color: rgba(110, 240, 170, 0.95);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-sub {
  display: none;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-dot {
  display: none;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr--ingame .remnant-profile-fr-dot {
  background: rgba(0, 210, 255, 0.95);
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.45);
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-friends-all {
  margin-top: 10px;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0, 200, 255, 0.88);
  padding: 4px 0 0;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-friends-all:hover {
  text-decoration: underline;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-side-block--social .social-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 8px;
  width: 100%;
}

:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-side-block--social {
  padding: 14px 10px 14px !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .profile-showcase-title {
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800 !important;
  color: rgba(220, 232, 255, 0.72) !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-title {
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
}

:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-lb-streak-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

/* Full-screen foreign profile preview ? t?rbeli illeszt?s: JS (#main getBoundingClientRect), hogy ne takarja a sidebar oszlopot */
.remnant-other-profile-overlay {
  position: fixed;
  z-index: 95000;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  background: rgba(6, 8, 16, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.remnant-other-profile-overlay.remnant-other-profile-overlay--open {
  display: flex;
}
.remnant-other-profile-overlay-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(170, 194, 255, 0.15);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.remnant-other-profile-overlay-bar:active {
  cursor: grabbing;
}
.remnant-other-profile-overlay-bar button {
  cursor: pointer;
}
.remnant-other-profile-overlay-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.remnant-other-profile-overlay-actions[hidden] {
  display: none !important;
}
.remnant-other-profile-scroll {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px 40px;
  max-width: 1720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.remnant-other-profile-overlay--open #remnant-other-profile-inner .remnant-profile-theme-layer {
  border-radius: 0 0 24px 24px !important;
}
.remnant-other-profile-overlay--open #remnant-other-profile-inner .profile-steam-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
}
.remnant-other-profile-overlay--open #remnant-other-profile-inner .profile-main {
  padding: 18px clamp(16px, 2.4vw, 36px) 20px !important;
}
.remnant-other-profile-overlay #remnant-other-profile-inner .profile-notes-card {
  display: block !important;
}

/* ???????????????????????????????????????????????
   PROFILE VIEW PAGE ? harmonize with edit styling
   Frontend only ? name/customization logic untouched
??????????????????????????????????????????????? */
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud {
  --pv-panel-bg: linear-gradient(180deg, rgba(14, 26, 46, 0.72), rgba(7, 14, 27, 0.82));
  --pv-panel-border: rgba(60, 110, 175, 0.22);
  --pv-panel-border-hover: rgba(70, 125, 195, 0.3);
  --pv-title: rgba(248, 252, 255, 0.96);
  --pv-hint: rgba(138, 155, 183, 0.78);
  --pv-label: rgba(190, 205, 230, 0.72);
  --pv-value: rgba(248, 252, 255, 0.94);
  --pv-accent: rgba(26, 140, 255, 0.88);
  --pv-accent-soft: rgba(20, 125, 255, 0.12);
}

/* ?? Hero meta (rank, joined, badges row) ? NOT username ?? */
:is(#remnant-profile-view-pane,#remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-rankline {
  margin-top: 8px !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--pv-hint) !important;
  opacity: 1 !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-hero-bio {
  font-size: 13px !important;
  line-height: 1.48 !important;
  color: var(--pv-hint) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-meta-pill {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--pv-label) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-meta-ico {
  opacity: 0.65 !important;
  font-size: 11px !important;
  color: var(--pv-label) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-membership-badges,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-rank-badge {
  margin-top: 2px;
}

/* ?? Profil szerkeszt?se ? ghost button like edit pane ?? */
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-btn-edit {
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(100, 115, 140, 0.3) !important;
  background: linear-gradient(180deg, rgba(14, 18, 28, 0.92), rgba(9, 12, 22, 0.96)) !important;
  color: rgba(190, 200, 220, 0.86) !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  gap: 7px !important;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-btn-edit:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(130, 145, 170, 0.42) !important;
  background: linear-gradient(180deg, rgba(18, 24, 38, 0.96), rgba(12, 16, 28, 0.98)) !important;
  color: rgba(220, 228, 245, 0.94) !important;
  box-shadow: none !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-btn-edit-ico {
  opacity: 0.72;
  font-size: 12px;
}

/* ?? HUD stat strip: J?t?kid? / Streak / Toplista / Teljes?tm?nyek ?? */
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-strip {
  border-radius: 12px !important;
  border: 1px solid var(--pv-panel-border) !important;
  background: var(--pv-panel-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 28px rgba(2, 8, 20, 0.38) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-sep {
  background: linear-gradient(180deg, transparent, rgba(60, 100, 155, 0.22), transparent) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-cell {
  padding: 12px 12px !important;
  column-gap: 10px !important;
  row-gap: 3px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-ico {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: var(--pv-accent-soft) !important;
  border: 1px solid rgba(60, 110, 175, 0.28) !important;
  color: var(--pv-accent) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-ico svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2.2 !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-val {
  font-family: 'Syne', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--pv-value) !important;
  letter-spacing: -0.01em !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-val.remnant-dash-lb-rank {
  color: rgba(168, 130, 255, 0.95) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-lbl {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--pv-label) !important;
}

/* ?? Shared panel chrome (main + sidebar + vitrinek) ?? */
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-side-block,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-showcase-card,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-card {
  border-radius: 14px !important;
  border: 1px solid var(--pv-panel-border) !important;
  background: var(--pv-panel-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 28px rgba(2, 8, 20, 0.38) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel {
  padding: 18px 20px 20px !important;
  margin-bottom: 16px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel:hover,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-showcase-card:hover {
  transform: translateY(-1px) !important;
  border-color: var(--pv-panel-border-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(2, 8, 20, 0.42) !important;
}

/* ?? Section titles (edit .profile-edit-section-title) ?? */
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel-title,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-showcase-title,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-side-title,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-side-h {
  font-family: 'Syne', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--pv-title) !important;
  margin: 0 0 12px !important;
  line-height: 1.25 !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel-head {
  margin-bottom: 16px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel-link,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-friends-all {
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pv-accent) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-panel-link:hover,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-friends-all:hover {
  color: rgba(32, 136, 255, 0.95) !important;
}

/* ?? J?t?kaktivit?s cards ?? */
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-card {
  border-radius: 12px !important;
  border: 1px solid rgba(60, 110, 175, 0.2) !important;
  background: rgba(7, 14, 27, 0.92) !important;
  min-height: 164px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-card:hover {
  border-color: var(--pv-panel-border-hover) !important;
  box-shadow: 0 10px 24px rgba(2, 8, 20, 0.42) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--pv-title) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-play {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--pv-accent) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-game-last {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--pv-hint) !important;
}

/* ?? Vitrinek / showcase stats (visual only) ?? */
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-showcase-stat-num {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  color: var(--pv-title) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-showcase-stat-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pv-hint) !important;
  letter-spacing: 0.01em !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-items-showcase-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-items-showcase-head .profile-showcase-title {
  margin-bottom: 0 !important;
  font-size: 17px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-items-showcase-head .profile-showcase-stat-num {
  font-size: 18px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-items-showcase-head .profile-showcase-stat-text {
  font-size: 12px !important;
  color: var(--pv-hint) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-showcase-items-card .profile-items-equipped-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 0 !important;
}
/* Profil n?zet: max 5 slot egym?s mellett, ar?nyos m?ret; ?res slotok nincsenek a DOM-ban. */
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-showcase-items-card .profile-items-equipped-row.profile-items-equipped-row--filled-only {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  width: 100% !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-items-slot,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-items-equipped-slot {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-color: rgba(60, 110, 175, 0.28) !important;
  background: linear-gradient(180deg, rgba(14, 26, 46, 0.55), rgba(7, 14, 27, 0.62)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-showcase-items-card .profile-items-equipped-row--filled-only .profile-items-equipped-slot {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud #remnant-profile-showcase-items-card .profile-items-equipped-row--filled-only .profile-items-equipped-slot .profile-items-slot-fill {
  inset: 8% !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: none !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-items-slot.has-item,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-items-equipped-slot.has-item {
  border-color: rgba(26, 140, 255, 0.38) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-achv-slot,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-achv-slot--empty {
  border-color: rgba(60, 110, 175, 0.24) !important;
  background: linear-gradient(180deg, rgba(14, 26, 46, 0.5), rgba(7, 14, 27, 0.58)) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-card {
  border: 1px solid rgba(60, 110, 175, 0.2) !important;
  background: rgba(7, 14, 27, 0.78) !important;
  border-radius: 12px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row--filled-only {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-achv-row.remnant-profile-ach-feature-row--filled-only > .badge,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row--filled-only > .badge.remnant-profile-ach-showcase-badge {
  width: auto !important;
  max-width: calc((100% - 16px) / 3) !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  border-radius: 11px !important;
  gap: 8px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row--filled-only > .badge.badge--ach-banner,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row--filled-only > .badge.badge--design-banner {
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
  line-height: 0 !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: clip !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row--filled-only > .badge.badge--ach-banner .remnant-ach-banner-badge-img,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row--filled-only > .badge.badge--ach-banner .remnant-ach-banner-badge-img--showcase,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row--filled-only > .badge.badge--design-banner .remnant-badge-banner-img,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row--filled-only > .badge.badge--design-banner .remnant-badge-banner-img--showcase {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 68px !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: high-quality !important;
  -ms-interpolation-mode: bicubic !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row--filled-only > .badge.remnant-profile-ach-showcase-badge .badge-label-txt {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row--filled-only > .badge.remnant-profile-ach-showcase-badge .remnant-profile-badge-ico,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row--filled-only > .badge.remnant-profile-ach-showcase-badge .remnant-badge-ico {
  width: 26px !important;
  height: 26px !important;
  flex-shrink: 0 !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-row--filled-only > .badge.remnant-profile-ach-showcase-badge .remnant-badge-svg {
  width: 26px !important;
  height: 26px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-items-equipped-row--filled-only {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  justify-content: stretch !important;
  width: 100% !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-items-equipped-row--filled-only .profile-items-equipped-slot {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-items-equipped-row--filled-only .profile-items-equipped-slot .profile-items-slot-fill {
  inset: 8% !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: none !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-name {
  font-family: 'Syne', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--pv-title) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-ach-feature-sub {
  font-size: 12px !important;
  color: var(--pv-hint) !important;
}

/* ?? Sidebar: XP, bemutatkoz?s, KV rows ?? */
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-side-block {
  padding: 16px 18px 18px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-side-float {
  gap: 16px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-sidebar-xp-hud {
  padding: 14px 16px 16px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-strip-level--sidebar .profile-cinematic-xp-caption {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--pv-label) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-stat-strip-level--sidebar .profile-hero-strip-xp-foot {
  font-size: 12px !important;
  color: var(--pv-hint) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-about-content {
  font-size: 13px !important;
  line-height: 1.48 !important;
  color: var(--pv-hint) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-side-kv {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 14px !important;
  align-items: center !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid rgba(60, 100, 155, 0.14) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-side-kv .k {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--pv-label) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-side-kv .v {
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--pv-value) !important;
  text-align: right !important;
  white-space: nowrap !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-badge-empty {
  font-size: 13px !important;
  color: var(--pv-hint) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-badge-more {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--pv-accent) !important;
}

/* ?? BAR?TOK slotok: saj?t k?rtya (mint a csoportokn?l) + szintjelv?ny ?? */
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-friends-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 38px !important;
  grid-template-rows: auto !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  align-items: center !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(60, 110, 175, 0.2) !important;
  background: linear-gradient(180deg, rgba(14, 26, 46, 0.72), rgba(7, 14, 27, 0.82)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-av {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-mid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  flex: none !important;
  min-width: 0 !important;
  overflow: visible !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-name {
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--pv-title, rgba(230, 240, 255, 0.95)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.35 !important;
  padding: 4px 2px !important;
  margin: -4px -2px !important;
  box-sizing: content-box !important;
  max-width: 100% !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-name.remnant-name-anim-wave,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-name.remnant-name-anim-bounce,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-name.remnant-name-anim-float,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-name.remnant-name-anim-spark {
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 10px 6px !important;
  margin: -10px -6px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-sub {
  display: none !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-dot {
  display: none !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-lvl {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  background: transparent;
  font-family: 'Syne', 'Segoe UI', system-ui, sans-serif;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke: 0.55px rgba(0, 0, 0, 0.92);
  paint-order: stroke fill;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.75);
  user-select: none;
  pointer-events: none;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-lvl--sprite .remnant-profile-fr-lvl-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  /* Same 40px box: fill a hair more + edge pop without upsizing the slot */
  transform: scale(1.06);
  transform-origin: center center;
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
  filter:
    contrast(1.18)
    saturate(1.12)
    brightness(1.05)
    drop-shadow(0 0 0.4px rgba(255, 255, 255, 0.45))
    drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.65));
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-lvl-num {
  position: relative;
  z-index: 1;
  display: block;
  transform: translateY(-1px);
  font-weight: 900;
  font-size: inherit;
  line-height: 1;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke: 0.55px rgba(0, 0, 0, 0.92);
  paint-order: stroke fill;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.75);
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-lvl--long {
  font-size: 10px;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.92);
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr-lvl--long .remnant-profile-fr-lvl-num {
  -webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.92);
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .remnant-profile-fr:hover {
  background: linear-gradient(180deg, rgba(18, 32, 56, 0.88), rgba(10, 18, 34, 0.92)) !important;
  border-color: rgba(80, 140, 210, 0.32) !important;
}

/* ?? Csoportok mini-group: icon column matches 52px tile ?? */
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-team-card .profile-mini-group {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  margin-top: 4px !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(60, 110, 175, 0.2) !important;
  background: linear-gradient(180deg, rgba(14, 26, 46, 0.72), rgba(7, 14, 27, 0.82)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-team-card .profile-mini-group > div:last-child {
  min-width: 0 !important;
  overflow: hidden !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-mini-group-name {
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--pv-title) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-mini-group-meta {
  font-size: 12px !important;
  color: var(--pv-hint) !important;
  margin-top: 3px !important;
}

/* ?? Megjegyz?sek block ?? */
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-card {
  --notes-head-bg: linear-gradient(180deg, rgba(14, 26, 46, 0.98), rgba(10, 18, 34, 0.96));
  --notes-body-bg: linear-gradient(180deg, rgba(10, 18, 34, 0.92), rgba(7, 14, 27, 0.94));
  overflow: hidden !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-head {
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(60, 100, 155, 0.16) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--pv-title) !important;
  line-height: 1.25 !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-follow {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--pv-label) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-help {
  color: var(--pv-accent) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-body {
  padding: 14px 18px 18px !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-input {
  height: 38px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(60, 110, 175, 0.28) !important;
  background: linear-gradient(180deg, rgba(10, 18, 34, 0.9), rgba(7, 14, 27, 0.94)) !important;
  color: var(--pv-value) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-input::placeholder {
  color: rgba(138, 155, 183, 0.55) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-btn {
  border-radius: 9px !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-btn-help {
  border: 1px solid rgba(100, 115, 140, 0.3) !important;
  background: linear-gradient(180deg, rgba(14, 18, 28, 0.92), rgba(9, 12, 22, 0.96)) !important;
  color: rgba(190, 200, 220, 0.86) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-btn-send {
  border: 1px solid rgba(26, 140, 255, 0.5) !important;
  background: linear-gradient(180deg, #1a7ae8, #1468cc) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(20, 104, 204, 0.28) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-item-name {
  font-family: 'Syne', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--pv-title) !important;
}
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-item-time,
:is(#remnant-profile-view-pane, #remnant-other-profile-inner).remnant-profile-layout--hud .profile-notes-item-text {
  font-size: 13px !important;
  color: var(--pv-hint) !important;
}

/* ???????????????????????????????????????????????
   DASHBOARD PAGE ? reference layout, profile-edit tokens
   Scoped: .dashboard-page only ? shell/sidebar untouched
??????????????????????????????????????????????? */
.dashboard-page {
  --dash-panel-bg: linear-gradient(180deg, rgba(14, 26, 46, 0.96), rgba(7, 14, 27, 0.98));
  --dash-panel-border: rgba(60, 110, 175, 0.22);
  --dash-panel-border-hover: rgba(70, 125, 195, 0.3);
  --dash-title: rgba(248, 252, 255, 0.96);
  --dash-hint: rgba(138, 155, 183, 0.78);
  --dash-label: rgba(190, 205, 230, 0.72);
  --dash-value: rgba(248, 252, 255, 0.94);
  --dash-accent: rgba(26, 140, 255, 0.88);
  --dash-accent-soft: rgba(20, 125, 255, 0.12);
  --dash-shadow: 0 10px 28px rgba(2, 8, 20, 0.38);
  --dash-side-col: 320px;
  --dash-col-gap: 10px;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
}

#page-container:has(#page-dashboard.active) {
  overflow: hidden;
  padding: 12px 16px 8px;
  display: flex;
  flex-direction: column;
}

#page-dashboard.dashboard-page.active {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dashboard-page .dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.dashboard-page .dashboard-upper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--dash-side-col);
  gap: var(--dash-col-gap);
  align-items: stretch;
  flex-shrink: 0;
}

.dashboard-page .dashboard-upper-main {
  display: grid;
  grid-template-rows: auto;
  gap: 0;
  min-width: 0;
  height: 100%;
}

.dashboard-page .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-page .stats-grid--side {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

.dashboard-page .dashboard-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--dash-side-col);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--dash-col-gap);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.dashboard-page .dashboard-middle-row {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(250px, 1.15fr) minmax(260px, 1.35fr);
  gap: 10px;
  align-items: stretch;
  min-height: 0;
  height: 100%;
}

.dashboard-page .dashboard-panel {
  border-radius: 14px;
  border: 1px solid var(--dash-panel-border);
  background: var(--dash-panel-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--dash-shadow);
  padding: 12px 14px 14px;
  position: relative;
  overflow: hidden;
}

.dashboard-page .dashboard-panel-title {
  margin: 0 0 10px;
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dash-title);
  line-height: 1.2;
}

/* ?? Hero ?? */
.dashboard-page .dashboard-hero-panel {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

.dashboard-page .dashboard-hero-scene {
  position: absolute;
  inset: 0;
  background-color: #0a1018;
  background-image:
    linear-gradient(90deg, rgba(6, 12, 24, 0.88) 0%, rgba(6, 12, 24, 0.52) 38%, rgba(6, 12, 24, 0.18) 62%, rgba(6, 12, 24, 0.06) 100%),
    url("dashboard_banner_welcome.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.dashboard-page .dashboard-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 16px;
  min-height: 132px;
  height: 100%;
  box-sizing: border-box;
}

.dashboard-page .dashboard-hero-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.dashboard-page .dashboard-hero-title {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: clamp(24px, 2.45vw, 33px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dash-title);
  line-height: 1.15;
}

.dashboard-page .dashboard-hero-name {
  color: rgba(168, 130, 255, 0.95);
}

.dashboard-page .dashboard-hero-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

.dashboard-page .dashboard-hero-name-wrap .dashboard-hero-name {
  min-width: 0;
}

.dashboard-page .dashboard-hero-verify-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  color: #061018;
  background: linear-gradient(145deg, #00d4ff, #4d8fff);
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.45);
  flex-shrink: 0;
}

.dashboard-page .dashboard-hero-sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--dash-hint);
}

.dashboard-page .dashboard-hero-level-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin-top: auto;
  padding-top: 10px;
  padding-bottom: 2px;
}

.dashboard-page .dashboard-hero-level {
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dash-accent);
  line-height: 1;
}

.dashboard-page .dashboard-hero-xp {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 360px;
}

.dashboard-page .dashboard-hero-xp-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dash-label);
}

.dashboard-page .dashboard-hero-xp-val {
  color: var(--dash-value);
  white-space: nowrap;
}

.dashboard-page .dashboard-hero-xp-bar {
  height: 10px;
  border-radius: 999px;
}

.dashboard-page .dashboard-hero-reward-teaser {
  display: flex;
  align-items: center;
  gap: 11px;
  align-self: flex-start;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.28);
  background: rgba(12, 18, 34, 0.55);
  flex-shrink: 0;
}

.dashboard-page .dashboard-hero-reward-ico {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
}

.dashboard-page .dashboard-hero-reward-ico-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  object-position: center;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.35));
}

.dashboard-page .dashboard-hero-reward-ico-img--spinfile {
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.45));
}

.dashboard-page .dashboard-hero-reward-ico-spin {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  filter:
    hue-rotate(200deg)
    saturate(2.8)
    brightness(1.05)
    drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

.dashboard-page .dashboard-hero-reward-lbl {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dash-label);
}

.dashboard-page .dashboard-hero-reward-name {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(216, 180, 254, 0.95);
  margin-top: 2px;
}

.dashboard-page .dashboard-hero-reward-teaser.is-legendary .dashboard-hero-reward-name {
  color: rgba(252, 211, 77, 0.95);
}

.dashboard-page .dashboard-hero-reward-teaser.is-normal .dashboard-hero-reward-name {
  color: rgba(147, 197, 253, 0.95);
}

.dashboard-page .dashboard-hero-reward-xp {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dash-hint);
}

/* ?? Statisztik?k panel (jobb oldal, 2?2) ?? */
.dashboard-page .dashboard-stats-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 12px 10px;
  min-height: 0;
}

.dashboard-page .dashboard-stats-panel .dashboard-panel-title {
  margin-bottom: 8px;
  font-size: 14px;
  flex-shrink: 0;
}

.dashboard-page .dashboard-stats-panel .dashboard-stat-card.dashboard-panel {
  padding: 7px 8px 6px;
  min-height: 0;
  height: 100%;
}

/* ?? Stat cards ?? */
.dashboard-page .dashboard-stat-card {
  padding: 7px 8px 6px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow: hidden;
}

.dashboard-page .dashboard-stat-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
}

.dashboard-page .dashboard-stat-head-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
}

.dashboard-page .dashboard-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dash-label);
  margin: 0;
  line-height: 1.15;
  min-width: 0;
  flex: 0 1 auto;
  text-align: center;
}

.dashboard-page .dashboard-stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--dash-accent-soft);
  border: 1px solid rgba(60, 110, 175, 0.28);
  color: var(--dash-accent);
}

.dashboard-page .dashboard-stat-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.dashboard-page .dashboard-stat-card--lb .dashboard-stat-icon {
  color: rgba(250, 204, 21, 0.95);
  background: rgba(250, 204, 21, 0.1);
  border-color: rgba(250, 204, 21, 0.28);
}

.dashboard-page .dashboard-stat-card--streak .dashboard-stat-icon {
  color: rgba(251, 146, 60, 0.95);
  background: rgba(251, 146, 60, 0.1);
  border-color: rgba(251, 146, 60, 0.28);
}

.dashboard-page .dashboard-stat-card--ach .dashboard-stat-icon {
  color: rgba(168, 130, 255, 0.95);
  background: rgba(168, 130, 255, 0.1);
  border-color: rgba(168, 130, 255, 0.28);
}

.dashboard-page .dashboard-stat-stack {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  padding-top: 4px;
}

.dashboard-page .dashboard-stat-value {
  font-family: 'Syne', sans-serif;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  word-break: normal;
}

.dashboard-page .dashboard-stat-value.remnant-dash-lb-rank {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  max-width: 100%;
}

.dashboard-page .dashboard-stat-value:not(.remnant-streak-num) {
  color: var(--dash-value);
}

.dashboard-page .dashboard-stat-card--streak .dashboard-stat-value.remnant-streak-num {
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.dashboard-page #remnant-dash-achievements-value {
  white-space: nowrap;
}

#page-dashboard.dashboard-page #remnant-dash-playtime-value {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
}

.dashboard-page .dashboard-stat-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--dash-hint);
  margin-top: 0;
  text-align: center;
  white-space: normal;
  overflow: visible;
  line-height: 1.2;
  max-width: 100%;
}

.dashboard-page .dashboard-stat-card--playtime .dashboard-stat-stack .dashboard-stat-sub,
.dashboard-page .dashboard-stat-card--streak .dashboard-stat-stack .dashboard-stat-sub {
  display: none;
}

.dashboard-page .remnant-dash-playtime-breakdown {
  display: none !important;
}

.dashboard-page .dashboard-stat-value.remnant-dash-lb-rank--empty .dashboard-stat-suffix {
  display: none;
}

.dashboard-page .remnant-dash-lb-rank .remnant-dash-lb-hash {
  display: none;
}

.dashboard-page .dashboard-stats-panel .dashboard-stat-chart,
.dashboard-page .dashboard-stats-panel .dashboard-stat-ach-progress {
  display: none !important;
}

.dashboard-page .dashboard-sparkline {
  display: block;
  width: 100%;
  height: 24px;
  overflow: visible;
}

.dashboard-page .dashboard-sparkline-line {
  fill: none;
  stroke: rgba(26, 140, 255, 0.82);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dashboard-page .dashboard-sparkline-fill {
  fill: rgba(26, 140, 255, 0.35);
  opacity: 0.12;
}

.dashboard-page .dashboard-sparkline--gold .dashboard-sparkline-line {
  stroke: rgba(250, 204, 21, 0.85);
}

.dashboard-page .dashboard-sparkline--gold .dashboard-sparkline-fill {
  fill: rgba(250, 204, 21, 0.35);
}

.dashboard-page .dashboard-sparkline--fire .dashboard-sparkline-line {
  stroke: rgba(251, 146, 60, 0.88);
}

.dashboard-page .dashboard-sparkline--fire .dashboard-sparkline-fill {
  fill: rgba(251, 146, 60, 0.35);
}

.dashboard-page .dashboard-stat-ach-progress {
  margin-top: auto;
  flex-shrink: 0;
}

.dashboard-page .dashboard-stat-ach-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(60, 110, 175, 0.18);
  overflow: hidden;
}

.dashboard-page .dashboard-stat-ach-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(168, 130, 255, 0.75), rgba(216, 180, 254, 0.95));
  transition: width 0.45s ease;
}

/* ?? Goals + activity ?? */
.dashboard-page .dashboard-goals-panel {
  height: 100%;
  align-self: stretch;
  padding: 10px 12px 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dashboard-page .dashboard-activity-panel {
  height: 100%;
  align-self: stretch;
  min-height: 0;
  padding: 10px 12px 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dashboard-page .dashboard-goals-panel .dashboard-panel-title,
.dashboard-page .dashboard-activity-panel .dashboard-panel-title {
  margin-bottom: 8px;
  font-size: 14px;
  flex-shrink: 0;
}

.dashboard-page .dashboard-goals-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 110, 175, 0.35) transparent;
}

.dashboard-page .dashboard-goals-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dashboard-page .dashboard-goal {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(60, 110, 175, 0.14);
  background: rgba(8, 14, 28, 0.45);
  font-size: 12px;
  color: var(--dash-hint);
  line-height: 1.35;
}

.dashboard-page .dashboard-goal--done {
  border-color: rgba(52, 211, 153, 0.22);
  background: rgba(52, 211, 153, 0.06);
  color: rgba(220, 230, 245, 0.88);
}

.dashboard-page .dashboard-goal-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(60, 110, 175, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: rgba(52, 211, 153, 0.95);
}

.dashboard-page .dashboard-goal--done .dashboard-goal-check {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.15);
}

.dashboard-page .dashboard-goal-xp {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--dash-accent);
  white-space: nowrap;
}

.dashboard-page .dashboard-goals-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(60, 100, 155, 0.14);
  font-size: 12px;
  font-weight: 600;
  color: var(--dash-label);
  min-height: 0;
  flex-shrink: 0;
}

.dashboard-page .dashboard-goals-foot-text {
  flex: 1 1 auto;
  min-width: 0;
}

.dashboard-page .dashboard-goals-foot strong {
  color: var(--dash-accent);
}

.dashboard-page .dashboard-goals-monthly {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(60, 100, 155, 0.14);
  flex-shrink: 0;
}

.dashboard-page .dashboard-goals-subtitle {
  margin: 0 0 6px;
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dash-label);
}

.dashboard-page .dashboard-goals-list--monthly {
  margin-bottom: 8px;
}

.dashboard-page .dashboard-goals-list--monthly .dashboard-goal {
  grid-template-columns: 18px minmax(0, 1fr);
}

.dashboard-page .dashboard-goals-monthly-reward {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-page .dashboard-goals-monthly-reward-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--dash-label);
}

.dashboard-page .dashboard-monthly-reward-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  min-width: 0;
}

.dashboard-page .dashboard-monthly-reward-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}

.dashboard-page .dashboard-reward-claim {
  display: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  margin: 0;
  border-radius: 7px;
  border: 1px solid rgba(52, 211, 153, 0.42);
  background: rgba(52, 211, 153, 0.12);
  color: rgba(52, 211, 153, 0.95);
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: default;
  align-self: center;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.dashboard-page .dashboard-reward-claim--show-demo,
.dashboard-page .dashboard-reward-claim--ready {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dashboard-page .dashboard-reward-claim:disabled {
  opacity: 0.92;
  cursor: default;
}

.dashboard-page .dashboard-reward-claim--ready:not(:disabled) {
  cursor: pointer;
}

.dashboard-page .dashboard-reward-claim--ready:not(:disabled):hover {
  border-color: rgba(52, 211, 153, 0.62);
  background: rgba(52, 211, 153, 0.2);
  color: rgba(220, 252, 231, 0.98);
}

.dashboard-page .dashboard-monthly-reward-opt {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.dashboard-page .dashboard-monthly-reward-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dashboard-page .dashboard-monthly-reward-opt span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid rgba(60, 110, 175, 0.2);
  background: rgba(8, 14, 28, 0.45);
  font-size: 11px;
  font-weight: 600;
  color: var(--dash-hint);
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.dashboard-page .dashboard-monthly-reward-opt:hover span {
  border-color: rgba(70, 125, 195, 0.32);
  background: rgba(12, 22, 42, 0.5);
}

.dashboard-page .dashboard-monthly-reward-opt input:checked + span {
  border-color: rgba(26, 140, 255, 0.42);
  background: rgba(20, 125, 255, 0.14);
  color: var(--dash-value);
}

.dashboard-page .dashboard-activity-panel {
  min-height: 0;
}

#page-dashboard.dashboard-page .remnant-dash-activity-card {
  min-height: 0;
}

#page-dashboard.dashboard-page .remnant-dash-activity-feed.activity-feed {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 110, 175, 0.35) transparent;
}

.dashboard-page .activity-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  padding: 8px 6px;
  border-radius: 8px;
  border-bottom: 1px solid rgba(60, 100, 155, 0.1);
}

.dashboard-page .activity-text {
  min-width: 0;
}

.dashboard-page .activity-item:last-child {
  border-bottom: none;
}

.dashboard-page .activity-icon.remnant-dash-act-ico {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#page-dashboard.dashboard-page .activity-icon.remnant-dash-act-ico {
  width: 32px;
  height: 32px;
}

#page-dashboard.dashboard-page .activity-icon.remnant-dash-act-ico svg {
  width: 16px;
  height: 16px;
}

.dashboard-page .activity-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--dash-value);
  line-height: 1.3;
}

.dashboard-page .activity-time.remnant-dash-activity-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--dash-hint);
  white-space: nowrap;
}

/* ?? Recently played ?? */
.dashboard-page .dashboard-recent-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 8px 12px 8px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dashboard-page .dashboard-recent-panel .dashboard-panel-title {
  margin-bottom: 6px;
  font-size: 13px;
  flex-shrink: 0;
}

.dashboard-page .dashboard-recent-scroll {
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dashboard-page .dashboard-recent-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  align-items: stretch;
}

.dashboard-page .dashboard-recent-card {
  border-radius: 9px;
  border: 1px solid rgba(60, 110, 175, 0.18);
  background: rgba(7, 14, 27, 0.72);
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dashboard-page .dashboard-recent-cover {
  width: 100%;
  flex: 0 0 auto;
  min-height: 52px;
  aspect-ratio: 16 / 9;
  max-height: 68px;
  background-size: cover;
  background-position: center;
}

.dashboard-page .dashboard-recent-cover--mc {
  background-color: #0a1018;
  background-image: url("rynex_mc_servercard_pic.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dashboard-page .dashboard-recent-cover--pupak {
  background-color: #0a1018;
  background-image: url("pupak_servercard_pic.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dashboard-page .dashboard-recent-cover--rlrp {
  background-color: #0a1018;
  background-image: url("rynex_rlrp.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dashboard-page .dashboard-recent-body {
  padding: 5px 7px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  min-height: 0;
}

.dashboard-page .dashboard-recent-title {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--dash-title);
  line-height: 1.15;
}

.dashboard-page .dashboard-recent-sub,
.dashboard-page .dashboard-recent-ping {
  font-size: 9px;
  font-weight: 600;
  color: var(--dash-hint);
  line-height: 1.2;
}

.dashboard-page .dashboard-recent-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: auto;
  padding-top: 2px;
}

.dashboard-page .dashboard-recent-play {
  min-height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px solid rgba(26, 140, 255, 0.35);
  background: rgba(20, 125, 255, 0.12);
  color: var(--dash-accent);
  font-family: 'Syne', sans-serif;
  font-size: 8px;
  font-weight: 700;
  cursor: not-allowed;
  opacity: 0.65;
}

.dashboard-page .dashboard-recent-play:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}

.dashboard-page .dashboard-recent-card--empty {
  border-color: rgba(60, 110, 175, 0.1);
  background: rgba(7, 14, 27, 0.38);
  pointer-events: none;
}

.dashboard-page .dashboard-recent-cover--empty {
  background: rgba(12, 22, 40, 0.55);
  background-image: none;
}

.dashboard-page .dashboard-recent-title--empty,
.dashboard-page .dashboard-recent-sub--empty,
.dashboard-page .dashboard-recent-card--empty .dashboard-recent-ping {
  color: transparent;
  user-select: none;
}

.dashboard-page .dashboard-recent-play--ghost {
  min-height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px solid rgba(26, 140, 255, 0.12);
  background: rgba(20, 125, 255, 0.05);
  color: transparent;
  font-size: 8px;
  line-height: 18px;
  opacity: 0.35;
  display: inline-block;
  min-width: 34px;
}

/* ?? Server status panel ?? */
.dashboard-page .dashboard-servers-panel {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 10px 12px 10px;
  overflow: hidden;
  align-self: stretch;
}

.dashboard-page .dashboard-server-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 10px;
}

.dashboard-page .dashboard-server-tab {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(138, 155, 183, 0.78);
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.dashboard-page .dashboard-server-tab:hover {
  color: rgba(210, 222, 245, 0.94);
  background: rgba(12, 22, 42, 0.38);
}

.dashboard-page .dashboard-server-tab.active {
  color: rgba(248, 252, 255, 0.98);
  background: rgba(20, 125, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(26, 140, 255, 0.34);
}

.dashboard-page .dashboard-server-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(26, 140, 255, 0.45), 0 0 0 3px rgba(20, 125, 255, 0.1);
}

.dashboard-page .dashboard-server-list-host {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(60, 110, 175, 0.35) transparent;
}

.dashboard-page .dashboard-server-empty,
.dashboard-page .dashboard-server-error {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--dash-hint);
  text-align: center;
}

.dashboard-page .dashboard-server-error {
  color: rgba(251, 146, 60, 0.9);
}

.dashboard-page .dashboard-servers-panel .dashboard-game-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.dashboard-page .dashboard-server-panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dashboard-page .dashboard-server-category-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  padding: 0 0 8px;
  flex-shrink: 0;
}

.dashboard-page .dashboard-server-category-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--dash-value);
  border: 1px solid rgba(60, 110, 175, 0.2);
  flex-shrink: 0;
}

.dashboard-page .dashboard-server-category-copy {
  min-width: 0;
}

.dashboard-page .dashboard-server-category-title {
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dash-title);
}

.dashboard-page .dashboard-server-category-count {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--dash-hint);
}

.dashboard-page .dashboard-server-category-divider {
  height: 1px;
  background: rgba(60, 100, 155, 0.14);
  margin: 0 0 4px;
  flex-shrink: 0;
}

.dashboard-page .dashboard-server-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.dashboard-page .dashboard-game-card.glass-card {
  border-radius: 12px !important;
  border: 1px solid rgba(60, 110, 175, 0.18) !important;
  background: rgba(7, 14, 27, 0.72) !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}

#page-dashboard.dashboard-page .dashboard-server-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 7px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(60, 100, 155, 0.1);
  border-radius: 0;
}

.dashboard-page .dashboard-server-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(60, 100, 155, 0.1);
}

.dashboard-page .dashboard-server-row:last-child {
  border-bottom: none;
}

#page-dashboard.dashboard-page .dashboard-server-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  font-size: 0;
  background: transparent;
  border: none;
}

.dashboard-page .dashboard-server-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--dash-value);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-page .dashboard-server-ping {
  font-size: 11px;
  font-weight: 600;
  color: var(--dash-hint);
  white-space: nowrap;
}

.dashboard-page .dashboard-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

.dashboard-page .dashboard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.dashboard-page .dashboard-btn--ghost {
  border: 1px solid rgba(100, 115, 140, 0.3);
  background: linear-gradient(180deg, rgba(14, 18, 28, 0.92), rgba(9, 12, 22, 0.96));
  color: rgba(190, 200, 220, 0.86);
}

.dashboard-page .dashboard-btn--ghost:hover:not(:disabled) {
  border-color: rgba(130, 145, 170, 0.42);
  color: rgba(220, 228, 245, 0.94);
}

.dashboard-page .dashboard-btn--primary {
  border: 1px solid rgba(26, 140, 255, 0.5);
  background: linear-gradient(180deg, #1a7ae8, #1468cc);
  color: #fff;
  box-shadow: 0 4px 16px rgba(20, 104, 204, 0.28);
}

.dashboard-page .dashboard-btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #2088ff, #1872e0);
}

.dashboard-page .dashboard-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dashboard-page .dashboard-weekly-legacy {
  display: none !important;
}

@media (max-width: 1180px) {
  .dashboard-page .dashboard-upper {
    grid-template-columns: 1fr;
  }
  .dashboard-page .stats-grid--side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-page .dashboard-lower {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  .dashboard-page .dashboard-middle-row {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-page .dashboard-servers-panel {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    max-height: 280px;
  }
  .dashboard-page .dashboard-recent-panel {
    grid-column: 1;
    grid-row: 3;
  }
  .dashboard-page .dashboard-goals-panel,
  .dashboard-page .dashboard-activity-panel {
    height: 100%;
  }
  #page-container:has(#page-dashboard.active) {
    overflow: auto;
  }
  #page-dashboard.dashboard-page.active {
    overflow: visible;
  }
  .dashboard-page .dashboard-grid {
    overflow: visible;
  }
}

@media (max-width: 860px) {
  .dashboard-page .dashboard-middle-row {
    grid-template-columns: 1fr;
  }
  .dashboard-page .dashboard-recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-page .dashboard-recent-grid .dashboard-recent-card:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
  }
  .dashboard-page .dashboard-hero-content {
    flex-direction: column;
  }
  .dashboard-page .dashboard-hero-reward-teaser {
    align-self: stretch;
  }
}

/* Admin ? Launcher kezel?s */
.ralc-scope { padding: 8px 4px 24px; }
.ralc-head { margin-bottom: 18px; }
.ralc-head h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.ralc-head p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.45; max-width: 62ch; }
.ralc-featured { margin-bottom: 14px; }
.ralc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ralc-card {
  display: flex; gap: 12px; align-items: stretch;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 12px; padding: 12px; min-height: 118px;
}
.ralc-card.is-locked { border-color: rgba(255, 120, 90, 0.45); background: rgba(255, 80, 60, 0.08); }
.ralc-card--empty { opacity: 0.55; }
.ralc-media { width: 92px; height: 92px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: rgba(0,0,0,0.25); }
.ralc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ralc-media--empty { display: grid; place-items: center; color: var(--text-dim); }
.ralc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ralc-title-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ralc-title-row h3 { margin: 0; font-size: 15px; font-weight: 700; }
.ralc-desc { margin: 0; color: var(--text-dim); font-size: 12px; }
.ralc-lock-msg { margin: 2px 0 0; font-size: 12px; color: rgba(255,180,150,0.95); }
.ralc-card:not(.is-locked) .ralc-lock-msg { color: var(--text-dim); opacity: 0.85; }
.ralc-form { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 6px 0 4px; }
.ralc-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-dim); min-width: 140px; }
.ralc-field select,
.ralc-field input[type="date"] {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.28);
  color: inherit;
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 12px;
}
.ralc-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 8px; border-radius: 999px; }
.ralc-badge--locked { background: rgba(255,90,70,0.2); color: #ffb4a4; }
.ralc-badge--open { background: rgba(80,200,140,0.16); color: #9de7c0; }
.ralc-btn {
  margin-top: auto; align-self: flex-start; border: 0; cursor: pointer;
  border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700;
}
.ralc-btn--lock { background: rgba(255,110,80,0.9); color: #1a0d0a; }
.ralc-btn--unlock { background: rgba(90,210,150,0.9); color: #0b1a12; }
.ralc-allow {
  margin: 6px 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(166, 124, 82, 0.35);
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ralc-allow-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.ralc-allow-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #E8DCC8;
  cursor: pointer;
  user-select: none;
}
.ralc-allow-item input { accent-color: #E6B84F; }
.ralc-allow-item--fixed { opacity: 0.85; cursor: default; }
.ralc-allow-item--fixed span { color: var(--text-dim); font-size: 11px; }
.ralc-btn--save-allow {
  align-self: flex-start;
  margin-top: 6px;
  background: rgba(230, 184, 79, 0.85);
  color: #1a1408;
  font-size: 12px;
  padding: 6px 10px;
}
.ralc-foot { margin-top: 14px; }
@media (max-width: 1100px) {
  .ralc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Groups: visibility + clickable profile featured group */
.remnant-groups-visibility-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 4px;
}
.remnant-groups-visibility-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.88);
  cursor: pointer;
  user-select: none;
}
.remnant-groups-visibility-opt input {
  accent-color: #3b82f6;
}
.remnant-profile-group-hit {
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  border-radius: 10px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.remnant-profile-group-hit:hover,
.remnant-profile-group-hit:focus-visible {
  background: rgba(59, 130, 246, 0.08);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.28);
  outline: none;
}
.remnant-groups-invite-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}