♻️ refactor: HeaderBar into modular, maintainable components & polish responsive UI

Summary
• Extracted `LogoSection`, `NavLinks`, `UserArea`, and `ActionButtons` from `HeaderBar.js`, reducing complexity and improving readability.
• Removed unused state, handlers, and redundant imports from `HeaderBar.js`.
• Simplified mobile/desktop logic:
  – Menu icon now shows only on mobile `/console` routes.
  – Logo, system name, and mode tags appear on all desktop screens and on mobile non-console pages.
• Reworked skeleton loaders:
  – Narrower width on mobile (`40 px`) and clearer spacing (`p-1`).
• Added global `.scrollbar-hide` utility in `index.css` to enable scrollable areas without visible scrollbars.
• Ensured nav bar is horizontally scrollable across all breakpoints.
• Cleaned up language-switch, New Year, and notice handlers; consolidated side effects.
• Updated imports and internal calls after component extraction.
• Passed required props to new sub-components and removed obsolete ones.
• Confirmed zero linter warnings after refactor.

Why
Breaking the monolithic header into focused components makes future updates simpler, facilitates isolation testing, and aligns with the existing component architecture under `components/`. The UI tweaks provide a better mobile experience and consistent styling across devices.

Notes
No backend changes required. All routes and contexts remain untouched.

web/src/components/topup/RechargeCard.jsx

@@ -236,17 +236,14 @@ const RechargeCard = ({
                     </div>
                   </div>
                 )}
-
               </div>
             ) : (
-              <div className='py-8'>
-                <Banner
-                  type='warning'
-                  description={t('管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。')}
-                  className='!rounded-xl'
-                  closeIcon={null}
-                />
-              </div>
+              <Banner
+                type='warning'
+                description={t('管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。')}
+                className='!rounded-xl'
+                closeIcon={null}
+              />
             )}
           </div>
         </TabPane>