@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background-color: rgb(15, 44, 62);
    color: #ffffff;
}

/* 首页：与签到中心相同的深蓝渐变 + 网格底（checkin-page.css 中 .checkin-page-body） */
html.page-scroll-locked,
body.page-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}

body.home-page-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 90% 55% at 50% -8%, rgba(56, 140, 210, 0.28), transparent 58%),
        radial-gradient(ellipse 60% 40% at 100% 20%, rgba(30, 90, 140, 0.18), transparent 50%),
        radial-gradient(ellipse 50% 35% at 0% 80%, rgba(20, 70, 110, 0.14), transparent 45%),
        linear-gradient(180deg, #04080e 0%, #0a1520 42%, #060d14 100%);
    color: #e8f4ff;
}

body.home-page-body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(95, 184, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 184, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 75%);
    z-index: 0;
}

body.home-page-body .site-header {
    background: rgb(15, 44, 62);
}

/* 顶栏 + 主导航随页面滚动（非 fixed）；--navbar-height 供抽屉等布局参考 */
:root {
    --navbar-top-height: 37px;
    --navbar-main-height: 4rem;
    --navbar-height: calc(var(--navbar-top-height) + var(--navbar-main-height));
    --navbar-pad-x: 2rem;
  /* 与 .navbar-start 左边距一致，顶栏英文与下方 LOGO 左缘对齐 */
    --navbar-logo-offset: calc(2.75rem + 50px);
    --home-content-max: 1400px;
    --home-content-pad-x: 40px; /* 首页内容区域左右内边距 */                
}

.site-header {
    position: relative;
    z-index: 1100;
    width: 100%;
    background: rgb(15, 44, 62);
}

.navbar-top {
    position: static;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--navbar-top-height);
    padding: 0 var(--navbar-pad-x);
    padding-left: calc(var(--navbar-pad-x) + var(--navbar-logo-offset));
    box-sizing: border-box;
    background: transparent;
    border-bottom: none;
}

.navbar-top-brand {
    font-family: 'Raleway', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    word-spacing: 0.55em;
    text-transform: uppercase;
    color: rgba(200, 220, 235, 0.72);
    line-height: 1;
    white-space: nowrap;
}

.navbar {
    position: static;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.44rem var(--navbar-pad-x);
    min-height: var(--navbar-main-height);
    box-sizing: border-box;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid rgba(95, 184, 255, 0.12);
    border-bottom: 1px solid rgba(95, 184, 255, 0.22);
}

.logo {
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo img {
    height: 40px;
    max-height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
}

.navbar-start {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    flex-shrink: 0;
    min-width: 0;
    margin-left: var(--navbar-logo-offset);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex-shrink: 0;
}

.logo a {
    display: flex;
    align-items: center;
    line-height: 0;
}

.nav-dropdown {
    position: relative;
}

/* —— 顶栏 Mega 子菜单（全宽面板，参考 RSI COMMUNITY 下拉）—— */
.site-header.is-mega-open .navbar {
    border-bottom-color: transparent;
}

.nav-mega-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1090;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgb(14, 40, 58) 0%, rgb(11, 32, 48) 100%);
    border-top: 1px solid rgba(95, 184, 255, 0.22);
    border-bottom: 1px solid rgba(95, 184, 255, 0.14);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.nav-mega-panel[hidden] {
    display: none !important;
}

.nav-mega-inner {
    margin: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    padding: 1.75rem var(--navbar-pad-x) 2rem;
    padding-left: var(--nav-mega-content-left, calc(var(--navbar-pad-x) + var(--navbar-logo-offset) + 40px + 2.25rem));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem 3rem;
}

.nav-mega-heading {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(148, 186, 212, 0.78);
}

.nav-mega-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.nav-mega-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s ease;
}

.nav-mega-link:hover {
    opacity: 0.88;
}

.nav-mega-link-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f0f8fc;
    line-height: 1.3;
    margin-bottom: 0.35rem;
}

.nav-mega-link-desc {
    display: block;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(168, 198, 218, 0.72);
    max-width: 28rem;
}

.nav-mega-link.is-current .nav-mega-link-title {
    color: #8ee0ff;
}

/* 顶栏「积分系统」：与侧栏个人信息/职务同色（#8ee0ff 系列） */
.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.35rem 0.45rem 0.35rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #8ee0ff;
    text-shadow: none;
    transition: color 0.2s ease;
}

.nav-dropdown-toggle:hover {
    color: #9ee8ff;
}

.nav-dropdown.is-open .nav-dropdown-toggle {
    color: #9ee8ff;
    background: none;
}

.nav-dropdown-caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 0.32rem solid transparent;
    border-right: 0.32rem solid transparent;
    border-top: 0.38rem solid rgba(142, 224, 255, 0.92);
    transition: transform 0.18s ease, border-top-color 0.2s ease;
}

.nav-dropdown-toggle:hover .nav-dropdown-caret,
.nav-dropdown.is-open .nav-dropdown-caret {
    border-top-color: #9ee8ff;
}

.nav-dropdown.is-open .nav-dropdown-caret {
    transform: rotate(180deg);
}

/* 旧版小下拉（已由 .nav-mega-panel 替代） */
.nav-dropdown-menu {
    display: none !important;
}

.nav-item {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-item:hover {
    color: #ffffff;
}

body.points-subpage-body {
    margin: 0;
    min-height: 100vh;
    background: rgb(15, 44, 62);
    color: #e8f4fa;
}

.points-subpage-main {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
    box-sizing: border-box;
}

.points-subpage-title {
    margin: 0 0 0.75rem;
    font-size: 1.65rem;
    font-weight: 700;
    color: #a8d8e8;
}

.points-subpage-lead {
    margin: 0;
    line-height: 1.65;
    color: rgba(232, 244, 250, 0.82);
    font-size: 0.95rem;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-left: auto;
}

/* 顶栏登录/注册：纯文字，非按钮样式 */
.nav-login-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.25rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: color 0.2s ease, opacity 0.2s ease;
    min-width: 0;
    width: auto;
    height: auto;
    box-sizing: border-box;
}

.nav-login-trigger:hover {
    color: #9fd6ff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.nav-login-trigger.is-logged-in {
    padding: 0.12rem;
}

.nav-login-trigger.is-logged-in:hover {
    text-decoration: none;
    opacity: 0.92;
}

.nav-login-guest-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

.nav-login-label {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.nav-login-guest-inner.is-hidden,
.nav-login-avatar-inner.is-hidden {
    display: none !important;
}

/* index.html <head> 若检测到本地已有 token，首屏即按已登录展示顶栏，避免先闪「登录/注册」 */
html.auth-session-cached #navLoginGuestWrap {
    display: none !important;
}

html.auth-session-cached #navLoginAvatarWrap {
    display: flex !important;
}

html.auth-session-cached #navLoginBtn {
    padding: 0.12rem;
}

.nav-login-avatar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.nav-user-avatar {
    width: 2.45rem;
    height: 2.45rem;
    max-width: 2.45rem;
    max-height: 2.45rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: block;
    flex-shrink: 0;
}

.drawer-profile-row {
    /* 资料区字号/间距在 .login-drawer-authed 内由 --dps 统一放大（默认 1） */
    --drawer-name-main: calc(1.05rem * var(--dps, 1));
    --drawer-name-main-lh: 1.22;
    --drawer-name-sub: calc(0.78rem * var(--dps, 1));
    --drawer-name-sub-lh: 1.25;
    --drawer-name-stack-gap: calc(0.08rem * var(--dps, 1));
    --drawer-avatar-1l: calc(
        var(--drawer-name-main) * var(--drawer-name-main-lh) + calc(0.04rem * var(--dps, 1))
    );
    --drawer-avatar-2l: calc(
        var(--drawer-name-main) * var(--drawer-name-main-lh) + var(--drawer-name-stack-gap) +
            var(--drawer-name-sub) * var(--drawer-name-sub-lh)
    );
    --drawer-avatar-size: var(--drawer-avatar-1l);
    --drawer-avatar-display: calc(var(--drawer-avatar-size) * 1.15);
    display: grid;
    grid-template-columns: var(--drawer-avatar-display) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: calc(0.72rem * var(--dps, 1));
    row-gap: calc(0.55rem * var(--dps, 1));
    align-items: start;
    margin-bottom: calc(1rem * var(--dps, 1));
    padding-bottom: calc(1rem * var(--dps, 1));
    border-bottom: 1px solid rgba(100, 181, 246, 0.28);
}

.drawer-profile-row:has(.drawer-profile-name-stack .drawer-rsi-handle-line:not([hidden])) {
    --drawer-avatar-size: var(--drawer-avatar-2l);
}

.drawer-user-avatar {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: var(--drawer-avatar-display);
    height: var(--drawer-avatar-display);
    max-width: 100%;
    box-sizing: border-box;
    border-radius: calc(var(--drawer-avatar-display) * 0.14);
    object-fit: cover;
    border: 2px solid rgba(100, 181, 246, 0.5);
    flex-shrink: 0;
}

.drawer-profile-name-stack {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-self: center;
    gap: var(--drawer-name-stack-gap);
}

.drawer-profile-body {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(0.32rem * var(--dps, 1));
}

.drawer-rsi-handle-line {
    margin: calc(0.08rem * var(--dps, 1)) 0 0;
    font-size: calc(0.78rem * var(--dps, 1));
    line-height: 1.25;
    color: rgba(200, 220, 235, 0.72);
    letter-spacing: 0.03em;
}

.drawer-rsi-handle-line span {
    font-weight: 500;
}

.drawer-rsi-rank-row {
    display: flex;
    align-items: center;
    gap: calc(0.45rem * var(--dps, 1));
    margin: 0;
    min-height: calc(1.5rem * var(--dps, 1));
}

.drawer-rsi-rank-icon {
    width: calc(26px * var(--dps, 1));
    height: calc(26px * var(--dps, 1));
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.drawer-rsi-rank-icon[hidden] {
    display: none !important;
}

.drawer-rsi-rank-label {
    font-size: calc(0.86rem * var(--dps, 1));
    color: rgba(230, 240, 248, 0.9);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.drawer-rsi-meta {
    margin-top: 0;
    padding-top: calc(0.5rem * var(--dps, 1));
    border-top: 1px solid rgba(95, 184, 255, 0.16);
}

.drawer-rsi-meta-row {
    display: flex;
    flex-direction: column;
    gap: calc(0.12rem * var(--dps, 1));
    margin-bottom: calc(0.45rem * var(--dps, 1));
}

.drawer-rsi-meta-row:last-child {
    margin-bottom: 0;
}

.drawer-rsi-meta-label {
    font-size: calc(0.66rem * var(--dps, 1));
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(130, 168, 192, 0.72);
}

.drawer-rsi-meta-value {
    font-size: calc(0.88rem * var(--dps, 1));
    font-weight: 500;
    color: #8ee0ff;
    text-shadow: 0 0 14px rgba(95, 184, 255, 0.28);
    line-height: 1.35;
}

.drawer-profile-name-stack > p.entry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(0.12rem * var(--dps, 1));
    margin: 0;
    font-size: var(--drawer-name-main);
    line-height: var(--drawer-name-main-lh);
    color: rgba(230, 240, 248, 0.95);
}

.drawer-profile-name-stack > p.entry > .value {
    font-size: inherit;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.drawer-profile-name-stack .drawer-rsi-handle-line {
    margin: 0;
    font-size: var(--drawer-name-sub);
    line-height: var(--drawer-name-sub-lh);
}

/* 舰队块（与上方个人信息分隔；LOGO 边长与头像 --drawer-avatar-display 一致） */
.drawer-org-fleet {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(0.35rem * var(--dps, 1));
    width: 100%;
    margin-top: calc(0.12rem * var(--dps, 1));
    padding-top: calc(0.5rem * var(--dps, 1));
    border-top: 1px solid rgba(95, 184, 255, 0.16);
}

.drawer-org-logo {
    width: var(--drawer-avatar-display);
    height: var(--drawer-avatar-display);
    max-width: 100%;
    box-sizing: border-box;
    object-fit: contain;
    border: 2px solid rgba(100, 181, 246, 0.5);
    border-radius: calc(var(--drawer-avatar-display) * 0.14);
    background: rgba(0, 0, 0, 0.35);
}

.drawer-org-name.value.data6 {
    font-size: calc(1rem * var(--dps, 1));
    font-weight: 600;
    color: #6bdcff;
    text-decoration: none;
    text-shadow: 0 0 12px rgba(95, 184, 255, 0.45);
    line-height: 1.25;
}

.drawer-org-name.value.data6:hover {
    color: #9ee8ff;
}

.drawer-org-sid-row,
.drawer-org-role-row {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(0.1rem * var(--dps, 1));
}

.drawer-org-sid-label,
.drawer-org-role-label {
    font-size: calc(0.58rem * var(--dps, 1));
    letter-spacing: 0.04em;
    color: rgba(130, 168, 192, 0.82);
}

.drawer-org-sid-num.value.data11,
.drawer-org-role-value.value.data11 {
    font-size: calc(0.95rem * var(--dps, 1));
    font-weight: 600;
    color: #8ee0ff;
}

.drawer-org-ranking.ranking.data1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(0.42rem * var(--dps, 1));
    margin-top: calc(0.06rem * var(--dps, 1));
}

.drawer-org-ranking.ranking.data1 > span.drawer-org-rank-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.drawer-org-ranking .drawer-org-rank-svg {
    width: calc(0.88rem * var(--dps, 1));
    height: calc(0.88rem * var(--dps, 1));
    display: block;
    flex-shrink: 0;
    filter: drop-shadow(0 0 calc(6px * var(--dps, 1)) rgba(95, 184, 255, 0.6));
}

.drawer-org-ranking .drawer-org-rank-svg path {
    fill: #8ee0ff;
}

@media (max-width: 480px) {
    .nav-login-trigger {
        font-size: 0.82rem;
    }

    .nav-login-label {
        font-size: 0.82rem;
    }
}

/* —— 登录抽屉：RSI 风格（深色面板、描边输入、斜切主按钮）—— */
.login-drawer.sidebar-modal {
    top: var(--navbar-height);
    height: calc(100vh - var(--navbar-height));
    height: calc(100dvh - var(--navbar-height));
    background: linear-gradient(165deg, #0c151c 0%, #101f2c 42%, #0a1218 100%);
    border-left: 1px solid rgba(95, 184, 255, 0.14);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: 1000;
}

.login-drawer .modal-content.login-drawer-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
    padding: 3rem 0 2.5rem;
    min-height: 0;
    overflow-y: auto;
    color: #e8eef3;
    transform: translateY(-100px);
}

.login-drawer-kicker {
    font-size: 0.65rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(148, 186, 212, 0.72);
    margin-bottom: 0.15rem;
}

.login-drawer .login-drawer-title.modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 1.1rem;
    color: #fff;
}

.login-drawer .login-drawer-close.modal-close {
    display: none;
}

.rsi-auth-card {
    --rsi-accent: #5fb8ff;
    --rsi-accent-dim: rgba(95, 184, 255, 0.45);
    --rsi-surface: #12202b;
    background: var(--rsi-surface);
    border-radius: 10px;
    border: 1px solid rgba(95, 184, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: 1.35rem 1.25rem 1.5rem;
}

.rsi-auth-card--profile {
    padding-top: 1.25rem;
}

.login-drawer .rsi-auth-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

.rsi-auth-head {
    margin-bottom: 1.35rem;
}

.rsi-auth-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
    margin-bottom: 0.45rem;
    line-height: 1.35;
}

.rsi-auth-sub {
    font-size: 0.88rem;
    color: rgba(200, 220, 235, 0.72);
    line-height: 1.45;
}

.rsi-auth-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: inherit;
    color: #5fb8ff;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rsi-auth-link:hover {
    color: #8ad0ff;
}

.rsi-auth-link--small {
    font-size: 0.82rem;
}

.rsi-auth-panels {
    display: block;
}

.rsi-field {
    position: relative;
    margin-bottom: 1.15rem;
}

.rsi-field label {
    position: absolute;
    left: 11px;
    top: -0.42rem;
    z-index: 1;
    padding: 0 5px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(160, 200, 225, 0.9);
    background: linear-gradient(180deg, var(--rsi-surface) 55%, var(--rsi-surface) 100%);
    pointer-events: none;
}

.rsi-input {
    width: 100%;
    display: block;
    padding: 14px 12px 11px;
    font-size: 0.95rem;
    color: #f2f6f9;
    background: rgba(8, 18, 28, 0.88);
    border: 1px solid var(--rsi-accent-dim);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.rsi-input::placeholder {
    color: rgba(255, 255, 255, 0.28);
}

.rsi-input:hover {
    border-color: rgba(95, 184, 255, 0.65);
}

.rsi-input:focus {
    border-color: var(--rsi-accent);
    box-shadow: 0 0 0 1px rgba(95, 184, 255, 0.22);
}

/* 浏览器自动填充会套默认浅色背景，用 inset 阴影盖住以贴合深色主题 */
.rsi-input:-webkit-autofill,
.rsi-input:-webkit-autofill:hover,
.rsi-input:-webkit-autofill:active {
    -webkit-text-fill-color: #f2f6f9;
    caret-color: #f2f6f9;
    transition: background-color 99999s ease-out 0s;
    border: 1px solid var(--rsi-accent-dim);
    border-radius: 6px;
    box-shadow: 0 0 0 1000px rgba(8, 18, 28, 0.88) inset;
}

.rsi-input:-webkit-autofill:focus {
    border-color: var(--rsi-accent);
    box-shadow: 0 0 0 1000px rgba(8, 18, 28, 0.88) inset, 0 0 0 1px rgba(95, 184, 255, 0.22);
}

.rsi-input:autofill,
.rsi-input:autofill:hover,
.rsi-input:autofill:focus {
    -webkit-text-fill-color: #f2f6f9;
    caret-color: #f2f6f9;
    transition: background-color 99999s ease-out 0s;
    border: 1px solid var(--rsi-accent-dim);
    border-radius: 6px;
    box-shadow: 0 0 0 1000px rgba(8, 18, 28, 0.88) inset;
}

.rsi-input:autofill:focus {
    border-color: var(--rsi-accent);
    box-shadow: 0 0 0 1000px rgba(8, 18, 28, 0.88) inset, 0 0 0 1px rgba(95, 184, 255, 0.22);
}

.rsi-field--password .rsi-input {
    padding-right: 2.75rem;
}

.rsi-pw-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    bottom: auto;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(180, 210, 235, 0.85);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.rsi-pw-toggle:hover {
    color: #5fb8ff;
    background: rgba(95, 184, 255, 0.08);
}

.rsi-pw-toggle--tap {
    animation: rsi-pw-toggle-glow 0.45s ease;
}

.rsi-pw-toggle--tap .rsi-pw-toggle-icon {
    animation: rsi-pw-eye-pop 0.42s cubic-bezier(0.34, 1.35, 0.64, 1);
}

@keyframes rsi-pw-toggle-glow {
    0% {
        background: rgba(95, 184, 255, 0.22);
        box-shadow: 0 0 0 0 rgba(95, 184, 255, 0.4);
    }
    55% {
        background: rgba(95, 184, 255, 0.12);
        box-shadow: 0 0 0 5px rgba(95, 184, 255, 0);
    }
    100% {
        background: transparent;
        box-shadow: none;
    }
}

@keyframes rsi-pw-eye-pop {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(0.78);
    }
    65% {
        transform: scale(1.14);
    }
    100% {
        transform: scale(1);
    }
}

.rsi-pw-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    line-height: 0;
    font-size: 0;
}

.rsi-pw-icon {
    display: block;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    transform: translateY(0.06em);
}

.rsi-pw-icon[hidden] {
    display: none !important;
}

.rsi-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.15rem 0 1.15rem;
    flex-wrap: wrap;
}

.rsi-form-hint {
    font-size: 0.82rem;
    line-height: 1.45;
    margin: -0.35rem 0 0.85rem;
    min-height: 1.25em;
}

.rsi-form-hint--error {
    color: #ffab91;
}

.rsi-form-hint--info {
    color: rgba(200, 220, 235, 0.82);
}

.rsi-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.86rem;
    color: rgba(230, 240, 248, 0.88);
    cursor: pointer;
    user-select: none;
}

.rsi-check input {
    width: 1rem;
    height: 1rem;
    accent-color: #5fb8ff;
    cursor: pointer;
}

/* RSI 主按钮：浅蓝底深字；宽度随文案，不占满整行 */
.rsi-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    width: auto;
    min-width: 8.75rem;
    max-width: min(100%, 14rem);
    min-height: 2.75rem;
    padding: 0.72rem 1.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-indent: 0;
    text-align: center;
    color: #0a0f14;
    background: #5fb8ff;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.rsi-submit-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.rsi-submit-btn:active {
    transform: translateY(0);
}

.rsi-submit-btn:disabled {
    opacity: 0.72;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(0.12) brightness(0.92);
}

.rsi-submit-btn--loading {
    gap: 0.5rem;
    opacity: 0.95;
}

.rsi-btn-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border: 2px solid rgba(10, 15, 20, 0.22);
    border-top-color: rgba(10, 15, 20, 0.9);
    border-radius: 50%;
    animation: rsi-btn-spin 0.7s linear infinite;
    flex-shrink: 0;
    vertical-align: middle;
}

.rsi-btn-spinner-text {
    font-weight: 700;
    letter-spacing: 0.06em;
}

@keyframes rsi-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

.rsi-submit-btn--wide {
    max-width: min(100%, 18rem);
    min-width: 10rem;
}

#loginDrawerGuest .rsi-submit-btn {
    margin-left: auto;
    margin-right: 0;
    min-width: 6.25rem;
    max-width: min(100%, 11rem);
    min-height: 2.28rem;
    padding: 0.42rem 0.95rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 5px;
}

.rsi-btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 8.75rem;
    max-width: min(100%, 14rem);
    margin-top: 0.65rem;
    margin-left: auto;
    margin-right: auto;
    min-height: 2.75rem;
    padding: 0.72rem 1.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #8ad0ff;
    background: transparent;
    border: 1px solid rgba(95, 184, 255, 0.42);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.rsi-btn-ghost:hover {
    background: rgba(95, 184, 255, 0.08);
    border-color: rgba(95, 184, 255, 0.65);
    color: #b8e4ff;
}

.login-drawer-authed {
    --dps: 1.2;
    --drawer-content-inset-x: 1.25rem;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    padding-bottom: 2.35rem;
}

.login-drawer .modal-content.login-drawer-content.login-drawer-content--authed {
    justify-content: flex-start;
    transform: none;
    padding: 2.15rem var(--drawer-content-inset-x, 1.25rem) 2.5rem;
    box-sizing: border-box;
}

.login-drawer .modal-content.login-drawer-content.login-drawer-content--authed > #loginDrawerAuthed {
    flex: 1;
    min-height: 0;
}

.login-drawer-authed .drawer-profile-row {
    border-bottom-color: rgba(95, 184, 255, 0.22);
}

.login-drawer-authed .rsi-auth-card--profile {
    flex: 1;
    min-height: 0;
}

/* 已登录抽屉：右下退出 + 设置并排（退出在左、设置在右） */
.drawer-footer-actions {
    position: absolute;
    left: var(--drawer-content-inset-x);
    right: var(--drawer-content-inset-x);
    bottom: -0.55rem;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.5rem;
}

.drawer-footer-icon-btn {
    box-sizing: border-box;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0.38rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.drawer-logout-btn,
#logoutSubmitBtn.drawer-footer-icon-btn {
    border: 1px solid rgba(95, 184, 255, 0.38);
    background: rgba(10, 20, 30, 0.72);
    color: #8ee0ff;
}

.drawer-logout-btn:hover:not(:disabled),
#logoutSubmitBtn.drawer-footer-icon-btn:hover:not(:disabled) {
    color: #b8e4ff;
    border-color: rgba(95, 184, 255, 0.65);
    background: rgba(95, 184, 255, 0.12);
}

.drawer-settings-btn {
    border: 1px solid rgba(180, 190, 200, 0.35);
    background: rgba(30, 36, 44, 0.55);
    color: rgba(200, 208, 216, 0.88);
}

.drawer-settings-btn:hover:not(:disabled) {
    color: rgba(230, 234, 240, 0.95);
    border-color: rgba(200, 210, 220, 0.5);
    background: rgba(55, 62, 72, 0.65);
}

.drawer-footer-icon-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.drawer-footer-icon {
    width: 1.215rem;
    height: 1.215rem;
    display: block;
    flex-shrink: 0;
}

/* 修改密码弹窗 */
.account-settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1105;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(4, 10, 18, 0.72);
    backdrop-filter: blur(4px);
}

.account-settings-backdrop[hidden] {
    display: none !important;
}

.account-settings-panel {
    width: min(100%, 22rem);
    padding: 1.25rem 1.2rem 1.35rem;
    border-radius: 10px;
    border: 1px solid rgba(95, 184, 255, 0.22);
    background: linear-gradient(165deg, #0c151c 0%, #101f2c 50%, #0a1218 100%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    color: #e8eef3;
}

.account-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.account-settings-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}

.account-settings-close {
    border: none;
    background: none;
    color: rgba(200, 220, 235, 0.75);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
}

.account-settings-close:hover {
    color: #b8e4ff;
}

.account-settings-hint {
    margin: 0 0 1rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(200, 220, 235, 0.72);
}

.account-settings-panel .rsi-field {
    margin-bottom: 0.85rem;
}

.account-settings-actions {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 0.65rem;
    margin-top: 1.1rem;
}

.forgot-password-panel {
    width: min(100%, 24rem);
}

.forgot-pw-code-inner {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.forgot-pw-code-inner .rsi-input {
    flex: 1;
    min-width: 0;
}

.forgot-pw-send-btn {
    flex-shrink: 0;
    align-self: stretch;
    padding: 0 0.75rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

.forgot-pw-send-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.account-settings-actions .rsi-btn-ghost,
.account-settings-actions .rsi-submit-btn {
    margin: 0;
    box-sizing: border-box;
    width: 7.5rem;
    min-width: 7.5rem;
    max-width: 7.5rem;
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-indent: 0;
    border-radius: 6px;
    line-height: 1.2;
}

.account-settings-actions .rsi-submit-btn {
    font-weight: 700;
}

/* 舰队下方：签到纯文字（非按钮块） */
.drawer-checkin-textlink {
    display: inline-block;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: calc(0.4rem * var(--dps, 1)) 0 0;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    font: inherit;
    font-size: calc(0.92rem * var(--dps, 1));
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #8ee0ff;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
    align-self: flex-start;
}

.drawer-checkin-textlink:hover:not(:disabled) {
    color: #b8e4ff;
}

a.drawer-checkin-textlink {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

a.drawer-checkin-textlink:hover {
    color: #b8e4ff;
}

.drawer-checkin-textlink:disabled {
    color: rgba(200, 220, 235, 0.55);
    text-decoration: none;
    cursor: default;
    opacity: 1;
}

.login-status-line {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.login-status-line.muted {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
}

.login-status-line.small {
    font-size: 0.8rem;
    line-height: 1.45;
}

.user-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sign-in {
    color: #ffffff;
    text-decoration: none;
}

.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    object-fit: cover;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    text-align: left;
}

.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.take-off-btn {
    background-color: #64ffda;
    color: #0a192f;
    border: none;
    padding: 1rem 2rem;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.take-off-btn:hover {
    background-color: #4cd8b2;
    transform: translateY(-2px);
}

.video-container {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.video-player {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

.video-player.active {
    opacity: 1;
}

.progress-container {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 300px;
    z-index: 2001;
}

.progress-bar {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: rgb(84, 173, 247);
    width: 0%;
    transition: width 0.3s linear;
}

.video-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 5px;
    color: white;
}

.current-video {
    display: none;
}

.next-video {
    background: none;
    border: none;
    color: rgb(84, 173, 247);
    cursor: pointer;
    padding: 0;
    font-size: 20px;
    opacity: 0.8;
    margin-top: 8px;
    font-weight: 500;
}

.ship-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 95px;
    padding: 0 var(--home-content-pad-x);
    box-sizing: border-box;
    z-index: 1000;
    display: block;
}

.ship-info-inner {
    max-width: var(--home-content-max);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
}

.ship-details {
    color: #FFFFFF;
}

.ship-hero-copy {
    margin: 0;
    max-width: min(40em, 100%);
    color: #FFFFFF;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7),
                 0 0 20px rgba(0, 0, 0, 0.5);
}

.ship-hero-name {
    display: block;
    font-weight: 700;
    font-size: clamp(18px, 2.5vw, 26px);
    letter-spacing: 0.03em;
    line-height: 1.35;
    margin: 0 0 0.2em;
}

.ship-hero-tagline {
    display: block;
    font-size: clamp(15px, 2.05vw, 21px);
    font-weight: 400;
    line-height: 1.55;
}

.ticket-btn {
    background-color: rgb(84, 173, 247);
    color: #000000;
    border: none;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: fit-content;
    margin-top: 0;
    margin-left: 0;
}

.ticket-btn:hover {
    background-color: rgb(84, 173, 247);
    transform: translateY(-2px);
}

/* --- 首页舰员交流区（论坛式） --- */
.community-section {
    position: relative;
    z-index: 2;
    padding: 72px var(--home-content-pad-x) 56px;
    font-size: 17px;
    background: linear-gradient(180deg, rgb(8, 22, 36) 0%, rgb(12, 38, 56) 45%, rgb(15, 44, 62) 100%);
    border-top: 1px solid rgba(84, 173, 247, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.community-wrap {
    max-width: var(--home-content-max);
    width: 100%;
    margin: 0 auto;
}

.community-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 28px;
}

.community-head-text {
    text-align: left;
}

.community-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04em;
    text-shadow: 0 0 24px rgba(84, 173, 247, 0.35);
}

.community-stack {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.community-panel-chat {
    margin-bottom: 4px;
    flex: 1;
    min-height: 0;
    max-height: 900px;
}

.community-chat-split {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    min-width: 0;
    max-height: 100%;
    /* 勿同时写 overflow-x: hidden + overflow-y: visible：规范会把 y 算成 auto，
       绝对定位的下拉菜单会撑出垂直滚动条（系统默认白条）。横向靠子项 min-width:0 收敛。 */
    overflow: visible;
}

.community-chat-roster {
    flex: 0 0 360px;
    width: 360px;
    min-width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(84, 173, 247, 0.15);
    background: rgba(0, 0, 0, 0.16);
    min-height: 0;
    overflow: visible;
}

.community-chat-roster-inner {
    flex: 1;
    min-height: 0;
    padding: 10px 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.community-chat-roster-inner[hidden] {
    display: none !important;
}

.community-chat-roster-guest {
    padding: 20px 12px;
    text-align: center;
    font-size: 14px;
    color: rgba(180, 210, 230, 0.75);
    line-height: 1.55;
}

.community-chat-roster-guest[hidden] {
    display: none !important;
}

.community-chat-roster-sub {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(159, 216, 255, 0.88);
    text-transform: none;
    margin: 14px 6px 8px;
}

.community-chat-roster-search {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(84, 173, 247, 0.28);
    background: rgba(10, 28, 42, 0.88);
    color: #e8f4ff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.community-chat-roster-search::placeholder {
    color: rgba(180, 210, 230, 0.45);
}

.community-chat-roster-search:focus {
    border-color: rgb(84, 173, 247);
    box-shadow: 0 0 0 2px rgba(84, 173, 247, 0.15);
}

/* 成员行用 hidden 过滤时，须压过 .community-chat-roster-item 的 display:flex */
.community-chat-roster-inner .community-chat-roster-peer[hidden] {
    display: none !important;
}

.community-chat-roster-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #dff6ff;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.community-chat-roster-item:hover {
    background: rgba(84, 173, 247, 0.1);
}

.community-chat-roster-item.is-active {
    border-color: rgba(84, 173, 247, 0.45);
    background: rgba(84, 173, 247, 0.16);
}

.community-chat-roster-fleet {
    position: relative;
    padding-right: 20px;
    font-weight: 700;
    letter-spacing: 0.06em;
    justify-content: center;
}

.community-chat-unread-badge {
    position: absolute;
    top: 9px;
    right: 11px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 0 2px rgba(12, 28, 42, 0.95);
    pointer-events: none;
}

.community-chat-unread-badge[hidden] {
    display: none !important;
}

.community-chat-unread-badge--peer {
    position: static;
    margin-left: auto;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(12, 28, 42, 0.85);
}

.community-chat-roster-peer .community-chat-roster-label {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.community-chat-roster-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(145deg, rgb(84, 173, 247), rgb(30, 77, 107));
}

.community-chat-roster-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.community-chat-roster-error {
    font-size: 13px;
    color: #ffb4b4;
    padding: 8px;
}

.community-chat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: rgba(0, 0, 0, 0.16);
}

.community-chat-main-title {
    flex-shrink: 0;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #9fd8ff;
    border-bottom: 1px solid rgba(84, 173, 247, 0.15);
    background: transparent;
}

.community-chat-main .community-chat-view {
    flex: 1;
    min-height: 0;
}

@media (max-width: 768px) {
    .community-chat-split {
        flex-direction: column;
        min-height: 0;
    }

    .community-chat-roster {
        width: 100%;
        max-height: 220px;
        border-right: none;
        border-bottom: 1px solid rgba(84, 173, 247, 0.15);
    }
}

.community-panel-forum {
    margin-top: 4px;
    box-shadow: none;
    max-height: 1200px;
    min-height: 0;
}

.community-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(84, 173, 247, 0.09);
    overflow: hidden;
}

.community-panel-head,
.community-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(84, 173, 247, 0.07);
    background: transparent;
}

.community-panel-head {
    flex-shrink: 0;
}

.community-col-head {
    flex-shrink: 0;
}

.community-panel-forum .community-panel-head {
    padding: 8px 12px;
}

.community-panel-head-chat,
.community-col-head-chat {
    flex-wrap: wrap;
}

.community-panel-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #9fd8ff;
    text-transform: uppercase;
}

.community-composer-inline {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(84, 173, 247, 0.06);
    box-shadow: none;
    background: transparent;
}

.community-dropzone {
    transition: box-shadow 0.15s ease, outline-color 0.15s ease;
}

.community-dropzone.community-dropzone--active {
    box-shadow: inset 0 0 0 2px rgba(84, 173, 247, 0.55);
    border-radius: 8px;
}

.community-scroller,
.community-chat-roster-inner,
.community-chat-mention-pop {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(84, 173, 247, 0.45) rgba(0, 0, 0, 0.25);
}

.community-scroller::-webkit-scrollbar,
.community-chat-roster-inner::-webkit-scrollbar,
.community-chat-mention-pop::-webkit-scrollbar {
    width: 8px;
}

.community-scroller::-webkit-scrollbar-thumb,
.community-chat-roster-inner::-webkit-scrollbar-thumb,
.community-chat-mention-pop::-webkit-scrollbar-thumb {
    background: rgba(84, 173, 247, 0.4);
    border-radius: 4px;
}

.community-scroller::-webkit-scrollbar-track,
.community-chat-roster-inner::-webkit-scrollbar-track,
.community-chat-mention-pop::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.community-scroller.community-scroller-chat {
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
}

.community-panel-forum .community-scroller.community-scroller-feed {
    flex: 1;
    min-height: 0;
    height: auto;
    max-height: none;
}

.community-scroller.community-scroller-feed.community-feed--has-posts {
    min-height: 0;
}

.community-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(84, 173, 247, 0.09);
    overflow: hidden;
}

.community-col-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #9fd8ff;
    text-transform: uppercase;
}

.community-composer {
    padding: 18px 18px 16px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    box-shadow: none;
}

.community-panel-forum .community-composer {
    flex-shrink: 0;
    padding: 10px 12px;
}

.community-auth-hint {
    margin: 0 0 12px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.35);
    color: #ffe6a8;
    font-size: 16px;
}

.community-panel-forum .community-auth-hint {
    margin: 0 0 8px;
    padding: 8px 12px;
    font-size: 15px;
}

.community-send-split {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
}

.community-send-split--forum {
    flex-shrink: 0;
}

.community-send-split .community-chat-send,
.community-send-split .community-post-btn--main {
    border-radius: 10px 0 0 10px;
    margin-left: 0;
}

/* 聊天 / 发帖：输入框与「发送 + 下拉」同高 */
.community-chat-compose-row .community-send-split .community-chat-send.primary-btn,
.community-post-compose-row .community-send-split .community-post-btn--main.primary-btn {
    height: 48px;
    min-height: 48px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.community-chat-compose-row .community-send-split__more,
.community-post-compose-row .community-send-split__more {
    height: 48px;
    min-height: 48px;
    align-self: center;
    box-sizing: border-box;
}

.community-send-split .primary-btn:hover:not(:disabled) {
    transform: none;
    filter: brightness(1.05);
}

.community-send-split__more {
    flex-shrink: 0;
    min-width: 44px;
    padding: 0 12px;
    border: none;
    border-radius: 0 10px 10px 0;
    background-color: rgb(84, 173, 247);
    color: #0a1c2a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(10, 28, 42, 0.25);
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.community-send-split__more:hover:not(:disabled) {
    transform: none;
    filter: brightness(1.08);
}

.community-send-split__more:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.community-send-split__caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    margin-top: 2px;
}

.community-send-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 168px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(14, 40, 62, 0.98);
    border: 1px solid rgba(84, 173, 247, 0.35);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    z-index: 80;
}

.community-send-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(200, 230, 255, 0.95);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.community-send-menu__item:hover {
    background: rgba(84, 173, 247, 0.18);
    color: #fff;
}

.community-send-menu__item .mi-svg {
    font-size: 20px;
    opacity: 0.9;
}

.mi-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    vertical-align: middle;
}

.mi-svg svg {
    width: 1em;
    height: 1em;
    display: block;
}

/* 聊天输入在面板底部：菜单向上展开，避免向下伸出触发布局/滚动异常 */
.community-chat-compose .community-send-menu {
    top: auto;
    bottom: calc(100% + 8px);
}

.community-post-btn {
    min-width: 100px;
}

.community-post-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.community-preview-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    min-height: 0;
}

.community-panel-forum .community-preview-row {
    margin-top: 8px;
}

.community-panel-forum .community-preview-row:empty {
    margin-top: 0;
}

.community-preview-tile {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(84, 173, 247, 0.12);
    background: rgba(0, 0, 0, 0.25);
}

.community-preview-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.community-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.community-preview-remove:hover {
    background: #ff6b6b;
}

.community-form-hint {
    margin: 12px 0 0;
    min-height: 1.25em;
    font-size: 15px;
    color: #ffb4b4;
}

.community-panel-forum .community-form-hint {
    margin: 6px 0 0;
}

.community-panel-forum .community-form-hint:empty {
    margin: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.community-feed {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 8px 12px;
    width: 100%;
    box-sizing: border-box;
}

.community-col-feed .community-feed {
    max-height: none;
}

.community-feed-loading,
.community-feed-error,
.community-empty {
    padding: 20px 16px;
    text-align: center;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(84, 173, 247, 0.1);
    color: rgba(200, 230, 255, 0.75);
    font-size: 17px;
}

.community-feed.community-feed--empty {
    min-height: 0;
    padding-bottom: 8px;
}

.community-feed-error {
    border-color: rgba(255, 107, 107, 0.4);
    color: #ffb4b4;
}

.community-post-card {
    padding: 14px 6px 16px;
    border-radius: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(84, 173, 247, 0.07);
    transition: background 0.2s ease;
}

.community-post-card:last-child {
    border-bottom: none;
}

.community-post-card:hover {
    background: rgba(0, 0, 0, 0.06);
    box-shadow: none;
}

.community-author-row {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    min-width: 0;
    flex: 1;
}

.community-author-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(145deg, rgb(84, 173, 247), rgb(30, 77, 107));
    box-shadow: 0 0 12px rgba(84, 173, 247, 0.25);
}

.community-author-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

a.community-author-avatar-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: inherit;
}

a.community-author-avatar-link:focus-visible {
    outline: 2px solid rgba(84, 173, 247, 0.75);
    outline-offset: 2px;
}

.community-author-id {
    font-weight: 600;
    color: #9fd8ff;
    font-size: 17px;
    word-break: break-word;
}

.community-author-time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 15px;
    color: rgba(180, 210, 230, 0.55);
    white-space: nowrap;
}

.community-post-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgb(84, 173, 247), rgb(30, 77, 107));
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(84, 173, 247, 0.35);
}

.community-post-main {
    flex: 1;
    min-width: 0;
}

.community-post-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 10px;
}

.community-post-delete,
.community-reply-delete {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 107, 107, 0.45);
    background: rgba(255, 107, 107, 0.12);
    color: #ffb4b4;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.community-post-head .community-post-delete {
    display: none;
}

.community-post-card.community-post-card--actions-open .community-post-head .community-post-delete {
    display: inline-block;
}

.community-reply-item .community-reply-delete {
    display: none;
    margin-left: auto;
}

.community-reply-item.community-reply-item--actions-open .community-reply-delete {
    display: inline-block;
}

.community-post-delete:hover,
.community-reply-delete:hover {
    background: #ff6b6b;
    color: #fff;
}

.community-post-delete:disabled,
.community-reply-delete:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.community-post-author {
    font-weight: 600;
    color: #9fd8ff;
    font-size: 17px;
}

.community-post-time {
    font-size: 15px;
    color: rgba(180, 210, 230, 0.55);
}

.community-post-body {
    color: rgba(232, 244, 255, 0.92);
    font-size: 17px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    padding-left: 50px;
}

.community-text-link {
    color: #6ec8ff;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}

.community-text-link:hover {
    color: #9fe0ff;
}

.community-post-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.community-post-img {
    max-width: min(100%, 420px);
    max-height: 360px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.22);
    border: none;
    cursor: pointer;
}

.community-replies {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(84, 173, 247, 0.06);
}

.community-replies-head {
    font-size: 15px;
    color: rgba(159, 216, 255, 0.65);
    margin-bottom: 8px;
}

.community-reply-item {
    margin-bottom: 4px;
    padding: 6px 2px 10px;
    border-radius: 0;
    background: transparent;
    border: none;
}

.community-reply-item .community-author-row {
    margin-bottom: 8px;
}

.community-reply-body {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(232, 244, 255, 0.9);
    white-space: pre-wrap;
    word-break: break-word;
    padding-left: 50px;
}

.community-reply-form {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.community-reply-input {
    flex: 1;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(84, 173, 247, 0.12);
    background: rgba(8, 20, 32, 0.35);
    color: #e8f4ff;
    font-size: 16px;
    font-family: inherit;
    line-height: 22px;
    resize: none;
    overflow-y: auto;
    outline: none;
}

.community-reply-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.community-reply-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    margin-top: 0;
}

.community-reply-btn {
    min-width: 80px;
    height: 48px;
    min-height: 48px;
    padding: 0 18px;
    font-size: 16px;
    box-sizing: border-box;
}

.community-reply-hint {
    flex: 0 0 100%;
    margin: 0;
    min-height: 1.1em;
    font-size: 15px;
    color: #ffb4b4;
}

/* 实时聊天 */
.community-col-chat {
    display: flex;
    flex-direction: column;
}

.community-chat-status {
    font-size: 14px;
    color: rgba(180, 210, 230, 0.55);
}

.community-chat-view {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overscroll-behavior: auto;
}

.community-chat-pin-bar {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px 0;
    box-sizing: border-box;
}

.community-chat-pin-bar[hidden] {
    display: none !important;
}

.community-chat-pin-bar__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(84, 173, 247, 0.28);
    background: rgba(84, 173, 247, 0.1);
    color: rgba(220, 240, 255, 0.92);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.community-chat-pin-bar__btn:hover {
    background: rgba(84, 173, 247, 0.18);
    border-color: rgba(84, 173, 247, 0.45);
}

.community-chat-pin-bar__tag {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(84, 173, 247, 0.22);
    color: #9fd8ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.community-chat-pin-bar__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-chat-pin-bar__unpin {
    flex-shrink: 0;
    align-self: center;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(180, 210, 230, 0.28);
    background: rgba(8, 20, 32, 0.5);
    color: rgba(200, 220, 235, 0.88);
    font-size: 13px;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.community-chat-pin-bar__unpin:hover {
    background: rgba(255, 107, 107, 0.12);
    border-color: rgba(255, 107, 107, 0.35);
    color: #ffb4b4;
}

.community-chat-pin-bar__unpin[hidden] {
    display: none !important;
}

.community-chat-time-divider {
    align-self: center;
    margin: 10px 0 6px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(180, 210, 230, 0.55);
    text-align: center;
    user-select: none;
}

.community-chat-line--highlight {
    animation: community-chat-line-highlight 2.2s ease;
}

@keyframes community-chat-line-highlight {
    0% {
        background: rgba(84, 173, 247, 0.22);
    }
    100% {
        background: transparent;
    }
}

.community-chat-scroll {
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.community-chat-guest-lock {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
    box-sizing: border-box;
    border-radius: inherit;
    background: rgba(4, 14, 26, 0.42);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    pointer-events: auto;
}

.community-chat-guest-lock[hidden] {
    display: none !important;
}

.community-chat-guest-lock-inner {
    max-width: 300px;
    text-align: center;
    padding: 18px 22px;
    border-radius: 12px;
    border: 1px solid rgba(84, 173, 247, 0.42);
    background: rgba(8, 26, 44, 0.62);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.32);
}

.community-chat-line--guest-preview {
    pointer-events: none;
    user-select: none;
}

.community-chat-guest-lock-title {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #dff6ff;
}

.community-chat-guest-lock-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(180, 210, 230, 0.82);
}

.community-chat-log {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 12px 14px 14px;
}

.community-chat-line {
    max-width: min(88%, 520px);
    padding: 8px 12px 10px;
    border-radius: 10px;
    background: rgba(10, 28, 42, 0.65);
    border: 1px solid rgba(84, 173, 247, 0.12);
    cursor: pointer;
}

.community-chat-line--other {
    align-self: flex-start;
}

.community-chat-line--mine {
    align-self: flex-end;
    background: rgba(18, 52, 82, 0.78);
    border-color: rgba(84, 173, 247, 0.28);
}

.community-chat-line-mine-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

.community-chat-line-mine-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.community-chat-mine-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
}

.community-chat-line .community-author-row {
    margin-bottom: 4px;
    gap: 8px 10px;
}

.community-chat-line .community-author-avatar {
    width: 32px;
    height: 32px;
}

.community-chat-line .community-author-id {
    font-size: 15px;
}

.community-chat-line .community-author-time {
    display: none;
    font-size: 13px;
    margin-left: auto;
}

.community-chat-line.community-chat-line--time-open .community-author-time {
    display: block;
}

.community-chat-line--mine .community-author-time {
    margin-left: 0;
}

.community-chat-text {
    font-size: 15px;
    line-height: 1.45;
    color: rgba(232, 244, 255, 0.92);
    white-space: pre-wrap;
    word-break: break-word;
}

.community-chat-line--other .community-chat-text {
    padding-left: 42px;
}

.community-chat-line-mine-main .community-author-avatar {
    flex-shrink: 0;
}

.community-chat-line--mine .community-chat-text {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 40px);
}

.community-chat-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.community-chat-line--other .community-chat-images {
    padding-left: 42px;
}

.community-chat-line--mine .community-chat-images {
    justify-content: flex-end;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    margin-top: 8px;
}

.community-chat-img {
    max-width: min(220px, 100%);
    max-height: 220px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(84, 173, 247, 0.25);
    background: rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.community-chat-context-menu {
    position: fixed;
    z-index: 4500;
    min-width: 132px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(84, 173, 247, 0.35);
    background: rgba(8, 22, 38, 0.97);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
}

.community-chat-context-menu[hidden] {
    display: none !important;
}

.community-chat-context-menu__item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #9fd8ff;
    font-size: 15px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.community-chat-context-menu__item:hover {
    background: rgba(84, 173, 247, 0.18);
    color: #dff6ff;
}

.community-chat-context-menu__item--danger {
    color: #ffb4b4;
}

.community-chat-context-menu__item--danger:hover {
    background: rgba(255, 107, 107, 0.18);
    color: #ffe0e0;
}

.community-chat-context-menu__item[hidden] {
    display: none !important;
}

/* 舰员交流区：撤回 / 删除确认 — 与签到中心 USS 网格主题一致 */
.community-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-sizing: border-box;
    background:
        radial-gradient(ellipse 90% 55% at 50% -8%, rgba(56, 140, 210, 0.22), transparent 58%),
        radial-gradient(ellipse 60% 40% at 100% 20%, rgba(30, 90, 140, 0.12), transparent 50%),
        rgba(2, 8, 14, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.community-confirm-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(95, 184, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 184, 255, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    z-index: 0;
}

.community-confirm-modal.is-open {
    display: flex;
}

.community-confirm-dialog {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    border-radius: 16px;
    border: 1px solid rgba(95, 184, 255, 0.28);
    background: linear-gradient(155deg, rgba(14, 42, 68, 0.95) 0%, rgba(6, 18, 32, 0.92) 100%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4) inset,
        0 0 48px rgba(56, 140, 210, 0.12),
        0 24px 56px rgba(0, 0, 0, 0.55);
    padding: 1.75rem 1.5rem 1.35rem;
    text-align: center;
    overflow: hidden;
}

.community-confirm-dialog::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(95, 184, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 184, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.65;
    z-index: 0;
}

.community-confirm-dialog > * {
    position: relative;
    z-index: 1;
}

.community-confirm-eyebrow {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: rgba(140, 210, 255, 0.75);
    text-transform: uppercase;
}

.community-confirm-msg {
    margin: 0 0 1.35rem;
    font-size: clamp(1rem, 2.8vw, 1.2rem);
    line-height: 1.55;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 0 36px rgba(95, 184, 255, 0.2);
}

.community-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.community-confirm-btn {
    min-width: 96px;
    padding: 0.55rem 1.15rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.community-confirm-btn-cancel {
    border: 1px solid rgba(95, 184, 255, 0.28);
    background: rgba(95, 184, 255, 0.08);
    color: rgba(180, 220, 255, 0.88);
}

.community-confirm-btn-cancel:hover {
    border-color: rgba(140, 210, 255, 0.5);
    background: rgba(95, 184, 255, 0.16);
    color: #fff;
}

.community-confirm-btn-ok {
    border: 1px solid rgba(95, 184, 255, 0.45);
    background: rgba(95, 184, 255, 0.22);
    color: #e8f8ff;
    box-shadow: 0 0 20px rgba(56, 140, 210, 0.2);
}

.community-confirm-btn-ok:hover {
    background: rgba(95, 184, 255, 0.42);
    border-color: rgba(140, 210, 255, 0.75);
    color: #fff;
    box-shadow: 0 0 28px rgba(56, 140, 210, 0.35);
}

.community-confirm-modal--danger .community-confirm-dialog {
    border-color: rgba(255, 120, 120, 0.28);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4) inset,
        0 0 40px rgba(200, 60, 60, 0.08),
        0 24px 56px rgba(0, 0, 0, 0.55);
}

.community-confirm-modal--danger .community-confirm-eyebrow {
    color: rgba(255, 180, 180, 0.72);
}

.community-confirm-modal--danger .community-confirm-msg {
    text-shadow: 0 0 28px rgba(255, 100, 100, 0.12);
}

.community-confirm-modal--danger .community-confirm-btn-ok {
    border-color: rgba(255, 107, 107, 0.55);
    background: rgba(255, 107, 107, 0.16);
    color: #ffd4d4;
    box-shadow: 0 0 18px rgba(200, 60, 60, 0.15);
}

.community-confirm-modal--danger .community-confirm-btn-ok:hover {
    background: #ff6b6b;
    border-color: #ff8787;
    color: #fff;
    box-shadow: 0 0 24px rgba(255, 80, 80, 0.35);
}

.community-chat-compose {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid rgba(84, 173, 247, 0.15);
    background: transparent;
}

.community-chat-compose-row,
.community-post-compose-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.community-chat-input-wrap,
.community-post-input-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
}

.community-chat-input-wrap {
    position: relative;
}

.community-chat-input-wrap .community-chat-input,
.community-post-input-wrap .community-post-textarea {
    width: 100%;
}

.community-chat-mention-pop {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 30;
    max-height: 220px;
    border-radius: 10px;
    border: 1px solid rgba(84, 173, 247, 0.35);
    background: rgba(8, 22, 38, 0.96);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    padding: 4px 0;
}

.community-chat-mention-pop__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: #c8e8ff;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.community-chat-mention-pop__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(145deg, rgb(84, 173, 247), rgb(30, 77, 107));
    box-shadow: 0 0 8px rgba(84, 173, 247, 0.25);
}

.community-chat-mention-pop__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.community-chat-mention-pop__label {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    word-break: break-word;
}

.community-chat-mention-pop__item--all .community-chat-mention-pop__label {
    color: rgba(255, 210, 160, 0.98);
}

.community-chat-mention-pop__item:hover,
.community-chat-mention-pop__item.is-active {
    background: rgba(84, 173, 247, 0.22);
    color: #fff;
}

.community-chat-mention-pop__item.is-active .community-chat-mention-pop__avatar,
.community-chat-mention-pop__item:hover .community-chat-mention-pop__avatar {
    box-shadow: 0 0 10px rgba(120, 210, 255, 0.45);
}

.community-chat-mention {
    color: #8af0ff;
    font-weight: 600;
    background: rgba(84, 173, 247, 0.18);
    border-radius: 4px;
    padding: 0 3px;
}

.community-mention-toast {
    margin: 6px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 200, 120, 0.45);
    background: rgba(60, 40, 12, 0.55);
    color: #ffe8c8;
    font-size: 14px;
    line-height: 1.45;
    max-width: 100%;
    word-break: break-word;
}

.community-chat-preview-row {
    margin-top: 2px;
}

.community-chat-preview-row:empty {
    display: none;
}

.community-chat-input,
.community-post-textarea {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    height: auto;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(84, 173, 247, 0.25);
    background: rgba(10, 28, 42, 0.85);
    color: #e8f4ff;
    font-size: 16px;
    font-family: inherit;
    line-height: 22px;
    outline: none;
    resize: none;
    overflow-y: auto;
    box-sizing: border-box;
    display: block;
    field-sizing: content;
}

.community-chat-input {
    max-height: 160px;
}

.community-post-textarea {
    margin: 0;
    max-height: 220px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.community-chat-input::placeholder,
.community-post-textarea::placeholder {
    color: rgba(180, 210, 230, 0.45);
}

.community-chat-input:focus,
.community-post-textarea:focus {
    border-color: rgb(84, 173, 247);
    box-shadow: 0 0 0 2px rgba(84, 173, 247, 0.2);
}

.community-chat-input:disabled,
.community-post-textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.community-post-textarea:disabled {
    background: rgba(8, 20, 32, 0.28);
}

.community-chat-send {
    flex-shrink: 0;
    min-width: 80px;
    font-size: 16px;
}

.community-chat-send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.community-chat-hint {
    flex-shrink: 0;
    margin: 0;
    padding: 0 14px 12px;
    min-height: 1.25em;
    font-size: 15px;
    color: #ffb4b4;
}

.community-chat-hint:empty {
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 全站交流区图片点击放大 */
.community-image-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
        max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    background: rgba(4, 12, 22, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: zoom-out;
}

.community-image-lightbox.is-open {
    display: flex;
}

.community-image-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(84, 173, 247, 0.28);
    cursor: zoom-out;
    vertical-align: middle;
}

.games-section {
    position: relative;
    z-index: 2;
    background-color: rgb(15, 44, 62);
    padding: 80px 40px;
}

.section-title {
    color: white;
    font-size: 48px;
    margin-bottom: 40px;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7),
                 0 0 20px rgba(0, 0, 0, 0.5);
    font-weight: 500;
}

.games-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.game-card {
    flex: 1;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.card-refund-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
    font-size: 14px;
}

.card-refund-btn:hover {
    background: #ff6b6b;
    color: white;
    transform: translateY(-2px);
}

.game-card:hover {
    transform: translateY(-5px);
    border-color: rgb(84, 173, 247);
    box-shadow: 0 0 15px rgba(84, 173, 247, 0.5);
}

.game-card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.game-info {
    padding: 30px;
    color: white;
}

.game-info h2 {
    font-size: 32px;
    margin-bottom: 15px;
}

.game-info p {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 25px;
    line-height: 1.5;
}

.game-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.primary-btn, .secondary-btn {
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.primary-btn {
    background-color: rgb(84, 173, 247);
    color: black;
    border: none;
    font-size: 18px;
}

.secondary-btn {
    background: transparent;
    color: white;
    border: 1px solid white;
}

.primary-btn:hover, .secondary-btn:hover {
    transform: translateY(-2px);
}

.big-buy-btn {
    font-size: 24px;
}

.game-card .age-rating {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
    z-index: 2;
}

/* 侧边弹出框（全高；顶栏随页滚动后从视口顶部展开） */
.sidebar-modal {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    height: 100dvh;
    background-color: rgb(20, 58, 82);
    z-index: 1000;
    transition: right 0.3s ease-in-out;
    padding: 20px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    border-top-left-radius: 8px;
}

.sidebar-modal.active {
    right: 0;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.modal-content {
    margin-top: 60px;
    color: #fff;
}

.modal-title {
    font-size: 24px;
    margin-bottom: 10px;
}

.modal-subtitle {
    color: #64B5F6;
    margin-bottom: 30px;
}

.form-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #64B5F6;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.sign-in-btn {
    width: 100%;
    padding: 12px;
    background: #64B5F6;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.sign-in-btn:hover {
    background: #1E88E5;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.overlay.active {
    display: block;
}

/* 账户侧栏：仅拦截点击，不压暗主页面；自顶栏下缘起，不遮挡导航头像 */
.overlay.overlay--login-only {
    top: var(--navbar-height);
    height: calc(100vh - var(--navbar-height));
    height: calc(100dvh - var(--navbar-height));
    background: transparent;
}

/* 中央提示框样式 */
.alert-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    min-width: 300px;
    text-align: center;
}

.alert-modal .message {
    color: #0066cc;
    font-size: 16px;
    margin-bottom: 15px;
}

.alert-modal .confirm-btn {
    background-color: #0066cc;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.alert-modal .confirm-btn:hover {
    background-color: #0052a3;
}

.refund-section {
    text-align: right;
    margin-top: 10px;
}

.refund-btn {
    background: transparent;
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.refund-btn:hover {
    background: #ff6b6b;
    color: white;
    transform: translateY(-2px);
}

/* 礼品区域样式 */
.gifts-section {
    padding: 60px 40px;
    background-color: rgba(0, 0, 0, 0.3);
}

.gifts-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 20px;
}

.gift-item {
    background: rgba(84, 173, 247, 0.1);
    border: 1px solid rgba(84, 173, 247, 0.3);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.gift-item:hover {
    transform: translateY(-5px);
    background: rgba(84, 173, 247, 0.2);
    border-color: rgb(84, 173, 247);
    box-shadow: 0 0 15px rgba(84, 173, 247, 0.3);
}

.gift-icon {
    font-size: 36px;
    margin-bottom: 15px;
    color: rgb(84, 173, 247);
}

.gift-icon .mi-svg {
    font-size: 36px;
    transition: all 0.3s ease;
}

.gift-icon .mi-svg svg {
    width: 36px;
    height: 36px;
}

.gift-item:hover .mi-svg {
    transform: translateY(-5px);
}

.gift-item.special .gift-icon {
    color: gold;
}

.gift-name {
    color: white;
    font-size: 16px;
    line-height: 1.4;
}

.gift-item.special {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
}

.gift-item.special:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: gold;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.event-info-section {
    background: rgba(0, 0, 0, 0.4);
    padding: 60px 40px 40px 40px;
    margin-top: 0;
}

.event-info-text {
    color: #fff;
    font-size: 20px;
    line-height: 2;
    margin-bottom: 30px;
    text-align: center;
}

.event-map {
    display: flex;
    justify-content: center;
    align-items: center;
}

.event-map iframe {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    max-width: 700px;
    width: 100%;
    min-height: 300px;
}

/* 与 .gifts-container 同宽，左右与活动礼品板块对齐 */
.event-venue-images {
    max-width: 1400px;
    margin: 24px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
}

.event-venue-images .venue-img {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    display: block;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    border: 2px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.event-venue-images .venue-img:hover {
    border-color: rgb(84, 173, 247);
    box-shadow: 0 0 15px rgba(84, 173, 247, 0.5);
    transform: translateY(-5px);
}

@media (max-width: 600px) {
  :root {
    --navbar-top-height: 37px;
    --navbar-main-height: 6rem;
    --navbar-height: calc(var(--navbar-top-height) + var(--navbar-main-height));
    --home-content-pad-x: 5px;
  }
  body {
    font-size: 15px;
  }
  :root {
    --navbar-pad-x: 1rem;
  }
  .navbar-top {
    padding: 0 var(--navbar-pad-x);
    padding-left: calc(var(--navbar-pad-x) + var(--navbar-logo-offset));
  }
  .navbar-top-brand {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    word-spacing: 0.45em;
  }
  .navbar {
    flex-direction: column;
    padding: 0.52rem 1rem;
    min-height: var(--navbar-main-height);
  }
  .nav-right {
    margin-top: 8px;
  }
  .hero {
    height: auto;
    min-height: 400px;
  }
  .video-container {
    height: 60vw;
    min-height: 220px;
    max-height: none;
    position: relative;
  }
  .video-player {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000;
    display: block;
  }
  .ship-info {
    position: static;
    margin: 20px 0 0 0;
    padding: 0 var(--home-content-pad-x);
    left: auto;
    right: auto;
    bottom: auto;
  }
  .ship-hero-copy {
    max-width: 100%;
  }
  .ship-hero-name {
    font-size: 17px;
  }
  .ship-hero-tagline {
    font-size: 15px;
  }
  .games-section {
    position: static;
    width: 100%;
    margin: 10px 0;
  }
  .games-section {
    padding: 30px 5px;
  }
  .community-section {
    padding: 40px var(--home-content-pad-x) 32px;
  }
  .section-title {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .games-container {
    flex-direction: column;
    gap: 20px;
  }
  .game-card {
    min-width: 0;
    border-radius: 8px;
  }
  .game-card img {
    height: 180px;
  }
  .game-info {
    padding: 15px;
  }
  .gifts-section {
    padding: 30px 5px;
  }
  .gifts-container {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 5px;
  }
  .event-info-section {
    padding: 30px 5px 20px 5px;
  }
  .event-info-text {
    font-size: 15px;
    margin-bottom: 15px;
  }
  .event-map iframe {
    min-height: 180px;
    max-width: 100%;
  }
  .event-venue-images {
    margin-top: 12px !important;
    padding: 0 5px;
    gap: 15px;
    grid-template-columns: 1fr;
  }
  .sidebar-modal,
  .login-drawer,
  .overlay {
    display: none !important;
  }
  .sidebar-modal.active,
  .overlay.active {
    display: block !important;
  }

  .login-drawer.active {
    display: flex !important;
    flex-direction: column;
  }

  .modal-content {
    margin-top: 30px;
    width: 100%;
    box-sizing: border-box;
  }

  .login-drawer .modal-content.login-drawer-content {
    margin-top: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 0 2rem;
    min-height: 0;
    overflow-y: auto;
    transform: translateY(-100px);
  }

  .login-drawer .modal-content.login-drawer-content.login-drawer-content--authed {
    transform: none;
    justify-content: flex-start;
    padding-top: 1.85rem;
  }
  .form-input {
    font-size: 14px;
    padding: 8px;
  }
  .sign-in-btn {
    font-size: 14px;
    padding: 10px;
  }
  .alert-modal {
    min-width: 180px;
    padding: 10px;
  }
  .alert-modal .message {
    font-size: 13px;
  }
  .alert-modal .confirm-btn {
    font-size: 13px;
    padding: 6px 12px;
  }
}