:root{
  --bg: #f4f6f9;
  --text: #1f2937;
  --muted: #6b7280;

  --card: #ffffff;
  --card-2: #f9fafb;
  --border: #e5e7eb;

  --link: #0ea5e9;
  --link-hover: #0284c7;

  --header-bg: #ffffff;
  --header-text: #111827;

  --sidebar-bg: #ffffff;

  --input-bg: #ffffff;
  --input-text: #111827;
  --input-border: #d1d5db;

  --shadow: 0 4px 12px rgba(0,0,0,.05);
}


html[data-theme="dark"]{
  --bg: #0f172a;
  --text: #e2e8f0;
  --muted: #94a3b8;

  --card: #1e293b;
  --card-2: #243244;
  --border: #334155;

  --link: #38bdf8;
  --link-hover: #0ea5e9;

  --header-bg: #111827;
  --header-text: #f1f5f9;

  --sidebar-bg: #0f172a;

  --input-bg: #1e293b;
  --input-text: #f1f5f9;
  --input-border: #334155;

  --shadow: 0 8px 20px rgba(0,0,0,.35);
}

/* =====================================================
   FORCE PAGE BACKGROUND (ВАЖНО)
   ===================================================== */

html,
body,
.wrapper,
#wrap,
#wrapper{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* =====================================================
   CENTRAL CONTENT FIX
   ===================================================== */

.main,
.content,
.center,
.wrap,
.container,
.page,
.middle{
  background: transparent !important;
}

/* блоки типа Referral wall */
.main > div,
.content > div{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
}

/* =====================================================
   HEADER
   ===================================================== */

.main-header{
  color: var(--header-text) !important;
}

.tt{
  color: var(--header-text) !important;
}

/* =====================================================
   SIDEBAR / PANELS
   ===================================================== */

.leftside,
.sidebar,
.left-menu,
.rightside,
.blok,
.box,
.panel{
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow);
}

/* =====================================================
   TABLES
   ===================================================== */

table{
  background: var(--card) !important;
  color: var(--text) !important;
}

table tr:nth-child(even){
  background: var(--card-2) !important;
}

table td,
table th{
  border-color: var(--border) !important;
}

/* =====================================================
   BUTTONS
   ===================================================== */

button,
.btn,
input[type="submit"],
input[type="button"]{
  color: #fdfdfd !important;
  padding: 15px 35px;   /* ↑ увеличивает размер */
  font-size: 18px;      /* ↑ текст больше */
  border-radius: 8px;   /* красивее */
}



/* =====================================================
   INPUTS
   ===================================================== */

input,
textarea,
select{
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--input-border) !important;
}

/* =====================================================
   LINKS
   ===================================================== */

a{
  color: var(--link) !important;
}

a:hover{
  color: var(--link-hover) !important;
}

/* =====================================================
   OLD INLINE STYLE FIX
   ===================================================== */

html[data-theme="dark"] [style*="#fff"],
html[data-theme="dark"] [style*="#ffffff"],
html[data-theme="dark"] [style*="rgb(255,255,255)"]{
  background: var(--card) !important;
}

html[data-theme="dark"] [style*="#000"],
html[data-theme="dark"] [style*="#111"],
html[data-theme="dark"] [style*="#222"],
html[data-theme="dark"] [style*="#333"]{
  color: var(--text) !important;
}

html[data-theme="dark"] [style*="#f5f5f5"],
html[data-theme="dark"] [style*="#e9edf2"],
html[data-theme="dark"] [style*="#dfe6ee"]{
  background: var(--card-2) !important;
}

html[data-theme="light"] .leftside,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .left-menu{
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  box-shadow: 2px 0 8px rgba(0,0,0,0.03);
}

/* Верхняя часть с аватаром */
html[data-theme="light"] .leftside .profile,
html[data-theme="light"] .leftside .avatar{
  background: #f8fafc !important;
}

/* Меню */
html[data-theme="light"] .leftside a{
  color: #374151 !important;
}

html[data-theme="light"] .leftside a:hover{
  background: #f3f4f6 !important;
  border-radius: 6px;
}
html[data-theme="light"] body,
html[data-theme="light"] html{
  background: #eef2f7 !important;
}

/* Левая панель */
html[data-theme="light"] .leftside{
  background: #f8fafc !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 2px 0 10px rgba(0,0,0,0.03);
}

/* Блоки внутри левой панели */
html[data-theme="light"] .leftside .box,
html[data-theme="light"] .leftside .panel{
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

/* Пункты меню */
html[data-theme="light"] .leftside a{
  color: #334155 !important;
}

html[data-theme="light"] .leftside a:hover{
  background: #e2e8f0 !important;
  border-radius: 6px;
}

html[data-theme="light"] body{
  background: #eef2f7 !important;   /* фон страницы */
}

/* левая панель — темнее фона */
html[data-theme="light"] .leftside{
  background: #e2e8f0 !important;
  border-right: 1px solid #d1d5db !important;
  box-shadow: 2px 0 12px rgba(0,0,0,0.04);
}

/* внутренние блоки панели */
html[data-theme="light"] .leftside .box,
html[data-theme="light"] .leftside .panel{
  background: #ffffff !important;
  border: 1px solid #dbe3ec !important;
}

/* меню */
html[data-theme="light"] .leftside a{
  color: #1f2937 !important;
}

html[data-theme="light"] .leftside a:hover{
  background: #dbe3ec !important;
  border-radius: 6px;
}

html[data-theme="dark"] body{
  background: #0f172a !important;
}

/* левая панель — немного светлее фона */
html[data-theme="dark"] .leftside{
  background: #162234 !important;
  border-right: 1px solid #1e2c42 !important;
  box-shadow: 2px 0 15px rgba(0,0,0,0.4);
}

/* внутренние блоки */
html[data-theme="dark"] .leftside .box,
html[data-theme="dark"] .leftside .panel{
  background: #1e293b !important;
  border: 1px solid #2b3a52 !important;
}

/* пункты меню */
html[data-theme="dark"] .leftside a{
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .leftside a:hover{
  background: #223049 !important;
  border-radius: 6px;
}

/* ===========================
   PERFECT DARK SIDEBAR
   =========================== */

/* фон страницы */
html[data-theme="dark"] body{
  background: #0b1220 !important;
}

/* левая панель */
html[data-theme="dark"] .leftside{
  background: #141f33 !important;
  border-right: 1px solid #1f2c45 !important;
  box-shadow: 3px 0 18px rgba(0,0,0,0.45);
}

/* внутренние раскрывающиеся блоки */
html[data-theme="dark"] .leftside .box,
html[data-theme="dark"] .leftside .panel{
  background: #1b2a42 !important;
  border: 1px solid #263655 !important;
}

/* активные кнопки разделов */
html[data-theme="dark"] .leftside .btn,
html[data-theme="dark"] .leftside .active{
  background: #22324f !important;
}

/* пункты меню */
html[data-theme="dark"] .leftside a{
  color: #d1d9e6 !important;
}

html[data-theme="dark"] .leftside a:hover{
  background: #22324f !important;
  border-radius: 6px;
}



html[data-theme="dark"] body{
  background: #0b1220 !important;
}

/* сама панель */
html[data-theme="dark"] .leftside{
  background: #121c2d !important;
  border-right: 1px solid #22314f !important;
  box-shadow: 3px 0 18px rgba(0,0,0,0.50);
}

/* заголовки раскрывающихся блоков (синие кнопки типа Moderator's / Earn money) */
html[data-theme="dark"] .leftside .dropdown-toggle,
html[data-theme="dark"] .leftside .btn,
html[data-theme="dark"] .leftside button{
  background: #1c2a45 !important;
  color: #f8fafc !important;
  border: 1px solid #2a3c61 !important;
}

/* содержимое раскрывающихся списков */
html[data-theme="dark"] .leftside .dropdown-menu,
html[data-theme="dark"] .leftside .menu,
html[data-theme="dark"] .leftside ul,
html[data-theme="dark"] .leftside .panel,
html[data-theme="dark"] .leftside .box{
  background: #0f1928 !important;
  border: 1px solid #22314f !important;
}

/* ссылки и пункты меню */
html[data-theme="dark"] .leftside a,
html[data-theme="dark"] .leftside li a{
  color: #eaf2ff !important;      /* главное — делаем светлее */
  opacity: 1 !important;
  font-weight: 500;
}

/* второстепенный текст (если где-то есть мелкий/серый) */
html[data-theme="dark"] .leftside span,
html[data-theme="dark"] .leftside small{
  color: #cbd5e1 !important;
}

/* hover / active — чтобы было видно где курсор */
html[data-theme="dark"] .leftside a:hover,
html[data-theme="dark"] .leftside li a:hover{
  background: #1b2a44 !important;
  color: #ffffff !important;
  border-radius: 6px;
}

/* активный пункт (часто бывает класс active) */
html[data-theme="dark"] .leftside .active > a,
html[data-theme="dark"] .leftside a.active{
  background: #243658 !important;
  color: #ffffff !important;
  border-radius: 6px;
}

/* разделители/границы, чтобы пункты не сливались */
html[data-theme="dark"] .leftside li{
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] .leftside li:last-child{
  border-bottom: 0 !important;
}

html[data-theme="dark"] .leftside{
  background: #151f2f !important;   /* плотный цвет */
  opacity: 1 !important;
  backdrop-filter: none !important;
}

/* убираем прозрачность у всех вложенных */
html[data-theme="dark"] .leftside *{
  opacity: 1 !important;
}

/* фон выпадающих блоков */
html[data-theme="dark"] .leftside .box,
html[data-theme="dark"] .leftside .panel,
html[data-theme="dark"] .leftside .dropdown-menu{
  background: #1b263a !important;
}

/* текст — делаем контрастным */
html[data-theme="dark"] .leftside a{
  color: #ffffff !important;
  font-weight: 500;
}

/* второстепенный текст */
html[data-theme="dark"] .leftside span{
  color: #cbd5e1 !important;
}

/* hover */
html[data-theme="dark"] .leftside a:hover{
  background: #24324a !important;
  color: #ffffff !important;
  border-radius: 6px;
}

html[data-theme="dark"] .leftside{
  background: var(--header-bg) !important;
  border-right: 1px solid var(--border) !important;
  opacity: 1 !important;
}

/* Убираем возможную прозрачность у вложенных */
html[data-theme="dark"] .leftside,
html[data-theme="dark"] .leftside *{
  backdrop-filter: none !important;
}

/* Выпадающие блоки чуть светлее, чтобы была глубина */
html[data-theme="dark"] .leftside .box,
html[data-theme="dark"] .leftside .panel,
html[data-theme="dark"] .leftside .dropdown-menu{
  background: var(--card) !important;
}

/* Текст делаем контрастным */
html[data-theme="dark"] .leftside a{
  color: #ffffff !important;
}

html[data-theme="dark"] .leftside a:hover{
  background: var(--card-2) !important;
  color: #ffffff !important;
  border-radius: 6px;
}