:root { --header-bg:#0284c7; --header-color:#ffffff; --site-font: Inter, sans-serif; }
    body { font-family: var(--site-font); margin: 0; background: #f8fafc; color: #0f172a; }
    .compact-header { background: var(--header-bg); color: var(--header-color); position: sticky; top: 0; z-index: 1000; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1); }
    .header-inner { max-width: 1280px; margin: 0 auto; padding: 0.45rem 0.8rem; display: flex; flex-direction: column; gap: 5px; }
    .header-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
    .header-left-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .btn-burger-left { background: rgba(255, 255, 255, 0.2); color: var(--header-color); border: none; padding: 0.4rem 0.7rem; border-radius: 18px; font-size: 0.82rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
    .logo-link { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--header-color) !important; font-size: 1.15rem; font-weight: 900; letter-spacing: -0.5px; white-space: nowrap; }
    .site-header-logo-img { max-height: 30px; max-width: 150px; object-fit: contain; }
    .header-search-desktop { flex: 1; max-width: 460px; display: none; }
    .header-search-mobile { width: 100%; display: block; }
    .header-search-input { width: 100%; background: #ffffff !important; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 18px !important; padding: 0.45rem 0.9rem !important; font-size: 0.82rem; color: #0f172a !important; outline: none; box-sizing: border-box; }
    .header-actions-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .header-btn-pill { background: rgba(255, 255, 255, 0.2); color: var(--header-color) !important; text-decoration: none; padding: 0.4rem 0.7rem; border-radius: 18px; font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; transition: 0.2s; }
    .header-btn-pill:hover { background: rgba(255, 255, 255, 0.32); }
    .lang-switcher-box { display: inline-flex; background: rgba(0,0,0,0.15); padding: 2px; border-radius: 14px; font-size: 0.75rem; font-weight: 800; }
    .lang-btn { padding: 2px 7px; border-radius: 12px; text-decoration: none; color: var(--header-color); transition: 0.2s; }
    .lang-btn.active { background: #ffffff; color: #0284c7; }
    .badge-dot { background: #ef4444; color: #fff; font-size: 0.65rem; font-weight: 800; padding: 1px 5px; border-radius: 10px; }

    @media (min-width: 768px) {
        .header-inner { flex-direction: row; align-items: center; justify-content: space-between; padding: 0.55rem 1rem; }
        .header-top-row { width: auto; }
        .header-search-desktop { display: block; margin: 0 12px; }
        .header-search-mobile { display: none; }
    }

    .drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); z-index: 99999; display: none; opacity: 0; transition: opacity 0.3s; }
    .drawer-panel-left { position: fixed; top: 0; left: -310px; width: 285px; height: 100%; background: #ffffff; z-index: 100000; box-shadow: 4px 0 25px rgba(0,0,0,0.15); display: flex; flex-direction: column; transition: left 0.3s ease; font-family: var(--site-font); }
    .drawer-header { background: var(--header-bg); color: var(--header-color); padding: 0.9rem 1rem; display: flex; justify-content: space-between; align-items: center; }
    .drawer-body { padding: 0.6rem 0.7rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }
    .drawer-item { display: flex; align-items: center; gap: 8px; padding: 0.42rem 0.65rem; color: #334155 !important; text-decoration: none; font-size: 0.82rem; font-weight: 600; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; transition: 0.15s; }
    .drawer-item:hover { background: #e0f2fe; border-color: #0284c7; color: #0284c7 !important; transform: translateX(3px); }
    .drawer-icon-box { width: 25px; height: 25px; border-radius: 6px; background: #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; }
    .drawer-divider-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; color: #94a3b8; padding: 6px 4px 2px 4px; }