/* ==========================================
   before.css
   ========================================== */

/* ==========================================
   Exodar OTS - Ekran wyboru świata
   ========================================== */

:root {
  --main-bg-color: #0a1621;
  --panel-bg-color: rgba(0, 0, 0, 0.38); /* było 0.9 - delikatnie jaśniej */
  --panel-border-color: #d4b77a;
  --header-color: #f4e2b8;
  --text-color: #dbdbd9;
  --text-muted: #9da4b3;

  --gold: #f3cf81;
  --gold-deep: #c88a2c;
  --blue: #8ab3ff;
  --green: #84e0af;

  --radius-lg: 24px;
  --radius-card: 20px;
  --radius-pill: 999px;

  --shadow-deep: 0 26px 60px rgba(0, 0, 0, 0.95);

  --font-title: "Cinzel", serif;
  --font-body: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* ---------- 1) Baza ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text-color);
  background: var(--main-bg-color)
    url("images/backgrounds/background.png") center/cover fixed no-repeat;
  line-height: 1.6;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(5, 15, 35, 0.92),
    rgba(3, 10, 20, 0.5)
  );
  z-index: -1;
}

.venore-container.selector-wrapper {
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px 22px 32px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- 2) Logo (jak wcześniej) ---------- */

.venore-logo-image {
  width: 100%;
  height: 360px;
  background: url("images/own/logo.png") center / auto 100% no-repeat;
  margin-top: -140px;
  margin-bottom: -210px;
  margin-left: -770px;
  pointer-events: none;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.9));
}

/* ---------- 3) Panel wyboru ---------- */

.selector-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selector-panel {
  max-width: 1200px;
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 24px 26px 20px;
  background:
    radial-gradient(circle at top left, rgba(255, 235, 180, 0.16), transparent 60%),
    radial-gradient(circle at bottom right, rgba(135, 173, 255, 0.18), transparent 60%),
    var(--panel-bg-color);
  border: 1px solid var(--panel-border-color);
  box-shadow: var(--shadow-deep);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Top (nagłówek + języki) */

.selector-panel-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.selector-header h1 {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--header-color);
}

.selector-header h1 span {
  color: var(--gold);
}

.selector-header p {
  margin: 0;
  font-size: 0.95rem;
}

.selector-subline {
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* języki */

.selector-lang {
  display: flex;
  gap: 6px;
}

/* baza */

.lang-btn {
  min-width: 44px;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #02050a;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.85);
  transition: 0.18s ease-out;
}

/* kolory flag */

.lang-btn--pl {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f5f5f5 45%,
    #e4312b 46%,
    #b31919 100%
  );
  border-color: #e4312b;
}

.lang-btn--en {
  background: radial-gradient(
    circle at top,
    #ffffff 0,
    #f5f5f5 35%,
    #243c7c 36%,
    #18244f 100%
  );
  border-color: #304892;
  color: #f3f5ff;
}

.lang-btn--br {
  background: radial-gradient(
    circle at top,
    #f7e36e 0,
    #f2d13a 38%,
    #0b6d3e 39%,
    #064324 100%
  );
  border-color: #0b6d3e;
  color: #04140b;
}

/* aktywny / hover */

.lang-btn--active,
.lang-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.95);
}

/* ---------- 3.5) Pasek cech nad gridem ---------- */

.selector-feature-bar {
  display: flex;
  gap: 14px;
  margin: 4px 0 18px;
  flex-wrap: wrap;
}

.feature-item {
  flex: 1 1 0;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle at top left, rgba(243, 207, 129, 0.18), transparent 60%),
    rgba(6, 10, 20, 0.96);
  border: 1px solid rgba(215, 186, 120, 0.65);
  font-size: 0.82rem;
  color: var(--text-muted);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.9);
}

.feature-item i {
  font-size: 1rem;
  color: var(--gold);
}

.feature-item span {
  line-height: 1.3;
}

/* ---------- 4) Grid światów ---------- */

.world-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 6px;
}

/* karta świata */

.world-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(122, 146, 190, 0.7);
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 65%),
    rgba(2, 8, 18, 0.42); /* było 0.96 - bardziej transparentne */
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
  transform-origin: center bottom;
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out;
}

.world-card--gold {
  border-color: rgba(243, 207, 129, 0.75);
}

.world-card--blue {
  border-color: rgba(150, 191, 255, 0.75);
}

.world-card--green {
  border-color: rgba(150, 236, 191, 0.75);
}

.world-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 1);
}

/* poświata */

.world-glow {
  position: absolute;
  inset: -40%;
  opacity: 0.85;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: worldGlow 22s linear infinite;
  z-index: 0;
}

.world-glow--gold {
  background: radial-gradient(circle at 0 0, rgba(243, 207, 129, 0.23), transparent 60%);
}

.world-glow--blue {
  background: radial-gradient(circle at 0 0, rgba(155, 197, 255, 0.25), transparent 60%);
}

.world-glow--green {
  background: radial-gradient(circle at 0 0, rgba(152, 235, 192, 0.25), transparent 60%);
}

@keyframes worldGlow {
  0% {
    transform: translate3d(-12px, 10px, 0) scale(1);
  }
  50% {
    transform: translate3d(16px, -14px, 0) scale(1.05);
  }
  100% {
    transform: translate3d(-12px, 10px, 0) scale(1);
  }
}

/* Artwork świata */

.world-art {
  position: relative;
  z-index: 1;
  height: 220px;                     /* wyższa karta */
  background-size: contain;          /* pokazuje całą grafikę */
  background-size: 105% auto;   /* mniej cropuje niż cover, ale dalej wypełnia */
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 18px 18px 12px 12px;
  overflow: hidden;
  margin: 10px 10px 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.95);
}

.world-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(3, 5, 10, 0.30) 0%,   /* góra prawie bez przyciemniania */
    rgba(3, 5, 10, 0.60) 50%,  /* lżejszy środek */
    rgba(3, 5, 10, 0.95) 100%  /* dalej ciemniejszy dół pod tekst */
  );
}

/* PODMIEŃ ŚCIEŻKI NA SWOJE, JEŚLI POTRZEBA */
.world-art--86 {
  background-image: url("images/worlds/exodar-86.png");
}

.world-art--1012 {
  background-image: url("images/worlds/exodar-1012.png");
}

.world-art--1412 {
  background-image: url("images/worlds/exodar-1412.png");
}

/* zawartość */

.world-inner {
  position: relative;
  z-index: 2;
  padding: 10px 16px 14px;
}

/* nagłówek */

.world-head {
  margin-bottom: 10px;
}

.world-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(226, 198, 118, 0.7);
  background: rgba(26, 22, 10, 0.92);
  color: #f4e2b8;
}

.world-title {
  margin: 8px 0 2px;
  font-family: var(--font-title);
  font-size: 1.25rem;
  color: #f7f3eb;
}

.world-subtitle {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
}

/* cechy */

.world-features {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
}

.world-features li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 0;
}

.world-features i {
  width: 16px;
  margin-top: 2px;
  font-size: 0.9rem;
  opacity: 0.85;
}

.world-features strong {
  color: var(--gold);
  font-weight: 500;
}

/* stopka karty */

.world-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.world-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(6, 13, 26, 0.96);
  color: #d9e7ff;
}

.world-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.world-status--online .dot {
  background: #57e58a;
  box-shadow: 0 0 6px #57e58a;
}

.world-status--soon .dot {
  background: #ffc247;
  box-shadow: 0 0 6px #ffc247;
}

/* przycisk */

.world-enter-btn {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: radial-gradient(circle at top, var(--gold), var(--gold-deep));
  color: #251506;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.9);
  transition: 0.18s ease-out;
}

.world-enter-btn i {
  font-size: 0.9rem;
}

.world-enter-btn:hover {
  transform: translateY(-1px) scale(1.02);
}

.world-enter-btn--ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(215, 174, 107, 0.8);
}

/* ---------- 5) Dół panelu ---------- */

.selector-bottom-row {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.selector-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* social media */

.selector-socials {
  display: flex;
  gap: 10px;
}

.social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #f5f5f5;
  border: 1px solid rgba(160, 182, 230, 0.8);
  background: rgba(7, 14, 28, 0.96);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.9);
  transition: 0.18s ease-out;
}

.social-btn i {
  font-size: 1rem;
}

.social-btn--discord {
  border-color: #7289da;
}

.social-btn--facebook {
  border-color: #4e6cd8;
}

.social-btn--youtube {
  border-color: #ff6c6c;
}

.social-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 1);
}

/* ---------- 6) Stopka ---------- */

.venore-footer {
  margin-top: 24px;
  border-top: 1px solid rgba(60, 80, 104, 0.8);
  padding-top: 14px;
  text-align: center;
  font-size: 0.85rem;
  color: #9ca6b3;
}

.designer-credit {
  display: block;
  margin-top: 6px;
  color: #b7c2dd;
  font-style: italic;
  user-select: none;
}

/* ---------- 7) Responsive ---------- */

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

@media (max-width: 880px) {
  .venore-container.selector-wrapper {
    padding: 18px 12px 26px;
  }

  .selector-panel {
    padding: 20px 16px 18px;
  }

  .selector-panel-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .selector-lang {
    margin-top: 10px;
  }

  .venore-logo-image {
    height: 380px;
    margin-top: -80px;
    margin-bottom: -60px;
  }

  .selector-feature-bar {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .world-grid {
    grid-template-columns: 1fr;
  }

  .selector-bottom-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .selector-header h1 {
    font-size: 1.4rem;
  }

  .selector-panel {
    border-radius: 18px;
  }

  .world-art {
    height: 200px;  /* trochę niżej na mobilkach, ale dalej widać postać */
  }
}


/* ==========================================
   new_style.css
   ========================================== */

/* =========================================================
   ServerName — Dark Fantasy Theme (Exodar, cleaned)
   ========================================================= */

/* ---------- 0) Zmienne globalne ---------- */
:root{
  --main-bg-color:#0a1621;
  --panel-bg-color:#121e2b;
  --panel-border-color:#2a3a4a;
  --header-color:#708090;
  --text-color:#DBDBD9;
  --link-color:#DBDBD9;
  --link-hover-color:#e3d6a2;
  --btn-color:#1d3246;
  --btn-hover-color:#284967;
  --btn-text-color:#e3d6a2;
  --separator-color:#708090;
  --accent-color:#3775ab;
}

/* ---------- 1) Baza ---------- */
body{
  font-family:Roboto,"Segoe UI",Arial,sans-serif;
  color:var(--text-color);
  background:var(--main-bg-color) url("images/backgrounds/background.png") center/cover fixed no-repeat;
  margin:0; padding:0; line-height:1.6; position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:linear-gradient(135deg, rgba(5,15,35,.92), rgba(3,10,20,.1));
  z-index:-1;
}

.venore-container{ max-width:1500px; margin:0 auto; padding:20px; position:relative; }

/* ---------- 2) Header / Logo ---------- */
.venore-header{
  position:relative; margin-bottom:20px; padding:15px;
  border-bottom:1px solid var(--accent-color);
  background:rgba(5,15,30,.5); border-radius:8px;
  box-shadow:0 5px 20px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.venore-logo{ text-align:center; margin-bottom:10px; }
.venore-logo h1{
  font-family:Cinzel,serif; font-weight:700; font-size:3.5rem; letter-spacing:2px;
  color:var(--header-color); margin:0;
  text-shadow:0 0 10px rgba(230,184,0,.5),0 0 20px rgba(230,184,0,.3),2px 2px 4px rgba(0,0,0,.7);
}
.venore-logo h1::before,
.venore-logo h1::after{
  content:"★"; font-size:1.5rem; vertical-align:middle; margin:0 15px; opacity:.8;
}

/* ---------- 3) Nawigacja (venore-nav + Hero Nav) ---------- */
.venore-nav{
  display:flex; align-items:center; justify-content:center; gap:20px;
  height:60px; margin-bottom:20px; overflow:hidden;
  background:rgba(5,15,30,.7); border:1px solid var(--panel-border-color); border-radius:8px;
  box-shadow:0 5px 15px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.nav-logo{
  flex-shrink:0; width:auto; aspect-ratio:4/1; height:250%;
  background:url("images/own/logo.png") left center/contain no-repeat;
  margin-left:-230px;
}
.hero-nav .nav-logo {
  height: 128px;
  width: 480px;
  margin-left: 0;
}
.venore-nav a{
  color:var(--link-color); text-decoration:none; text-transform:uppercase; letter-spacing:1px;
  padding:8px 20px; margin:0 5px; font-weight:500; font-size:14px; position:relative; transition:.3s;
}
.venore-nav a:hover, .venore-nav a.active{ color:var(--link-hover-color); }
.venore-nav a:hover::after, .venore-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:var(--link-hover-color); box-shadow:0 0 8px var(--link-hover-color);
}

/* Hero-nav – wersja z badge i zakładkami */
.hero-nav{ position:relative; margin-bottom:20px; }
.hero-nav__inner{
  display:flex; align-items:center; justify-content:center; gap:24px;
  height:64px; padding:0 18px; border-radius:10px; overflow:hidden;
  border:1px solid #2a3a4a;
  background:linear-gradient(180deg, rgba(20,35,60,.8), rgba(8,18,35,.92));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 18px rgba(0,0,0,.45);
}
.hero-nav__spacer{ flex:1; }
.hero-nav .tab{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:40px; min-width:132px; padding:0 14px; border-radius:6px; font:600 13px/1 Roboto, sans-serif;
  text-transform:uppercase; letter-spacing:.5px; text-decoration:none; color:var(--link-color);
  border:1px solid rgba(122,106,58,.65);
  background:linear-gradient(180deg, rgba(10,17,22,.35), rgba(0,0,0,.25));
  box-shadow:inset 0 0 6px rgba(0,0,0,.6); transition:.18s;
}
.hero-nav .tab::before{
  content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, transparent, #1b3a2e, transparent);
  box-shadow:0 0 0 1px rgba(122,106,58,.25);
}
.hero-nav .tab:first-of-type::before{ display:none; }
.hero-nav .tab:hover, .hero-nav .tab.active{
  color:var(--link-hover-color); border-color:var(--header-color);
  box-shadow:inset 0 0 10px rgba(106,140,166,.45), 0 0 8px rgba(106,140,166,.28);
}
.hero-nav .tab--register{
  background:linear-gradient(180deg, #00172e, #001f3d);
  border-color:var(--header-color); color:var(--header-color); font-weight:700;
}

/* Badge online */
.badge-online{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:66px; min-width:120px; margin:0 6px; padding:6px 14px 12px;
  color:#e9e6d2; text-align:center; border:1px solid #2a3a4a; border-radius:10px 10px 14px 14px;
  background:linear-gradient(180deg, #00172e, #001f3d);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.45);
}
.badge-online::after{
  content:""; position:absolute; bottom:-9px; left:50%; transform:translateX(-50%);
  border:9px solid transparent; border-top-width:0; border-color:#2a3a4a transparent transparent;
}
.badge-online::before{
  content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  border:8px solid transparent; border-top-width:0; border-color:#0a1a14 transparent transparent;
}
.badge-title{ font-family:Cinzel,serif; font-size:13px; color:#e3d6a2; opacity:.9; }
.badge-count{ font-family:Cinzel,serif; font-size:22px; color:#f4e2b8; margin-top:2px; line-height:1; }
.badge-state{ font-size:12px; margin-top:2px; letter-spacing:.6px; }
.badge-online.is-online .badge-state{ color:#009933; }
.badge-online.is-offline .badge-state{ color:#990000; }

/* ---------- 4) Status serwera ---------- */
.status-online{ color:#4CAF50; font-weight:700; }
.status-offline{ color:#F44336; font-weight:700; }
.status-checking{ color:#FFC107; font-weight:700; }

.server-status{
  position:absolute; top:20px; right:20px;
  background:rgba(0,0,0,.7); padding:5px 10px; border-radius:4px;
}
#PlayersOnline{
  position:absolute; top:20px; right:20px;
  padding:10px 15px; border-radius:4px; font-size:16px; text-align:center; cursor:pointer;
  background:rgba(0,0,0,.7);
}
#players{ font-size:18px; font-weight:700; color:#4CAF50; }

/* ---------- 5) Layout główny / panele / sidebar ---------- */
.venore-layout{ display:flex; gap:20px; }
.venore-sidebar{ width:250px; flex-shrink:0; }

.venore-panel{
  background:rgba(5,15,30,.7); border:1px solid var(--panel-border-color); border-radius:8px;
  margin-bottom:20px; overflow:hidden; transition:.2s;
  box-shadow:0 5px 15px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.venore-panel:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.4); }

.venore-panel-header{
  padding:12px 15px; text-align:center; font:600 1.1rem Cinzel, serif; color:var(--header-color);
  background:linear-gradient(180deg, rgba(20,35,60,.8), rgba(8,18,35,.92));
  border-bottom:1px solid var(--panel-border-color); position:relative;
}
.venore-panel-header::before,
.venore-panel-header::after{
  content:""; position:absolute; top:50%; width:20px; height:1px; opacity:.5; background:var(--header-color);
  transform:translateY(-50%);
}
.venore-panel-header::before{ left:20px; }
.venore-panel-header::after{ right:20px; }
.venore-panel-body{ padding:15px; }

/* Sidebar menu */
.venore-menu-list{ list-style:none; margin:0; padding:0; }
.venore-menu-list li{ border-bottom:1px solid rgba(82,75,54,.3); }
.venore-menu-list li:last-child{ border-bottom:none; }
.venore-menu-list a{
  display:block; padding:5px; color:var(--text-color); text-decoration:none; transition:.2s;
}
.venore-menu-list a::before{ content:"›"; margin-right:8px; color:var(--link-color); }
.venore-menu-list a:hover, .venore-menu-list a.active{
  color:var(--link-hover-color); padding-left:12px; background:rgba(29,50,70,.4);
}

/* ---------- 6) Content ---------- */
.venore-content{
  flex:1; min-height:600px; padding:20px; border-radius:8px;
  background:rgba(5,15,30,.7); border:1px solid var(--panel-border-color);
  box-shadow:0 5px 15px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.content-header {
  margin: 0 0 0px; 
  padding-bottom: 5px; /* zmniejszyłem padding, bo bez kreski nie potrzebujesz tyle luzu */
  text-align: center; 
  position: relative;
  font-family: Cinzel, serif; 
  color: var(--header-color);
  border-bottom: none !important; /* USUNIĘTO LINIE */
}

.content-header::after {
  display: none !important; /* CAŁKOWITE WYŁĄCZENIE ŚRODKOWEJ KRESKI */
}

/* ---------- 7) Formularze / login ---------- */
.venore-login-form input[type="text"],
.venore-login-form input[type="password"]{
  width:100%; padding:10px; margin-bottom:10px; border-radius:3px; box-sizing:border-box;
  border:1px solid var(--panel-border-color); background:rgba(13,13,13,.7); color:var(--text-color);
}
.venore-login-form input:focus{
  outline:none; border-color:var(--accent-color); box-shadow:0 0 5px rgba(153,92,0,.5);
}
.venore-login-form .login-options{
  display:flex; justify-content:space-between; align-items:center; margin-top:15px;
}
.venore-login-form .lost-link{ font-size:.9rem; color:var(--link-color); text-decoration:none; }
.venore-login-form .lost-link:hover{ color:var(--link-hover-color); }

/* ---------- 8) Buttony ---------- */
.venore-btn{
  display:inline-block; padding:10px 20px; border:none; border-radius:3px; cursor:pointer;
  font:500 14px/1 Roboto, sans-serif; text-transform:uppercase; letter-spacing:1px; text-decoration:none;
  color:var(--btn-text-color);
  background:linear-gradient(to bottom, #1d3246, #0d1922);
  transition:.3s;
}
.venore-btn:hover{
  background:linear-gradient(to bottom, #284967, #1d3246);
  transform:translateY(-2px);
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}

/* ---------- 9) Statystyki / News / Nagłówki ---------- */
.venore-stat-item{ text-align:center; padding:10px 5px; margin-bottom:15px; border-radius:5px; transition:.2s; }
.venore-stat-item:hover{ background:rgba(29,50,70,.4); }
.venore-stat-value{ font-size:1.5rem; font-weight:700; color:var(--header-color); text-shadow:1px 1px 2px rgba(0,0,0,.5); }
.venore-stat-label{ font-size:.9rem; color:var(--text-color); margin-top:5px; }

.venore-news h1, .venore-news h2, .venore-news h3,
.venore-page-content h1, .venore-page-content h2, .venore-page-content h3{
  color:var(--header-color); font-family:Cinzel,serif;
}

/* ---------- 10) Rankingi / Highscores ---------- */
.venore-rankings table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.venore-rankings tr{ transition:.2s; border-bottom:1px solid rgba(82,75,54,.3); }
.venore-rankings tr:last-child{ border-bottom:none; }
.venore-rankings tr:hover{ background:rgba(29,50,70,.4); }
.venore-rankings td{ padding:10px 5px; }

/* Grid jednego wiersza */
.venore-player-row{
  display:grid; grid-template-columns:32px 44px 1fr; align-items:center; column-gap:10px; min-height:48px;
}
.venore-player-rank{ justify-self:end; opacity:.8; font-weight:600; line-height:1; }
.venore-outfit{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; margin:-22px 0 0 -26px; }
.venore-outfit img{ width:56px; height:56px; image-rendering:pixelated; display:block; }

.venore-player-info{
  display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.1;
  min-width:0; margin-left:-45px; margin-top:5px; text-decoration:none;
}
.venore-player-info .player-link{
  display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none;
}
.venore-player-level{ margin-top:2px; font-size:12px; opacity:.8; }
.player-link.online{ color:#1faa00; }
.player-link.offline{ color:#d32f2f; }

/* Filtry i paginacja */
.venore-filters{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.venore-filter{ display:flex; flex-direction:column; gap:6px; min-width:220px; }
.venore-filter label{ font-size:.9rem; opacity:.9; color:var(--header-color); }
.venore-select{
  appearance:none; -webkit-appearance:none;
  background:rgba(13,13,13,.7); border:1px solid var(--panel-border-color); color:var(--text-color);
  padding:10px 12px; border-radius:6px; outline:none; transition:.2s;
}
.venore-select:focus{ border-color:var(--accent-color); box-shadow:0 0 8px rgba(55,117,171,.35); }
.venore-pagination{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }

/* ---------- 11) Legacy headline catcher (venore-page-content) ---------- */
.venore-page-content > table[border="0"][cellspacing="1"][cellpadding="4"][width="100%"]{
  border-collapse:separate!important; border-spacing:0!important; margin-bottom:14px; max-width:1250px;
  background:linear-gradient(180deg, rgba(20,35,60,.80), rgba(8,18,35,.92));
  border:1px solid #1a2e44; border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03); overflow:hidden;
}
.venore-page-content > table[border="0"][cellspacing="1"][cellpadding="4"][width="100%"] thead td{
  position:relative; padding:10px 14px!important;
  background:linear-gradient(180deg, rgba(20,35,60,.90), rgba(12,24,44,.96))!important;
  color:#d8e8ff!important; font-family:Cinzel,serif; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.venore-page-content > table[border="0"][cellspacing="1"][cellpadding="4"][width="100%"] thead td::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, rgba(59,196,255,.35), rgba(59,196,255,0));
}
.venore-page-content > table[border="0"][cellspacing="1"][cellpadding="4"][width="100%"] tbody > tr > td{
  padding:10px 12px!important; color:#e9eef6;
  background:linear-gradient(180deg, rgba(16,29,49,.85), rgba(10,20,36,.92))!important;
  border-top:1px solid #1a2e44;
}
.venore-page-content > table[border="0"][cellspacing="1"][cellpadding="4"][width="100%"] [bgcolor],
.venore-page-content > table[border="0"][cellspacing="1"][cellpadding="4"][width="100%"] [style*="background"]{ background:transparent!important; }
.venore-page-content > table[border="0"][cellspacing="1"][cellpadding="4"][width="100%"] .TableContent{ background:transparent!important; border:0!important; }

/* ---------- 12) Sekcja Gildii (.gd – scoped) ---------- */
.gd{
  --grad:linear-gradient(180deg, rgba(20,35,60,.80), rgba(8,18,35,.92));
  --grad-head:linear-gradient(180deg, rgba(20,35,60,.90), rgba(12,24,44,.96));
  --br:#1a2e44; --text:#e9eef6; --head:#d8e8ff; --muted:#9fb0c4; --sep:rgba(255,255,255,.06);
  font-family:Roboto,"Segoe UI",Arial,sans-serif; color:var(--text);
}
.gd .TableShadowContainerRightTop,
.gd .TableShadowRightTop,
.gd .TableShadowContainer,
.gd .TableBottomShadow,
.gd .TableBottomLeftShadow,
.gd .TableBottomRightShadow{ display:none!important; background:none!important; }

.gd .TableContainer{
  background:var(--grad)!important; border:1px solid var(--br)!important; border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03); overflow:hidden; margin-bottom:16px;
}
.gd .CaptionContainer, .gd .CaptionInnerContainer{ background:var(--grad-head)!important; border-bottom:1px solid rgba(255,255,255,.04)!important; }
.gd .CaptionInnerContainer{ position:relative; padding:10px 14px; }
.gd .CaptionInnerContainer .Text{ font-family:Cinzel,serif; text-transform:uppercase; letter-spacing:.85px; color:var(--head); font-weight:800; }

.gd .InnerTableContainer{ padding:12px; }
.gd .TableContentAndRightShadow, .gd .TableContentContainer, .gd .TableContent{
  background:linear-gradient(180deg, rgba(16,29,49,.85), rgba(10,20,36,.92))!important;
  border:1px solid var(--br)!important; border-radius:12px; overflow:hidden;
}
.gd .TableContent{ width:100%; border-collapse:separate; border-spacing:0; }
.gd .TableContent td{ padding:10px 12px; border:none!important; color:var(--text); }
.gd .TableContent tr + tr td{ border-top:1px solid var(--sep)!important; }
.gd .TableContent [bgcolor]{ background:transparent!important; }

.gd .TableContent .LabelH td,
.gd .TableContent thead td, .gd .TableContent thead th{
  background:rgba(255,255,255,.03)!important; color:var(--head)!important; font-weight:800;
  border-bottom:1px solid var(--sep)!important;
}

.gd img[width="64"][height="64"]{ display:block; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.gd td[style*="word-break"]{ word-break:break-word!important; }
.gd small, .gd .muted{ color:var(--muted); }
.gd form{ margin:0; }
.gd input[type="submit"], .gd .BigButtonText{ cursor:pointer; }
.gd .status-badge{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.3px; border:1px solid; }
.gd .status-online{ color:#52da7a; background:#10351f; border-color:#2a7b49; }
.gd .status-offline{ color:#f07474; background:#2a1515; border-color:#7b2a2a; }

/* Lista gildii */
.gd .TableContent tbody tr td:first-child{ width:72px; }
.gd .TableContent tbody tr td:last-child{ width:12%; text-align:right; }

.gd table[border="0"][cellspacing="1"][cellpadding="4"]{
  background:var(--grad); border:1px solid var(--br); border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03); padding:10px;
}
.gd table[border="0"][cellspacing="1"][cellpadding="4"] td{ background:transparent!important; }

/* Manager */
.gd table[style*="clear:both"]{
  width:100%; border:1px solid var(--br); border-radius:12px; overflow:hidden;
  background:var(--grad); border-collapse:separate; border-spacing:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.gd table[style*="clear:both"] tr:first-child td{
  background:var(--grad-head); color:var(--head); font-weight:800; border-bottom:1px solid var(--sep);
}
.gd table[style*="clear:both"] td{ padding:10px 12px; }
.gd a{ color:#dfe9f4; text-decoration:none; }
.gd a:hover{ color:#e3d6a2; }
.gd input[type="text"]{
  height:34px; padding:6px 10px; border-radius:10px; border:1px solid #2a3a4a; background:#0f1d30; color:var(--text);
}
.gd input[type="text"]:focus{ outline:none; border-color:#2f75c9; box-shadow:0 0 0 3px rgba(59,196,255,.08); }
.gd input[type="submit"]{
  appearance:none; padding:8px 12px; border-radius:10px; border:1px solid var(--br);
  background:linear-gradient(180deg,#1c3150,#0e1b31); color:#e9eef6; font-weight:800; letter-spacing:.3px;
}
.gd input[type="submit"]:hover{ filter:brightness(1.05); }
.gd .Border_2, .gd .Border_3, .gd .BoxContent{ background:transparent!important; border:none!important; }
.gd h1{ margin:0; font-family:Cinzel,serif; font-weight:800; letter-spacing:.6px; color:var(--head); text-shadow:0 1px 0 rgba(0,0,0,.35); }
.gd .TableContent tr td:last-child{ white-space:nowrap; }
.gd span[style*="float: right"] a{ color:#f3b5b5; }
.gd span[style*="float: right"] a:hover{ color:#fff; }
.gd .Table3 td, .gd .Table5 td{ background:transparent!important; }
.gd .TableContent td[style*="float: right"]{ float:right; }

/* ---------- 13) Formularze legacy (venore-page-content) ---------- */
.venore-page-content{
  --grad:linear-gradient(180deg, rgba(20,35,60,.80), rgba(8,18,35,.92));
  --head:linear-gradient(180deg, rgba(22,40,68,.95), rgba(12,24,44,.98));
  --br:#1a2e44; --sep:rgba(255,255,255,.05); --text:#e9eef6; --muted:#9fb0c4;
}
.venore-page-content .TableShadowContainerRightTop,
.venore-page-content .TableShadowRightTop,
.venore-page-content .TableShadowContainer,
.venore-page-content .TableBottomShadow,
.venore-page-content .TableBottomLeftShadow,
.venore-page-content .TableBottomRightShadow{ display:none!important; background:none!important; }

.venore-page-content .TableContainer{
  background:var(--grad)!important; border:1px solid var(--br)!important; border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03); overflow:hidden; margin-bottom:14px;
}
.venore-page-content .CaptionContainer, .venore-page-content .CaptionInnerContainer{
  background:linear-gradient(180deg, rgba(20,35,60,.8), rgba(8,18,35,.92))!important; border-bottom:1px solid var(--sep)!important;
}
.venore-page-content .CaptionInnerContainer .Text{
  font-family:Cinzel,serif; text-transform:uppercase; letter-spacing:.9px; color:#d8e8ff; font-weight:800;
}
.venore-page-content .Table3, .venore-page-content .Table5{ background:transparent!important; border:0!important; }
.venore-page-content .InnerTableContainer{ padding:10px 10px 12px; }
.venore-page-content .TableContentContainer, .venore-page-content .TableContentAndRightShadow, .venore-page-content .TableContent{
  background:var(--grad)!important; border:1px solid var(--br)!important; border-radius:12px; overflow:hidden;
}
.venore-page-content .TableContent td{ padding:8px 12px!important; border:none!important; color:var(--text); }
.venore-page-content .TableContent tr + tr td{ border-top:1px solid var(--sep)!important; }

.venore-page-content .TableContent .LabelH td, .venore-page-content .LabelH td{
  background:linear-gradient(180deg, rgba(20,35,60,.8), rgba(8,18,35,.92))!important;
  color:#e9eef6!important; font-weight:700; border-bottom:1px solid var(--sep)!important;
}

/* Pola, textarea itd. */
.venore-page-content .TableContent input[type="text"],
.venore-page-content .TableContent input[type="password"],
.venore-page-content .TableContent select,
.venore-page-content .TableContent textarea{
  width:100%; max-width:420px; height:36px; padding:6px 10px; border-radius:10px; box-sizing:border-box;
  border:1px solid #2a3a4a; background:#0f1d30; color:var(--text);
  outline:none; transition:border-color .18s, box-shadow .18s, background .18s;
}
.venore-page-content .TableContent textarea{ height:auto; min-height:96px; resize:vertical; }
.venore-page-content .TableContent input:focus,
.venore-page-content .TableContent select:focus,
.venore-page-content .TableContent textarea:focus{
  border-color:#2f75c9; box-shadow:0 0 0 3px rgba(59,196,255,.08); background:#10233a;
}

/* Radio/checkbox i linki */
.venore-page-content .TableContent input[type="radio"]{ position:relative; top:1px; margin-right:6px; }
.venore-page-content .TableContent input[type="radio"] + label{
  display:inline-block; margin:2px 8px 2px 2px; padding:5px 10px; border-radius:999px;
  border:1px solid rgba(26,46,68,.7); background:#0f1d2c; color:var(--text); font-weight:700; cursor:pointer;
}
.venore-page-content .TableContent input[type="radio"]:checked + label{
  border-color:#3bc4ff; box-shadow:inset 0 0 0 1px rgba(59,196,255,.25); background:rgba(59,196,255,.08);
}
.venore-page-content .TableContent input[type="checkbox"]{ transform:translateY(2px); margin-right:6px; }
.venore-page-content .TableContent a{ color:#dfe9f4; text-decoration:none; border-bottom:1px dotted rgba(223,233,244,.35); }
.venore-page-content .TableContent a:hover{ color:#e3d6a2; border-bottom-color:transparent; }

/* Submit fallback */
.venore-page-content input[type="submit"]{
  appearance:none; -webkit-appearance:none;
  padding:8px 16px; border-radius:12px; border:1px solid var(--br);
  background:linear-gradient(180deg,#1c3150,#0e1b31); color:#e9eef6; font-weight:800; letter-spacing:.3px; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.venore-page-content input[type="submit"]:hover{ filter:brightness(1.05); }

.venore-page-content .status-online{ background:#10351f; color:#52da7a; border:1px solid #2a7b49; padding:2px 8px; border-radius:999px; font-weight:800; }
.venore-page-content .status-offline{ background:#2a1515; color:#f07474; border:1px solid #7b2a2a; padding:2px 8px; border-radius:999px; font-weight:800; }

/* Gołe tabele i przyciski — fallback + czyszczenie */
.venore-page-content table:not([class]), .venore-page-content table[class=""]{
  width:100%; margin:10px 0; border-collapse:separate; border-spacing:0!important;
  background:var(--grad); border:1px solid var(--br); border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
}
.venore-page-content table:not([class]) td, .venore-page-content table[class=""] td{
  padding:10px 12px!important; color:var(--text); border:none!important;
}
.venore-page-content table:not([class]) tr + tr td, .venore-page-content table[class=""] tr + tr td{
  border-top:1px solid var(--sep)!important;
}
.venore-page-content tr[bgcolor], .venore-page-content td[bgcolor]{ background:transparent!important; }
.venore-page-content table:not([class]) td:first-child, .venore-page-content table[class=""] td:first-child{
  color:#d8e8ff; font-weight:700; white-space:nowrap;
}
.venore-page-content input[type="text"],
.venore-page-content input[type="password"],
.venore-page-content input[type="email"],
.venore-page-content select,
.venore-page-content textarea{
  width:100%; max-width:420px; height:36px; padding:6px 10px; border-radius:10px; box-sizing:border-box;
  border:1px solid #2a3a4a; background:#0f1d30; color:var(--text);
  outline:none; transition:border-color .18s, box-shadow .18s, background .18s;
}
.venore-page-content textarea{ min-height:96px; resize:vertical; }
.venore-page-content input:focus, .venore-page-content select:focus, .venore-page-content textarea:focus{
  border-color:#2f75c9; box-shadow:0 0 0 3px rgba(59,196,255,.08); background:#10233a;
}
.venore-page-content input[type="radio"]{ position:relative; top:1px; margin-right:6px; }
.venore-page-content input[type="checkbox"]{ transform:translateY(2px); margin-right:6px; }
.venore-page-content a{ color:#dfe9f4; text-decoration:none; border-bottom:1px dotted rgba(223,233,244,.35); }
.venore-page-content a:hover{ color:#e3d6a2; border-bottom-color:transparent; }
.venore-page-content input[type="submit"]{
  appearance:none; padding:8px 16px; border-radius:12px; border:1px solid var(--br);
  background:linear-gradient(180deg,#1c3150,#0e1b31); color:#e9eef6; font-weight:800; letter-spacing:.3px; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.venore-page-content input[type="submit"]:hover{ filter:brightness(1.05); }

/* Nie styluj tabelek, które są tylko uchwytem na przyciski */
@supports(selector(:has(*))){
  .venore-page-content table:not([class]):has(input[type="submit"]),
  .venore-page-content table:not([class]):has(input[type="image"]),
  .venore-page-content table:not([class]):has(img[src*="_sbutton_"]),
  .venore-page-content table:not([class]):has(.BigButton){
    background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0!important;
  }
}
.venore-page-content table:not([class]) > tbody > tr > td > table,
.venore-page-content table:not([class]) > tbody > tr > td > form > table{ background:transparent!important; border:0!important; box-shadow:none!important; border-radius:0!important; }
.venore-page-content table:not([class]) > tbody > tr > td > table td,
.venore-page-content table:not([class]) > tbody > tr > td > form > table td{ padding:0!important; }

/* ---------- 14) Shop offers (scoped) ---------- */
.venore-page-content .offer_container{
  --grad:linear-gradient(180deg, rgba(20,35,60,.80), rgba(8,18,35,.92));
  --head:linear-gradient(180deg, rgba(20,35,60,.90), rgba(12,24,44,.96));
  --br:#1a2e44; --sep:rgba(255,255,255,.06); --text:#e9eef6; --headText:#d8e8ff;
  color:var(--text);
}
.venore-page-content .offer_container > table:not(.offer_table){
  width:100%; margin:12px 0; border-collapse:separate; border-spacing:0;
  background:var(--grad); border:1px solid var(--br); border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03); overflow:hidden;
}
.venore-page-content .offer_container > table:not(.offer_table) thead td{
  padding:10px 12px!important; background:var(--head)!important; color:var(--headText)!important;
  font-family:Cinzel,serif; font-weight:800; letter-spacing:.8px; text-transform:uppercase; border-bottom:1px solid var(--sep);
}
.venore-page-content .offer_container > table:not(.offer_table) td{ padding:10px 12px!important; background:transparent!important; }
.venore-page-content .offer_container [bgcolor]{ background:transparent!important; }

.venore-page-content .offer_container .offer_tabs,
.venore-page-content .offer_container .offers,
.venore-page-content .offer_container .offers-menu{
  display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 8px;
}
.venore-page-content .offer_container .offer_tabs a,
.venore-page-content .offer_container .offers a,
.venore-page-content .offer_container .offers-menu a{
  display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 14px;
  border-radius:999px; font-weight:700; color:#dfe9f4; text-decoration:none;
  border:1px solid rgba(26,46,68,.7); background:#0f1d2c; transition:.18s;
}
.venore-page-content .offer_container .offer_tabs a:hover,
.venore-page-content .offer_container .offers a:hover,
.venore-page-content .offer_container .offers-menu a:hover{
  border-color:#3bc4ff; box-shadow:inset 0 0 0 1px rgba(59,196,255,.25); color:#e3d6a2;
}
.venore-page-content .offer_container .offer_tabs .active,
.venore-page-content .offer_container .offers .active,
.venore-page-content .offer_container .offers-menu .active{
  background:linear-gradient(180deg,#1c3150,#0e1b31); border-color:#2f75c9;
}

.venore-page-content .offer_table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--grad); border:1px solid var(--br); border-radius:12px; overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.venore-page-content .offer_table tr:first-child td{
  padding:10px 12px; background:var(--head)!important; color:var(--headText)!important; font-weight:800;
  border-bottom:1px solid var(--sep);
}
.venore-page-content .offer_table td{ padding:10px 12px; color:var(--text); border:none; }
.venore-page-content .offer_table tr + tr td{ border-top:1px solid var(--sep); }
.venore-page-content .offer_table [bgcolor]{ background:transparent!important; }

.venore-page-content .offer_table td:first-child{ width:72px; text-align:center; }
.venore-page-content .offer_table td:nth-child(3){ width:110px; text-align:center; font-weight:700; }
.venore-page-content .offer_table td:last-child{ width:140px; text-align:center; }
.venore-page-content .offer_table img{ max-width:64px; height:auto; display:block; margin:0 auto; image-rendering:pixelated; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.venore-page-content .offer_table tbody tr:hover td{ background:rgba(30,52,82,.22)!important; }

.venore-page-content .offer_table input[type="submit"],
.venore-page-content .offer_table button,
.venore-page-content .offer_table a[href*="buy"],
.venore-page-content .offer_table a[href*="select"]{
  appearance:none; display:inline-block; padding:8px 14px; border-radius:10px; text-decoration:none;
  border:1px solid var(--br);
  background:linear-gradient(180deg,#1c3150,#0e1b31); color:#e9eef6; font-weight:800; letter-spacing:.3px;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.venore-page-content .offer_table input[type="submit"]:hover,
.venore-page-content .offer_table button:hover,
.venore-page-content .offer_table a[href*="buy"]:hover,
.venore-page-content .offer_table a[href*="select"]:hover{ filter:brightness(1.06); }

/* Małe zakładki „offer_type” w jednej linii */
.venore-page-content .offer_container .offer_type{
  display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 10px; margin:8px 6px 6px 0;
  border-radius:999px; font-size:12px; letter-spacing:.2px; color:#dfe9f4; text-decoration:none;
  border:1px solid #1a2e44; background:linear-gradient(180deg, #00172e, #001f3d);
  box-shadow:inset 0 0 6px rgba(0,0,0,.5); transition:.18s;
}
.venore-page-content .offer_container .offer_type:hover{
  color:#e3d6a2; border-color:#2f75c9; box-shadow:inset 0 0 0 1px rgba(59,196,255,.22), 0 6px 12px rgba(0,0,0,.35);
}
.venore-page-content .offer_container .offer_type.active,
.venore-page-content .offer_container .offer_type[aria-current="true"],
.venore-page-content .offer_container b.offer_type,
.venore-page-content .offer_container > b{
  background:linear-gradient(180deg, #103052, #0b1f39); border-color:#2f75c9; color:#e3d6a2;
  box-shadow:inset 0 0 0 1px rgba(59,196,255,.25), 0 6px 14px rgba(0,0,0,.45); padding:0 11px;
}
@media (min-width:1100px){
  .venore-page-content .offer_container{ white-space:nowrap; }
  .venore-page-content .offer_container .offer_table{ display:block; white-space:normal; margin-top:6px; }
}

/* ---------- 15) Social, logged user, dekoracje ---------- */
.venore-social{ display:flex; justify-content:center; gap:15px; margin-bottom:5px; }
.venore-social a{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  background:var(--btn-color); color:var(--btn-text-color); transition:.3s;
}
.venore-social a:hover{ background:var(--btn-hover-color); transform:translateY(-3px); box-shadow:0 5px 10px rgba(0,0,0,.3); }

.venore-logged-user{ text-align:center; }
.venore-logged-user p{ margin-bottom:15px; }
.venore-account-buttons{ display:flex; gap:10px; }
.venore-account-buttons .venore-btn{
  flex:2; padding:8px 10px; font-size:12px; font-weight:700;
  background:linear-gradient(180deg, #00172e, #001f3d);
  border:1px solid var(--header-color); color:var(--header-color);
  box-shadow:0 0 0 1px rgba(225,225,225,.25), 0 0 8px rgba(106,140,166,.28);
}

.venore-logo-image{
  width:100%; height:100px; margin-bottom:0;
  background:url("images/own/logo.png") left/auto 100% no-repeat;
}

.server-name-decoration{ display:inline-block; position:relative; }
.server-name-decoration::before, .server-name-decoration::after{
  content:""; position:absolute; bottom:-5px; height:3px; background:linear-gradient(to right, transparent, var(--header-color), transparent);
}
.server-name-decoration::before{ left:0; right:55%; }
.server-name-decoration::after{ right:0; left:55%; }

/* ---------- 16) Stopka ---------- */
.venore-footer{
  text-align:center; padding:30px 0 20px; margin-top:30px;
  border-top:1px solid var(--panel-border-color); color:#888; font-size:.9rem;
}
.venore-copyright{ margin-bottom:10px; }
.designer-credit{
  color:var(--header-color); font-weight:500; font-style:italic; margin-top:10px;
  user-select:none; pointer-events:none; -webkit-user-select:none;
}

/* ---------- 17) Języki ---------- */
.lang-switch{ display:flex; gap:10px; align-items:center; }
.lang-flag img{ width:26px; height:18px; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); transition:transform .12s, filter .12s; }
.lang-flag:hover img{ transform:translateY(-1px); filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.lang-flag.active img{ outline:2px solid #6a8ca6; outline-offset:2px; border-radius:6px; }

/* ---------- 18) Responsive ---------- */
@media (max-width:1100px){
  .hero-nav__inner{ gap:14px; height:60px; }
  .hero-nav .tab{ min-width:118px; height:36px; font-size:12px; }
  .badge-online{ height:60px; }
}
@media (max-width:992px){
  .venore-layout{ flex-direction:column; }
  .venore-sidebar{ width:100%; }
}
@media (max-width:900px){
  .hero-nav__inner{ gap:10px; }
  .hero-nav .tab{ min-width:104px; padding:0 10px; }
}


/* ==========================================
   language-selector.css
   ========================================== */

/* Language Selector Styles */
.language-selector {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-left: 15px;
}

.current-language {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border-radius: 4px;
    transition: var(--transition);
}

.current-language:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.flag-icon {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--bg-card);
    min-width: 160px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    border: 1px solid var(--darkborder);
    margin-top: 5px;
}

.language-selector.active .dropdown-content {
    display: block;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.language-option:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
    color: var(--primary-color);
}

.language-option:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.language-option:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.language-name {
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .language-selector {
        margin: 10px 0;
    }
    
    .dropdown-content {
        position: static;
        width: 100%;
        box-shadow: none;
        margin-top: 10px;
    }
} 

/* ==========================================
   auth.css
   ========================================== */

/* ===== AUTH (Login / małe karty) – Exodar deep navy ===== */
.auth{
  --grad: linear-gradient(180deg, rgba(20,35,60,.80), rgba(8,18,35,.92));
  --br:#1a2e44;
  --text:#e9eef6;
  --head:#d8e8ff;
  --muted:#9fb0c4;
  --accent:#3bc4ff;
  max-width: 360px;       /* zgrabna karta */
  margin: 14px auto;      /* wycentrowana w kolumnie środkowej */
  color: var(--text);
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
}

/* karta */
.auth .TableContainer{
  background: var(--grad) !important;
  border: 1px solid var(--br) !important;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  overflow: hidden;
}

/* pasek tytułu */
.auth .CaptionInnerContainer span[class^="Caption"]{ display:none !important; }
.auth .CaptionInnerContainer{
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(20,35,60,.90), rgba(12,24,44,.96)) !important;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.auth .CaptionInnerContainer .Text{
  font-family: Cinzel, serif;
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 800;
  color: var(--head);
  text-align: center;
}

/* wnętrze */
.auth .InnerTableContainer{ padding: 12px; }
.auth .TableContent{ background: transparent !important; border: 0 !important; }
.auth .TableContent tr + tr td{ border-top: 0 !important; }

/* pola */
.auth__input{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #2a3a4a;
  background: #0f1d30;
  color: var(--text);
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
  margin: 6px 0;
  box-sizing: border-box;
}
.auth__input::placeholder{ color: var(--muted); }
.auth__input:focus{ border-color:#2f75c9; box-shadow:0 0 0 3px rgba(59,196,255,.08); background:#10233a; }

/* akcje */
.auth__actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.auth__link{
  color:#dfe9f4; text-decoration:none; font-weight:700;
}
.auth__link:hover{ color:#e3d6a2; }

.auth__btn{
  appearance:none; -webkit-appearance:none;
  padding:10px 16px; border-radius:12px;
  border:1px solid var(--br);
  background: linear-gradient(180deg, #1c3150, #0e1b31);
  color:var(--text); font-weight:800; letter-spacing:.35px;
  cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.auth__btn:hover{ filter:brightness(1.06); }

/* jeżeli chcesz ukryć „Remember me” jak na screenie */
.auth .auth__remember{ display: none; }


/* ==========================================
   account-create.css
   ========================================== */

/* ===== ACCOUNT CREATE – Exodar deep navy (compact) ===== */
#createaccount{
  --grad: linear-gradient(180deg, rgba(20, 35, 60, 0.8), rgba(8, 18, 35, 0.92));
  --br:#1a2e44;
  --text:#e9eef6;
  --head:#d8e8ff;
  --muted:#9fb0c4;
  --sep:rgba(255,255,255,.06);
  --accent:#3bc4ff;
  font-family:Roboto,"Segoe UI",Arial,sans-serif;
  color:var(--text);
}

/* ==== KARTA / NAGŁÓWEK ==== */
/* schowaj obrazkowe ramki z include'a */
#createaccount .CaptionInnerContainer span[class^="Caption"]{ display:none!important; }

/* karta: bez „szarej ramki”, tylko cień */
#createaccount .TableContainer,
#createaccount .CaptionContainer,
#createaccount .CaptionInnerContainer{
  background:var(--grad)!important;
  border:1px solid transparent!important;   /* << usuwa wrażenie zewnętrznego obrysu */
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  overflow:hidden;
}

/* tytuł – mocniejszy, z delikatnym akcentem pod spodem */
#createaccount .CaptionInnerContainer{ position:relative; padding:10px 14px; }
#createaccount .CaptionInnerContainer .Text{
  font-family:Cinzel,serif; text-transform:uppercase; letter-spacing:.85px;
  color:var(--head); font-weight:800; text-shadow:0 1px 0 rgba(0,0,0,.35);
}
#createaccount .CaptionInnerContainer::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, rgba(59,196,255,.38), rgba(59,196,255,0));
}

/* wnętrze karty – kompaktowe */
#createaccount .InnerTableContainer{ padding:10px; }

/* wyłącz stare cienie i obrazki */
#createaccount .TableShadowContainerRightTop,
#createaccount .TableShadowRightTop,
#createaccount .TableShadowContainer,
#createaccount .TableBottomShadow,
#createaccount .TableBottomLeftShadow,
#createaccount .TableBottomRightShadow{ display:none!important; background:none!important; }

/* tabela treści – lżejszy obrys, mniejsze pady */
#createaccount .TableContentAndRightShadow,
#createaccount .TableContentContainer,
#createaccount .TableContent{
  background:var(--grad)!important;
  border:1px solid rgba(26,46,68,.55)!important;
  border-radius:12px;
  overflow:hidden;
}
#createaccount .TableContent td{
  padding:6px 10px !important;    /* << ciaśniej */
  border:none!important;
}
#createaccount .TableContent tr + tr td{ border-top:1px solid var(--sep)!important; }
#createaccount .TableContent tr[bgcolor],
#createaccount .TableContent tr[bgcolor] > td{ background:transparent!important; }

/* etykiety */
#createaccount .LabelV,
#createaccount .LabelV150,
#createaccount .LabelV175,
#createaccount .LabelV80{
  color:var(--head)!important; font-weight:700; white-space:nowrap;
}

/* ==== POLA – kompakt ==== */
#createaccount input[type="text"],
#createaccount input[type="password"],
#createaccount select{
  width:100%; max-width:420px;
  height:34px;                      /* << mniejsze */
  padding:6px 10px;                 /* << ciaśniej */
  border-radius:10px;
  border:1px solid #2a3a4a; background:#0f1d30; color:var(--text);
  outline:none; transition:border-color .18s, box-shadow .18s, background .18s;
  font-size:14px;
}
#createaccount input::placeholder{ color:var(--muted); opacity:.75; }
#createaccount input:focus, #createaccount select:focus{
  border-color:#2f75c9; box-shadow:0 0 0 3px rgba(59,196,255,.08); background:#10233a;
}

/* „ok/nok” – domyślnie ukryte, żeby nie robiły dziwnych kropek */
#createaccount img[id$="_indicator"]{ display:none !important; }

/* ==== RADIO – pille kompaktowe ==== */
#createaccount .OptionContainer{ display:inline-block; margin:2px 8px 6px 0; position:relative; }
#createaccount .OptionContainer input[type="radio"]{ position:absolute; opacity:0; }
#createaccount .OptionContainer input[type="radio"] + label{
  display:inline-block; padding:5px 10px; border-radius:999px;
  border:1px solid rgba(26,46,68,.7); background:#0f1d2c; color:var(--text);
  cursor:pointer; text-transform:capitalize; user-select:none; font-weight:700;
  font-size:14px;
}
#createaccount .OptionContainer input[type="radio"]:checked + label{
  border-color:var(--accent); box-shadow:inset 0 0 0 1px rgba(59,196,255,.25);
  background:rgba(59,196,255,.08);
}

/* ==== CHECKBOX ==== */
#createaccount input[type="checkbox"]{ transform:translateY(2px); margin-right:8px; }
#createaccount label[for="accept_rules"] a{ color:#dfe9f4; border-bottom:1px dotted rgba(223,233,244,.35); }
#createaccount label[for="accept_rules"] a:hover{ color:#e3d6a2; }

/* ==== BŁĘDY – mniejsze i tylko gdy są ==== */
#createaccount .FormFieldError{
  display:inline-block; margin-top:6px;
  color:#ffb7b7; background:rgba(255,70,70,.08);
  border:1px solid rgba(255,70,70,.25); padding:5px 8px; border-radius:8px;
  font-size:13px;
}
#createaccount .FormFieldError:empty{ display:none; }

/* schowaj całe wiersze, gdy błąd pusty (Chrome/Edge/Opera/Safari) */
@supports(selector(:has(*))){
  #createaccount .TableContent tr:has(.FormFieldError:empty){ display:none; }
}

/* drobiazgi */
#createaccount #SuggestAccountNumber{ margin-top:2px; color:var(--muted); font-size:11px; }
#createaccount #SuggestAccountNumber a{ color:#e3d6a2; text-decoration:none; }
#createaccount #SuggestAccountNumber a:hover{ color:#fff; }

/* tabelki pomocnicze w opcjach */
#createaccount table[width="100%"] .OptionContainer label{ font-weight:700; }

/* zmniejsz przerwy między „kartami” formularza */
#createaccount .TableContainer{ margin-bottom:12px; }
/* === Zbij „szarą otoczkę” generowaną przez wrapper-table w sekcjach === */
#createaccount .InnerTableContainer > table{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-collapse: separate !important;   /* żeby nie dziedziczył cieni */
}
#createaccount .InnerTableContainer > table > tbody > tr > td{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;                  /* usuwa faliste marginesy dookoła */
}

/* zewnętrzna karta – ten sam look co „Characters” */
#createaccount .TableContainer{
  background: linear-gradient(180deg, rgba(20, 35, 60, 0.8), rgba(8, 18, 35, 0.92)) !important;
  border: 1px solid #1a2e44 !important;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03) !important;
  overflow: hidden;
}

/* pasek nagłówka – jak w listach */
#createaccount .CaptionContainer,
#createaccount .CaptionInnerContainer{
  background: linear-gradient(180deg, rgba(20, 35, 60, 0.9), rgba(12, 24, 44, 0.96)) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}

/* wewnętrzne „pudełka” (3 sekcje) – spójne obramowanie */
#createaccount .TableContentAndRightShadow,
#createaccount .TableContentContainer,
#createaccount .TableContent{
  background: linear-gradient(180deg, rgba(16, 29, 49, 0.85), rgba(10, 20, 36, 0.92)) !important;
  border: 1px solid #1a2e44 !important;
  border-radius: 12px;
}

/* ciaśniej pomiędzy sekcjami i w środku */
#createaccount .InnerTableContainer{ padding: 10px 10px 12px !important; }
#createaccount .TableContainer{ margin-bottom: 10px !important; }

/* (porządki) gdyby gdzieś jeszcze zaciągał szare tła z Table3/Table5 */
#createaccount .Table3, 
#createaccount .Table5{
  background: transparent !important;
  border: 0 !important;
}
#createaccount .Table3 td, 
#createaccount .Table5 td{
  background: transparent !important;
  border: 0 !important;
}
/* === WRAP-FORCE: wszystko w obrębie .ac ma mieć wygląd jak „Characters” === */

/* zerujemy tła/bordery wszystkich wrapperów headline w tej stronie */
.ac .Table3,
.ac .Table5,
.ac .Table3 > tbody > tr > td,
.ac .Table5 > tbody > tr > td,
.ac .InnerTableContainer > table,
.ac .InnerTableContainer > table > tbody > tr > td{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* zewnętrzna karta */
.ac .TableContainer{
  background: linear-gradient(180deg, rgba(20,35,60,0.80), rgba(8,18,35,0.92)) !important;
  border: 1px solid #1a2e44 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03) !important;
  overflow: hidden !important;
}

/* pasek tytułu */
.ac .CaptionInnerContainer span[class^="Caption"]{ display:none !important; }
.ac .CaptionContainer,
.ac .CaptionInnerContainer{
  background: linear-gradient(180deg, rgba(20,35,60,.9), rgba(12,24,44,.96)) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.ac .CaptionInnerContainer .Text{
  font-family: Cinzel, serif;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: #d8e8ff;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.ac .CaptionInnerContainer::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, rgba(59,196,255,.35), rgba(59,196,255,0));
}

/* wnętrza trzech sekcji */
.ac .TableContentAndRightShadow,
.ac .TableContentContainer,
.ac .TableContent{
  background: linear-gradient(180deg, rgba(16,29,49,.85), rgba(10,20,36,.92)) !important;
  border: 1px solid #1a2e44 !important;
  border-radius: 12px !important;
}
.ac .TableContent tr + tr td{ border-top: 1px solid rgba(255,255,255,.05) !important; }

/* ciaśniejsze pady w środku i mniejsze odstępy między sekcjami */
.ac .InnerTableContainer{ padding: 10px 10px 12px !important; }
.ac .TableContainer{ margin-bottom: 10px !important; }

/* zabij obrazkowe cienie/ramki wstrzykiwane inline */
.ac [style*="table-shadow-"],
.ac [style*="box-frame-"],
.ac [style*="table-headline-border"],
.ac .TableContent[style*="border:1px solid"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* === KILL INLINE GREY: tr/td z inline background i domyślnym spacingiem === */
.ac table{
  border-collapse: separate !important;
  border-spacing: 0 !important;        /* usuwa domyślne 2px z UA stylesheet */
  background: transparent !important;
}
.ac tr,
.ac td,
.ac th{
  background: transparent !important;   /* domyślnie nic nie barwimy */
}

/* konkretnie te, które mają inline 'background-color:#2d3339' itp. */
.ac tr[style*="background"],
.ac tr[style*="background-color"],
.ac tr[bgcolor]{
  background: transparent !important;
}
.ac tr[style*="background"] > td,
.ac tr[style*="background-color"] > td,
.ac tr[bgcolor] > td{
  background: transparent !important;
}

/* czasem tło wpada na samą komórkę wrappera */
.ac td[style*="background"],
.ac td[style*="background-color"],
.ac td[bgcolor]{
  background: transparent !important;
}

/* na wszelki wypadek – zerujemy border/padding wrapperowych komórek */
.ac > form#createaccount > table,
.ac > form#createaccount > table > tbody > tr > td{
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* === OUTER CARD: cały formularz w jednym granatowym pudełku === */
.ac form#createaccount > table{
  background: linear-gradient(180deg, rgba(20,35,60,.80), rgba(8,18,35,.92)) !important;
  border: 1px solid #1a2e44 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03) !important;
  overflow: hidden !important;
}
/* padding w środku „carda” */
.ac form#createaccount > table > tbody > tr > td{
  padding: 12px 12px 14px !important;
  background: transparent !important;
}

/* headline (pasek tytułu) w stylu Characters */
.ac .CaptionInnerContainer span[class^="Caption"]{ display:none !important; }
.ac .CaptionContainer,
.ac .CaptionInnerContainer{
  background: linear-gradient(180deg, rgba(20,35,60,.90), rgba(12,24,44,.96)) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.ac .CaptionInnerContainer .Text{
  font-family: Cinzel, serif;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: #d8e8ff;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.ac .CaptionInnerContainer{ position:relative; }
.ac .CaptionInnerContainer::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, rgba(59,196,255,.35), rgba(59,196,255,0));
}

/* kill: inline tła i spacing wrapperowych tabel (to robiło „szarą otoczkę”) */
.ac table{ border-collapse: separate !important; border-spacing: 0 !important; }
.ac tr[style*="background"],
.ac tr[style*="background-color"],
.ac tr[bgcolor],
.ac td[style*="background"],
.ac td[style*="background-color"],
.ac td[bgcolor]{ background: transparent !important; }

/* wewnętrzne pudełka: zostawiamy granat + delikatny border */
.ac .TableContentAndRightShadow,
.ac .TableContentContainer,
.ac .TableContent{
  background: linear-gradient(180deg, rgba(16,29,49,.85), rgba(10,20,36,.92)) !important;
  border: 1px solid #1a2e44 !important;
  border-radius: 12px !important;
}
.ac .TableContent tr + tr td{ border-top: 1px solid rgba(255,255,255,.05) !important; }

/* ciaśniejsze sekcje */
.ac .InnerTableContainer{ padding: 10px 10px 12px !important; }
.ac .TableContainer{ margin-bottom: 10px !important; }

/* === POLA: trochę węższe, żeby zostawał margines po prawej === */
#ac, /* fallback gdyby coś plikowało */ 
#acount, 
#acct{} /* noop */

/* główna reguła */
#acount{} /* noop, zostaw */

.ac #createaccount input[type="text"],
.ac #createaccount input[type="password"],
.ac #createaccount select{
  width: 88% !important;         /* NIE na pełną szerokość */
  max-width: 520px !important;   /* sufit – wygląda proporcjonalnie */
  min-width: 260px;
  height: 34px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #2a3a4a;
  background: #0f1d30;
  color: #e9eef6;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
  box-sizing: border-box;
}
.ac #createaccount input[type="text"]:focus,
.ac #createaccount input[type="password"]:focus,
.ac #createaccount select:focus{
  border-color:#2f75c9;
  box-shadow:0 0 0 3px rgba(59,196,255,.08);
  background:#10233a;
}

/* spójny Submit (opcjonalnie – jeśli chcesz) */
.ac input[type="submit"]{
  appearance:none; -webkit-appearance:none;
  padding:10px 18px; border-radius:12px;
  border:1px solid #1a2e44;
  background: linear-gradient(180deg, #1c3150, #0e1b31);
  color:#e9eef6; font-weight:800; letter-spacing:.3px; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.ac input[type="submit"]:hover{ filter:brightness(1.05); }
.ac {
    margin-top: 20px;
}

/* ==========================================
   account-manage.css
   ========================================== */

/* ===== Account Manage (scoped .am) – Exodar deep navy ===== */
.am{
  --grad: linear-gradient(180deg, rgba(20,35,60,.80), rgba(8,18,35,.92));
  --grad-head: linear-gradient(180deg, rgba(20,35,60,.90), rgba(12,24,44,.96));
  --br:#1a2e44;
  --text:#e9eef6;
  --head:#d8e8ff;
  --muted:#9fb0c4;
  --row:#0f1d2f;
  --row2:#0c1827;
  --sep: rgba(255,255,255,.06);
  font-family: Roboto,"Segoe UI",Arial,sans-serif;
  color: var(--text);
}

/* layout */
.am-layout{ display:flex; gap:16px; margin-top:20px; }
.am-sidebar{ width:220px; flex:0 0 220px; }
.am-main{ flex:1 1 auto; min-width:0; }

/* sidebar */
.am-sidebar{
  background: var(--grad);
  border:1px solid var(--br);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
}
.am-sidebar__title{
  padding:10px 14px;
  background: var(--grad-head);
  border-bottom:1px solid rgba(255,255,255,.04);
  font-family: Cinzel, serif;
  text-transform: uppercase;
  letter-spacing:.8px;
  color: var(--head);
}
.am-nav{ padding:8px; }
.am-nav__link{
  display:block;
  padding:10px 12px;
  margin:6px 0;
  border-radius:10px;
  border:1px solid transparent;
  background: rgba(255,255,255,.03);
  color:#dfe9f4; text-decoration:none; font-weight:700;
}
.am-nav__link:hover{
  background: rgba(59,196,255,.08);
  border-color: rgba(59,196,255,.25);
}
.am-nav__link--danger:hover{ border-color:#e45c5c; background:rgba(228,92,92,.12); }

/* card */
.am-card{
  background: var(--grad);
  border:1px solid var(--br);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
  margin-bottom:16px;
}
.am-card__title{
  padding:10px 14px;
  background: var(--grad-head);
  border-bottom:1px solid rgba(255,255,255,.04);
  font-family: Cinzel, serif;
  text-transform: uppercase;
  letter-spacing:.85px;
  color: var(--head);
}
.am-card__body{ padding:12px; }

/* tables */
.am-table{ width:100%; border-collapse:separate; border-spacing:0; }
.am-table th, .am-table td{ padding:10px 12px; }
.am-table thead th{
  text-align:left; font-weight:800; color:var(--head);
  background: rgba(255,255,255,.03);
  border-bottom:1px solid var(--sep);
}
.am-table tbody tr + tr td{ border-top:1px solid var(--sep); }
.am-table__label{ width:200px; color:var(--head); font-weight:700; }

/* striped variant */
.am-table--striped tbody tr:nth-child(odd){ background: rgba(255,255,255,.02); }
.am-table--striped tbody tr:nth-child(even){ background: transparent; }

/* badges */
.am-badge{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:800;
  border:1px solid; letter-spacing:.3px;
}
.am-badge--online{ color:#52da7a; background:#10351f; border-color:#2a7b49; }
.am-badge--offline{ color:#f07474; background:#2a1515; border-color:#7b2a2a; }

/* hint / warning boxes */
.am-hint, .am-warning{
  margin-top:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--br);
  background: rgba(255,255,255,.03);
}
.am-warning{ border-color:#7b2a2a; background:rgba(228,92,92,.10); }

/* inline forms next to text */
.am-inline-form{ display:inline-block; margin-left:8px; }

/* action buttons row under characters */
.am-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

/* links */
.am a{ color:#dfe9f4; text-decoration:none; }
.am a:hover{ color:#e3d6a2; }

/* responsive */
@media (max-width: 920px){
  .am-layout{ flex-direction:column; }
  .am-sidebar{ width:100%; flex:none; }
  .am-table__label{ width:160px; }
}


/* ==========================================
   character.css
   ========================================== */

/* ===========================
   Character Profile (scoped)
   prefix: .cp
   =========================== */
.cp{
  /* Paleta */
  --bg:#081523;
  --panel:#0c1c2c;
  --panel-2:#0a1726;
  --br:#17324a;
  --br-soft:#13293d;
  --head:#cfe0f5;
  --text:#e9eef6;
  --muted:#a9b6c6;
  --good:#27c26a;
  --bad:#e45c5c;
  --accent:#4aa3ff;
  --glow:0 10px 28px rgba(0,0,0,.55);

  /* spójny gradient paneli + obrys */
  --panel-grad: linear-gradient(180deg, rgba(20,35,60,.80), rgba(8,18,35,.92));
  --panel-br: #1a2e44;

  /* layout */
  --cp-width: 960px;

  color:var(--text);
  font-family:Roboto,"Segoe UI",Arial,sans-serif;
  max-width:var(--cp-width);
  margin:0 auto;
  padding:0 12px;
  box-sizing:border-box;
}

/* Resety */
.cp table{ border-collapse:separate; border-spacing:0; width:100%; }
.cp img{ vertical-align:middle; }

/* ===== Karty / kontenery ===== */
.cp .TableContainer{
  background:var(--panel-grad);
  border:1px solid var(--panel-br);
  border-radius:14px;
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
  margin-bottom:18px;
}
.cp .CaptionContainer{ background:var(--panel-grad); }
.cp .CaptionInnerContainer{ position:relative; padding:14px 18px; }
.cp .CaptionInnerContainer .Text{
  font-family:Cinzel,serif;
  color:var(--head);
  text-transform:uppercase;
  letter-spacing:.8px;
  text-align:center;
  font-weight:700;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.cp .CaptionInnerContainer span[class^="Caption"]{ display:none!important; }

.cp .InnerTableContainer{ padding:14px; }
.cp .TableContentContainer{ background:transparent; }

/* Wnętrza tabel */
.cp .TableContent{
  background:var(--panel-grad) !important;
  border:1px solid var(--panel-br) !important;
  border-radius:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.cp .TableContent td{
  background:transparent !important;
  color:var(--text);
  padding:8px 12px;
  border:none;
}

/* Etykiety */
.cp .TableContent .LabelV175,
.cp .TableContent .LabelV80{
  color:var(--head);
  font-weight:600;
  background:transparent !important;
  white-space:nowrap;
}

/* Hover wierszy */
.cp .TableContent tbody tr:hover td{
  background:rgba(30,52,82,.28) !important;
}

/* ===== Progress bary (Level / HP / Mana) ===== */
.cp .progress{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#0b1d31;
  border:1px solid rgba(74,163,255,.18);
  overflow:hidden;
  margin-top:6px;
  box-sizing:border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.cp .progress .progress-bar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#2f9adf,#67cfff);
}
.cp .progress .bg-danger{  background:linear-gradient(90deg,#c94b57,#f07a86); }
.cp .progress .bg-default{ background:linear-gradient(90deg,#2f9adf,#67cfff); }
.cp .progress .bg-success{ background:linear-gradient(90deg,#29b764,#72e09e); }

/* Badge „Level” */
.cp .level-wrap{ position:relative; padding-top:36px; }
.cp .level-wrap::before{
  content:attr(data-levellabel);
  position:absolute;
  top:10px; left:14px;
  padding:4px 10px;
  border-radius:999px;
  background:linear-gradient(180deg,#173657,#0e2540);
  border:1px solid rgba(74,163,255,.32);
  color:#e6f1ff;
  font-weight:700;
  letter-spacing:.3px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Status ONLINE/OFFLINE */
.cp .status-badge{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  border:1px solid transparent;
}
.cp .status-online{ background:#113a22; color:#77e6a0; border-color:#225f3b; }
.cp .status-offline{ background:#3a1a1a; color:#ff9b9b; border-color:#6b2a2a; }

/* Outfit */
.cp [alt="player outfit"], .cp .character-outfit img{
  width:64px; height:64px; object-fit:contain; image-rendering:pixelated;
}

/* ===== Inventory ===== */
.cp .inv{ width:auto; margin:0 auto; }
.cp .inv-col{ border:0; padding:0; }
.cp .inv-grid{
  background:#0f2136;
  border-radius:10px;
  padding:6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.cp .inv-grid td{
  border:1px solid var(--br-soft);
  background:#0a1a2b;
}
.cp .inv-cell img{
  display:block; width:32px; height:32px; object-fit:contain; image-rendering:pixelated;
}
.cp .inv-meta{
  color:var(--muted);
  text-align:center;
  font-size:10px;
  border:none;
  background:transparent;
}

/* ===== Sekcje zawsze otwarte (zostawiamy obrazki i JS) ===== */
#QuestsCollapseContainer,
#AchievementsCollapseContainer,
#DeathsCollapseContainer,
#FragsCollapseContainer,
#SignatureCollapseContainer{
  display:block !important;     /* nadpisuje inline style="display:none" */
}
.cp .BigToggleButton{ pointer-events:none; } /* klik nic nie zmieni, więc zero migania */

/* Linki */
.cp a{ color:#dfe9f4; text-decoration:none; }
.cp a:hover{ color:#e3d6a2; }

/* Utility */
.cp .text-center{ text-align:center !important; }
.cp .text-right{ text-align:right !important; }
.cp .nowrap{ white-space:nowrap !important; }
.cp .break-all{ word-break:break-all !important; }
.cp .u-good{ color:var(--good) !important; font-weight:700; }
.cp .u-bad{ color:var(--bad) !important; font-weight:700; }
.cp .col-left{ width:10rem; }

/* Layout kolumn */
.cp .TableContainer .InnerTableContainer > table > tbody > tr > td{ vertical-align:top; }
.cp .TableContainer .InnerTableContainer > table > tbody > tr > td:first-child{ width:260px; }
.cp .TableContainer .InnerTableContainer > table > tbody > tr > td:last-child > .TableContainer + .TableContainer{ margin-top:16px; }

/* Responsywność */
@media (max-width:860px){
  .cp .TableContainer .InnerTableContainer > table > tbody > tr > td{ display:block; width:100%; }
  .cp .TableContainer .InnerTableContainer > table > tbody > tr > td:first-child{ width:auto; }
  .cp .TableContainer .InnerTableContainer > table > tbody > tr > td:last-child > .TableContainer{ margin-top:16px; }
}

/* Różne */
.cp img[src$="/on.gif"], .cp img[src$="/off.gif"]{ display:none!important; }


/* ==========================================
   guild.css
   ========================================== */

/* ===== GUILDS VIEW — Exodar deep navy (scoped) ===== */
.guildv{
  --grad: linear-gradient(180deg, rgba(20,35,60,.80), rgba(8,18,35,.92));
  --panel: rgba(16,29,49,.88);
  --panel-2: rgba(12,24,44,.94);
  --br:#1a2e44;
  --br-soft:#26364a;
  --text:#e9eef6;
  --head:#d8e8ff;
  --muted:#a8b7c8;
  --sep:rgba(255,255,255,.06);
  --good:#52da7a; --good-bg:#10351f; --good-br:#2a7b49;
  --bad:#f07474;  --bad-bg:#2a1515; --bad-br:#7b2a2a;
  font-family:Roboto,"Segoe UI",Arial,sans-serif;
  color:var(--text);
}

/* H1 w nagłówku gildii */
.guildv h1{
  margin:6px 0 0; font-family:Cinzel,serif; letter-spacing:.6px;
  color:#e6edf7; text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* ——————————————————  główne “karty” w sekcjach —————————————————— */
.guildv .TableContainer{ background:var(--grad)!important; border:1px solid var(--br)!important;
  border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden; }

/* czyścimy stare obrazkowe cienie wewnątrz (żeby nie było “podwójnych pudełek”) */
.guildv .TableShadowContainerRightTop,
.guildv .TableShadowRightTop,
.guildv .TableShadowContainer,
.guildv .TableBottomShadow,
.guildv .TableBottomLeftShadow,
.guildv .TableBottomRightShadow{ display:none!important; background:none!important; }

/* środek karty */
.guildv .InnerTableContainer{ padding:12px; }

/* same stoły z danymi w tych sekcjach */
.guildv .TableContentContainer{ background:transparent!important; border:0!important; }
.guildv .TableContent{
  width:100%; background:var(--panel); border:1px solid var(--br); border-radius:12px; overflow:hidden;
}
.guildv .TableContent td{ padding:10px 12px; border:none!important; }
.guildv .TableContent tr + tr td{ border-top:1px solid var(--sep)!important; }

/* nagłówki kolumn */
.guildv .TableContent .LabelH td{
  background:linear-gradient(180deg, rgba(28,50,80,.92), rgba(16,29,49,.96));
  color:var(--head); font-weight:800; text-transform:none; letter-spacing:.2px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* naprzemienne tła wierszy (bez twardego wpinania się w getStyle) */
.guildv .TableContent tr:nth-child(even) td{ background:rgba(255,255,255,.012); }
.guildv .TableContent tr:hover td{ background:rgba(59,196,255,.06); }

/* ——————————————————  “Guild members” —————————————————— */

/* input do zmiany gildyjnego nicku (ten w nawiasie) + przycisk */
.guildv form[action*="change_nick"] input[type="text"]{
  width:160px; height:30px; padding:5px 8px; margin:0 6px;
  background:#0f1d30; color:var(--text); border:1px solid var(--br-soft); border-radius:8px;
  outline:0; transition:box-shadow .18s,border-color .18s;
}
.guildv form[action*="change_nick"] input[type="text"]:focus{
  border-color:#2f75c9; box-shadow:0 0 0 3px rgba(59,196,255,.10);
}
.guildv form[action*="change_nick"] input[type="submit"]{
  padding:6px 10px; border-radius:999px; border:1px solid var(--br);
  background:linear-gradient(180deg,#1c3150,#0e1b31); color:#e9eef6; font-weight:800; cursor:pointer;
}
.guildv form[action*="change_nick"] input[type="submit"]:hover{ filter:brightness(1.06); }

/* badge KICK (link po prawej) */
.guildv a[href*="kick_player"]{
  display:inline-block; padding:2px 8px; margin-left:8px;
  border:1px solid var(--bad-br); color:var(--bad); background:var(--bad-bg);
  border-radius:999px; text-decoration:none; font-weight:800; font-size:11px;
}
.guildv a[href*="kick_player"]:hover{ filter:brightness(1.08); }

/* status Online/Offline (w oryginale inline style z kolorem) – opakuj je jak badge */
.guildv td > span[style*="green"]{
  color:var(--good)!important; background:var(--good-bg); border:1px solid var(--good-br);
  padding:2px 10px; border-radius:999px; font-weight:800; display:inline-block;
}
.guildv td > span[style*="red"]{
  color:var(--bad)!important; background:var(--bad-bg); border:1px solid var(--bad-br);
  padding:2px 10px; border-radius:999px; font-weight:800; display:inline-block;
}

/* —————————————————— “Invited Characters” + ewentualne boxy info —————————————————— */
.guildv .TableContent .info,
.guildv .guild-info-box{
  background:var(--panel-2); border:1px solid var(--br); border-radius:10px; padding:10px 12px;
}

/* —————————————————— przyciski na dole (Invite / Edit Ranks / Leave / Back) —————————————————— */
/* wygaszamy duplikaty “potrójnych buttonów” jeśli gdzieś są obrazkowe */
.guildv input[type="image"]{ display:inline-block; filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)); }

/* gdy w którymś formularzu wyląduje zwykły submit – nadaj mu look spójny z motywem */
.guildv input[type="submit"]{
  appearance:none; -webkit-appearance:none;
  padding:10px 16px; border-radius:12px; border:1px solid var(--br);
  background:linear-gradient(180deg,#1c3150,#0e1b31);
  color:#e9eef6; font-weight:800; letter-spacing:.2px; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.guildv input[type="submit"]:hover{ filter:brightness(1.05); }

/* marginesy sekcji */
.guildv .TableContainer + .TableContainer{ margin-top:14px; }

/* drobne: obrazki herbów */
.guildv img[width="64"][height="64"]{ border-radius:6px; display:block; }


/* ==========================================
   highscores.css
   ========================================== */

/* ===== Highscores 2.0 (modern) ===== */
.hs2 {
  --bg: #0b1521;
  --panel: #0f1b29;
  --panel-2: #0b1623;
  --br: #26374a;
  --br-soft: rgba(38,55,74,.45);
  --head: #a7bed4;
  --text: #e8e8e6;
  --muted: #9bb3c9;
  --accent: #3775ab;
  --gold: #c7a34a;
  --silver: #bfc5d4;
  --bronze: #b07d54;

  color: var(--text);
  font-family: Roboto, Segoe UI, Arial, sans-serif;
}

/* ===== Header ===== */
.hs2-header h2 {
  margin: 0 0 14px;
  padding: 10px 0 14px;
  text-align: center;
  color: var(--head);
  font-family: Cinzel, serif;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--br-soft);
}
.hs2-header .hs2-sub { color: var(--muted); font-size: .9rem; margin-left: .3rem; }

/* ===== Filters (pills) ===== */
.hs2-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 10px 14px;
  margin: 0 0 12px;
}
.hs2-filter { display: grid; gap: 6px; }
.hs2-filter > span { font-size: .9rem; color: var(--muted); }
.hs2-select{
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(180deg, rgba(23,36,54,.9), rgba(12,22,35,.9));
  color: var(--text);
  border: 1px solid var(--br);
  border-radius: 999px;
  padding: 10px 14px;
  outline: none;
}
.hs2-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(55,117,171,.2); }

/* ===== Table-like grid ===== */
.hs2-table { background: linear-gradient(180deg, rgba(18,30,45,.65), rgba(12,22,35,.65)); border: 1px solid var(--br); border-radius: 12px; }
.hs2-empty { padding: 16px; color: var(--muted); }

/* Head */
.hs2-head {
  position: sticky; top: 0;
  display: grid;
  grid-template-columns: 42px 1.3fr minmax(120px,.6fr) minmax(120px,.5fr) minmax(140px,.7fr) minmax(110px,.5fr);
  gap: 12px;
  padding: 10px 14px;
  font-size: .85rem;
  color: var(--muted);
  background: rgba(10,20,32,.7);
  backdrop-filter: blur(3px);
  border-bottom: 1px solid var(--br);
}

.hs2-body { display: grid; }

/* Row */
.hs2-row {
  display: grid;
  grid-template-columns: 42px 1.3fr minmax(120px,.6fr) minmax(120px,.5fr) minmax(140px,.7fr) minmax(110px,.5fr);
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  position: relative;
  transition: background .15s ease, transform .15s ease;
}

/* Pełna, subtelna linia separatora (zamiast przerywanej) */
.hs2-row::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(180,200,220,.10) 18%,
    rgba(200,220,240,.17) 50%,
    rgba(180,200,220,.10) 82%,
    rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.hs2-row:last-child::after { display: none; }

.hs2-row:hover { background: rgba(25,45,68,.28); transform: translateY(-1px); }

/* Kolumny */
.c-rank, .c-name, .c-voc, .c-level, .c-exp, .c-country { min-width: 0; }

/* Rank: zwykłe cyfry; kolory dla top 1/2/3 */
.c-rank { font-weight: 800; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.is-top1 .c-rank { color: var(--gold); }
.is-top2 .c-rank { color: var(--silver); }
.is-top3 .c-rank { color: var(--bronze); }

/* Name + outfit, wyśrodkowanie w pionie i brak podkreślenia */
.c-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; justify-self: start; }

/* Outfit dokładnie na wysokości linii tekstu */
.hs2-outfit {
  width: 28px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 28px;
  overflow: visible;
}
.hs2-outfit img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  display: block;
  object-fit: contain;
  transform: translate(-16px, 4px);
}

.hs2-name {
  display: inline-block;
  color: #e8e8e6;
  text-decoration: none;             /* brak podkreślenia */
  font-weight: 700;
  line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-left: 0;
}

/* Kolory nicków wg statusu */
.hs2-name.online  { color: #20c020; }
.hs2-name.offline { color: #e05555; }
.hs2-name:hover   { filter: brightness(1.05); text-decoration: none; }

/* Pozostałe kolumny */
.c-voc { color: var(--muted); }
.c-level strong { font-weight: 800; }
.c-exp { color: var(--muted); }
.c-country .hs2-flag { display: inline-flex; align-items: center; }
.c-country img { width: 18px; height: 12px; display: block; }

/* Pagination */
.hs2-pagination {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--br);
  background: rgba(10,20,32,.35);
  border-radius: 0 0 12px 12px;
}
.hs2-btn {
  background: linear-gradient(180deg, #1d3246, #0d1922);
  color: #e3d6a2;
  border: 1px solid var(--br);
  border-radius: 8px;
  padding: 9px 14px;
  text-decoration: none; font-weight: 600;
}
.hs2-btn:hover { background: linear-gradient(180deg, #284967, #1d3246); transform: translateY(-1px); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .hs2-head, .hs2-row {
    grid-template-columns: 38px 1.4fr minmax(110px,.8fr) minmax(120px,.8fr) minmax(100px,.7fr);
  }
  .c-country { display: none; }
}

@media (max-width: 720px) {
  .hs2-filters { grid-template-columns: 1fr; }
  .hs2-head { grid-template-columns: 34px 1fr 100px 1fr; }
  .hs2-row { grid-template-columns: 34px 1fr 100px 1fr; row-gap: 6px; }
  .c-exp { display: none; }
  .hs2-outfit {
    width: 22px;
    height: 56px;
    flex-basis: 22px;
  }
  .hs2-outfit img {
    width: 56px;
    height: 56px;
    transform: translate(-16px, 4px);
  }
}


/* ==========================================
   lastkills.css
   ========================================== */

/* ===== Last Kills (styl jak highscores) ===== */
.lk2 {
  --bg: #0b1521;
  --panel: #0f1b29;
  --panel-2: #0b1623;
  --br: #26374a;
  --br-soft: rgba(38,55,74,.45);
  --head: #a7bed4;
  --text: #e8e8e6;
  --muted: #9bb3c9;
  --accent: #3775ab;
  color: var(--text);
  font-family: Roboto, Segoe UI, Arial, sans-serif;
}

/* Header */
.lk2-header h2{
  margin:0 0 14px; padding:10px 0 14px; text-align:center;
  color:var(--head); font-family:Cinzel,serif; letter-spacing:.5px;
  border-bottom:1px solid var(--br-soft);
}
.lk2-sub{ color:var(--muted); font-size:.9rem; margin-left:.3rem; }

/* Table-like grid */
.lk2-table{ background:linear-gradient(180deg, rgba(18,30,45,.65), rgba(12,22,35,.65)); border:1px solid var(--br); border-radius:12px; }
.lk2-empty{ padding:16px; color:var(--muted); }

/* Head (bez kolumny #) */
.lk2-head{
  position:sticky; top:0;
  display:grid;
  grid-template-columns:minmax(160px,.7fr) 1.3fr minmax(120px,.5fr) 1.4fr; /* bez world */
  gap:12px; padding:10px 14px; font-size:.85rem; color:var(--muted);
  background:rgba(10,20,32,.7); backdrop-filter:blur(3px);
  border-bottom:1px solid var(--br);
}
.lk2-table.has-world .lk2-head{
  grid-template-columns:minmax(160px,.7fr) 1.3fr minmax(120px,.5fr) 1.4fr minmax(110px,.45fr);
}

.lk2-body{ display:grid; }

/* Row (bez kolumny #) */
.lk2-row{
  display:grid;
  grid-template-columns:minmax(160px,.7fr) 1.3fr minmax(120px,.5fr) 1.4fr;
  gap:12px; align-items:center; padding:10px 14px; position:relative;
  transition:background .15s ease, transform .15s ease;
}
.lk2-table.has-world .lk2-row{
  grid-template-columns:minmax(160px,.7fr) 1.3fr minmax(120px,.5fr) 1.4fr minmax(110px,.45fr);
}

/* separator */
.lk2-row::after{
  content:""; position:absolute; left:10px; right:10px; bottom:0; height:1px;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(180,200,220,.10) 18%,
    rgba(200,220,240,.17) 50%,
    rgba(180,200,220,.10) 82%,
    rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.lk2-row:last-child::after{ display:none; }
.lk2-row:hover{ background:rgba(25,45,68,.28); transform:translateY(-1px); }

/* Kolumny */
.lk2 .c-time,.lk2 .c-name,.lk2 .c-level,.lk2 .c-kby,.lk2 .c-world{ min-width:0; }

/* Time (wartości w #e3d6a2) */
.lk2 .c-time time{ color:#e3d6a2; white-space:nowrap; }

/* Outfit + Name (outfit wyżej na środku) */
.lk2 .c-name{ display:flex; align-items:center; gap:10px; min-width:0; }
.lk2 .hs2-outfit{
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 64px;
  transform: translateY(-14px); /* podniesiony, żeby zgrywał się ze środkiem nicka */
}
.lk2 .hs2-outfit img{ width:64px; height:64px; image-rendering:pixelated; display:block; }

.lk2-name{
  display:inline-block; color:#e8e8e6; text-decoration:none; font-weight:700;
  line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lk2-name:hover{ filter:brightness(1.05); text-decoration:none; }

/* Killed at (lvl) – wartości w #e05555 */
.lk2 .c-level strong{ font-weight:800; color:#e05555; }

/* Killed By */
.lk2 .c-kby{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.lk2 .c-kby a{ font-weight:600; color:var(--accent); text-decoration:none; }
.lk2 .c-kby a:hover{ text-decoration:underline; }

/* World */
.lk2 .c-world{ color:var(--muted); }

/* Responsive */
@media (max-width:1000px){
  .lk2-head,.lk2-row{ grid-template-columns:minmax(140px,.8fr) 1fr minmax(120px,.6fr) 1fr; }
  .lk2-table.has-world .lk2-head,
  .lk2-table.has-world .lk2-row{ grid-template-columns:minmax(140px,.8fr) 1fr minmax(120px,.6fr) 1fr minmax(100px,.5fr); }
}
@media (max-width:720px){
  .lk2-head{ grid-template-columns:1fr 1fr; }
  .lk2-row{ grid-template-columns:1fr 1fr; row-gap:6px; }
  .lk2 .c-level,.lk2 .c-world{ display:none; }
  .lk2 .hs2-outfit{ width:48px; height:48px; transform:translateY(-8px); }
  .lk2 .hs2-outfit img{ width:48px; height:48px; }
}
.lk2 .c-kby a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted rgba(227,214,162,.45); }
.lk2 .c-kby a:hover { text-decoration: underline; filter: brightness(1.1); cursor: pointer; }
/* szerokość avatara + odstęp = wyrównanie nagłówka "Name" do tekstu */
.lk2 { --outfit-w: 64px; --name-gap: 10px; }

.lk2-head .c-name {
  padding-left: calc(var(--outfit-w) + var(--name-gap));
}

/* na mobile avatar ma 48px – offset sam się dostosuje */
@media (max-width: 720px){
  .lk2 { --outfit-w: 48px; }
}


/* ==========================================
   news.css
   ========================================== */

/* ===== NEWS – deep navy cards (standalone) ===== */

/* Paleta dopasowana do Twojej strony */
:root{
  --news-grad: linear-gradient(180deg, rgba(20, 35, 60, 0.80), rgba(8, 18, 35, 0.92));
  --news-head: linear-gradient(180deg, rgba(20, 35, 60, 0.92), rgba(12, 24, 44, 0.98));
  --news-br:   #1a2e44;
  --news-sep:  rgba(255,255,255,.06);
  --news-text: #e9eef6;
  --news-headtext:#d8e8ff;
  --news-muted:#9fb0c4;
}

/* --- Nagłówek newsa --- */
.NewsHeadline{
  margin: 16px 0 0;
}
.NewsHeadlineBackground{
  /* Zastępujemy stary gif naszym gradientem */
  background: var(--news-head) !important;
  background-image: none !important;
  border: 1px solid var(--news-br);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  padding: 12px 16px;

  /* nowoczesny układ grid */
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon title meta"
    "icon date  meta";
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  color: var(--news-text);
}

.NewsHeadlineIcon{
  grid-area: icon;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.NewsHeadlineText{
  grid-area: title;
  font-family: Cinzel, serif;
  color: var(--news-headtext);
  font-weight: 800;
  letter-spacing: .6px;
  font-size: 1.25rem;
  line-height: 1.2;
}

.NewsHeadlineDate{
  grid-area: date;
  color: var(--news-muted);
  font-size: .92rem;
}

.NewsHeadlineAuthor{
  grid-area: meta;
  justify-self: end;
  color: var(--news-muted);
  font-size: .92rem;
}
.NewsHeadlineAuthor b{
  color: var(--news-headtext);
  font-weight: 800;
}

/* --- Karta treści newsa (tabela tuż po nagłówku) --- */
.NewsHeadline + table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  background: var(--news-grad);
  border: 1px solid var(--news-br);
  border-top: 0; /* łączy się z headerem */
  border-radius: 0 0 14px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.02);
  overflow: hidden;
  margin: 0 0 18px 0; /* odstęp między kartami */
}

.NewsHeadline + table td{
  background: transparent !important;
  padding: 14px 18px !important;
  color: var(--news-text);
}

/* typografia treści */
.NewsHeadline + table td h1,
.NewsHeadline + table td h2,
.NewsHeadline + table td h3{
  font-family: Cinzel, serif;
  color: var(--news-headtext);
  margin: .25rem 0 .5rem;
}
.NewsHeadline + table td p{ margin: .5rem 0; }
.NewsHeadline + table td ul{ margin: .4rem 0 .6rem 1.2rem; }
.NewsHeadline + table td a{
  color:#dfe9f4; text-decoration:none; border-bottom:1px dotted rgba(223,233,244,.35);
}
.NewsHeadline + table td a:hover{
  color:#e3d6a2; border-bottom-color: transparent;
}
.NewsHeadline + table td img{
  max-width: 100%; height:auto; display:block; margin: 8px auto;
  border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,.35);
}

/* wiersz z linkiem „Comment on this news” (drugi TR) */
.NewsHeadline + table tr:last-child td{
  border-top: 1px solid var(--news-sep);
  background: rgba(255,255,255,.02) !important;
}
.NewsHeadline + table tr:last-child td > div{
  text-align: right !important;
}
.NewsHeadline + table tr:last-child a{
  display:inline-block;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid var(--news-br);
  background: linear-gradient(180deg, #1c3150, #0e1b31);
  color:#e9eef6; font-weight:800; letter-spacing:.3px;
  text-decoration:none; box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.NewsHeadline + table tr:last-child a:hover{
  filter:brightness(1.06);
}

/* --- Responsywność --- */
@media (max-width: 640px){
  .NewsHeadlineBackground{
    grid-template-columns: 46px 1fr;
    grid-template-areas:
      "icon title"
      "icon date"
      "icon meta";
    row-gap: 6px;
  }
  .NewsHeadlineAuthor{ justify-self: start; }
}


/* ==========================================
   online.css
   ========================================== */

/* ===== ONLINE PAGE – Exodar deep navy (twój gradient) ===== */
.ol{
  --grad: linear-gradient(180deg, rgba(20, 35, 60, 0.8), rgba(8, 18, 35, 0.92));
  --br:#1a2e44;
  --text:#e9eef6;
  --head:#d8e8ff;
  --muted:#9fb0c4;
  --sep:rgba(255,255,255,.05);
  color:var(--text);
  font-family:Roboto,"Segoe UI",Arial,sans-serif;
}

/* === KARTA (zamiennik tables.headline) === */
.ol-card{
  background:var(--grad);
  border:1px solid var(--br);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  overflow:hidden;
  margin:12px 0 18px;
}
.ol-card__head{
  background:var(--grad);
  padding:10px 14px;
  border-bottom:1px solid var(--sep);
  font-family:Cinzel,serif;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--head);
  font-weight:700;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.ol-card__body{ padding:14px; }

/* === Tabela wewnątrz karty === */
.ol-table{ width:100%; border-collapse:separate; border-spacing:0; }
.ol-table tr + tr td{ border-top:1px solid var(--sep); }
.ol-table td{ padding:10px 12px; }
.ol .LabelV150,.ol .LabelV175,.ol .LabelV80{ color:var(--head); font-weight:700; white-space:nowrap; }

/* Vocations */
.vocs-table{
  width:100%; max-width:560px; margin:6px auto 16px;
  border:1px solid var(--br); border-radius:12px;
  background:var(--grad); overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.4);
  text-align:center;
}
.vocs-table td{ padding:12px; }
.vocs-table tr + tr td{ border-top:1px solid var(--sep); }
.vocs-table img{ width:42px; height:auto; opacity:.96; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.vocs-table .vocs-head td{ color:var(--head); font-weight:700; }
.vocs-table .vocs-count td{ font-size:16px; font-weight:700; }
.vocs-table--text .vocs-title td{ color:var(--head); font-weight:700; text-align:left; padding:10px 12px; }

/* Skulls */
.skulls-box{
  text-align:center;
  border:1px solid var(--br);
  border-radius:12px;
  background:var(--grad);
  padding:10px 12px;
  box-shadow:0 8px 18px rgba(0,0,0,.4);
}
.skulls-box img{ vertical-align:middle; margin:2px 6px 2px 0; }

/* Players Online – nagłówek w tabeli */
.players-table .LabelH td{
  background:transparent !important;
  color:var(--head) !important;
  font-weight:700;
  border-bottom:1px solid var(--sep) !important;
  padding:10px 12px;
}
/* Wiersze + hover */
.player-row td{ padding:10px 12px; }
.player-row + .player-row td{ border-top:1px solid var(--sep); }
.player-row:hover td{ background:rgba(30,52,82,.26); }

/* kolumny */
.players-table td.name{ text-align:left; }
.players-table td.level,
.players-table td.voc{ text-align:left; white-space:nowrap; }

/* outfit – bez inline pos */
.players-table td.outfit{ width:56px; }
.players-table td.outfit img{
  position:relative !important; margin:0 !important; left:auto !important; top:auto !important;
  width:48px; height:48px; image-rendering:pixelated; display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* linki */
.ol a{ color:#dfe9f4; text-decoration:none; }
.ol a:hover{ color:#e3d6a2; }


/* ==========================================
   search.css
   ========================================== */

/* ===== Panel jak boksy Community/Library/Shop ===== */
.cp-sp{
  --br:#17324a;              /* obrys jak w innych panelach */
  --top1:#0f2f4d;            /* gradient top-baru */
  --top2:#0a233b;
  --bg1:rgba(16,32,50,.95);  /* tło wnętrza */
  --bg2:rgba(9,20,36,.98);
  --text:#e9eef6;
  --head:#cfe0f5;

  border:1px solid var(--br);
  border-radius:14px;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  overflow:hidden;
  margin:12px 0 18px;
}

/* Top bar jak w sideboksach */
.cp-sp__head{
  background:
    linear-gradient(180deg,var(--top1),var(--top2));
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cp-sp__head span{
  font-family:Cinzel,serif;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--head);
  font-weight:700;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* Wnętrze */
.cp-sp__body{ padding:14px; }
.cp-sp__form{ display:flex; flex-direction:column; gap:10px; }
.cp-sp__label{
  color:var(--head);
  font-weight:600;
}

/* wiersz z kontrolkami */
.cp-sp__controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Input */
.cp-input{
  min-width:260px;
  flex:1 1 280px;
  height:40px;
  padding:8px 12px;
  border-radius:12px;
  background:#0f2136;
  border:1px solid var(--br);
  color:var(--text);
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.cp-input::placeholder{ color:#93a4bb; }
.cp-input:focus{
  border-color:#1b3a57;
  box-shadow:0 0 0 2px rgba(74,163,255,.18), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Przycisk Search – granatowy, spójny z motywem */
.cp-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  height:40px;
  border-radius:12px;
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;
  border:1px solid #1b3a57;
  color:#e6f1ff;
  cursor:pointer;
  transition:transform .05s ease, filter .15s ease, box-shadow .15s ease;
}
.cp-btn--search{
  background:linear-gradient(180deg,#2a4f77,#16324e);
  box-shadow:0 8px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.cp-btn:hover{ filter:brightness(1.08); }
.cp-btn:active{ transform:translateY(1px); }

/* Delikatny highlight całego panelu gdy fokus w input */
.cp-sp:has(.cp-input:focus){
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 2px rgba(74,163,255,.15);
}

/* Responsywność */
@media (max-width:720px){
  .cp-input{ flex:1 1 100%; }
  .cp-btn--search{ width:100%; justify-content:center; }
}
/* === Deep navy overrides (ciemniej, jak sidebar) === */
.cp-sp{
  --top1:#0f2236;   /* pasek tytułu */
  --top2:#0b1d2f;
  --bg1:#0a1826;    /* wnętrze panelu */
  --bg2:#07121f;
  --br:#1a2e44;     /* chłodna, ciemna ramka */
}

/* panel */
.cp-sp{
  background:linear-gradient(180deg,var(--bg1),var(--bg2)) !important;
  border-color:rgba(26,46,68,.85) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.cp-sp__head{
  background:linear-gradient(180deg,var(--top1),var(--top2)) !important;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.cp-sp__head span{ color:#d7e6fa; }

/* input – ciemny granat */
.cp-input{
  background:#0a1522 !important;
  border:1px solid #1a2e44 !important;
  color:#dbe7f8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.cp-input::placeholder{ color:#7e8ea1; }
.cp-input:focus{
  border-color:#244662 !important;
  box-shadow:0 0 0 2px rgba(58,120,197,.12), inset 0 1px 0 rgba(255,255,255,.03);
}

/* przycisk – głębszy granat, mniejszy „gloss” */
.cp-btn{ color:#e9f2ff; }
.cp-btn--search{
  background:linear-gradient(180deg,#173652,#0f2439) !important;
  border-color:#1e3b56 !important;
  box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.cp-btn:hover{ filter:brightness(1.04); } /* delikatniejszy hover */
/* === Ten sam gradient w boksie wyszukiwarki === */
.cp-sp{
  --exo-panel-grad: linear-gradient(180deg, rgba(20, 35, 60, 0.8), rgba(8, 18, 35, 0.92));
  background: var(--exo-panel-grad) !important;
}

/* top-bar nagłówka wyszukiwarki na ten sam motyw */
.cp-sp__head{
  background: var(--exo-panel-grad) !important;
}


/* ==========================================
   serverinfo.css
   ========================================== */

/* ==========================================================
   EXODAR — Server Info (clean panels + icons + modal)
   Wersja uporządkowana (scalone poprawki)
   ========================================================== */

/* --- Zmienne (global / przenieś na wrapper, jeśli chcesz scope) --- */
:root{
  --panel:        linear-gradient(180deg, #0a121f, #070e19);
  --panel-strong: linear-gradient(180deg, #0f1a2f, #0a121e);
  --br:    #132236;
  --txt:   #e9eef6;
  --head:  #d8e8ff;
  --muted: #a7b5c8;
  --sep:   rgba(255,255,255,.82);  /* bardzo mocny separator */
  --sep-soft: rgba(255,255,255,.06);
  --chip:  rgba(255,255,255,.74);  /* mocniejsze „pilsy” */
  --gold:  #e3d6a2;
}

/* --- HERO --- (div zaraz po <link>) */
link[href$="serverinfo.css"] + div{
  background: var(--panel);
  border: 1px solid var(--br);
  border-radius: 18px;
  padding: 20px 18px 16px;
  margin: 0 0 16px 0;
  color: var(--txt);
  box-shadow: 0 18px 36px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03);
  text-align: center;
}
link[href$="serverinfo.css"] + div h1{
  margin: 0 0 8px;
  font-family: Cinzel, serif;
  font-weight: 900;
  letter-spacing: .9px;
  color: var(--head);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
link[href$="serverinfo.css"] + div h3{
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 500;
}
link[href$="serverinfo.css"] + div a{
  color: #dfe9f4;
  text-decoration: none;
  border-bottom: 1px dotted rgba(223,233,244,.35);
}
link[href$="serverinfo.css"] + div a:hover{
  color: var(--gold);
  border-bottom-color: transparent;
}

/* --- Ogólny layout --- */
.si-stack{ display:flex; flex-direction:column; gap:14px; } /* ciaśniej */

/* --- KARTA --- */
.si-card{
  background: rgba(0,0,0,.4);
  border: 1px solid var(--br);
  border-radius: 16px;
  color: var(--txt);
  box-shadow: 0 18px 36px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
  overflow: hidden;
}

/* Pasek tytułu – wyśrodkowany, wzmocniony */
.si-h2{
  margin: 0;
  padding: 10px 16px; /* ciaśniej */
  text-align: center;
  font-family: Cinzel, serif;
  text-transform: uppercase;
  font-size: calc(1.7rem - 3px);
  letter-spacing: .9px;
  font-weight: 900;
  color: #708090 !important;
  background: var(--panel-strong);
  border-bottom: 1px solid var(--sep);
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 8px rgba(112,128,144,.12);
}

/* --- Lista w karcie --- */
.si-list{ list-style: none; padding: 0; margin: 0; }
.si-list > li{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 9px 16px;             /* ciaśniej */
  border-top: 1px solid var(--sep);
  position: relative;
}
.si-list > li:first-of-type{ border-top: 0; }
.si-list > li:nth-child(even){ background: rgba(75,75,75,.09); } /* mocniejsze zebra */

.si-li-ico{ width:18px; height:18px; margin-right:6px; display:inline-flex; align-items:center; justify-content:center; opacity:.9; }
.si-li-ico svg{ width:18px; height:18px; display:block; fill:#b9c7db; }

/* Kolorowe „czaszki” */
.si-li-ico.sk-white svg{ fill:#ffffff; filter: drop-shadow(0 0 5px rgba(255,255,255,.35)); }
.si-li-ico.sk-red   svg{ fill:#ff5b5b; filter: drop-shadow(0 0 6px rgba(255,70,70,.35)); }
.si-li-ico.sk-black svg{ fill:#0d1118; filter: drop-shadow(0 0 6px rgba(255,255,255,.30)); }

/* Wartości w „pillach” */
.si-pill, .si-list > li b{
  color: var(--head);
  background: rgba(0,0,0,.5) !important;
  border: 1px solid var(--sep);
  padding: 3px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.si-list > li b{ margin-left: 2px; }
.si-list > li i{ color: var(--head); }

/* Linki w kartach */
.si-card a{
  color: #dfe9f4;
  text-decoration: none;
  border-bottom: 1px dotted rgba(223,233,244,.65);
}
.si-card a:hover{ color: var(--gold); border-bottom-color: transparent; }

/* --- Countdown (Server Save) --- */
.si-save-sub{ padding: 10px 16px 0; color: var(--muted); text-align: center; }
.si-countdown{
  display: grid;
  grid-template-columns: repeat(3, minmax(120px,1fr));
  gap: 10px;                         /* ciaśniej */
  padding: 10px 16px 14px;            /* ciaśniej */
}
.si-cd-box{
  text-align: center;
  border: 1px solid var(--sep);
  background: rgba(255,255,255,.12);  /* mocniej */
  border-radius: 12px;
  padding: 12px 10px;                 /* ciaśniej */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.si-cd-num{ font-size: 32px; font-weight: 900; letter-spacing:.02em; color: var(--head); }
.si-cd-lbl{ font-size: 11px; text-transform: uppercase; letter-spacing:.08em; color: var(--muted); margin-top: 2px; }

/* --- Buttony / akcje --- */
.si-actions{
  display: flex;
  justify-content: flex-start;   /* wyrównane do lewej */
  gap: 8px;                      /* ciaśniej */
  padding: 12px 16px 2px;         /* ciaśniej */
  background: rgba(55,55,55,.09) !important;
}
.si-actions .si-label{
  color: var(--muted);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
.si-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--sep);
  background: rgba(55,155,255,.6);
  color: var(--txt);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}
.si-btn:hover{ background: rgba(255,255,255,.12); }
.si-btn svg{ width:16px; height:16px; fill:#dfe6f2; display:none; } /* „Stages” bez ikonki */

/* --- Modal --- */
.si-modal{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.85); /* ciemniejsze tło */
  z-index: 50;
}
.si-modal.open{ display: grid; }
.si-window{
  width: min(960px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(180deg, #14233c, #081223) !important; /* brak alpha */
  border: 1px solid var(--br);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0,0,0,.6);
}
.si-win-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sep);
}
.si-win-head h3{
  margin: 0;
  font-size: 20px;
  color: var(--head);
  font-family: Cinzel, serif;
}
.si-close{
  border: 1px solid var(--sep);
  background: var(--chip);
  color: var(--txt);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.si-close:hover{ background: rgba(255,255,255,.12); }

/* --- Tabela --- */
.si-table{ width: 100%; border-collapse: separate; border-spacing: 0; }
.si-table th, .si-table td{
  padding: 5px 12px;
  border-top: 1px solid var(--sep);
  text-align: left;
}
.si-table thead th{
  position: sticky; top: 0; z-index: 1;
  background: #0f1a2f;               /* stały kolor główki tabeli */
  border-bottom: 1px solid var(--sep);
}
.si-table tbody tr:nth-child(even){ background: rgba(255,255,255,.38); }
.si-col-level{ width: 40%; }
.si-col-mult{  width: 60%; }
.si-badge{ display: inline-flex; align-items: center; gap: 6px; }
.si-badge .si-pill{ padding: 2px 8px; }

/* --- RWD --- */
@media (max-width: 720px){
  .si-countdown{ grid-template-columns: 1fr 1fr 1fr; }
}

/* --- Dodatki / porządki --- */
.si-list [data-copy]{ display: none !important; }   /* ukryj pozostałości „Copy” */
/* === ABOUT (flip EN/PL) === */
.si-about .si-actions{ justify-content:flex-end; }
.si-about .si-actions .si-btn{ padding:6px 10px; font-weight:800; }
.si-about .si-actions .si-btn.is-active{ background: rgba(255,255,255,.18); border-color: var(--sep); }

.si-body{ padding: 12px 16px 16px; line-height: 1.55; color: var(--txt); }
.si-body h3{ margin: 6px 0 8px; color: var(--head); font-family: Cinzel, serif; letter-spacing:.5px; }
.si-body h4{ margin: 10px 0 6px; color: var(--head); font-weight:800; }
.si-body p{ margin: 0 0 8px; color: var(--txt); }
.si-body ul{ margin: 0 0 10px 18px; padding:0; }
.si-body li{ padding: 2px 0; }

.si-flip{ perspective:1200px; border:1px solid var(--sep); border-radius:12px; background: rgba(255,255,255,.06); }
.si-flip-inner{ position:relative; min-height: 520px; transform-style:preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.si-flip.flipped .si-flip-inner{ transform: rotateY(180deg); }

.si-face{ position:absolute; inset:0; padding:14px; overflow:auto;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.si-front{ }
.si-back{ transform: rotateY(180deg); }

/* mniejsze RWD */
@media (max-width:720px){
  .si-flip-inner{ min-height: 640px; }
}


/* ==========================================
   support.css
   ========================================== */

/* ===== SUPPORT PAGE – Exodar deep navy ===== */
.sp{
  --grad: linear-gradient(180deg, rgba(20, 35, 60, 0.8), rgba(8, 18, 35, 0.92));
  --br:#1a2e44;
  --text:#e9eef6;
  --head:#d8e8ff;
  --muted:#9fb0c4;
  --sep:rgba(255,255,255,.05);
  color:var(--text);
  font-family:Roboto,"Segoe UI",Arial,sans-serif;
}

/* Karta (jak na Online/Search) */
.sp-card{
  background:var(--grad);
  border:1px solid var(--br);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  overflow:hidden;
  margin:12px 0 18px;
}
.sp-card__head{
  background:var(--grad);
  padding:10px 14px;
  border-bottom:1px solid var(--sep);
  font-family:Cinzel,serif;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--head);
  font-weight:700;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.sp-card__body{ padding:14px; }

.sp-cards{ display:grid; gap:16px; }

/* Tabela */
.sp-table{ width:100%; border-collapse:separate; border-spacing:0; }
.sp-table thead th{
  text-align:left; padding:10px 12px; color:var(--head); font-weight:700;
  border-bottom:1px solid var(--sep);
}
.sp-row td{ padding:10px 12px; }
.sp-row + .sp-row td{ border-top:1px solid var(--sep); }
.sp-row:hover td{ background:rgba(30,52,82,.26); }

/* Kolumny */
.sp-table th.group, .sp-table td.group{ white-space:nowrap; }
.sp-table th.outfit, .sp-table td.outfit{ width:86px; }
.sp-table th.status, .sp-table td.status{ width:110px; }
.sp-table th.world, .sp-table td.world{ white-space:nowrap; }
.sp-table th.lastlogin, .sp-table td.lastlogin{ white-space:nowrap; }

.sp .LabelV150,.sp .LabelV175,.sp .LabelV80{
  color:var(--head); font-weight:700; white-space:nowrap;
}

/* Outfit – bez ramki, sam sprite */
.sp-outfit{
  width:64px; height:64px; position:relative; overflow:visible;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sp-outfit img{
  width:80px; height:80px; image-rendering:pixelated; display:block;
  position:relative;
  left:-6px;
  top:-10px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Flag */
.sp-flag img{ width:18px; height:auto; vertical-align:middle; margin-right:6px; }

/* Status badge */
.sp-badge{
  display:inline-block; padding:4px 8px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.3px;
  border:1px solid transparent; user-select:none;
}
.sp-badge--online{ background:#143b26; color:#87f0b1; border-color:#2b6a49; }
.sp-badge--offline{ background:#3b1a1a; color:#ff9e9e; border-color:#6a2b2b; }

/* World + daty */
.sp-world{ font-weight:700; color:#eaf3ff; }
.sp-muted{ color:#b7c6db; }

/* Linki */
.sp a{ color:#dfe9f4; text-decoration:none; }
.sp a:hover{ color:#e3d6a2; }

/* Responsywność */
@media (max-width:760px){
  .sp-table th.status, .sp-table td.status{ width:auto; }
  .sp-cards{ grid-template-columns:1fr; }
}

/* ==========================================
   Custom Systems
   ========================================== */

.sys-container {
  margin-top: 10px;
}
.sys-intro {
  padding: 16px 20px;
  color: #a7b5c8;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sys-grid {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}

.sys-item {
  background: linear-gradient(180deg, #101c2e, #0b1320);
  border: 1px solid #1a2e44;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  user-select: none;
}

.sys-item:hover {
  border-color: #2f4b6b;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.sys-header {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  gap: 14px;
}

.sys-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sys-icon svg {
  width: 20px;
  height: 20px;
  fill: #e3d6a2;
}

.sys-title {
  flex: 1;
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #d8e8ff;
  letter-spacing: 0.5px;
}

.sys-toggle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sys-toggle svg {
  width: 20px;
  height: 20px;
  fill: #708090;
}

.sys-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sys-content-inner {
  overflow: hidden;
  padding: 0 18px;
}

.sys-content-inner p {
  color: #a7b5c8;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 16px 0;
  padding-left: 50px;
}

.sys-item.active {
  border-color: #3775ab;
  background: linear-gradient(180deg, #132238, #0d1626);
}

.sys-item.active .sys-toggle {
  transform: rotate(180deg);
}

.sys-item.active .sys-toggle svg {
  fill: #e3d6a2;
}

.sys-item.active .sys-content {
  grid-template-rows: 1fr;
}

/* ==========================================
   Commands variations
   ========================================== */

.command-item {
  cursor: default;
}

.command-item:hover {
  border-color: #2f4b6b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.command-item .sys-header {
  padding-bottom: 0px;
}

.command-item .cmd-desc {
  padding: 8px 18px 14px 18px;
}

.command-item .cmd-desc p {
  margin: 0;
  color: #93a4bb;
  font-size: 0.90rem;
}

/* =========================================================
   EXODAR PREMIUM SELECTOR OVERRIDE
   ========================================================= */

.selector-page {
    overflow: hidden;
    font-family: 'Outfit', sans-serif;
}

.exodar-selection-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at center, rgba(10, 22, 33, 0.4) 0%, rgba(2, 5, 10, 0.9) 100%);
}

.selection-header {
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selection-logo img {
    height: 80px;
    filter: drop-shadow(0 0 15px rgba(212, 183, 122, 0.3));
}

.intro-text {
    text-align: center;
    margin-bottom: 40px;
}

.intro-text h1 {
    font-family: var(--font-title);
    font-size: 2.5rem;
    color: var(--header-color);
    letter-spacing: 4px;
}

.intro-text h1 span { color: var(--gold); }

/* --- PREMIUM GRID --- */
.premium-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    perspective: 1000px;
}

.p-card {
    position: relative;
    width: 320px;
    height: 480px;
    background: rgba(15, 27, 41, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
}

/* Kolory akcentów */
.p-card.gold { --accent: var(--gold); }
.p-card.blue { --accent: var(--blue); }
.p-card.green { --accent: var(--green); }

/* Efekt rozszerzania aktywnej karty */
.p-card:hover, .p-card.active {
    width: 380px;
    border-color: var(--accent);
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

.p-card-art {
    height: 200px;
    background-size: cover;
    background-position: center;
    filter: grayscale(0.5) brightness(0.6);
    transition: 0.5s;
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.p-card:hover .p-card-art {
    filter: grayscale(0) brightness(0.8);
    transform: scale(1.1);
}

.p-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 200px);
}

.p-tag {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--accent);
    font-weight: 800;
}

.p-title {
    font-family: var(--font-title);
    font-size: 1.5rem;
    margin: 10px 0;
}

.p-features {
    list-style: none;
    padding: 0;
    flex: 1;
}

.p-features li {
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-features i { color: var(--accent); width: 15px; }

.p-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.p-status {
    font-size: 11px;
    font-weight: 700;
}

.p-status.online { color: #57e58a; }
.p-status.offline { color: #990000; }
.p-status.soon { color: #ffc247; }

.p-enter {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
}

.p-card:hover .p-enter {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 15px var(--accent);
}

/* Poświata za kartą */
.p-glow {
    position: absolute;
    bottom: -20%; left: 50%;
    width: 80%; height: 40%;
    background: var(--accent);
    filter: blur(60px);
    opacity: 0;
    transition: 0.5s;
    z-index: -1;
}

.p-card:hover .p-glow { opacity: 0.2; }

/* Feature Bar */
.selection-footer {
    padding: 40px;
    margin-top: auto;
}

.feature-bar {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.feature-bar span {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

@media (max-width: 1000px) {
    .premium-grid { flex-direction: column; }
    .p-card { width: 90% !important; height: 200px; display: flex; }
    .p-card-art { width: 150px; height: 100%; mask-image: none; }
}

/* character.css - Układ profilu Exodar */

/* ==========================================
   EXODAR - Character Profile (Modern Layout)
   ========================================== */

/* --- Baza i Zmienne --- */
.cp {
    --panel-grad: linear-gradient(180deg, rgba(20, 35, 60, 0.80), rgba(8, 18, 35, 0.92));
    --panel-br: #1a2e44;
    --head: #d8e8ff;
    --text: #e9eef6;
    --good: #27c26a;
    --bad: #e45c5c;
    --gold: #f4e2b8;
    --muted: #708090;
    
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    color: var(--text);
}

/* --- Wspólne panele (Karty) --- */
.cp .TableContainer {
    background: var(--panel-grad);
    border: 1px solid var(--panel-br);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.cp .CaptionContainer {
    background: transparent;
}

.cp .CaptionInnerContainer {
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cp .CaptionInnerContainer .Text {
    font-family: 'Cinzel', serif;
    color: var(--head);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: center;
    font-weight: 700;
}

.cp .InnerTableContainer {
    padding: 15px;
}

/* Standardowe tabele wewnątrz (np. lista postaci) */
.cp .TableContent {
    width: 100%;
    border-collapse: collapse;
}

.cp .TableContent td, 
.cp .TableContent th {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- 1. GŁÓWNY PANEL INFORMACYJNY --- */
.cp-info-flex {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* Lewa Kolumna (Outfit) */
.cp-info-left {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
}

.cp-outfit-box {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.cp-outfit-box img {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
    transform: translateY(10px);
}

.status-badge {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.status-badge.status-online { 
    background: rgba(46, 204, 113, 0.15); 
    color: #2ecc71; 
    border: 1px solid rgba(46, 204, 113, 0.3); 
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.1);
}

.status-badge.status-offline { 
    background: rgba(231, 76, 60, 0.15); 
    color: #e74c3c; 
    border: 1px solid rgba(231, 76, 60, 0.3); 
}

/* Prawa Kolumna (Dane) */
.cp-info-right {
    flex: 1;
}

.cp-name-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.cp-player-name {
    font-size: 28px;
    font-family: 'Cinzel', serif;
    color: var(--gold);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 1px;
}

.cp-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 25px;
}

.cp-detail-item {
    display: flex;
    flex-direction: column;
}

.cp-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.cp-value {
    font-size: 15px;
    color: #dbdbd9;
    font-weight: 500;
}

.level-box {
    background: #0a1621;
    border: 1px solid var(--panel-br);
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: bold;
    color: var(--gold);
}

/* --- 2. PASKI STATYSTYK (HP/MANA/EXP) --- */
.cp-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
}

.cp-progress-bg {
    background: #050a12;
    height: 10px;
    border-radius: 5px;
    border: 1px solid var(--panel-br);
    margin-top: 6px;
    overflow: hidden;
}

.cp-bar { 
    height: 100%; 
    border-radius: 5px; 
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.cp-bar.hp  { background: linear-gradient(90deg, #c0392b, #e74c3c); }
.cp-bar.mp  { background: linear-gradient(90deg, #2980b9, #3498db); }
.cp-bar.exp { background: linear-gradient(90deg, #27ae60, #2ecc71); }

/* --- 3. INWENTARZ I SKILLE --- */
.cp-double-container {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 15px;
    margin-top: 15px;
}

/* Inwentarz */
.inventory-display {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 5px 0;
}

.inv-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 36px;
}

.inv-box {
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--panel-br);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

.inv-box img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

.inv-stat {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    line-height: 1.2;
    margin-top: 5px;
    font-weight: bold;
}

/* Skille */
.cp-skills-modern {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Sztywne, równe kolumny */
}

.cp-skills-modern thead td {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    vertical-align: bottom;
}

.cp-skills-modern thead img {
    width: 24px;
    height: 24px;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
}

.cp-skills-modern thead b {
    display: block;
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cp-skills-modern tbody td {
    padding-top: 16px;
    text-align: center;
    font-weight: bold;
    color: #dbdbd9;
    font-size: 14px;
}

/* --- 4. KLASY POMOCNICZE I LINKI --- */
.text-right { text-align: right; align-items: flex-end; }
.u-good { color: var(--good); font-weight: 700; }
.u-bad { color: var(--bad); font-weight: 700; }

.cp a {
    color: #dfe9f4;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cp a:hover {
    color: var(--gold);
}

/* --- 5. RESPONSYWNOŚĆ (TELEFONY I TABLETY) --- */
@media (max-width: 860px) {
    .cp-info-flex {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .cp-info-left {
        width: 100%;
        max-width: 300px;
    }
    .cp-info-right {
        width: 100%;
    }
    .cp-details-grid {
        grid-template-columns: 1fr;
    }
    .cp-detail-item.text-right {
        text-align: left;
        align-items: flex-start;
    }
    .cp-stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .cp-double-container {
        grid-template-columns: 1fr;
    }
    .cp-skills-modern {
        display: block;
        overflow-x: auto; /* Przewijanie poziome dla skilli na małych ekranach */
        white-space: nowrap;
    }
}