:root{
  --bg:#0e0f14; --card:#161823; --muted:#9aa0b4; --text:#e9edf5;
  --accent:#ff7b3e; --accent2:#7a5cff;
  --radius:16px; --btn:#1e2130; --btn-border:#2a2f45;

  --list:#0f1220; --list-border:#2a2f45; --list-hover:#1a1f35;

  /* для видео-превью на главной */
  --video-thumb-h: 64px;

  /* цвета для бейджей расхождений (сундуки) */
  --good-bg:#b9f5d0; --good-br:#a7eac0; --good-t:#052e1a;
  --bad-bg:#ffd1d1;  --bad-br:#ffbbbb;  --bad-t:#3d0a0a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  background:var(--bg); color:var(--text); display:flex; flex-direction:column;
}
a{color:var(--accent); text-decoration:none}
a:hover{opacity:.9}
button,input,select,textarea{font:inherit; color:inherit}

/* ====== Лейаут ====== */
.wrap{max-width:1100px; margin:0 auto; padding:16px}
main{flex:1; padding:28px 16px}
.grid{display:grid; gap:18px}
@media(min-width:860px){
  .cols-2{grid-template-columns:1fr 1fr}
  .cols-3{grid-template-columns:repeat(3,1fr)}
}
.card{background:var(--card); border:1px solid #23263a; border-radius:var(--radius); padding:18px}
.muted{color:var(--muted)}
h1{margin:0 0 6px; text-align:center}
h2{margin:6px 0 12px; text-align:center}

/* ====== Шапка ====== */
header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(150%) blur(8px);
  background:linear-gradient(180deg, rgba(14,15,20,.85), rgba(14,15,20,.65));
  border-bottom:1px solid #202331
}
.nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand img{width:40px; height:40px; border-radius:50%; object-fit:cover}

/* Кнопки шапки */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px;
  background:var(--btn); border:1px solid var(--btn-border); border-radius:12px;
  color:var(--text); cursor:pointer; text-align:center; font-weight:600;
}
header .nav .btn:not(.primary){color:var(--accent)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2)); border:none; color:#111}
/* Boosty — оранжевый → белый → оранжевый, чёрный текст */


/* ====== Футеры ====== */
.footer{border-top:1px solid #202331; padding:16px; text-align:center; color:var(--muted)}
.footer a{color:var(--accent)}
.footer-main{border-top:1px solid #202331; padding:24px 16px; color:var(--muted); text-align:center}
.footer-main a{color:var(--accent)}

/* ====== Главная: герой, списки, видео ====== */
.hero{
  background:
    radial-gradient(1200px 300px at 50% -100px, rgba(122,92,255,.25), transparent),
    url('/header-placeholder.png') center/cover no-repeat;
  border-radius:var(--radius);
  aspect-ratio:16/9; min-height:180px; max-height:30vh;
  border:1px solid #23263a; width:100%; display:block; box-sizing:border-box;
}
/* карточки-элементы списка */
.list{display:grid; gap:12px}
.item{
  display:flex; gap:14px; align-items:center;
  background:#1a1d2b; border:1px solid #252943; border-radius:14px; padding:14px;
}
.item .thumb{
  flex:0 0 64px; width:64px; height:64px; border-radius:12px; background:#0f1220;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.item .thumb img{width:100%; height:100%; object-fit:cover; border-radius:12px; display:block}
.pill{display:inline-block; padding:6px 10px; background:#20243a; border:1px solid #2a2f45; border-radius:999px; font-size:12px}
.tools-subnav{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px}
.tools-subnav .pill{background:#1a1d2b; border-color:#2a2f45}
/* превью 16:9 ~ 64px высоты внутри #tools */
#tools .tools-videos a.item .thumb{
  flex:0 0 calc(var(--video-thumb-h) * 16 / 9);
  width:calc(var(--video-thumb-h) * 16 / 9);
  height:var(--video-thumb-h);
  border-radius:8px; background:#000; overflow:hidden;
}
#tools .tools-videos a.item .thumb img{width:100%; height:100%; object-fit:cover; display:block}

/* подзаголовки + линия */
.section-title{position:relative; font-size:1.4rem; margin:24px 0 20px; text-align:center}
.section-title::before{content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:#444a66}
.section-title span{background:rgba(255,255,255,0.05); padding:6px 14px; border-radius:8px}

/* якоря с учётом липкой шапки */
.anchor{scroll-margin-top:90px}

/* ====== craftsharov ====== */
.row{display:flex; align-items:center; gap:10px; flex-wrap:nowrap; margin-bottom:6px}
.cell-num{min-width:42px; text-align:right; font-weight:600}
.icon{width:26px; height:26px; background:#0f1220; border:1px solid #2a2f45; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.icon img{width:100%; height:100%; object-fit:cover; display:block}
.input{background:#0f1220; border:1px solid #2a2f45; border-radius:10px; color:var(--text); padding:8px 10px; width:130px}
.btn.big{width:100%; padding:14px 18px; text-transform:uppercase; font-weight:800; background:#16a34a; border:1px solid #16a34a; color:#0b0f12}
.btn.big:hover{filter:brightness(1.05)}
#output{white-space:pre-wrap; background:#101223; border:1px solid #252943; border-radius:12px; padding:14px}

/* ====== chest_simulator ====== */
.table-center{display:flex; justify-content:center; overflow:auto}
table{border-collapse:collapse; font-size:14px; margin:0 auto; width:auto}
th,td{padding:1px 8px; border-bottom:1px solid #252943; vertical-align:middle; text-align:center}
td:first-child .cell-item{justify-content:flex-start}
th{color:var(--muted); font-weight:700}
.cell-item{display:flex; align-items:center; justify-content:center; gap:8px}
.icon.sm{width:20px; height:20px; border-color:#252943}
.select-wrap{position:relative; width:100%; max-width:100%}
.select-btn{width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; background:#0f1220; border:1px solid var(--list-border); border-radius:12px; cursor:pointer}
.select-current{display:flex; align-items:center; gap:10px; min-height:26px}
.select-caret{opacity:.6}
.options{position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:320px; overflow:auto; background:var(--list); border:1px solid var(--list-border); border-radius:12px; padding:6px; display:none; z-index:20; box-shadow:0 8px 28px rgba(0,0,0,.35)}
.options.open{display:block}
.option{display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; cursor:pointer; user-select:none}
.option:hover, .option[aria-selected="true"]{background:var(--list-hover)}
.loot-list{display:grid; gap:2px}
.loot-row{display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #252943; background:#1a1d2b; border-radius:12px; padding:4px 8px; min-height:30px}
.loot-left{display:flex; align-items:center; gap:8px}
.qty{font-weight:700; white-space:nowrap; display:inline-block}
.card--params label {
  font-weight: 700; /* жирный текст */
}

/* Кнопки состояния */
.btn.cooldown, .btn:disabled{
  background:#2a2f45 !important; border-color:#2a2f45 !important; color:#8b92a6 !important;
  cursor:not-allowed !important; opacity:.85; pointer-events:none;
}

/* ====== модалки на главной ====== */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:50}
.modal{width:min(720px, calc(100% - 24px)); background:#141724; border:1px solid #2a2f45; border-radius:16px; padding:16px}
.modal h3{margin:4px 0 10px; text-align:center}
.modal .close{float:right; cursor:pointer; font-weight:700; color:var(--text)}
.modal .content{max-height:60vh; overflow:auto}
.modal .server{background:#0f1220; border:1px solid #252943; border-radius:12px; padding:12px; margin-top:10px}
.modal .server pre{white-space:pre-wrap; margin:8px 0 0; color:var(--muted); font-family:inherit}

/* Видео-эмбед */
.video-embed{position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.hidden{display:none !important}

/* Фоновая звёздная канва (если используется) */
#stars{position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; background:#0d0d1a}

/* ===== Brand gradient buttons ===== */

.header .nav .btn{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.15); }
.footer{ text-align:center; border-top:1px solid rgba(255,255,255,.15); padding:16px 0; margin-top:24px; }
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:36px; height:36px; border-radius:10px; object-fit:cover; }

/* ===== Brand gradient buttons (tuned) ===== */
.btn.youtube{
  background: linear-gradient(135deg, #ffb066, #d98ad9, #9b7de2);
  border: none;
  color:#000 !important;
}
.btn.boosty{
  background: linear-gradient(135deg, #FF7A00, #FFFFFF, #FF7A00);
  border: none;
  color:#000 !important;
}

/* Base button (subtle border only) */
.header .nav .btn{
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,0.12); /* subtle, not white */
}
.footer{ text-align:center; border-top:1px solid rgba(255,255,255,0.12); padding:16px 0; margin-top:24px; }
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:36px; height:36px; border-radius:10px; object-fit:cover; }

/* ===== Бейдж для "Расхождение" (подробные итоги) ===== */
.delta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;   /* капсула */
  font-size: 13px;
  font-weight: 700;       /* жирный текст */
  line-height: 1.2;
  border: 1px solid rgba(255,255,255,0.25); /* тонкая светлая рамка */
  white-space: nowrap;
}

/* ===== Краткие итоги: зелёные/красные дельты рядом с количеством ===== */
.summary-delta, .delta-inc{ color:#16a34a; font-weight:700; }
.delta-dec{ color:#ef4444; font-weight:700; }
.qty .delta-inc, .qty .delta-dec{ margin-left:6px; }

/* ===== Мобильная шапка — сверху бренд, ниже 3 кнопки в ряд ===== */
@media (max-width: 860px){

  /* Обёртка хедера — в столбик, чтобы не было двух колонок */
  .header .wrap, header .wrap{
    display:block;
  }

  /* Бренд — отдельной строкой на всю ширину */
  .header .wrap .brand, header .wrap .brand{
    margin:0 0 12px 0;
  }

  /* Навигация — именно грид на 3 колонки */
  .header .nav, header .nav{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:12px;
  }

  .header .nav .btn, header .nav .btn{
    width:100%;
    white-space:nowrap;
  }

  /* На очень узких экранах разрешим перенос внутри кнопки */
  @media (max-width: 360px){
    .header .nav .btn, header .nav .btn{
      white-space:normal;
      line-height:1.15;
      padding:10px 10px;
    }
  }
} /* ← эта скобка закрывает @media (max-width: 860px) */

/* === About: даты слева и с интервалами === */
.about-date{
  display:block;          
  text-align:left;        
  margin:10px 0;          
  line-height:1.5;        
}

/* ==== Chest Simulator: server filter buttons ==== */
/* Исправлено: убран лишний '}' выше и усилен селектор */
.server-filter.active,
.server-filters .btn.server-filter.active{
  background:#16a34a;
  border:1px solid #16a34a;
  color:#0b0f12;
}