/**
 * 独立站顶栏强化：在 venue 主题 CSS 之后加载，可覆盖主题中的 !important。
 * 重点优化：全景页浅色顶栏 + 全站标题/标语层次与圆角胶囊。
 */

.standalone-header {
    position: relative;
    /* 勿 hidden：会裁切头像下拉菜单（vs-user-menu__panel） */
    overflow: visible;
    z-index: 200;
}

/* 顶边彩色细条 */
.standalone-header::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7, #ec4899);
    z-index: 0;
    pointer-events: none;
}

.standalone-header-mainrow {
    position: relative;
    z-index: 1;
    align-items: center;
}

/* 标语 + 微信分享（全景页） */
.standalone-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
}

.standalone-wechat-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.32);
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.standalone-wechat-share-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(225, 29, 72, 0.42);
}

.standalone-wechat-share-btn:active {
    transform: translateY(0);
}

.standalone-wechat-share-btn__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* 标题：略收紧字距、层次 */
.standalone-header-title,
.standalone-header h1.standalone-header-title {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.18 !important;
}

/* 顶栏统一：左（名称 + 说明），右（登录 / 打卡 / 分享） */
.standalone-header-brand {
    display: flex;
    align-items: center;
    gap: 14px 18px;
    flex: 1 1 auto;
    min-width: 0;
}

.standalone-header-brand .standalone-header-title {
    flex: none !important;
    width: 100%;
    margin: 0 !important;
}

.standalone-header-text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.standalone-header-title .standalone-header-closed-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    background: #e74c3c;
    color: #fff !important;
    padding: 4px 10px;
    border-radius: 8px;
    vertical-align: middle;
    margin-left: 8px;
    letter-spacing: 0;
    white-space: nowrap;
}

/* 战队首页同款：标题下的灰色说明行（非胶囊） */
.standalone-header-subtitle {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: #64748b !important;
    max-width: min(560px, 100%);
    align-self: flex-start;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.standalone-header-subtitle::before {
    display: none !important;
    content: none !important;
}

.standalone-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.standalone-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.25;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.standalone-header-btn--ghost {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.48);
    color: #fff !important;
}

.standalone-header-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: translateY(-1px);
}

.standalone-header-btn--solid {
    background: #fff;
    color: #4f46e5 !important;
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
}

.standalone-header-btn--solid:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
}

.standalone-header-btn--outline {
    background: #fff !important;
    border: 1px solid #0d9488 !important;
    color: #0f766e !important;
    box-shadow: none !important;
}

.standalone-header-btn--outline:hover {
    background: rgba(13, 148, 136, 0.07) !important;
    transform: translateY(-1px);
}

/* 场馆独立站（非全景）：对齐战队 standalone 白底顶栏 */
body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header {
    background: #ffffff !important;
    color: #1e293b !important;
}

body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header::before {
    display: none !important;
}

body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header-title,
body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header h1.standalone-header-title {
    color: #1e293b !important;
    font-size: clamp(20px, 2.8vw, 26px) !important;
    font-weight: 700 !important;
}

body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header-subtitle {
    color: #64748b !important;
}

body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header-btn--ghost {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
}

body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header-btn--ghost:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
}

body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header-btn--outline {
    background: #ffffff !important;
    border: 1px solid #0d9488 !important;
    color: #0f766e !important;
}

body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header-btn--solid {
    background: linear-gradient(135deg, #0d9488, #0f766e) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.28) !important;
}

body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header-btn--solid:hover {
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.36) !important;
}

body.standalone-body--panorama .standalone-header-btn--ghost {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(99, 102, 241, 0.35);
    color: #334155 !important;
}

body.standalone-body--panorama .standalone-header-btn--ghost:hover {
    background: #fff;
    border-color: rgba(99, 102, 241, 0.5);
}

body.standalone-body--panorama .standalone-header-btn--solid {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(99, 102, 241, 0.35);
}

body.standalone-body--panorama .standalone-header-btn--solid:hover {
    box-shadow: 0 10px 26px rgba(99, 102, 241, 0.42);
}

body.standalone-body--panorama .standalone-header-btn--outline {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(13, 148, 136, 0.42) !important;
    color: #0f766e !important;
}

body.standalone-body--panorama .standalone-header-btn--outline:hover {
    background: #ffffff !important;
    border-color: #0d9488 !important;
}

/* 标语：圆角胶囊 + 与 currentColor 联动的描边/底（紫底白字 / 白底黑字均可用） */
.standalone-header-tagline {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    max-width: min(460px, 48vw) !important;
    padding: 9px 16px 9px 14px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    text-align: left !important;
    border-radius: 999px !important;
    opacity: 1 !important;
    box-sizing: border-box;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 8px 22px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    background: rgba(148, 163, 184, 0.14) !important;
    color: inherit !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@supports (background: color-mix(in srgb, currentColor 14%, transparent)) {
    .standalone-header-tagline {
        border: 1px solid color-mix(in srgb, currentColor 32%, transparent) !important;
        background: color-mix(in srgb, currentColor 14%, transparent) !important;
    }
}

.standalone-header-tagline::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* ---------- 全景页：浅色顶栏 + 深色标题，与下方白底内容衔接 ---------- */
body.standalone-body--panorama .standalone-header {
    background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 72%) !important;
    color: #0f172a !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.07) !important;
    padding: 14px 20px 16px !important;
}

body.standalone-body--panorama .standalone-header-title,
body.standalone-body--panorama .standalone-header h1.standalone-header-title {
    color: #0f172a !important;
    font-size: clamp(21px, 3.2vw, 30px) !important;
}

body.standalone-body--panorama .standalone-header-subtitle {
    color: #64748b !important;
}

@media (max-width: 640px) {
    .standalone-header-tagline {
        max-width: 100% !important;
        align-self: stretch;
        justify-content: flex-start;
    }

    .standalone-header-subtitle {
        max-width: 100% !important;
    }

    body.standalone-body--panorama .standalone-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .standalone-header-mainrow {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .standalone-header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .standalone-header-btn {
        flex: 1 1 auto;
        min-width: calc(50% - 6px);
        justify-content: center;
    }

    .standalone-wechat-share-btn {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        min-width: 44px;
    }

    /* 场馆顶栏：安全区 + 标题在极窄屏不溢出 */
    body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header {
        padding-top: max(14px, env(safe-area-inset-top)) !important;
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
        padding-bottom: 16px !important;
    }

    body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header-title,
    body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header h1.standalone-header-title {
        font-size: clamp(17px, 5.2vw, 24px) !important;
        line-height: 1.2 !important;
        word-break: break-word;
    }

    body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header-subtitle {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* 顶栏头像略放大，便于点击 */
    body.standalone-body--venue:not(.standalone-body--panorama) .vs-user-menu__toggle {
        width: 48px;
        height: 48px;
    }

    body.standalone-body--venue:not(.standalone-body--panorama) .vs-user-menu__avatar-ph {
        font-size: 17px;
    }
}

/* 场馆：头像占左列，其余按钮两列网格（需 :has） */
@supports (selector(:has(*))) {
    @media (max-width: 640px) {
        body.standalone-body--venue:not(.standalone-body--panorama)
            .standalone-header-actions:has(.vs-user-menu) {
            display: grid;
            grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
            gap: 10px;
            align-items: stretch;
            width: 100%;
        }

        body.standalone-body--venue:not(.standalone-body--panorama)
            .standalone-header-actions:has(.vs-user-menu)
            > .vs-user-menu {
            grid-column: 1;
            grid-row: 1 / span 2;
            align-self: center;
            justify-self: center;
        }

        body.standalone-body--venue:not(.standalone-body--panorama)
            .standalone-header-actions:has(.vs-user-menu)
            > *:not(.vs-user-menu) {
            min-height: 44px;
            min-width: 0 !important;
            width: 100%;
            flex: unset !important;
            box-sizing: border-box;
            justify-content: center;
        }
    }
}

/* ========== 主导航条：覆盖极简主题等，统一更柔和的「顶栏+导航」带 ========== */
.standalone-header {
    border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 6px 26px rgba(15, 23, 42, 0.07) !important;
    padding: 16px 20px 18px !important;
}

body.standalone-body--venue:not(.standalone-body--panorama) .standalone-header {
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}

body:not(.standalone-body--panorama):not(.standalone-body--venue) .standalone-header {
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.1) !important;
}

.standalone-nav {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    /* 低于顶栏 stacking，避免盖住顶栏内下拉 */
    z-index: 100 !important;
}

.standalone-nav ul {
    gap: 4px !important;
    padding: 8px 14px 0 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    scrollbar-color: #cbd5e1 transparent;
}

.standalone-nav li {
    margin: 0 !important;
}

.standalone-nav a {
    padding: 11px 14px 13px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: #475569 !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 10px 10px 0 0 !important;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease !important;
}

.standalone-nav a:hover {
    color: #4338ca !important;
    background: rgba(99, 102, 241, 0.09) !important;
    border-bottom-color: transparent !important;
}

.standalone-nav a.active {
    color: #4f46e5 !important;
    font-weight: 700 !important;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.14) 0%, rgba(255, 255, 255, 0) 72%) !important;
    border-bottom-color: #6366f1 !important;
    box-shadow: inset 0 -3px 0 rgba(99, 102, 241, 0.95) !important;
}

.standalone-mobile-toggle {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    color: #334155 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    .standalone-nav a {
        padding: 10px 12px 12px !important;
        font-size: 13px !important;
    }

    .standalone-nav ul {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 折叠展开列表：左侧色条 + 圆角，与桌面底边高亮区分 */
    .standalone-nav ul.mobile-open a {
        border-radius: 10px !important;
        border-left: 4px solid transparent !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin: 2px 8px !important;
    }

    .standalone-nav ul.mobile-open a:hover {
        background: rgba(99, 102, 241, 0.08) !important;
        border-left-color: transparent !important;
    }

    .standalone-nav ul.mobile-open a.active {
        border-left-color: #6366f1 !important;
        border-bottom-color: transparent !important;
        background: rgba(99, 102, 241, 0.1) !important;
        box-shadow: none !important;
    }
}