
/* ============================================================
 HEADER — hdr- prefix
 ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.hdr-root {
 position: sticky;
 top: 0;
 z-index: 1000;
 width: 100%;
 height: 62px;
 background: #0d0f14;
 border-bottom: 1px solid #1e2330;
 transition: background .22s ease, box-shadow .22s ease;
}
.hdr-root.hdr-scrolled {
 background: rgba(10,12,17,.97);
 box-shadow: 0 2px 32px rgba(0,0,0,.7);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
}

/* верхняя линия */
.hdr-root::before {
 content: '';
 position: absolute;
 left: 0; right: 0; top: 0;
 height: 2px;
 background: linear-gradient(90deg, transparent 0%, #e44c01 30%, #ff8c00 50%, #e44c01 70%, transparent 100%);
 opacity: .7;
}

.hdr-inner {
 max-width: 1440px;
 margin: 0 auto;
 padding: 0 20px;
 height: 100%;
 display: flex;
 align-items: center;
 gap: 0;
}

/* ---- LOGO ---- */
.hdr-logo {
 display: flex;
 align-items: center;
 gap: 9px;
 text-decoration: none;
 flex-shrink: 0;
 margin-right: 24px;
}
.hdr-logo img { height: 34px; display: block; filter: drop-shadow(0 0 8px rgba(228,76,1,.22)); }

/* ---- NAV ---- */
.hdr-nav {
 display: flex;
 align-items: center;
 gap: 1px;
 flex: 1;
 list-style: none;
 height: 100%;
}

.hdr-nav > li {
 position: relative;
 height: 100%;
 display: flex;
 align-items: center;
}

.hdr-nav > li > a {
 display: flex !important;
 align-items: center !important;
 gap: 6px !important;
 padding: 0 13px !important;
 height: 100% !important;
 color: #c9d1dd !important;
 font-family: 'Exo 2', sans-serif !important;
 font-size: 12.5px !important;
 font-weight: 700 !important;
 letter-spacing: .3px !important;
 text-decoration: none !important;
 white-space: nowrap !important;
 transition: color .18s !important;
 position: relative !important;
 background: transparent !important;
 text-transform: uppercase !important;
}

/* нижняя линия при hover */

.hdr-nav > li > a:hover,
.hdr-nav > li.hdr-active > a { color: #ffffff !important; }
.hdr-nav > li > a:hover::after,
.hdr-nav > li.hdr-active > a::after { transform: scaleX(1); }

.hdr-nav > li > a img {
 width: 17px; height: 17px;
 object-fit: contain; flex-shrink: 0;
 opacity: .8;
 transition: opacity .18s;
}
.hdr-nav > li > a:hover img { opacity: 1; }

.hdr-chev {
 font-size: 9px !important;
 color: #3b4354 !important;
 margin-left: 1px !important;
 transition: transform .22s cubic-bezier(.34,1.56,.64,1), color .18s !important;
}
.hdr-nav > li:hover > a .hdr-chev {
 transform: rotate(180deg);
 color: #e44c01 !important;
}

/* ---- DROPDOWN ---- */
.hdr-drop {
 position: absolute !important;
 top: 100% !important;
 left: 0 !important;
 min-width: 230px !important;
 background: #10131a !important;
 border: 1px solid #252b38 !important;
 border-top: 2px solid #e44c01 !important;
 border-radius: 0 0 12px 12px !important;
 padding: 6px 0 8px !important;
 list-style: none !important;
 box-shadow: 0 14px 40px rgba(0,0,0,.6) !important;
 opacity: 0;
 visibility: hidden;
 transform: translateY(8px);
 transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
 pointer-events: none;
 z-index: 9999 !important;
}
.hdr-nav > li:hover .hdr-drop {
 opacity: 1 !important;
 visibility: visible !important;
 transform: translateY(0) !important;
 pointer-events: auto;
}

/* секция в дропдауне */
.hdr-drop-section {
 padding: 8px 14px 4px !important;
 font-family: 'Exo 2', sans-serif !important;
 font-size: 9px !important;
 font-weight: 900 !important;
 color: #3b4354 !important;
 text-transform: uppercase !important;
 letter-spacing: .6px !important;
 list-style: none !important;
 background: transparent !important;
 border: none !important;
 margin-top: 4px !important;
}
.hdr-drop-section:first-child { margin-top: 0 !important; }

.hdr-drop-div {
 height: 1px !important;
 background: #1e2330 !important;
 margin: 4px 12px !important;
 list-style: none !important;
}

.hdr-drop li a {
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
 padding: 9px 16px !important;
 color: #9aa4b2 !important;
 font-family: 'Manrope', sans-serif !important;
 font-size: 12.5px !important;
 font-weight: 600 !important;
 text-decoration: none !important;
 background: transparent !important;
 border: none !important;
 transition: color .18s, background .18s, padding-left .18s !important;
 white-space: nowrap !important;
}
.hdr-drop li a::before {
 content: '';
 width: 3px; height: 3px;
 border-radius: 50%;
 background: #3b4354;
 flex-shrink: 0;
 transition: background .18s, transform .18s;
}
.hdr-drop li a:hover {
 color: #f4f6fb !important;
 background: rgba(228,76,1,.06) !important;
 padding-left: 20px !important;
}
.hdr-drop li a:hover::before {
 background: #e44c01;
 transform: scale(1.6);
 box-shadow: 0 0 8px rgba(228,76,1,.6);
}

/* ---- RIGHT ZONE ---- */
.hdr-right {
 display: flex;
 align-items: center;
 gap: 7px;
 margin-left: auto;
 flex-shrink: 0;
}

/* иконка-кнопка */
.hdr-icon-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 38px; height: 38px;
 border-radius: 10px;
 background: #151924;
 border: 1px solid #252b38;
 color: #9aa4b2;
 font-size: 15px;
 cursor: pointer;
 text-decoration: none;
 transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
 position: relative;
}
.hdr-icon-btn:hover {
 background: rgba(228,76,1,.12);
 border-color: rgba(228,76,1,.35);
 color: #ff7a2f;
 box-shadow: 0 0 14px rgba(228,76,1,.18);
}

/* бейдж ЛС */
.hdr-pm-badge {
 position: absolute;
 top: -4px; right: -4px;
 min-width: 17px; height: 17px;
 padding: 0 4px;
 background: #e44c01;
 color: #fff;
 font-family: 'Exo 2', sans-serif;
 font-size: 9px; font-weight: 900;
 border-radius: 9px;
 display: flex; align-items: center; justify-content: center;
 border: 2px solid #0d0f14;
}

/* дроп профиля */
.hdr-user-wrap { position: relative; }
.hdr-user-drop {
 position: absolute;
 top: calc(100% + 10px);
 right: 0;
 width: 240px;
 background: #10131a;
 border: 1px solid #252b38;
 border-top: 2px solid #e44c01;
 border-radius: 0 0 12px 12px;
 list-style: none;
 box-shadow: 0 14px 40px rgba(0,0,0,.6);
 opacity: 0;
 visibility: hidden;
 transform: translateY(6px);
 transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
 pointer-events: none;
 overflow: hidden;
}
.hdr-user-wrap:hover .hdr-user-drop,
.hdr-user-wrap.hdr-open .hdr-user-drop {
 opacity: 1; visibility: visible;
 transform: translateY(0);
 pointer-events: auto;
}
.hdr-user-avatar {
 display: flex; align-items: center; gap: 11px;
 padding: 14px 16px;
 background: #151924;
 border-bottom: 1px solid #1e2330;
 text-decoration: none;
 transition: background .18s;
}
.hdr-user-avatar:hover { background: #1b202c; }
.hdr-user-avatar img {
 width: 42px; height: 42px;
 border-radius: 9px;
 object-fit: cover;
 border: 2px solid #e44c01;
 box-shadow: 0 0 12px rgba(228,76,1,.25);
 flex-shrink: 0;
}
.hdr-user-name {
 font-family: 'Exo 2', sans-serif;
 font-size: 14px; font-weight: 800;
 color: #f4f6fb; line-height: 1.2;
}
.hdr-user-role {
 font-size: 11px; color: #5f6878; margin-top: 2px;
}
.hdr-user-drop li a {
 display: flex; align-items: center; gap: 10px;
 padding: 10px 16px;
 color: #9aa4b2;
 font-family: 'Manrope', sans-serif;
 font-size: 13px; font-weight: 600;
 text-decoration: none;
 border-bottom: 1px solid #1a1f2a;
 transition: color .18s, background .18s;
}
.hdr-user-drop li:last-child a { border-bottom: none; }
.hdr-user-drop li a i { width: 15px; text-align: center; color: #3b4354; font-size: 13px; transition: color .18s; }
.hdr-user-drop li a:hover { color: #f4f6fb; background: rgba(228,76,1,.06); }
.hdr-user-drop li a:hover i { color: #e44c01; }
.hdr-user-drop li a.hdr-logout { color: #ff6b6b; }
.hdr-user-drop li a.hdr-logout:hover { background: rgba(228,76,1,.1); color: #ffb0a0; }
.hdr-user-drop li a.hdr-logout i { color: #ff6b6b; }

/* ---- BURGER ---- */
.hdr-burger {
 display: none;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 5px;
 width: 38px; height: 38px;
 cursor: pointer;
 border-radius: 10px;
 background: #151924;
 border: 1px solid #252b38;
 flex-shrink: 0;
 transition: background .18s, border-color .18s;
}
.hdr-burger:hover { background: #1b202c; border-color: rgba(228,76,1,.3); }
.hdr-burger span {
 display: block; width: 20px; height: 2px;
 background: #c9d1dd; border-radius: 2px;
 transition: transform .3s ease, opacity .3s ease, width .3s ease;
 transform-origin: center;
}
.hdr-burger.hdr-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr-burger.hdr-open span:nth-child(2) { opacity: 0; width: 0; }
.hdr-burger.hdr-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- OVERLAY ---- */
.hdr-overlay {
 display: none;
 position: fixed; inset: 0;
 background: rgba(0,0,0,.75);
 z-index: 998;
 backdrop-filter: blur(4px);
 opacity: 0;
 transition: opacity .3s ease;
}
.hdr-overlay.hdr-vis { opacity: 1; }

/* ---- MOBILE PANEL ---- */
.hdr-mobile {
 position: fixed;
 top: 0; right: 0;
 width: 290px;
 height: 100dvh;
 background: #10131a;
 border-left: 1px solid #252b38;
 z-index: 999;
 overflow-y: auto;
 transform: translateX(100%);
 transition: transform .32s cubic-bezier(.4,0,.2,1);
 display: flex; flex-direction: column;
}
.hdr-mobile.hdr-open { transform: translateX(0); }

.hdr-mob-head {
 display: flex; align-items: center; justify-content: space-between;
 padding: 0 18px;
 height: 62px;
 border-bottom: 1px solid #1e2330;
 flex-shrink: 0;
 background: #0d0f14;
}
.hdr-mob-logo {
 font-family: 'Exo 2', sans-serif;
 font-size: 18px; font-weight: 900;
 color: #f4f6fb; text-decoration: none;
 text-transform: uppercase;
}
.hdr-mob-logo span { color: #e44c01; }
.hdr-mob-close {
 width: 32px; height: 32px;
 display: flex; align-items: center; justify-content: center;
 color: #5f6878; font-size: 20px; cursor: pointer;
 border-radius: 8px; background: none; border: none;
 transition: color .18s, background .18s;
}
.hdr-mob-close:hover { color: #f4f6fb; background: #1b202c; }

.hdr-mob-nav { flex: 1; padding: 6px 0; }
.hdr-mob-nav > ul { list-style: none; }

.hdr-mob-item > a {
 display: flex; align-items: center; gap: 10px;
 padding: 13px 18px;
 color: #c9d1dd;
 font-family: 'Exo 2', sans-serif;
 font-size: 13px; font-weight: 700;
 text-decoration: none;
 border-bottom: 1px solid #1a1f2a;
 transition: color .18s, background .18s;
 cursor: pointer; text-transform: uppercase;
}
.hdr-mob-item > a img { width: 18px; height: 18px; object-fit: contain; opacity: .8; }
.hdr-mob-item > a .hdr-mob-arr {
 margin-left: auto; font-size: 10px; color: #3b4354;
 transition: transform .22s, color .18s;
}
.hdr-mob-item.hdr-open > a .hdr-mob-arr { transform: rotate(90deg); color: #e44c01; }
.hdr-mob-item > a:hover { color: #ffffff; background: #151924; }

.hdr-mob-sub {
 list-style: none;
 display: none;
 background: #0b0d12;
 border-bottom: 1px solid #1a1f2a;
}
.hdr-mob-item.hdr-open .hdr-mob-sub { display: block; }
.hdr-mob-sub li a {
 display: flex; align-items: center; gap: 8px;
 padding: 10px 18px 10px 34px;
 color: #5f6878;
 font-family: 'Manrope', sans-serif;
 font-size: 12.5px; font-weight: 600;
 text-decoration: none;
 border-bottom: 1px solid #1a1f2a;
 transition: color .18s, background .18s;
}
.hdr-mob-sub li:last-child a { border-bottom: none; }
.hdr-mob-sub li a::before {
 content: ''; width: 4px; height: 4px;
 border-radius: 50%; background: #252b38; flex-shrink: 0;
 transition: background .18s;
}
.hdr-mob-sub li a:hover { color: #f4f6fb; background: rgba(228,76,1,.05); }
.hdr-mob-sub li a:hover::before { background: #e44c01; }

/* секция в моб субменю */
.hdr-mob-sub-sect {
 padding: 8px 18px 3px 34px;
 font-family: 'Exo 2', sans-serif;
 font-size: 9px; font-weight: 900;
 color: #3b4354; text-transform: uppercase;
 letter-spacing: .6px; list-style: none;
}

.hdr-mob-footer {
 padding: 14px 18px;
 border-top: 1px solid #1e2330;
 flex-shrink: 0;
 background: #0d0f14;
}
.hdr-mob-cta {
 display: flex; align-items: center; justify-content: center; gap: 8px;
 width: 100%; padding: 12px;
 background: linear-gradient(135deg, #ff3d00, #e44c01);
 color: #fff;
 font-family: 'Exo 2', sans-serif;
 font-size: 13px; font-weight: 800;
 text-transform: uppercase; letter-spacing: .5px;
 text-decoration: none; border-radius: 10px; border: none;
 cursor: pointer;
 box-shadow: 0 4px 16px rgba(228,76,1,.28);
 transition: background .18s, box-shadow .18s;
}
.hdr-mob-cta:hover {
 background: linear-gradient(135deg, #ff5500, #ff6b1a);
 box-shadow: 0 6px 20px rgba(228,76,1,.42);
}

/* ---- MODAL ---- */
.hdr-modal-bg {
 display: none;
 position: fixed; inset: 0;
 background: rgba(5,6,8,.85);
 backdrop-filter: blur(6px);
 z-index: 2000;
 align-items: center;
 justify-content: center;
}
.hdr-modal-bg.hdr-open { display: flex; }
.hdr-modal {
 width: 380px;
 max-width: calc(100vw - 32px);
 background: #10131a;
 border: 1px solid #252b38;
 border-top: 2px solid #e44c01;
 border-radius: 14px;
 overflow: hidden;
 box-shadow: 0 24px 70px rgba(0,0,0,.7);
 animation: hdrModalIn .25s ease;
}
@keyframes hdrModalIn {
 from { opacity: 0; transform: translateY(18px) scale(.97); }
 to { opacity: 1; transform: none; }
}
.hdr-modal-head {
 display: flex; align-items: center; justify-content: space-between;
 padding: 15px 20px;
 background: #151924;
 border-bottom: 1px solid #1e2330;
}
.hdr-modal-head h2 {
 font-family: 'Exo 2', sans-serif;
 font-size: 17px; font-weight: 900;
 color: #f4f6fb; text-transform: uppercase; letter-spacing: .5px;
}
.hdr-modal-x {
 width: 30px; height: 30px;
 display: flex; align-items: center; justify-content: center;
 background: none; border: none; color: #5f6878;
 font-size: 20px; cursor: pointer; border-radius: 8px;
 transition: color .18s, background .18s;
}
.hdr-modal-x:hover { color: #f4f6fb; background: #1b202c; }
.hdr-modal-body { padding: 22px 20px; }
.hdr-modal-body input[type="text"],
.hdr-modal-body input[type="password"] {
 width: 100%; padding: 11px 14px;
 background: #0b0d12; border: 1px solid #252b38;
 border-radius: 10px; color: #f4f6fb;
 font-family: 'Manrope', sans-serif;
 font-size: 14px; margin-bottom: 12px; outline: none;
 transition: border-color .18s, box-shadow .18s;
}
.hdr-modal-body input[type="text"]:focus,
.hdr-modal-body input[type="password"]:focus {
 border-color: #e44c01;
 box-shadow: 0 0 0 3px rgba(228,76,1,.12);
}
.hdr-modal-body input[type="submit"] {
 width: 100%; padding: 12px;
 background: linear-gradient(135deg, #ff3d00, #e44c01);
 border: none; border-radius: 10px;
 color: #fff;
 font-family: 'Exo 2', sans-serif;
 font-size: 14px; font-weight: 800;
 text-transform: uppercase; letter-spacing: .5px;
 cursor: pointer; margin-top: 4px;
 box-shadow: 0 4px 16px rgba(228,76,1,.28);
 transition: background .18s, box-shadow .18s;
}
.hdr-modal-body input[type="submit"]:hover {
 background: linear-gradient(135deg, #ff5500, #ff6b1a);
 box-shadow: 0 6px 22px rgba(228,76,1,.42);
}

/* ============================================================
 RESPONSIVE
 ============================================================ */
@media (max-width: 1100px) {
 .hdr-nav > li > a { padding: 0 10px !important; font-size: 11.5px !important; }
 .hdr-logo { margin-right: 16px; }
}
@media (max-width: 900px) {
 .hdr-nav { display: none !important; }
 .hdr-burger { display: flex; }
 .hdr-overlay { display: block; }
}
@media (max-width: 480px) {
 .hdr-inner { padding: 0 14px; }
 .hdr-mobile { width: 280px; }
}
