/* @import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap"); */
:root{
  --bg:#0b0612;
  --card:#140a20cc;
  --card2:#12081bcc;
  --line:#ffffff14;
  --text:#f7efff;
  --muted:#d7c9efcc;
  --pink:#ff4fd8;
  --pink2:#ff86ef;
  --violet:#8a5cff;
  --cyan:#5ee7ff;
  --good:#52ffb6;
  --warn:#ffe27a;
  --shadow: 0 22px 60px rgba(0,0,0,.45);
  --shadow2: 0 18px 40px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 24px;
  --container: 1180px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  /* --font: "Lexend", ui-sans-serif, sy\stem-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; */
  --base-100: transparent; 
  --border-color: #4b5563; 
  --text-color: #f3f4f6; 
  --info-bg: rgba(0, 0, 0, 0.8); /* Фон для всплывающей информации */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ background:#07040c; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 600px at 75% 5%, rgba(255,79,216,.22), transparent 55%),
    radial-gradient(900px 600px at 20% 10%, rgba(138,92,255,.20), transparent 55%),
    radial-gradient(1000px 700px at 50% 120%, rgba(94,231,255,.10), transparent 60%),
    linear-gradient(180deg, #07040c 0%, #0b0612 45%, #07040c 100%);
  overflow-x:hidden;
}
.site{
  position:relative;
  min-height:100%;
  z-index:1;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* Sparkles */
.sparkles{
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.55) 99%, transparent 100%),
    radial-gradient(1px 1px at 30% 40%, rgba(255,255,255,.45) 99%, transparent 100%),
    radial-gradient(1px 1px at 55% 25%, rgba(255,255,255,.35) 99%, transparent 100%),
    radial-gradient(1px 1px at 78% 32%, rgba(255,255,255,.50) 99%, transparent 100%),
    radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,.35) 99%, transparent 100%),
    radial-gradient(1px 1px at 20% 75%, rgba(255,255,255,.30) 99%, transparent 100%),
    radial-gradient(1px 1px at 45% 62%, rgba(255,255,255,.40) 99%, transparent 100%),
    radial-gradient(1px 1px at 68% 80%, rgba(255,255,255,.28) 99%, transparent 100%);
  opacity:.55;
  filter: blur(.1px);
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{
  from{ opacity:.35; transform: translateY(0); }
  to{ opacity:.65; transform: translateY(-6px); }
}

.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

/* Header */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,6,16,.75), rgba(10,6,16,.45));
  border-bottom: 1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
  gap: 16px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  min-width: 190px;
}
.logo{
  width:38px; height:38px; border-radius:14px;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.85), transparent 55%),
    linear-gradient(135deg, rgba(255,79,216,.95), rgba(138,92,255,.95));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 12px 26px rgba(255,79,216,.22);
  position:relative;
}
.logo:after{
  content:"✦";
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:#fff; font-size:18px; opacity:.95;
  text-shadow: 0 0 18px rgba(255,255,255,.45);
}
.logo-img{
  width:38px;
  height:38px;
  border-radius:14px;
  object-fit:cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 12px 26px rgba(255,79,216,.22);
}
.brand-title{ display:flex; flex-direction:column; line-height:1.05; }
.brand-title strong{ font-size:16px; letter-spacing:.2px; }
.brand-title span{ font-size:12px; color:var(--muted); }

.nav{
  display:flex; align-items:center; gap:18px;
  flex:1;
  justify-content:center;
}
.nav a{
  font-size:13px;
  color: rgba(247,239,255,.86);
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  transition: .18s ease;
}
.nav a:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.nav a.active{
  background: rgba(255,134,239,.10);
  border-color: rgba(255,134,239,.18);
  color: rgba(255,210,250,.96);
}

/* Dropdown menu */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(247,239,255,.86);
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: .18s ease;
}
.nav-dropdown-toggle:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
.dropdown-arrow {
  font-size: 10px;
  transition: transform .2s ease;
}
.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: rgba(20,10,32,.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  z-index: 100;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: rgba(247,239,255,.86);
  transition: .15s ease;
  border: 1px solid transparent;
  margin: 2px 0;
}
.nav-dropdown-menu a:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,210,250,.96);
}

.actions{
  display:flex; align-items:center; gap:12px;
  /* min-width: 260px; */
  justify-content:flex-end;
}
.badge{
  display:flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 8px 10px;
}
.badge .pill{
  font-weight:700;
  font-size:12px;
  padding: 6px 10px;
  border-radius: 12px;
  color:#120818;
  background: linear-gradient(135deg, var(--warn), #ffd24d);
  box-shadow: 0 12px 22px rgba(255,210,77,.18);
  min-width: 46px;
  text-align:center;
}
.badge code{
  font-size:12px;
  cursor:pointer;
  color: rgba(247,239,255,.9);
}

/* User/Login in Header Badge */
.badge .user-link,
.badge .login-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(247,239,255,.9);
  font-weight: 600;
  font-size: 13px;
  transition: .15s ease;
}
.badge .user-link:hover,
.badge .login-link:hover {
  color: #fff;
}
.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.badge-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.15);
}

/* Buttons */
.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-ghost,
.add,
.subscribe{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 14px;
  padding: 10px 14px;
  border:1px solid transparent;
  cursor:pointer;
  transition:.18s ease;
  font-weight:700;
  color: rgba(10,6,16,.92);
}
.btn-primary{
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #0f0a16;
  box-shadow: 0 12px 26px rgba(255,79,216,.25);
}
.btn-primary:hover{ transform: translateY(-1px); filter:saturate(1.05); }
.btn-ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: rgba(247,239,255,.9);
}
.btn-ghost:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); }
.btn-wide{ padding: 12px 16px; border-radius: 16px; }
.wide{ width:100%; }
.half{ flex:1; min-width: 160px; }
.btn-icon{ width: 44px; height: 44px; padding: 0; }
.btn-glyph,
.btn-glyph-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Hero */
.hero{
  padding: 36px 0 18px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
}
.hero-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  padding: 26px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero-copy .kicker{
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.65);
}
.hero-copy h1{
  font-size: 34px;
  margin: 10px 0 6px;
}
.hero-meta{
  color: rgba(255,255,255,.55);
  font-size: 13px;
}
.hero-copy p{
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.6;
}
.hero-slider .slides-container{
  position: relative;
  min-height: 190px;
}
.slide{
  position:absolute; inset:0;
  opacity:0; transition:.35s ease;
  background: radial-gradient(450px 260px at 30% 20%, rgba(255,134,239,.20), transparent 60%),
    linear-gradient(160deg, rgba(138,92,255,.18), rgba(94,231,255,.08));
  border-radius: var(--radius2);
  padding: 22px;
}
.slide.active{ opacity:1; position:relative; }
.slide .spark{
  position:absolute; right:22px; top:20px;
  width:46px; height:46px; border-radius:14px;
  background: linear-gradient(135deg, rgba(255,79,216,.8), rgba(138,92,255,.8));
  opacity:.65;
  box-shadow: 0 10px 20px rgba(255,79,216,.25);
}
.slide .art{
  position:absolute; right:-30px; bottom:-30px;
  width:180px; height:180px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), rgba(255,255,255,0) 60%),
    radial-gradient(circle at 70% 70%, rgba(94,231,255,.35), rgba(94,231,255,0) 60%);
  filter: blur(2px);
  opacity:.8;
}
.slide-content .slide-title{ font-size:22px; font-weight:800; }
.slide-content .slide-sub{ margin: 6px 0 0; color: rgba(255,255,255,.78); font-size: 13px; }
.dots{ display:flex; gap:8px; margin-top: 18px; }
.dot{
  width: 32px; height: 6px; border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.dot.active{
  background: linear-gradient(90deg, rgba(255,79,216,.85), rgba(138,92,255,.85));
  border-color: transparent;
}

/* Sections */
.section{
  padding: 28px 0 12px;
}
.section-title{
  font-size: 28px;
  margin: 0 0 6px;
}
.section-subtitle{
  color: rgba(255,255,255,.7);
  margin: 0 0 18px;
}

/* Modes */
.modes{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
}
.mode-list{
  background: var(--card2);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding: 16px;
}
.mode-chip{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing:.18em;
  color: rgba(255,255,255,.5);
  margin-bottom: 10px;
}
.mode-btn{
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  display:flex; flex-direction:column;
  gap:2px;
  cursor:pointer;
  transition:.18s ease;
}
.mode-btn.active,
.mode-btn:hover{
  background: rgba(255,134,239,.14);
  border-color: rgba(255,134,239,.25);
}
.mode-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding: 20px;
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  position:relative;
  overflow:hidden;
}
.mode-hero{
  width:100%; height: 200px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,79,216,.20), rgba(138,92,255,.12)),
    radial-gradient(200px 160px at 30% 20%, rgba(255,255,255,.25), transparent 60%);
}
.mode-hero-image{
  width:100%; height: 200px;
  border-radius: 18px;
  object-fit: cover;
}
.mode-title{ margin:0 0 6px; font-size: 22px; }
.mode-desc{ margin:0 0 10px; color: rgba(255,255,255,.76); }
.mode-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.mode-actions{ display:flex; gap:10px; margin-top: 14px; }

/* Store / packages */
.store-section .store-text{
  margin-bottom: 16px;
  color: rgba(255,255,255,.8);
}
.site-home-categories{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.site-home-categories .category{
  background: var(--card2);
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  display:flex;
  gap:10px;
  align-items:center;
}
.site-home-categories .image{
  width:48px; height:48px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,79,216,.35), rgba(138,92,255,.35));
}
.store-products-grid,
.store-products-list,
.store-products-compact,
.store-products-grid-small,
.store-products-grid-large,
.store-products-images{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.store-product{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: var(--shadow2);
}
.store-product .image{
  width:100%;
  height: 160px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  object-fit: cover;
}
.product-title{
  font-size: 18px;
  margin: 10px 0;
}
.product-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:stretch;
  flex-direction:column;
}
.product-actions .add,
.product-actions .subscribe{
  width:100%;
  min-height: 38px;
  justify-content:center;
  text-align:center;
  background: transparent !important;
  border: 1px solid rgba(138, 43, 226, 0.5) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 10px;
  transition: .2s ease;
}
.product-actions .add:hover,
.product-actions .subscribe:hover{
  background: rgba(138, 43, 226, 0.3) !important;
  border-color: rgba(138, 43, 226, 0.8) !important;
}
.product-actions .open-basket-cta{
  width:100%;
}
.product-actions .price{
  font-size: 14px;
  color: rgba(255,255,255,.82);
  align-self:flex-end;
}
.product-actions .quantity-field{
  width:100%;
}
.quantity-field{
  display:flex;
  align-items:center;
  gap:6px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 4px;
}
.quantity-field.with-open-basket{
  width:100%;
  justify-content:space-between;
  padding: 6px 8px;
}
.quantity-field{
  display:none;
}
.quantity-field .open-basket{
  flex:1;
  text-align:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(247,239,255,.9);
  border-radius: 10px;
  padding: 6px 10px;
  cursor:pointer;
}
.quantity-field .open-basket:hover{
  background: rgba(255,255,255,.1);
}
.quantity-field .adjust{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.8);
  cursor:pointer;
  padding: 4px 8px;
}
.quantity-field .quantity{
  width: 54px;
  background: transparent;
  border:0;
  color: rgba(255,255,255,.9);
  text-align:center;
}

/* News */
.news-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 16px;
}
.news-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.news-card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  display:flex; flex-direction:column;
  gap:12px;
}
.news-thumb{
  height: 130px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,79,216,.24), rgba(138,92,255,.20));
}
.news-title{ margin:0; font-size: 16px; }
.news-date{ margin:0; color: rgba(255,255,255,.6); font-size: 12px; }


/* ========== FOOTER (исправленный, чтобы не сливался) ========== */
footer{
  position: relative;
  isolation: isolate;
  padding: 64px 0 64px;
  margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.15);
}
footer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(900px 380px at 25% 0%, rgba(255,79,216,.18), transparent 60%),
    radial-gradient(900px 380px at 75% 30%, rgba(138,92,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
}
footer::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.02);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 16px;
  align-items:start;
}
.footer-card{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18, 8, 27, .55);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  padding: 16px;
  position:relative;
  overflow:hidden;
}
.footer-card h3, .footer-card h4{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing:.1px;
}
.footer-card p{
  margin: 0;
  color: rgba(247,239,255,.72);
  font-size: 13px;
  line-height:1.6;
}
.mini{
  display:flex; align-items:center; gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  margin-top: 10px;
}
.icon{
  width: 38px; height:38px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(255,79,216,.40), rgba(138,92,255,.32));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 32px rgba(255,79,216,.10);
  flex:0 0 auto;
}
.mini strong{ display:block; font-size:13px; font-weight:1000; }
.mini span{ display:block; font-size:12px; color: rgba(247,239,255,.68); margin-top:2px; }

.links{
  display:flex; flex-direction:column; gap: 10px;
  margin-top: 8px;
}
.links a{
  font-size: 13px;
  color: rgba(247,239,255,.78);
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  transition:.18s ease;
}
.links a:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.18);
}

.footer-cta{
  display:flex; gap: 10px; flex-wrap:wrap;
  margin-top: 12px;
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 1024px) {
  .topbar-inner {
    padding: 12px 0;
  }
  .nav {
    gap: 10px;
  }
  .nav > a,
  .nav-dropdown-toggle {
    font-size: 12px;
    padding: 8px 8px;
  }
  .brand-title strong {
    font-size: 14px;
  }
  .brand-title span {
    font-size: 11px;
  }
  .badge {
    padding: 6px 8px;
  }
  .badge .pill {
    padding: 4px 6px;
    font-size: 11px;
  }
  .badge code {
    font-size: 11px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .footer-card:first-child {
    grid-column: span 2;
  }
  .footer-cta {
    flex-wrap: wrap;
  }
  .footer-cta .btn {
    flex: 1;
    min-width: 120px;
    text-align: center;
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .topbar {
    position: relative;
  }
  .topbar-inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  .brand {
    min-width: auto;
    order: 1;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(15, 10, 25, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,.1);
    flex-direction: column;
    padding: 16px;
    gap: 8px;
    z-index: 100;
    order: 4;
  }
  .nav.open {
    display: flex;
  }
  .nav > a,
  .nav-dropdown-toggle {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 10px;
  }
  .nav-dropdown {
    width: 100%;
  }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    background: rgba(255,255,255,.03);
    margin-top: 8px;
    display: none;
    min-width: auto;
  }
  .nav-dropdown.open .nav-dropdown-menu {
    display: block;
  }
  .actions {
    order: 3;
    flex: 1;
    justify-content: flex-end;
  }
  .mobile-nav {
    display: block;
    order: 0;
  }
  .toggle-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 20px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
  }
  
  /* Footer Mobile */
  footer#other {
    padding: 40px 0;
  }
  footer#other .container {
    padding: 0 16px;
  }
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .footer-card {
    width: 100% !important;
    grid-column: auto !important;
  }
  .footer-card:first-child {
    grid-column: auto !important;
  }
  .mini {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .mini > div {
    width: 100%;
  }
  .mini .btn {
    margin-left: 0 !important;
    margin-top: 8px;
    width: 100%;
  }
  .mini .icon {
    display: none;
  }
  .footer-cta {
    flex-direction: column;
    gap: 10px;
  }
  .footer-cta .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .links {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .links a {
    padding: 12px 14px;
    text-align: center;
  }
  
  /* Other */
  .hero-grid{ grid-template-columns: 1fr; }
  .modes{ grid-template-columns: 1fr; }
  .news-grid{ grid-template-columns: 1fr; }
  .howto-inner{ grid-template-columns: 1fr; }
  .modes-grid{ grid-template-columns: 1fr 1fr; }
  .features-grid{ grid-template-columns: 1fr; }
}

/* Small Mobile */
@media (max-width: 480px) {
  .topbar-inner {
    padding: 10px 0;
  }
  .brand-title {
    display: none;
  }
  .logo {
    width: 36px;
    height: 36px;
  }
  .badge {
    flex: 1;
  }
  .badge .pill {
    display: none;
  }
  .actions .btn {
    padding: 10px 12px;
    font-size: 12px;
  }
  .user-avatar {
    width: 20px;
    height: 20px;
  }
  
  footer#other {
    padding: 32px 0;
  }
  .footer-card {
    padding: 14px;
  }
  .footer-card h3 {
    font-size: 13px;
  }
  
  .modes-grid{ grid-template-columns: 1fr; }
}

/* Hide mobile nav on desktop */
@media (min-width: 769px) {
  .mobile-nav,
  .toggle-navigation {
    display: none !important;
  }
}

/* ===== NEWS PAGE ===== */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding: 14px 0 18px;
  color: rgba(247,239,255,.70);
  font-size: 13px;
}
.crumbs a{ color: rgba(247,239,255,.82); }
.crumbs a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.crumbs .sep{ opacity:.55; }
.crumbs .muted{ opacity:.65; }

.news-layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items:start;
}

.news-side-card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow2);
  padding: 16px;
  position: sticky;
  top: 92px; /* под шапку */
}
.side-head{
  font-weight: 1000;
  letter-spacing:.4px;
  color: rgba(255,172,238,.96);
  font-size: 12px;
  margin-bottom: 8px;
}
.side-title{
  font-size: 16px;
  font-weight: 1000;
  margin-bottom: 14px;
  color: rgba(247,239,255,.92);
}
.side-links{ display:flex; flex-direction:column; gap: 8px; }
.side-link{
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(247,239,255,.78);
  font-weight: 900;
  font-size: 13px;
  transition:.16s ease;
}
.side-link:hover{ transform: translateY(-1px); background: rgba(255,255,255,.05); }
.side-link.active{
  background: linear-gradient(135deg, rgba(255,79,216,.18), rgba(138,92,255,.14));
  border-color: rgba(255,134,239,.26);
  color: rgba(255,210,250,.96);
  box-shadow: 0 14px 30px rgba(255,79,216,.10);
}

.news-main{ min-width: 0; }

.news-feature{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap: 16px;
  align-items:stretch;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  padding: 16px;
  overflow:hidden;
}
.feature-title{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing:-.2px;
}
.feature-desc{
  margin: 0 0 14px;
  color: rgba(247,239,255,.74);
  line-height: 1.65;
  font-size: 14px;
  max-width: 70ch;
}
.feature-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: rgba(94,231,255,.95);
  font-weight: 1000;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(94,231,255,.18);
  background: rgba(94,231,255,.08);
  transition:.18s ease;
}
.feature-link:hover{ transform: translateY(-1px); background: rgba(94,231,255,.12); }

.feature-image{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  display:block;
  min-height: 220px;
  position:relative;
}
.thumb{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 300px at 20% 15%, rgba(255,79,216,.28), transparent 55%),
    radial-gradient(900px 320px at 80% 25%, rgba(138,92,255,.24), transparent 58%),
    radial-gradient(700px 260px at 60% 70%, rgba(94,231,255,.12), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.thumb:after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 16% 28%, rgba(255,255,255,.42) 99%, transparent 100%),
    radial-gradient(2px 2px at 48% 42%, rgba(255,255,255,.28) 99%, transparent 100%),
    radial-gradient(2px 2px at 72% 30%, rgba(255,255,255,.36) 99%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.28) 100%);
  opacity:.9;
}

/* небольшие отличия “превьюшек” */
.thumb-a{ filter: saturate(1.15); }
.thumb-b{ filter: hue-rotate(12deg) saturate(1.18); }
.thumb-c{ filter: hue-rotate(-10deg) saturate(1.12); }
.thumb-d{ filter: hue-rotate(24deg) saturate(1.22); }
.thumb-e{ filter: hue-rotate(-22deg) saturate(1.18); }

.news-cards{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.news-post{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow2);
  overflow:hidden;
  transition:.18s ease;
}
.news-post:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,.14); }
.post-thumb{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius: var(--radius2) var(--radius2) 0 0;
  height: 200px;          /* фиксированная высота превью */
}

.post-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;        /* заполняет блок как на баннере */
  display:block;
}
.post-thumb:after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.20) 70%, rgba(0,0,0,.34) 100%);
}
.post-body{ padding: 14px 14px 16px; }
.post-title{
  display:inline-block;
  margin: 0 0 8px;
  font-weight: 1000;
  letter-spacing:-.25px;
  font-size: 16px;
  color: rgba(94,231,255,.95);
}
.post-title:hover{ text-decoration: underline; text-underline-offset: 3px; }
.post-desc{
  margin: 0 0 12px;
  color: rgba(247,239,255,.74);
  font-size: 13px;
  line-height: 1.65;
}
.post-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: rgba(94,231,255,.95);
  font-weight: 1000;
  font-size: 12px;
  padding: 9px 11px;
  border-radius: 14px;
  border:1px solid rgba(94,231,255,.18);
  background: rgba(94,231,255,.08);
  transition:.18s ease;
}
.post-link:hover{ transform: translateY(-1px); background: rgba(94,231,255,.12); }

.news-pagination{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 18px;
}

/* responsive */
@media (max-width: 980px){
  .news-layout{ grid-template-columns: 1fr; }
  .news-side-card{ position: static; }
  .news-feature{ grid-template-columns: 1fr; }
  .news-cards{ grid-template-columns: 1fr; }
}

/* ===== ARTICLE (news1.html) ===== */
.article-wrap{ max-width: 1100px; }
.article{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.article-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.article-title{
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 1000;
  letter-spacing: -0.35px;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  color: rgba(247,239,255,.70);
  font-size: 13px;
}
.meta-item{ display:inline-flex; gap: 8px; align-items:center; }
.meta-ico{ opacity:.9; }
.meta-dot{ opacity:.5; }

.share-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(247,239,255,.82);
  font-weight: 1000;
  cursor:pointer;
  transition:.18s ease;
}
.share-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.05); }

.hide-sm{ display:inline; }
@media (max-width: 520px){
  .hide-sm{ display:none; }
  .article-title{ font-size: 22px; }
}

/* hero */
.article-hero{
  padding: 18px;
  padding-top: 10px;
  background: radial-gradient(900px 320px at 20% 0%, rgba(255,79,216,.18), transparent 55%),
              radial-gradient(900px 360px at 80% 10%, rgba(138,92,255,.14), transparent 58%);
}
.article-hero-thumb{
  height: 420px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
  position: relative;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
@media (max-width: 820px){
  .article-hero-thumb{ height: 280px; }
}

/* content */
.article-content{
  background: rgba(0,0,0,.00);
  padding: 18px 18px 6px;
  max-width: 860px;
  margin: 0 auto;
  color: rgba(247,239,255,.86);
}
.article-content h2{
  margin: 24px 0 16px;
  font-size: 22px;
  font-weight: 1000;
  color: rgba(247,239,255,.95);
}
.article-content h3{
  margin: 20px 0 10px;
  font-size: 18px;
  font-weight: 1000;
  color: rgba(247,239,255,.92);
}
.article-content p{
  line-height: 1.85;
  font-size: 14px;
  color: rgba(247,239,255,.78);
  margin: 12px 0;
}
.article-content section{
  margin: 24px 0;
}
.article-content section:first-child{
  margin-top: 0;
}
.article-content article{
  margin: 18px 0;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
}
.article-content article h3{
  margin-top: 0;
}
.faq-list h3{
  margin: 20px 0 8px;
  font-size: 16px;
  font-weight: 1000;
  color: rgba(94,231,255,.95);
}
.faq-list p{
  margin: 8px 0 16px;
  padding-left: 4px;
}
.faq-list code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,134,239,.95);
  font-size: 13px;
}

.article-badge{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  margin: 16px 0 8px;
  letter-spacing: .2px;
}

.article-badge-red{
  background: rgba(220, 38, 38, .15);
  border: 1px solid rgba(220, 38, 38, .25);
  color: rgba(255, 180, 180, .95);
}

.ipline{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
.ipcopy{
  font: inherit;
  font-weight: 1000;
  color: rgba(94,231,255,.95);
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(94,231,255,.18);
  background: rgba(94,231,255,.08);
  cursor:pointer;
  transition:.18s ease;
}
.ipcopy:hover{ transform: translateY(-1px); background: rgba(94,231,255,.12); }

.article-hr{
  border: 0;
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 18px 0;
}

.article-media{
  margin: 18px 0;
}
.article-media-thumb{
  height: 420px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
  position: relative;
  box-shadow: 0 16px 40px rgba(0,0,0,.32);
}
.article-media figcaption{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(247,239,255,.62);
}
@media (max-width: 820px){
  .article-media-thumb{ height: 260px; }
}

.article-list{
  margin: 14px 0 18px;
  padding-left: 18px;
  color: rgba(247,239,255,.78);
  line-height: 1.9;
}
.article-list li{ margin: 8px 0; }

/* footer */
.article-footer{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* “картинки” (замени на настоящие img когда будут) */
.article-hero-thumb,
.article-media-thumb{
  background:
    radial-gradient(1000px 320px at 20% 10%, rgba(255,79,216,.26), transparent 55%),
    radial-gradient(900px 320px at 80% 20%, rgba(138,92,255,.22), transparent 58%),
    radial-gradient(700px 260px at 60% 70%, rgba(94,231,255,.10), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.article-hero-thumb:after,
.article-media-thumb:after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 16% 28%, rgba(255,255,255,.42) 99%, transparent 100%),
    radial-gradient(2px 2px at 48% 42%, rgba(255,255,255,.28) 99%, transparent 100%),
    radial-gradient(2px 2px at 72% 30%, rgba(255,255,255,.36) 99%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.28) 100%);
  opacity:.9;
}

.hero-a{ filter: saturate(1.20); }
.hero-b{ filter: hue-rotate(18deg) saturate(1.15); }
.hero-c{ filter: hue-rotate(-10deg) saturate(1.10); }
.hero-d{ filter: hue-rotate(28deg) saturate(1.18); }
.hero-e{ filter: hue-rotate(-22deg) saturate(1.12); }

/* ===== 404 PAGE ===== */
.e404{
  min-height: calc(100vh - 220px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 34px 0 46px;
  position: relative;
}

.e404-card{
  width: min(860px, 100%);
  border-radius: calc(var(--radius2) + 6px);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  padding: 26px 22px 22px;
  text-align:center;
  position: relative;
  overflow:hidden;
}

.e404-card:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 320px at 20% 10%, rgba(255,79,216,.22), transparent 55%),
    radial-gradient(900px 360px at 80% 10%, rgba(138,92,255,.18), transparent 58%),
    radial-gradient(700px 260px at 60% 70%, rgba(94,231,255,.10), transparent 62%);
  opacity:.95;
  pointer-events:none;
}

.e404-card > *{ position: relative; z-index:1; }

.e404-orb{
  width: 76px; height: 76px;
  border-radius: 999px;
  margin: 2px auto 12px;
  background:
    radial-gradient(22px 22px at 35% 30%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(80px 80px at 50% 60%, rgba(255,79,216,.35), rgba(138,92,255,.18) 55%, rgba(0,0,0,.0) 70%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 55px rgba(255,79,216,.16);
}

.e404-code{
  font-size: 86px;
  font-weight: 1000;
  letter-spacing: -2px;
  line-height: 1;
  margin: 6px 0 6px;
  color: rgba(255,210,250,.95);
  text-shadow: 0 18px 60px rgba(255,79,216,.20);
}

.e404-title{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: -0.3px;
  color: rgba(247,239,255,.95);
}

.e404-text{
  margin: 0 auto 16px;
  max-width: 70ch;
  line-height: 1.75;
  color: rgba(247,239,255,.74);
  font-size: 14px;
}

.e404-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:center;
  margin-top: 10px;
}

.e404-tip{
  margin-top: 14px;
  color: rgba(247,239,255,.70);
  font-size: 13px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 10px;
  align-items:center;
}

.e404-tip a{
  color: rgba(94,231,255,.95);
  font-weight: 1000;
}
.e404-tip a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.e404-sep{ opacity:.55; }

.e404-runes{
  position:absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  gap: 10px;
  color: rgba(255,210,250,.55);
  filter: drop-shadow(0 10px 30px rgba(255,79,216,.12));
  user-select:none;
}
.e404-runes span{
  animation: runeFloat 3.6s ease-in-out infinite;
}
.e404-runes span:nth-child(2){ animation-delay: .3s; }
.e404-runes span:nth-child(3){ animation-delay: .6s; }
.e404-runes span:nth-child(4){ animation-delay: .9s; }
.e404-runes span:nth-child(5){ animation-delay: 1.2s; }

@keyframes runeFloat{
  0%,100%{ transform: translateY(0); opacity:.65; }
  50%{ transform: translateY(-6px); opacity:1; }
}

@media (max-width: 520px){
  .e404-code{ font-size: 66px; }
  .e404-title{ font-size: 18px; }
}

/* ===== PRELOADER (MagicMC) ===== */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1100px 420px at 18% 20%, rgba(255,79,216,.22), transparent 60%),
    radial-gradient(1000px 420px at 82% 18%, rgba(138,92,255,.20), transparent 62%),
    radial-gradient(900px 420px at 50% 80%, rgba(94,231,255,.10), transparent 65%),
    linear-gradient(180deg, rgba(10,6,16,1), rgba(12,8,20,1));
  overflow: hidden;
}

.preloader:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(2px 2px at 16% 28%, rgba(255,255,255,.45) 99%, transparent 100%),
    radial-gradient(2px 2px at 36% 62%, rgba(255,255,255,.30) 99%, transparent 100%),
    radial-gradient(2px 2px at 72% 34%, rgba(255,255,255,.38) 99%, transparent 100%),
    radial-gradient(2px 2px at 84% 66%, rgba(255,255,255,.28) 99%, transparent 100%);
  opacity:.65;
  filter: blur(.2px);
  animation: preStars 2.8s ease-in-out infinite;
}

@keyframes preStars{
  0%,100%{ transform: translateY(0); opacity:.55; }
  50%{ transform: translateY(-6px); opacity:.75; }
}

.preloader-inner{
  width: min(520px, 92vw);
  padding: 24px 22px 20px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  text-align: center;
  position: relative;
}

.preloader-orb{
  width: 90px;
  height: 90px;
  margin: 2px auto 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(22px 22px at 32% 28%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(90px 90px at 50% 60%, rgba(255,79,216,.38), rgba(138,92,255,.20) 55%, rgba(0,0,0,0) 70%);
  box-shadow:
    0 22px 70px rgba(255,79,216,.18),
    inset 0 0 35px rgba(255,255,255,.06);
  animation: preOrb 1.45s ease-in-out infinite;
}

@keyframes preOrb{
  0%,100%{ transform: translateY(0) scale(1); filter: saturate(1.05); }
  50%{ transform: translateY(-8px) scale(1.03); filter: saturate(1.25); }
}

.preloader-rune{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin: 2px 0 10px;
  color: rgba(255,210,250,.70);
  user-select:none;
}
.preloader-rune span{
  animation: preRune 1.2s ease-in-out infinite;
}
.preloader-rune span:nth-child(2){ animation-delay: .12s; }
.preloader-rune span:nth-child(3){ animation-delay: .24s; }
.preloader-rune span:nth-child(4){ animation-delay: .36s; }
.preloader-rune span:nth-child(5){ animation-delay: .48s; }

@keyframes preRune{
  0%,100%{ transform: translateY(0); opacity:.65; }
  50%{ transform: translateY(-6px); opacity:1; }
}

.preloader-title{
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: -0.2px;
  color: rgba(247,239,255,.95);
  margin-top: 2px;
}
.preloader-sub{
  font-size: 13px;
  color: rgba(247,239,255,.72);
  margin-top: 6px;
}

.preloader-bar{
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  margin: 14px auto 10px;
  width: min(360px, 86%);
}
.preloader-bar-fill{
  display:block;
  height: 100%;
  width: 35%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(94,231,255,.35),
    rgba(255,79,216,.45),
    rgba(138,92,255,.40)
  );
  filter: saturate(1.15);
  animation: preBar 1.1s ease-in-out infinite;
}
@keyframes preBar{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(320%); }
}

.preloader-tip{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(247,239,255,.62);
}
.preloader-tip kbd{
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(247,239,255,.82);
  font-weight: 900;
}

/* hide animation */
.preloader--hide{
  animation: preHide .55s ease forwards;
}
@keyframes preHide{
  to{ opacity: 0; transform: scale(1.02); }
}
.preloader--gone{ display:none; }

/* optional: reduce motion */
@media (prefers-reduced-motion: reduce){
  .preloader:before,
  .preloader-orb,
  .preloader-rune span,
  .preloader-bar-fill{ animation: none !important; }
}

/* ===== HD SKINS PAGE (Red note styling) ===== */
.article-note{
  padding: 16px 20px;
  border-radius: 12px;
  margin: 24px 0;
  border-left: 4px solid;
  font-size: 14px;
  line-height: 1.7;
}

.article-note-red{
  background: rgba(220, 38, 38, .12);
  border-left-color: rgba(220, 38, 38, .45);
  color: rgba(255, 180, 180, .95);
  border: 1px solid rgba(220, 38, 38, .22);
}

.article-note-red strong{
  color: rgba(255, 200, 200, .98);
  font-weight: 700;
}

.article-content a{
  color: rgba(94,231,255,.95);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .18s ease;
}

.article-content a:hover{
  color: rgba(94,231,255,1);
  text-decoration-color: rgba(94,231,255,.5);
}

.article-media img{
  box-shadow: 0 16px 40px rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.12);
}

/* Tebex adjustments */
.btn-secondary,
.btn-tertiary,
.add{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(247,239,255,.9);
}
.btn-secondary:hover,
.btn-tertiary:hover,
.add:hover{
  background: rgba(255,255,255,.08);
}
.subscribe{
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: #0f0a16;
  box-shadow: 0 12px 26px rgba(255,79,216,.25);
}
.subscribe:hover{ transform: translateY(-1px); filter:saturate(1.05); }
.open-basket{ cursor:pointer; }
.store-sidebar{
  background: var(--card2);
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}
.site-bg-image{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.15;
  z-index:-1;
}

/* Generic Tebex layout */
.site-content{
  width:min(var(--container), calc(100% - 40px));
  margin: 0 auto;
  padding: 20px 0 30px;
}
.site-content-widgets{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
}
.site-content-widgets .store-sidebar{
  order: -1;
}
.store-widgets .store-sidebar{ margin-top: 12px; }
.text-content{ color: rgba(255,255,255,.8); }
.store-form input,
.store-form select{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
}
.store-form input::placeholder{
  color: rgba(255,255,255,.5);
}
.store-form input:focus,
.store-form select:focus{
  outline:none;
  border-color: rgba(255,134,239,.55);
  box-shadow: 0 0 0 3px rgba(255,134,239,.15);
  background: rgba(255,255,255,.06);
}
.store-form .field{ margin-bottom: 12px; }
.basket{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding: 16px;
}
.popup{
  position:fixed;
  inset:0;
  background: rgba(7,4,12,.75);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:250;
}
.popup-scroll-cont{
  width:min(920px, calc(100% - 32px));
  max-height: calc(100% - 40px);
  overflow:auto;
}
.popup-content{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: var(--shadow);
}
.basket-popup-content{
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}
.basket-popup-content h2{
  margin: 0 0 12px;
}
.basket-popup-content .popup-close{
  position: absolute;
  top: 12px;
  right: 12px;
}
.basket-popup-content .field{
  display:flex;
  gap:10px;
  align-items:center;
}
.basket-popup-content .field input{
  flex:1;
}
.basket-popup-content .field .btn-primary{
  min-width: 120px;
}
.login-popup-content{
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}
.login-popup-content h2{
  margin: 0 0 12px;
}
.login-popup-content .popup-close{
  position: absolute;
  top: 12px;
  right: 12px;
}
.login-popup-content .field{
  display:flex;
  gap:10px;
  align-items:center;
}
.login-popup-content .field input{
  flex:1;
}
.login-popup-content .field .btn-primary{
  min-width: 120px;
}
.popup-close{
  border:1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(247,239,255,.9);
  border-radius: 12px;
  padding: 6px 10px;
  cursor:pointer;
}
.basket-empty{
  padding: 12px 0;
  color: rgba(255,255,255,.7);
}
.basket-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 8px;
}
.basket-second-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 8px;
}
.basket-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.basket-item:last-child{ border-bottom:0; }
.basket-item .info{
  flex:1;
  min-width:0;
}
.basket-item .title a{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.basket-item .quantity-field{
  min-width: 140px;
}
.basket-item .remove{
  white-space:nowrap;
}
.basket .title{ margin:0; }
.basket .price{ color: rgba(255,255,255,.8); }
.basket-checkout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.basket-checkout h3{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
}
.basket-checkout .checkout{
  min-width: 200px;
}
.widget{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
}
.widget-title{ margin:0 0 8px; }

@media (max-width: 960px){
  .hero-grid{ grid-template-columns: 1fr; }
  .modes{ grid-template-columns: 1fr; }
  .mode-card{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .nav{ display:none; }
  .actions{ min-width: auto; }
  .site-content-widgets{ grid-template-columns: 1fr; }
}
/* === Input Field Design === */
input,
textarea input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  transition: all 0.18s ease;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

input::placeholder,
textarea input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

input:focus,
textarea input:focus {
  border-color: rgba(255, 134, 239, 0.55);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 0 3px rgba(255, 134, 239, 0.15),
    inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Optional: Add subtle glow on focus for extra polish */
input:focus,
textarea input:focus {
  filter: brightness(1.02);
}

/* Support for disabled state */
input:disabled,
textarea input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.02);
}

/* Compact variant (e.g., for filters or search bars) */
input.compact {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 12px;
}

/* Full-width with margin utility */
input.wide {
  width: 100%;
}

/* Error & success states (optional but recommended) */
input.error {
  border-color: rgba(255, 79, 216, 0.6);
  background: rgba(255, 79, 216, 0.04);
}
input.success {
  border-color: rgba(82, 255, 182, 0.6);
  background: rgba(82, 255, 182, 0.04);
}

/* Textarea specific adjustments */
textarea input {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

/* For grouped inputs (e.g., with buttons or icons) */
.input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.input-group input {
  flex: 1;
}


/* ===== Custom Sidebar (ChatGPT Style) ===== */
.store-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.panel {
  border-radius: 18px;
  padding: 14px;
  background: rgba(20, 14, 28, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 10px;
}

.panel-title {
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
}

.panel-sub {
  opacity: .8;
  font-weight: 600;
  color: #fff;
}

.panel-body {
  padding: 6px;
}

.muted {
  opacity: .7;
}

/* Basket List */
.basket-list {
  list-style: none;
  margin: 0;
  padding: 0 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.basket-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.basket-item-name {
  font-weight: 600;
  color: #fff;
}

.basket-item-meta {
  opacity: .8;
  display: flex;
  gap: 10px;
  white-space: nowrap;
  color: rgba(255,255,255,.8);
}

.basket-actions {
  display: flex;
  gap: 10px;
  padding: 0 6px 6px;
}

/* Category Navigation */
.cat-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px;
}

.cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,.85);
  font-weight: 500;
  transition: .18s ease;
}

.cat-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.cat-link.is-active {
  border-color: rgba(255, 80, 220, 0.5);
  background: radial-gradient(120% 180% at 20% 10%, rgba(255, 80, 220, 0.30), rgba(130, 70, 255, 0.20));
  color: #fff;
}

.cat-link.sub {
  margin-left: 16px;
  font-size: 13px;
}

/* Panel Modules */
.panel-modules .widget {
  margin-top: 10px;
}

.panel-modules .widget:first-child {
  margin-top: 0;
}

.panel-modules .widget-title {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  margin-bottom: 8px;
}

.panel-modules .widget-content {
  color: rgba(255,255,255,.7);
  font-size: 13px;
}

/* Recent Payments in sidebar */
.recent-payments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recent-payment {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rp-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.rp-main {
  flex: 1;
  min-width: 0;
}

.rp-name {
  font-weight: 700;
  color: #fff;
}

.rp-sub {
  opacity: .7;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rp-price {
  opacity: .85;
  font-weight: 700;
  white-space: nowrap;
}

/* Top Donor */
.top-donor {
  display: flex;
  align-items: center;
  gap: 10px;
}

.td-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.td-name {
  font-weight: 800;
  color: #fff;
}

.td-sub {
  opacity: .75;
  font-size: 12px;
}

/* Hide text widget */
.panel-modules .widget-text {
  display: none;
}


/* ========== FOOTER (исправленный, чтобы не сливался) ========== */
footer{
  position: relative;
  isolation: isolate;
  padding: 64px 0 64px;
  margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.15);
}
footer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(900px 380px at 25% 0%, rgba(255,79,216,.18), transparent 60%),
    radial-gradient(900px 380px at 75% 30%, rgba(138,92,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
}
footer::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.02);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 16px;
  align-items:start;
}
.footer-card{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18, 8, 27, .55);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  padding: 16px;
  position:relative;
  overflow:hidden;
}
.footer-card h3, .footer-card h4{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 1000;
  letter-spacing:.1px;
}
.footer-card p{
  margin: 0;
  color: rgba(247,239,255,.72);
  font-size: 13px;
  line-height:1.6;
}
.widget-recent {
  display: none;
  padding: 1rem;
  margin-top: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  background-color: var(--base-100); 
}

/* md:block */
@media (min-width: 768px) {
  .widget-recent {
    display: block;
  }
}

.widget-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-color); 
  margin-bottom: 1rem;
}

.purchases {
  display: flex;
  /* Изменено на flex-start */
  justify-content: flex-start; 
  gap: 0.5rem;
}

.purchase {
  padding: 0;
  /* Добавляем относительное позиционирование для позиционирования .info */
  position: relative; 
  display: block;
}

.purchase .avatar {
  border-radius: 0.5rem;
  width: auto; /* Позволяем ширине подстроиться под контент, чтобы не растягивало */
  height: 64px; /* Фиксированный размер для аватара */
  display: block;
  transition: transform 0.2s; 
}

.purchase .avatar:hover {
  transform: scale(1.05);
}

/* Скрываем info по умолчанию */
.purchase .info {
  display: none;
  /* Позиционирование всплывающего блока */
  position: absolute;
  bottom: 100%; /* Показываем над аватаром */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.25rem 0.5rem;
  background-color: var(--info-bg);
  color: var(--text-color);
  border-radius: 0.25rem;
  margin-bottom: 0.5rem; /* Отступ от аватара */
  z-index: 10;
}

/* Показываем info при наведении на purchase */
.purchase:hover .info {
  display: block;
}

/* Стили для ника внутри info */
.username {
  font-size: 0.875rem;
  margin: 0;
  font-weight: normal;
}

/* Скрываем текст, если нужно соответствовать только иконкам из примера */
.purchase .info {
  display: none;
}