:root{
  --bg:#0b1220;
  --panel:rgba(255,255,255,.06);
  --card:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --line:rgba(255,255,255,.12);
  --accent:rgba(124,92,255,.55);
}
*{box-sizing:border-box}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 20% 0%, rgba(124,92,255,.16), transparent 60%),
             radial-gradient(900px 500px at 90% 10%, rgba(0,212,255,.10), transparent 55%),
             var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.small{color:var(--muted);font-size:13px}
.tiny{color:var(--muted);font-size:12px;margin-top:10px}
.muted{color:var(--muted)}
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(8px);
  background:rgba(11,18,32,.72);
  border-bottom:1px solid var(--line);
}
.headerRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.brandTitle{font-weight:900;font-size:18px}
.brandSub{margin-top:2px}
.headerActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:8px 12px;border-radius:12px;
  text-decoration:none;cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.10)}
.btn.ghost{background:transparent}
.inline{display:inline}
.layout3{
  display:grid;grid-template-columns:300px 1fr 300px;gap:16px;
  padding:18px 0;
}
.main{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  min-height:60vh;
}
.side{display:flex;flex-direction:column;gap:12px}
.adBox{
  background:var(--panel);
  border:1px dashed rgba(255,255,255,.18);
  border-radius:18px;
  padding:14px;
  text-align:center;
  color:var(--muted);
  min-height:160px;
}
.panelTitle{font-weight:900;font-size:16px;margin:0 0 10px}
.card{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin:12px 0;
}
.cardTitle{font-weight:800;margin-bottom:8px}
.link{color:rgba(255,255,255,.9);text-decoration:none}
.link:hover{text-decoration:underline}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
thead th{color:var(--muted);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px;vertical-align:middle}
.dot.ok{background:#39d98a}
.dot.bad{background:#ff5c7a}
.dot.warn{background:#ffd166}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.miniCard{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:16px;padding:14px}
.miniTitle{font-weight:900;margin-bottom:8px}
.miniList{margin:0;padding-left:18px}
.hero{padding:6px 0}
.heroTitle{font-weight:950;font-size:20px}
.heroSub{margin-top:6px}
.promoGrid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;margin-top:12px}
.promoCard{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:18px;padding:14px}
.promoCard.glow{box-shadow:0 0 0 1px rgba(124,92,255,.35), 0 0 40px rgba(124,92,255,.12)}
.promoTop{display:flex;gap:10px;align-items:center;justify-content:space-between}
.badge{border:1px solid rgba(124,92,255,.45);background:rgba(124,92,255,.15);padding:4px 10px;border-radius:999px;font-weight:900;font-size:12px}
.promoName{font-weight:900}
.promoStats{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.stat{border:1px solid var(--line);background:rgba(255,255,255,.04);padding:8px 10px;border-radius:12px}
.promoActions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.form{display:flex;flex-direction:column;gap:10px}
input,select{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  color:var(--text);
}
label{font-size:13px;color:var(--muted)}
.err{background:rgba(255,92,122,.10);border:1px solid rgba(255,92,122,.35);padding:10px 12px;border-radius:12px;margin-bottom:10px}
.planGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.planCard{display:block;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:16px;padding:12px;cursor:pointer}
.planCard:hover{background:rgba(255,255,255,.07)}
.planCard input{margin-right:8px}
.planName{font-weight:950}
.price{margin-top:8px;font-weight:900}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:12px}
.tag.pending{border-color:rgba(255,209,102,.35);background:rgba(255,209,102,.10)}
.tag.active{border-color:rgba(57,217,138,.35);background:rgba(57,217,138,.10)}
.tag.paid{border-color:rgba(0,212,255,.35);background:rgba(0,212,255,.10)}
.tag.rejected{border-color:rgba(255,92,122,.35);background:rgba(255,92,122,.10)}
@media (max-width: 980px){
  .layout3{grid-template-columns:1fr}
  .side{display:none}
  .grid2{grid-template-columns:1fr}
  .promoGrid{grid-template-columns:1fr}
  .planGrid{grid-template-columns:1fr}
}
/* Banner (no crop on PC/mobile) */
.bannerWrap{
  padding: 14px 0 0;
}

.siteBanner{
  width: 100%;
  height: auto;          /* ключевое — не фиксируем высоту */
  display: block;
  object-fit: contain;   /* вписываем без обрезки */
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}

/* optional: чуть больше воздуха на больших экранах */
@media (min-width: 981px){
  .bannerWrap{ padding-top: 18px; }
}
/* Banner: full width, no crop */
.bannerWrap{
  padding: 14px 0 0;
}

.siteBanner{
  width: 100%;
  height: auto;          /* важно: чтобы не обрезало */
  display: block;
  object-fit: contain;   /* вписываем без кропа */
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}

/* Mobile: чуть меньше радиус и отступ */
@media (max-width: 980px){
  .bannerWrap{ padding-top: 10px; }
  .siteBanner{ border-radius: 16px; }
}
/* Admin UI helpers */
.adminBar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tableWrap{overflow:auto;border-radius:12px;border:1px solid var(--line)}
.btn.danger{background:rgba(255,60,60,.18);border:1px solid rgba(255,60,60,.35)}
.btn.danger:hover{filter:brightness(1.05)}
.checkRow{display:flex;gap:10px;align-items:center;margin-top:8px}
.desktopOnly { display: block; }
.mobileOnly { display: none; }

@media (max-width: 768px) {
  .desktopOnly { display: none; }
  .mobileOnly { display: block; }
}

.mobileCards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.mobileCard {
  background: #121212;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 14px;
}
.promoGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.promoCard {
  background: #1e1e1e;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid #2c2c2c;
  transition: 0.3s ease;
}

.promoCard:hover {
  transform: translateY(-4px);
  border-color: #444;
}

.promoTitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.promoDesc {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 15px;
}

.promoPrice {
  font-weight: 600;
  margin-bottom: 15px;
}

.top { border-left: 4px solid gold; }
.vip { border-left: 4px solid #4db6ff; }
.new { border-left: 4px solid #00c853; }
.free { border-left: 4px solid #666; }

.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.18);
  margin: 0 8px;
  vertical-align: middle;
}