/* =====================================================================
   STALKERX — ZX THEME  "ПДА // ЗОНА"  (shared across redesigned pages)
   Scope: body.zx  ·  angular PDA terminal × cinematic Zone. No AI-slop.
   ===================================================================== */

body.zx {
    --zx-bg:        #0a0d0c;
    --zx-bg-2:      #0e1312;
    --zx-panel:     rgba(16, 21, 19, 0.72);
    --zx-panel-2:   rgba(22, 28, 25, 0.6);
    --zx-line:      rgba(130, 150, 130, 0.13);
    --zx-line-2:    rgba(165, 185, 155, 0.26);
    --zx-amber:     #e8b23a;
    --zx-amber-2:   #ffcf6b;
    --zx-amber-dim: rgba(232, 178, 58, 0.55);
    --zx-danger:    #ff5a2c;
    --zx-ok:        #93c96a;
    --zx-text:      #d9ded4;
    --zx-dim:       #8b948a;
    --zx-faint:     rgba(184, 194, 182, 0.34);

    --font-display: 'Unbounded', 'Montserrat', sans-serif;
    --font-mono:    'JetBrains Mono', 'Consolas', monospace;
    --font-body:    'Montserrat', system-ui, sans-serif;

    background: var(--zx-bg);
    color: var(--zx-text);
    font-family: var(--font-body);
    overflow-x: hidden;
    /* reserve the fixed-header band globally so no banner/content slips under it (per breakpoint below) */
    padding-top: 95px !important; padding-bottom: 0 !important;
}
/* header shrinks at these widths — keep the body offset in sync */
@media (max-width: 1024px) { body.zx { padding-top: 91px !important; } }
@media (max-width: 768px)  { body.zx { padding-top: 83px !important; } }

/* atmosphere: film scanlines + selection */
body.zx::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.06) 3px, rgba(0,0,0,0) 4px);
    mix-blend-mode: multiply; opacity: .5;
}
body.zx ::selection { background: var(--zx-amber); color: #10130f; }

/* angular language — strip global radii (round status dots excluded case-by-case) */
.zx .header-auth-btn, .zx .rank-badge, .zx .header-avatar, .zx .header-avatar-initial,
.zx .header-logout, .zx .zx-panel, .zx .zx-btn, .zx .zx-card, .zx img,
.zx textarea, .zx input, .zx button, .zx select { border-radius: 0 !important; }

/* kill legacy main side padding + fixed-header offsets */
body.zx main { display: block; padding-inline: 0; padding-top: 0; }

/* ========================= UTILITIES ========================= */
.zx .zx-wrap { max-width: 1640px; margin: 0 auto; padding-inline: 20px; }
.zx .zx-section { padding-block: 52px; position: relative; }
.zx .zx-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.zx .zx-eyebrow {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--zx-amber-dim); display: inline-flex; align-items: center; gap: 10px;
}
.zx .zx-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--zx-amber-dim); }
.zx .zx-index { font-family: var(--font-mono); color: var(--zx-faint); font-size: 13px; letter-spacing: 2px; text-decoration: none; }
.zx a.zx-index { transition: color .2s ease; }
.zx a.zx-index:hover { color: var(--zx-amber); }
.zx .zx-title {
    font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4vw, 52px);
    line-height: .98; letter-spacing: -1px; text-transform: uppercase; color: var(--zx-text); margin: 8px 0 0;
}
.zx .zx-title em { color: var(--zx-amber); font-style: normal; }

/* ========================= BUTTONS ========================= */
.zx .zx-btn {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    padding: 15px 28px; text-decoration: none; cursor: pointer; border: none; position: relative;
    transition: all .22s; display: inline-flex; align-items: center; gap: 12px;
}
.zx .zx-btn-primary { background: var(--zx-amber); color: #10130f; font-weight: 600; }
.zx .zx-btn-primary:hover { background: transparent; color: var(--zx-amber); box-shadow: inset 0 0 0 1.5px var(--zx-amber); }
.zx .zx-btn-ghost { background: var(--zx-bg-2); color: var(--zx-text); border: 1px solid var(--zx-line-2); }
.zx .zx-btn-ghost:hover { border-color: var(--zx-amber); color: var(--zx-amber); }

/* ========================= PANELS ========================= */
.zx .zx-panel { border: 1px solid var(--zx-line-2); background: var(--zx-bg-2); position: relative; }
.zx .zx-panel-bar {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--zx-line);
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--zx-dim);
}
.zx .zx-panel-bar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zx-ok); box-shadow: 0 0 8px var(--zx-ok); }
.zx .zx-panel-bar b { color: var(--zx-amber); font-weight: 500; }

/* ========================= RANK BADGE ========================= */
.zx .rank-badge {
    display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase; line-height: 1.3;
    padding: 0 !important; background: transparent !important; border: none !important;
}
.zx .rank-badge i { font-size: 9px; opacity: .9; }

/* ========================= HEADER ========================= */
body.zx header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    background: rgba(9, 12, 11, 0.95); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--zx-line); transition: background .3s ease, border-color .3s ease;
}
body.zx header.zx-scrolled { background: rgba(8, 11, 10, 0.985); border-bottom-color: var(--zx-line-2); }
body.zx .header-main { max-width: 1640px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 34px; }
body.zx .logo img { height: 34px; display: block; filter: drop-shadow(0 0 10px rgba(232,178,58,.25)); }
body.zx nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
body.zx nav ul li a {
    font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--zx-dim); text-decoration: none; padding: 9px 14px; position: relative; transition: color .2s;
}
body.zx nav ul li a:hover, body.zx nav ul li a.active { color: var(--zx-amber); }
/* match the underline to the word: global style.css insets it 18px (old padding), new padding is 14px */
body.zx nav ul li a::after { left: 14px; right: 14px; background: var(--zx-amber); }
body.zx .header-auth { margin-left: auto; display: flex; align-items: center; gap: 16px; }
body.zx .header-auth-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; color: var(--zx-dim); text-decoration: none; transition: color .2s; }
body.zx .header-auth-link:hover { color: var(--zx-text); }
body.zx .header-auth-btn {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
    color: #10130f; text-decoration: none; padding: 11px 24px; border: none; background: var(--zx-amber);
    position: relative; transition: all .2s; display: inline-flex; align-items: center; gap: 8px;
}
body.zx .header-auth-btn::before { content: "›"; font-weight: 700; font-size: 15px; line-height: 1; margin-top: -1px; }
body.zx .header-auth-btn:hover { background: transparent; color: var(--zx-amber); box-shadow: inset 0 0 0 1.5px var(--zx-amber); }
body.zx .header-user { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--zx-text); border: none; padding: 4px 8px; transition: background .2s ease; }
body.zx .header-user:hover { background: none; }
body.zx .header-avatar, body.zx .header-avatar-initial {
    width: 38px; height: 38px; object-fit: cover;
    display: grid; place-items: center; font-family: var(--font-display); color: var(--zx-amber); background: var(--zx-panel);
}
/* Бордер только у буквы-заглушки (когда аватар не загружен). У картинки — без рамки. */
body.zx .header-avatar-initial { border: 1px solid var(--zx-line-2); border-radius: 0; font-size: 20px; font-weight: 700; line-height: 1; }
body.zx .header-username { font-family: var(--font-mono); font-size: 13px; color: var(--zx-text); }
body.zx .header-logout { background: none; border: 1px solid var(--zx-line); color: var(--zx-dim); width: 36px; height: 36px; cursor: pointer; transition: all .2s; }
body.zx .header-logout:hover { color: var(--zx-danger); border-color: var(--zx-danger); }
/* offset page content below the fixed header (pages without a full-bleed hero) */
body.zx .zx-page-top { height: 0; } /* header offset now handled by body padding-top */
/* shared "back" link with hover (used on detail/form pages) */
.zx .zx-article-back {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--zx-dim); text-decoration: none; transition: color .2s, gap .2s;
}
.zx .zx-article-back:hover { color: var(--zx-amber); gap: 12px; }

/* ========================= FOOTER ========================= */
body.zx footer { margin-top: 0; border-top: 1px solid var(--zx-line); background: var(--zx-bg-2); }
body.zx .footer-inner {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 1px; color: var(--zx-faint);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
    max-width: 1640px; margin: 0 auto; padding: 20px;
}
body.zx .footer-domain { color: var(--zx-amber); }
body.zx .footer-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.zx .footer-privacy { color: var(--zx-faint) !important; transition: color .2s; }
body.zx .footer-privacy:hover { color: var(--zx-amber) !important; }
body.zx .footer-partners { display: flex; align-items: center; gap: 16px; }
body.zx .footer-partners-label { color: var(--zx-amber) !important; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; font-size: 10.5px !important; }
/* friendly signals: muted grayscale logos that regain colour on hover */
body.zx .footer-partner {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    color: rgba(184, 194, 182, .5) !important; letter-spacing: .5px;
    font-family: var(--font-mono); font-size: 11.5px; transition: color .2s;
}
body.zx .footer-partner img { display: block; width: 18px; height: 18px; border-radius: 0 !important; filter: grayscale(1) brightness(.85); transition: filter .2s; }
body.zx .footer-partner:hover { color: var(--zx-text) !important; }
body.zx .footer-partner:hover img { filter: none; }
/* telegram icon — right of partners */
body.zx .footer-tg { display: inline-flex; align-items: center; margin-left: 4px; color: var(--zx-faint); transition: color .2s, transform .2s, filter .2s; }
body.zx .footer-tg svg { display: block; }
body.zx .footer-tg:hover { color: var(--zx-amber); transform: translateY(-1px); filter: drop-shadow(0 0 6px rgba(232, 178, 58, .6)); }

/* ========================= RANK/NAME SAFETY ========================= */
.zx .header-username { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ========================= SCROLLBARS ========================= */
.zx *::-webkit-scrollbar { width: 8px; height: 8px; }
.zx *::-webkit-scrollbar-track { background: var(--zx-bg); }
.zx *::-webkit-scrollbar-thumb { background: var(--zx-line-2); }

/* ========================= REVEAL ========================= */
.zx [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.zx [data-reveal].zx-in { opacity: 1; transform: none; }

/* ========================= MODALS ========================= */
.zx .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(5,7,6,.86); backdrop-filter: blur(6px); align-items: center; justify-content: center; }
.zx .modal-content { position: relative; background: var(--zx-bg-2); border: 1px solid var(--zx-line-2); padding: 40px; max-width: 440px; width: 90%; text-align: center; }
.zx .modal-content h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 22px; color: var(--zx-amber); margin: 0 0 14px; }
.zx .modal-content p { font-size: 14px; line-height: 1.6; color: rgba(217,222,212,.8); margin: 0 0 10px; }

/* ========================= MOBILE (≤1024 burger) ========================= */
@media (max-width: 1024px) {
    body.zx nav {
        position: fixed; top: 0; right: 0; width: 300px; height: 100vh;
        background: rgba(9, 12, 11, 0.98); backdrop-filter: blur(16px);
        border-left: 1px solid var(--zx-line-2); z-index: 999999998;
        transform: translateX(100%); transition: transform .3s ease; /* translate off-canvas: no horizontal-scroll phantom */
        padding: 80px 0 30px; overflow-y: auto; display: block;
    }
    body.zx nav.open { transform: translateX(0); }
    body.zx nav ul { flex-direction: column; gap: 0; }
    body.zx nav ul li { width: 100%; }
    body.zx nav ul li a { display: block; padding: 16px 30px; font-size: 14px; border-bottom: 1px solid var(--zx-line); }
    body.zx .burger-toggle { display: block; order: 3; flex-shrink: 0; }
    body.zx .burger-toggle span { background: var(--zx-amber); }
    body.zx .burger-close { color: var(--zx-dim); border: none !important; background: none; border-radius: 0; }
    body.zx .header-auth { order: 2; min-width: 0; }
    body.zx .header-auth-link { display: none; }
    body.zx .header-main { padding: 12px 20px; gap: 12px; }
    body.zx .header-auth-btn { padding: 9px 15px; font-size: 11px; letter-spacing: 1px; }
    body.zx .header-user { min-width: 0; }
}
@media (max-width: 860px) {
    body.zx .zx-section { padding-block: 40px; }
    body.zx .zx-wrap { padding-inline: 20px; }
    body.zx .footer-inner { flex-direction: column; text-align: center; gap: 14px; }
    body.zx .footer-left { justify-content: center; }
    body.zx .footer-partners { flex-direction: column; align-items: center; gap: 12px; }
}
@media (max-width: 560px) {
    body.zx .header-user-info { display: none; }
}