/* MoatDeep 统一顶栏 + 用户菜单（所有已登录页共享，唯一源） 各页面 引入本文件，header 用 .md-header 等类即可。 */ .md-header { display: flex; align-items: center; gap: 14px; padding: 12px max(22px, calc((100% - 1080px) / 2)); background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 60%, #5b21b6 100%); color: #fff; flex: 0 0 auto; box-shadow: 0 2px 10px rgba(109,40,217,.18); } .md-brand { display: flex; align-items: baseline; gap: 9px; color: #fff; text-decoration: none; flex: 1 1 0; min-width: 0; } .md-brand h1 { font-size: 16px; margin: 0; letter-spacing: .5px; font-weight: bold; } .md-brand .sub { color: #e9d5ff; font-size: 11px; } .md-nav { display: flex; gap: 3px; align-items: center; flex: 0 0 auto; } .md-nav a { color: #fff; text-decoration: none; border-radius: 6px; padding: 6px 13px; font-weight: bold; opacity: .85; font-size: 13px; white-space: nowrap; } .md-nav a:hover { background: rgba(255,255,255,.14); opacity: 1; } .md-nav a.active { background: rgba(255,255,255,.22); opacity: 1; } .md-right { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; } .md-count { color: #e9d5ff; font-size: 12px; white-space: nowrap; } .md-btn { border: 1px solid #fff; background: transparent; color: #fff; border-radius: 5px; padding: 5px 12px; cursor: pointer; font-weight: bold; font-size: 13px; text-decoration: none; white-space: nowrap; } .md-btn:hover { background: rgba(255,255,255,.14); } .md-btn.active { background: #fff; color: #6d28d9; } .md-user { position: relative; flex: 0 0 auto; } .md-avatar { background: transparent; border: 1px solid #fff; color: #fff; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-weight: bold; font-size: 13px; padding: 0; } .md-avatar:hover { background: rgba(255,255,255,.14); } .md-dropdown { display: none; position: absolute; right: 0; top: 120%; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.16); min-width: 120px; z-index: 50; overflow: hidden; } .md-dropdown.show { display: block; } .md-dropdown a { display: block; color: #1f2937; padding: 9px 14px; font-weight: normal; font-size: 13px; text-decoration: none; } .md-dropdown a:hover { background: #f5f3ff; } @media (max-width: 640px) { .md-header { flex-wrap: wrap; gap: 8px; padding: 10px 14px; } .md-nav { order: 3; width: 100%; overflow-x: auto; } }