/* === HEADER v7 — MONO/MECHANICAL === */

:root {
    --h-accent: #ff6633;
    --h-accent-dim: rgba(255, 102, 51, 0.12);
    --h-bg: rgba(10, 10, 10, 0.92);
    --h-border: rgba(255, 255, 255, 0.07);
    --h-text: #e5e5e5;
    --h-text-dim: #777;
}
body.light-mode {
    --h-bg: rgba(243, 243, 240, 0.95);
    --h-border: rgba(0, 0, 0, 0.08);
    --h-text: #111;
    --h-text-dim: #666;
    --h-accent: #e84a1a;
    --h-accent-dim: rgba(232, 74, 26, 0.08);
}

#siteHeader {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--h-height, 56px);
    z-index: 9999;
    background: var(--h-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--h-border);
    transition: background 0.4s;
}
#siteHeader::after {
    content: '';
    position: absolute; bottom: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--h-accent), transparent);
    opacity: 0.3;
}
.h-gradient-bg { display: none; }

.h-inner {
    max-width: 1400px; margin: 0 auto; padding: 0 24px;
    height: 100%; display: flex; align-items: center;
    justify-content: space-between; gap: 16px; position: relative;
}

/* === LOGO === */
.h-logo { text-decoration: none; display: flex; align-items: center; z-index: 10; flex-shrink: 0; }
.h-logo-animated {
    display: flex; align-items: baseline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem; font-weight: 700; letter-spacing: 2px;
}
.h-letter {
    display: inline-block; color: var(--h-text);
    transition: color 0.3s;
    background: none !important;
    -webkit-text-fill-color: var(--h-text) !important;
}
.h-logo:hover .h-letter { color: var(--h-accent); -webkit-text-fill-color: var(--h-accent) !important; }
.h-dot { color: var(--h-accent) !important; -webkit-text-fill-color: var(--h-accent) !important; }
body.light-mode .h-letter { -webkit-text-fill-color: var(--h-text) !important; }
body.light-mode .h-dot { -webkit-text-fill-color: var(--h-accent) !important; }

/* === NAV === */
.h-nav {
    display: flex; gap: 2px;
    position: absolute; left: 50%; transform: translateX(-50%);
}
.h-link {
    position: relative; display: inline-flex; align-items: center;
    padding: 5px 10px; border-radius: 3px;
    font-weight: 500; font-size: 0.62rem; letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--h-text-dim); text-decoration: none;
    transition: all 0.3s; background: transparent;
}
.h-link::before, .h-link::after { display: none; }
.h-link:hover { color: var(--h-text); background: var(--h-accent-dim); }
.h-link.active { color: var(--h-accent); }
.h-link-text { position: relative; z-index: 1; }
.h-link-highlight { color: var(--h-accent) !important; }

/* === ACTIONS === */
.h-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* === BUTTONS === */
.h-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 14px; border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600; font-size: 0.6rem; letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer; text-decoration: none; border: none; white-space: nowrap;
    transition: all 0.3s;
    background: var(--h-accent-dim);
    border: 1px solid var(--h-border);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
}
.h-btn::before, .h-btn::after { display: none !important; }
.h-btn:hover {
    background: var(--h-accent);
    border-color: var(--h-accent);
    transform: none;
    box-shadow: 0 0 20px rgba(255, 102, 51, 0.2);
}
.h-btn-text { position: relative; z-index: 2; color: var(--h-text); text-shadow: none; }
.h-btn:hover .h-btn-text { color: #fff; }
body.light-mode .h-btn-text { color: var(--h-text); }
body.light-mode .h-btn:hover .h-btn-text { color: #fff; }

.h-btn-login { background: var(--h-accent-dim); }
.h-btn-login:hover { background: var(--h-accent); }
.h-btn-logout .h-btn-text { color: #ff6b6b !important; }
body.light-mode .h-btn-logout .h-btn-text { color: #ef4444 !important; }
.h-btn-logout:hover { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; box-shadow: none; }
.h-btn-logout:hover .h-btn-text { color: #ef4444 !important; }
.h-btn-desk { display: inline-flex; }

/* === THEME SWITCH === */
.theme-switch { position: relative; cursor: pointer; padding: 2px; flex-shrink: 0; }
.theme-switch-track {
    position: relative; width: 36px; height: 20px; border-radius: 3px;
    transition: all 0.4s; overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--h-border);
}
body.light-mode .theme-switch-track {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--h-border);
}
.theme-switch-track::before { display: none; }
.theme-switch-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 2px;
    transition: all 0.4s; display: flex; align-items: center; justify-content: center;
    background: var(--h-accent); box-shadow: none;
}
body.light-mode .theme-switch-thumb { left: calc(100% - 18px); background: var(--h-accent); }
.theme-switch-thumb i { font-size: 9px; color: #fff; }
.theme-switch-thumb .fa-moon { opacity: 1; transform: none; color: #fff; }
.theme-switch-thumb .fa-sun { position: absolute; opacity: 0; color: #fff; transform: none; }
body.light-mode .theme-switch-thumb .fa-moon { opacity: 0; }
body.light-mode .theme-switch-thumb .fa-sun { opacity: 1; }
.theme-switch-glow { display: none; }
.theme-switch:hover .theme-switch-thumb { transform: none; box-shadow: 0 0 10px rgba(255, 102, 51, 0.4); }
body.light-mode .theme-switch:hover .theme-switch-thumb { box-shadow: 0 0 10px rgba(232, 74, 26, 0.4); }

/* === NOTIFICATION BELL === */
.notif-wrapper { position: relative; }
.notif-bell {
    position: relative; background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--h-border); border-radius: 3px;
    color: var(--h-text-dim); font-size: 0.78rem; cursor: pointer;
    padding: 5px 8px; transition: all 0.3s;
}
.notif-bell::before { display: none; }
body.light-mode .notif-bell { background: rgba(0, 0, 0, 0.03); border: 1px solid var(--h-border); box-shadow: none; }
.notif-bell:hover { color: var(--h-accent); border-color: var(--h-accent); transform: none; box-shadow: none; }
body.light-mode .notif-bell:hover { color: var(--h-accent); box-shadow: none; }
.notif-bell:hover i { animation: none; }

.notif-badge {
    position: absolute; top: -3px; right: -3px;
    background: #ef4444; color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem; font-weight: 700; padding: 1px 4px;
    border-radius: 2px; min-width: 14px; text-align: center;
    box-shadow: none; animation: none;
}

.notif-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 320px; max-height: 400px;
    background: var(--h-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--h-border); border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: all 0.3s; z-index: 1000; overflow: hidden;
}
.notif-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }

.notif-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--h-border);
    font-weight: 600; font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase;
}
.notif-header i { color: var(--h-accent); margin-right: 6px; }
.notif-mark-all { background: none; border: none; color: var(--h-accent); cursor: pointer; padding: 4px 6px; border-radius: 2px; transition: all 0.3s; font-size: 0.8rem; }
.notif-mark-all:hover { background: var(--h-accent-dim); }

.notif-list { max-height: 280px; overflow-y: auto; }
.notif-item { display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--h-border); cursor: pointer; transition: background 0.3s; }
.notif-item:hover { background: var(--h-accent-dim); }
.notif-item.unread { background: rgba(255, 102, 51, 0.06); }

.notif-icon { width: 30px; height: 30px; border-radius: 3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; }
.notif-icon.info { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.notif-icon.homework { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.notif-icon.gift { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.notif-icon.promo { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.notif-icon.system { background: rgba(107, 114, 128, 0.15); color: #6b7280; }

.notif-content { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: 0.75rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-text { font-size: 0.68rem; color: var(--h-text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-time { font-size: 0.6rem; color: var(--h-text-dim); margin-top: 3px; letter-spacing: 0.5px; }
.notif-empty { padding: 25px 12px; text-align: center; color: var(--h-text-dim); }
.notif-empty i { font-size: 1.5rem; margin-bottom: 8px; opacity: 0.4; }
.notif-footer {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px; color: var(--h-accent); font-size: 0.7rem; font-weight: 600;
    text-decoration: none; border-top: 1px solid var(--h-border); transition: all 0.3s;
    letter-spacing: 1px; text-transform: uppercase;
}
.notif-footer:hover { background: var(--h-accent-dim); }
.notif-footer i { transition: transform 0.3s; }
.notif-footer:hover i { transform: translateX(3px); }
.notif-loading { padding: 25px; text-align: center; color: var(--h-text-dim); }

/* === MOBILE DRAWER === */
.m-drawer {
    position: fixed; top: var(--h-height, 70px); left: 0; right: 0;
    background: var(--h-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    padding: 16px; transform: translateY(-120%);
    transition: transform 0.35s; border-bottom: 1px solid var(--h-border);
    z-index: 9998; max-height: calc(100vh - var(--h-height, 70px)); overflow-y: auto;
}
.m-drawer.open { transform: translateY(0); }
.m-drawer-content { display: flex; flex-direction: column; gap: 8px; }
.m-drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.m-drawer-auth { padding: 16px 0 0; border-top: 1px solid var(--h-border); margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.m-drawer-auth .h-btn { padding: 12px 18px; font-size: 0.72rem; width: 100%; justify-content: center; }

.m-link {
    display: flex; align-items: center; padding: 12px 16px;
    color: var(--h-text-dim); text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500; font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase;
    border-radius: 3px; transition: all 0.3s;
    background: transparent; border: 1px solid transparent;
}
.m-link::before { display: none; }
.m-link:hover { color: var(--h-text); background: var(--h-accent-dim); transform: none; }
.m-link.active { color: var(--h-accent); }
body.light-mode .m-link.active { color: var(--h-accent); }

/* === BURGER === */
.h-burger {
    display: none; width: 34px; height: 34px;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    border-radius: 3px; transition: all 0.3s; background: transparent;
    border: 1px solid var(--h-border); cursor: pointer;
}
.h-burger::before { display: none; }
.h-burger:hover { border-color: var(--h-accent); }
.h-burger span { width: 18px; height: 1.5px; background: var(--h-text); border-radius: 0; transition: all 0.3s; transform-origin: center; }
.h-burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); background: var(--h-accent); }
.h-burger.active span:nth-child(2) { opacity: 0; }
.h-burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); background: var(--h-accent); }

/* === RESPONSIVE === */
@media (max-width: 1200px) {
    .h-nav { gap: 1px; }
    .h-link { padding: 6px 10px; font-size: 0.68rem; }
    .h-btn { padding: 7px 14px; font-size: 0.68rem; }
}
@media (max-width: 1024px) {
    .h-nav { display: none; }
    .h-burger { display: flex; }
}
@media (max-width: 768px) {
    .h-inner { padding: 0 16px; }
    .h-btn-desk { display: none; }
    .theme-switch-track { width: 40px; height: 22px; }
    .theme-switch-thumb { width: 16px; height: 16px; }
    body.light-mode .theme-switch-thumb { left: calc(100% - 19px); }
    .notif-bell { padding: 6px 8px; font-size: 0.85rem; }
    .notif-dropdown { width: 290px; right: -40px; }
}
@media (max-width: 480px) {
    .h-inner { padding: 0 12px; gap: 8px; }
    .h-logo-animated { font-size: 1.1rem; }
    .notif-dropdown { position: fixed; left: 10px; right: 10px; width: auto; }
}

.h-spacer { height: var(--h-height, 56px); }

/* Drawer link animations */
.m-drawer .m-link { opacity: 0; transform: translateX(-10px); }
.m-drawer.open .m-link { animation: slideLink 0.3s ease forwards; }
.m-drawer.open .m-link:nth-child(1) { animation-delay: 0.03s; }
.m-drawer.open .m-link:nth-child(2) { animation-delay: 0.06s; }
.m-drawer.open .m-link:nth-child(3) { animation-delay: 0.09s; }
.m-drawer.open .m-link:nth-child(4) { animation-delay: 0.12s; }
.m-drawer.open .m-link:nth-child(5) { animation-delay: 0.15s; }
.m-drawer.open .m-link:nth-child(6) { animation-delay: 0.18s; }
.m-drawer.open .m-link:nth-child(7) { animation-delay: 0.21s; }
@keyframes slideLink { to { opacity: 1; transform: translateX(0); } }
.m-drawer-auth { opacity: 0; transform: translateY(8px); }
.m-drawer.open .m-drawer-auth { animation: fadeAuth 0.3s ease 0.25s forwards; }
@keyframes fadeAuth { to { opacity: 1; transform: translateY(0); } }