/* ==========================================================================
   /pages.css — разделы сайта (новости, кабинет, настройки, админка,
   политика, соглашение) в новом дизайне.
   Сгенерировано build_prod.py: вёрстка страниц + общие правила из
   старого styles.css (только нужные этим страницам классы, которых нет
   в новом styles.css). Старые CSS-переменные ниже переопределены на
   новые токены, поэтому палитра берётся из нового дизайна.
   ========================================================================== */

:root{
  --bg-soft:var(--bg-2);
  --panel:var(--surface);
  --panel-border:var(--line);
  --text-dim:var(--muted);
  --muted-2:#6d6480;
  --accent:var(--amber);
  --accent-2:var(--amber-2);
  --accent-dark:#b86527;
  --accent-glow:rgba(226,128,58,.35);
  --danger:var(--teal);
  --radius:var(--r-lg);
  --font-ui:var(--font-body);
  --font-pixel:var(--font-display);
  --header-h:72px;
}

.lang-switch__label{
  letter-spacing: 0.04em;
}
@keyframes slideIn{
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes fadeIn{
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes heroDrift{
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); }
}
@keyframes contentIn{
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.footer__info{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer__info p{
  margin: 0;
}
@keyframes authIn{
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin{
  to { transform: rotate(360deg); }
}
@keyframes packIn{
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- news/index.html ---------- */
.news-layout{ max-width: 1100px; margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: 1fr 260px; gap: 32px; align-items: start; }
.news-page__title{ font-family: var(--font-display); font-size: 24px; margin-bottom: 24px; letter-spacing: 0.04em; }
.news-card__expand{ color: var(--accent); font-size: 12px; font-weight: 700; margin-top: 6px; display: none; }
.empty{ text-align: center; padding: 60px 20px; color: var(--muted-2); font-size: 15px; }
.sidebar{ position: sticky; top: 90px; }
.sidebar__title{ font-family: var(--font-display); font-size: 14px; color: var(--text); margin-bottom: 12px; letter-spacing: 0.04em; }
.sidebar__list{ list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sidebar__list a{ display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 6px; font-size: 13px; color: var(--muted); transition: background 0.15s, color 0.15s; text-decoration: none; }
.sidebar__list a:hover{ background: rgba(255,255,255,0.04); color: var(--text); }
.sidebar__list a.is-active{ color: var(--accent); background: rgba(232,168,77,0.08); }
.sidebar__count{ font-size: 11px; color: var(--muted-2); background: rgba(255,255,255,0.04); padding: 2px 8px; border-radius: 10px; }
.sidebar__list a:hover .sidebar__count{ background: rgba(255,255,255,0.08); color: var(--muted); }
@media (max-width: 800px){
  .news-layout{ grid-template-columns: 1fr; }
  .sidebar{ position: static; margin-top: 32px; }
}
@media (max-width: 600px){
  .news-layout{ padding: 20px 16px; }
}

/* ---------- profile/index.html ---------- */
.profile-page{ max-width: 800px; margin: 0 auto; padding: calc(var(--header-h) + 48px) 24px 80px; }
.profile-page h1{ font-family: var(--font-display); font-size: 28px; margin-bottom: 24px; }
.profile-card{ background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.profile-card h2{ font-family: var(--font-display); font-size: 18px; color: var(--accent); margin-bottom: 16px; letter-spacing: 0.03em; }
.profile-card p{ color: var(--muted); margin-bottom: 8px; font-size: 14px; }
.profile-card p strong{ color: var(--text); }
.purchase-card{ display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.purchase-card img{ width: 80px; height: 50px; object-fit: cover; border-radius: 6px; }
.purchase-card__info h3{ font-size: 15px; margin-bottom: 4px; color: var(--text); }
.purchase-card__info p{ font-size: 12px; color: var(--muted-2); margin: 0; }
.purchase-card__price{ margin-left: auto; font-size: 16px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.loading{ color: var(--muted-2); }
.error-box{ background: rgba(224,85,85,0.1); border: 1px solid rgba(224,85,85,0.3); border-radius: 8px; padding: 16px; color: #f07070; margin-bottom: 16px; }
.btn--logout-profile{ margin-top: 16px; }
.download-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.download-item{ border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 18px 12px; text-align: center; background: rgba(255,255,255,0.02); text-decoration: none; color: var(--text); display: block; transition: border-color 0.2s, background 0.2s, transform 0.15s; }
.download-item--disabled{ opacity: 0.45; filter: grayscale(1); }
.download-item__icon{ width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 10px; display: flex; align-items: center; justify-content: center; line-height: 0; }
.download-item__icon svg{ display: block; flex-shrink: 0; }
.download-item__name{ font-weight: 800; color: var(--text); margin-bottom: 8px; font-size: 14px; }
.download-item__note{ font-size: 12px; color: var(--accent); }
.download-item__note--muted{ font-size: 12px; color: var(--muted-2); }

/* ---------- settings/index.html ---------- */
.settings-page{ max-width: 640px; margin: 0 auto; padding: calc(var(--header-h) + 48px) 24px 80px; }
.settings-page h1{ font-family: var(--font-display); font-size: 28px; margin-bottom: 24px; }
.settings-card{ background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.settings-card h2{ font-family: var(--font-display); font-size: 18px; color: var(--accent); margin-bottom: 16px; letter-spacing: 0.03em; }
.settings-card label{ display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.settings-card input[type="text"],
    .settings-card input[type="email"],
    .settings-card input[type="password"]{ width: 100%; padding: 10px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: var(--text); font-size: 14px; font-family: inherit; margin-bottom: 14px; }
.settings-card input:focus{ border-color: var(--accent); outline: none; }
.settings-card .btn{ margin-top: 4px; }
.settings-card .hint{ font-size: 12px; color: var(--muted-2); margin-top: -8px; margin-bottom: 12px; }
.settings-card .success{ color: #5ad67a; font-size: 13px; margin-top: 8px; }
.settings-card .error{ color: #e05555; font-size: 13px; margin-top: 8px; }
.toggle-row{ display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.toggle-row span{ color: var(--text); font-size: 14px; }
.toggle{ width: 48px; height: 26px; background: rgba(255,255,255,0.1); border-radius: 13px; border: none; cursor: pointer; position: relative; transition: background 0.2s; }
.toggle.on{ background: #5ad67a; }
.toggle::after{ content: ''; position: absolute; width: 20px; height: 20px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: left 0.2s; }
.toggle.on::after{ left: 25px; }
.danger-zone{ border-color: rgba(224,85,85,0.3); }
.danger-zone h2{ color: #e05555; }
.loading{ color: var(--muted-2); }

/* ---------- privacy.html ---------- */
.policy{ max-width: 800px; margin: 0 auto; padding: calc(var(--header-h) + 48px) 24px 80px; color: var(--text); line-height: 1.7; font-size: 15px; }
.policy h1{ font-family: var(--font-display); font-size: 28px; margin-bottom: 8px; letter-spacing: 0.04em; }
.policy h2{ font-family: var(--font-display); font-size: 20px; margin-top: 36px; margin-bottom: 12px; letter-spacing: 0.03em; color: var(--accent); }
.policy p{ margin-bottom: 14px; color: var(--muted); }
.policy ul{ margin-bottom: 14px; padding-left: 20px; color: var(--muted); }
.policy li{ margin-bottom: 6px; }
.policy .date{ color: var(--muted-2); font-size: 13px; margin-bottom: 32px; }
.policy strong{ color: var(--text); }

/* ---------- terms.html ---------- */
.policy{ max-width: 800px; margin: 0 auto; padding: calc(var(--header-h) + 48px) 24px 80px; color: var(--text); line-height: 1.7; font-size: 15px; }
.policy h1{ font-family: var(--font-display); font-size: 28px; margin-bottom: 8px; letter-spacing: 0.04em; }
.policy h2{ font-family: var(--font-display); font-size: 20px; margin-top: 36px; margin-bottom: 12px; letter-spacing: 0.03em; color: var(--accent); }
.policy p{ margin-bottom: 14px; color: var(--muted); }
.policy ul{ margin-bottom: 14px; padding-left: 20px; color: var(--muted); }
.policy li{ margin-bottom: 6px; }
.policy .date{ color: var(--muted-2); font-size: 13px; margin-bottom: 32px; }
.policy strong{ color: var(--text); }

/* ---------- admin/index.html ---------- */
.gate{
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 24px;
      background:
        radial-gradient(ellipse 60% 50% at 50% 40%, rgba(232,168,77,0.06) 0%, transparent 70%),
        var(--bg);
    }
.gate__card{
      width: 100%;
      max-width: 400px;
      background: var(--panel);
      border: 1px solid var(--panel-border);
      border-radius: var(--radius);
      padding: 36px 32px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.5);
      text-align: center;
    }
.gate__logo{
      font-family: var(--font-display);
      font-size: 22px;
      color: var(--accent);
      margin-bottom: 8px;
      letter-spacing: 0.04em;
    }
.gate__subtitle{
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 28px;
    }
.gate__error{
      font-size: 13px;
      color: var(--danger);
      margin-bottom: 16px;
      min-height: 20px;
    }
.gate__field{
      margin-bottom: 16px;
      text-align: left;
    }
.gate__field label{
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
.gate__field input{
      width: 100%;
      padding: 11px 14px;
      font-size: 14px;
      font-family: var(--font-ui);
      color: var(--text);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      outline: none;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }
.gate__field input:focus{
      border-color: rgba(232,168,77,0.5);
      background: rgba(255,255,255,0.06);
      box-shadow: 0 0 0 3px rgba(232,168,77,0.08);
    }
.gate__btn{
      width: 100%;
      padding: 12px;
      font-size: 14px;
      font-weight: 800;
      font-family: var(--font-ui);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #0d0803;
      background: linear-gradient(180deg, #e8a84d 0%, #c47a2a 100%);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 2px 0 #8a5018, 0 4px 12px rgba(200,130,40,0.35);
      transition: filter 0.2s, transform 0.15s;
      margin-top: 4px;
    }
.gate__btn:hover{ filter: brightness(1.1); transform: translateY(-1px); }
.gate__btn:active{ transform: translateY(1px); filter: brightness(0.95); }
.gate__btn:disabled{ opacity: 0.5; cursor: not-allowed; filter: none; transform: none; }
.gate__back{
      display: inline-block;
      margin-top: 20px;
      font-size: 12px;
      color: var(--muted-2);
      text-decoration: none;
      transition: color 0.2s;
    }
.gate__back:hover{ color: var(--muted); }
.dashboard{
      display: none;
      min-height: 100vh;
    }
.dashboard.is-visible{
      display: block;
    }
.dash-header{
      background: linear-gradient(180deg, #001024 0%, #000a14 100%);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 0;
    }
.dash-header__inner{
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
.dash-header__title{
      font-family: var(--font-display);
      font-size: 16px;
      color: var(--accent);
      letter-spacing: 0.04em;
    }
.dash-header__user{
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      color: var(--text-dim);
    }
.dash-header__logout{
      padding: 7px 16px;
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-ui);
      color: var(--text-dim);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 6px;
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
.dash-header__logout:hover{
      color: var(--danger);
      border-color: rgba(194,59,59,0.5);
      background: rgba(194,59,59,0.08);
    }
.dash-main{
      max-width: 1200px;
      margin: 0 auto;
      padding: 32px 24px;
    }
.dash-cards{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
      margin-bottom: 32px;
    }
.dash-card{
      background: var(--panel);
      border: 1px solid var(--panel-border);
      border-radius: var(--radius);
      padding: 20px 24px;
    }
.dash-card__label{
      font-size: 11px;
      font-weight: 600;
      color: var(--muted-2);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 8px;
    }
.dash-card__value{
      font-family: var(--font-display);
      font-size: 28px;
      color: var(--accent);
    }
.dash-card__sub{
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
    }
.dash-section{
      background: var(--panel);
      border: 1px solid var(--panel-border);
      border-radius: var(--radius);
      padding: 24px;
      margin-bottom: 20px;
    }
.dash-section__title{
      font-family: var(--font-display);
      font-size: 16px;
      color: var(--text);
      margin-bottom: 16px;
      letter-spacing: 0.04em;
    }
.dash-tabs{
      display: flex;
      gap: 6px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
.dash-tab{
      padding: 10px 18px;
      border-radius: 8px;
      border: 1px solid rgba(180, 195, 220, 0.18);
      background: rgba(255,255,255,0.03);
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--font-ui);
      transition: all 0.15s;
    }
.dash-tab:hover{
      border-color: rgba(232,168,77,0.5);
      color: var(--text);
    }
.dash-tab.is-active{
      background: linear-gradient(180deg, #e8a84d 0%, #c47a2a 100%);
      color: #0d0803;
      border-color: transparent;
    }
.dash-table{
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
.dash-table th{
      text-align: left;
      padding: 10px 12px;
      font-size: 11px;
      font-weight: 700;
      color: var(--muted-2);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
.dash-table td{
      padding: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      color: var(--text-dim);
    }
.dash-table tr:hover td{
      background: rgba(255,255,255,0.02);
    }
.dash-badge{
      display: inline-block;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
.dash-badge--admin{
      background: rgba(232,168,77,0.15);
      color: var(--accent);
    }
.dash-badge--user{
      background: rgba(120,140,180,0.15);
      color: var(--muted);
    }
.dash-badge--online{
      background: rgba(90,214,122,0.15);
      color: var(--success);
    }
.dash-empty{
      text-align: center;
      padding: 40px;
      color: var(--muted-2);
      font-size: 14px;
    }
.dash-actions{
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
.dash-action-btn{
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-ui);
      border-radius: 5px;
      border: 1px solid transparent;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
.dash-action-btn--promote{
      color: #5ad67a;
      background: rgba(90, 214, 122, 0.08);
      border-color: rgba(90, 214, 122, 0.2);
    }
.dash-action-btn--promote:hover{
      background: rgba(90, 214, 122, 0.18);
      border-color: rgba(90, 214, 122, 0.4);
    }
.dash-action-btn--demote{
      color: var(--accent);
      background: rgba(232, 168, 77, 0.08);
      border-color: rgba(232, 168, 77, 0.2);
    }
.dash-action-btn--demote:hover{
      background: rgba(232, 168, 77, 0.18);
      border-color: rgba(232, 168, 77, 0.4);
    }
.dash-action-btn--delete{
      color: var(--danger);
      background: rgba(194, 59, 59, 0.08);
      border-color: rgba(194, 59, 59, 0.2);
    }
.dash-action-btn--delete:hover{
      background: rgba(194, 59, 59, 0.18);
      border-color: rgba(194, 59, 59, 0.4);
    }
@media (max-width: 640px){
  .gate__card{ padding: 24px 20px; }
  .dash-main{ padding: 20px 16px; }
  .dash-cards{ grid-template-columns: 1fr; }
  .dash-table{ font-size: 11px; }
  .dash-table th, .dash-table td{ padding: 8px 6px; }
}

/* ---------- Мост с новым дизайном ----------
   Шапка сайта зафиксирована и выступает над страницей (логотип свисает ниже
   её края). На главной отступ сверху делает .hero, а разделам его надо задать
   явно: иначе контент уезжает ПОД шапку и читается сквозь неё, а бургер
   выглядит «поверх» текста. Правило идёт после вёрстки страниц — иначе
   собственный padding-top страницы его перекрыл бы. */
:root{--sg-header-offset:120px}
@media (max-width:980px){:root{--sg-header-offset:104px}}
@media (max-width:720px){:root{--sg-header-offset:88px}}
.news-layout,.profile-page,.settings-page,.policy{padding-top:var(--sg-header-offset)}