:root {
    --bg:           #0B0805;
    --card:         #120C06;
    --surface:      #0E0A06;
    --flame:        #F0C040;
    --accent:       #E8A81C;
    --wood:         #8A5E05;
    --text:         #F2E7C9;
    --muted:        #B09A6C;
    --dim:          #8C7850;
    --border:       rgba(232,168,28,0.18);
    --border-hover: rgba(232,168,28,0.45);
    --font-display: 'Bitter', Georgia, serif;
    --font-body:    'PT Sans', system-ui, sans-serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
  }

  body::after {
    content: '';
    position: fixed;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(240,192,64,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  .page-wrap {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
    padding: 60px 24px 80px;
  }

  .page-header {
    margin-bottom: 48px;
  }

  .page-header h1 {
    font-family: var(--font-display); letter-spacing: var(--ls-display, .05em);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 900;
    color: var(--text);
    margin-bottom: 12px;
  }

  .page-header h1 span { color: var(--flame); }

  .page-header p {
    color: var(--muted);
    font-size: 17px;
    font-style: italic;
    line-height: 1.7;
  }

  .news-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .news-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 32px;
    transition: border-color 0.2s;
  }

  .news-card:hover { border-color: var(--border-hover); }

  .news-card.pinned {
    border-color: rgba(232,168,28,0.35);
    background: #1f1a08;
  }

  .news-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }

  .news-emoji {
    font-size: 20px;
    line-height: 1;
  }

  .news-date {
    font-size: 13px;
    color: var(--dim);
    font-family: monospace;
  }

  .news-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
  }

  .tag-release { background: rgba(232,168,28,0.15); color: var(--accent); border: 1px solid rgba(232,168,28,0.3); }
  .tag-feature { background: rgba(46,74,16,0.25); color: #8ac840; border: 1px solid rgba(138,200,64,0.25); }
  .tag-fix     { background: rgba(200,80,20,0.15); color: #e08050; border: 1px solid rgba(200,80,20,0.3); }
  .tag-update  { background: rgba(80,100,200,0.12); color: #8090e0; border: 1px solid rgba(80,100,200,0.25); }
  .tag-news    { background: rgba(232,168,28,0.08); color: var(--muted); border: 1px solid var(--border); }

  .pin-badge {
    font-size: 11px;
    color: var(--flame);
    letter-spacing: 0.5px;
  }

  .news-title {
    font-family: var(--font-display); letter-spacing: var(--ls-display, .05em);
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .news-body {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
  }

  .news-body p { margin-bottom: 10px; }
  .news-body p:last-child { margin-bottom: 0; }

  .news-body ul {
    margin-top: 10px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .news-body li::marker { color: var(--accent); }

  .news-body code {
    font-family: monospace;
    font-size: 13px;
    background: rgba(232,168,28,0.1);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--flame);
  }

  .news-author {
    margin-top: 16px;
    font-size: 12px;
    color: var(--dim);
    font-style: italic;
  }

  /* Скелетон */
  .skeleton {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 32px;
  }

  .skel-line {
    background: linear-gradient(90deg, var(--surface) 25%, #231d0a 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 6px;
    height: 14px;
    margin-bottom: 10px;
  }

  .skel-line.title { height: 22px; width: 65%; margin-bottom: 16px; }
  .skel-line.meta  { height: 12px; width: 30%; margin-bottom: 18px; }
  .skel-line.w80   { width: 80%; }
  .skel-line.w60   { width: 60%; }
  .skel-line.w90   { width: 90%; }

  @keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Ошибка */
  .error-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--muted);
  }

  .error-state .icon { font-size: 40px; margin-bottom: 16px; }
  .error-state p { font-size: 15px; line-height: 1.7; }
  .error-state button {
    margin-top: 20px;
    padding: 10px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .error-state button:hover { border-color: var(--border-hover); }

  /* Пусто */
  .empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--dim);
    font-size: 15px;
    font-style: italic;
  }

  @media (max-width: 600px) {
    .page-wrap { padding: 40px 16px 60px; }
    .news-card { padding: 20px; }
  }

  /* ══ Фирменный стиль (07.10): первая новость — крупной карточкой, остальные сеткой ══ */
  body::after { display: none; }
  .page-wrap { max-width: 1160px; padding: 48px 28px 80px; }
  .page-header { margin-bottom: 30px; }
  .page-header h1 { letter-spacing: var(--ls-display, .05em); }
  .page-header p { font-style: normal; color: var(--text-2); font-size: 17px; }
  .news-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
  .news-card { border-radius: 16px; padding: 24px; transition: border-color .2s, box-shadow .2s; }
  .news-card:hover { border-color: var(--gold-mid); box-shadow: var(--glow); }
  /* Главная новость — на всю ширину, слева картинка-спрайт на полосатом поле */
  .news-card:first-child {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    padding: 0; overflow: hidden; background: var(--card); border-color: var(--border);
  }
  .news-card:first-child::before {
    content: ''; min-height: 260px; border-right: 1px solid var(--border);
    background: var(--news-pic, url(/img/px/ghost.svg)) center / 120px 120px no-repeat, var(--stripes);   /* --news-pic — картинка новости (21.10) */
    image-rendering: pixelated;
  }
  .news-card:first-child > * { grid-column: 2; }
  .news-card:first-child > :first-child { margin-top: 30px; }
  .news-card:first-child > * { padding-left: 30px; padding-right: 30px; }
  .news-card:first-child > :last-child { padding-bottom: 30px; }
  .news-card:first-child .news-title { font: var(--fw-display, 700) 28px/1.2 var(--font-display); letter-spacing: var(--ls-display, .05em); }
  .news-card:first-child::before { grid-row: 1 / span 20; grid-column: 1; }
  @media (max-width: 760px) {
    .news-card:first-child { grid-template-columns: 1fr; }
    .news-card:first-child::before { grid-row: auto; min-height: 180px; border-right: 0; border-bottom: 1px solid var(--border); }
    .news-card:first-child > * { grid-column: 1; padding-left: 20px; padding-right: 20px; }
  }
  .news-card.pinned { border-color: var(--border); background: var(--card); }
  .news-date { font-family: var(--font-mono); color: var(--text-3); font-size: 12px; }
  .news-tag { font: 500 11px var(--font-mono); letter-spacing: 0; text-transform: none; padding: 3px 9px; border-radius: 999px; border: 0 !important; }
  .tag-release, .tag-feature { background: var(--gold-mid); color: var(--outline); }
  .tag-fix { background: var(--red-deep); color: #F3B59B; }
  .tag-update, .tag-news { background: var(--chip); color: var(--gold-mid); }
  .pin-badge { font-family: var(--font-mono); color: var(--gold); }
  .news-emoji { display: none; }
  /* как заголовки по всему сайту (theme.css): 900 и без разрядки текст слипался (21.10) */
  .news-title { font-weight: var(--fw-display, 700); letter-spacing: var(--ls-display, .05em); line-height: 1.25; }
  .news-body { color: var(--text-2); line-height: 1.65; }
  .news-body li::marker { color: var(--gold-mid); }

  /* ══ Новости от сервера (21.10): заголовок — ссылка на страницу новости, страница новости ══ */
  .news-title a { color: inherit; text-decoration: none; }
  .news-title a:hover, .news-title a:focus-visible { color: var(--gold); }
  .news-body h3 { font: var(--fw-display, 700) 18px/1.3 var(--font-display); letter-spacing: var(--ls-display, .05em);
                  color: var(--text); margin: 18px 0 8px; }
  .news-body h4 { font-size: 16px; color: var(--text); margin: 14px 0 6px; }
  .news-body p + p { margin-top: 10px; }
  .news-back { margin-bottom: 22px; }
  .news-back a { font: 500 14px var(--font-mono); color: var(--gold-mid); text-decoration: none; }
  .news-back a:hover { color: var(--gold); }
  .news-single .news-card:first-child .news-title { font-size: clamp(26px, 4vw, 36px); }
  .news-single .news-card:hover { border-color: var(--border); box-shadow: none; }
  .empty-state a { color: var(--gold-mid); }