/**
 * 全局悬浮条样式
 * 提供PiGrav系统全局导航的样式定义
 */

/* 变量定义 */
:root {
    /* 主题颜色 */
    /* --sidebar-bg-color: rgba(20, 20, 20, 0.98); */ /* 上次的背景色 */
    --sidebar-bg-color: #333; /* 修改：改为与翻牌器牌面一致的灰色 */
    --sidebar-text-color: #ffffff;
    --sidebar-highlight-color: #1e90ff;
    --sidebar-hover-color: rgba(74, 85, 104, 0.95);
    --sidebar-border-color: rgba(74, 85, 104, 0.5);
    
    /* 尺寸 */
    --sidebar-width: 60px; /* 侧边栏固有宽度 */
    --sidebar-expanded-width: 0px; /* 这个变量现在不再直接用于容器宽度，但可能被其他地方引用，暂时保留 */
    --sidebar-item-height: 60px; /* 单个项目高度 */
    --sidebar-icon-size: 32px; /* 图标尺寸 */
    --sidebar-item-padding-v: 5px; /* 项目垂直内边距 (用于贴底) */
    --sidebar-border-radius: 8px; /* 修改圆角为16px */
    
    /* 字体 */
    --sidebar-font-size: 14px;
    --sidebar-letter-font-size: 24px; /* 修改：之前直接写死，现在用变量 */
    --sidebar-letter-size: 22px;
    --sidebar-desc-size: 12px;
  
    
    /* 动画 */
    --sidebar-transition: 0.3s ease;
}

/* 容器样式 */
.floating-sidebar-container {
    /* 恢复粘性定位 */
    position: sticky;
    /* 设置粘性定位的 top 值，使其在滚动时固定在初始垂直位置附近 */
    top: 23.5px; /* 与 standard_dimension_layout.css 中的 margin-top 匹配 */
    width: var(--sidebar-width); /* 新增：明确设置固有宽度 */
    flex-shrink: 0; /* 新增：明确设置不收缩 */
    /* 新增：限制最大高度为视口高度 */
    /* max-height: 100vh; */ /* <<< 移除：移除最大高度限制 */
    /* 让容器自然填充其父元素的高度 (如果父元素有高度限制) */
    /* overflow-y: auto; */ /* 移除: 让内容自然溢出，或在内部元素上处理滚动 */
    /* 修改：显式设置 overflow-y 为 auto */
    /* overflow-y: auto; */ /* <<< 移除：解决容器限制和水平滚动条问题 */
    /* overflow-x: hidden; */ /* <--- 移除：防止内部元素导致横向滚动条 (修复遮挡问题) */
    /* margin-top: 23.5px; */ /* 移除：顶部外边距由使用布局控制 */
    z-index: 9999;
    /* background-color: var(--sidebar-bg-color, #333); */ /* 修改前 */
    background-color: transparent; /* 修改：设置为透明，避免背景色溢出 */
    border-radius: var(--sidebar-border-radius, 8px); /* 使用您确认的8px作为回退 */
    /* overflow: hidden; */ /* 移除：这可能导致外部的弹出元素被裁剪 */
    
    display: flex;
    flex-direction: column;
    align-items: stretch; /* <<< 新增：显式设置 align-items 为 stretch */
    font-family: sans-serif;
    
    /* 新增：为悬浮状态添加过渡效果，但移除top和transform避免跳跃 */
    transition: position 0.3s ease, left 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 新增：多屏模式下的悬浮条悬浮样式 - 让悬浮条跟随滚动 */
html.multi-screen-mode .floating-sidebar-container {
    position: fixed !important; /* 固定定位，真正悬浮 */
    top: 51% !important; /* 修改：使用视口高度的50%实现垂直居中，与第二屏内容对齐 */
    left: 20px !important; /* 悬浮在左侧 */
    transform: translateY(-50%) !important; /* 修改：向上偏移自身高度的50%，实现精确居中 */
    z-index: 10000 !important; /* 确保在所有内容之上 */
    margin: 0 !important; /* 移除所有边距 */
    
    /* 悬浮状态的视觉增强 */
    background-color: rgba(51, 51, 51, 0.95) !important; /* 半透明背景，确保内容可见 */
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 
                0 0 10px rgba(255, 255, 255, 0.1) !important; */ /* 删除：移除多屏模式容器阴影 */
    backdrop-filter: blur(5px); /* 添加背景模糊效果 */
    
    /* 注意：此样式在多屏模式激活后一直有效，包括滚动到第三屏时 */
}

/* 新增：为底部区域添加上外边距，增大与上方内容的间距 */
.sidebar-bottom {
    margin-top: 32px; 
}

/* 隐藏空的 Brand */
.sidebar-brand:empty {
    display: none;
}

/* 新增：为顶部内容添加内边距，使 PIGRAV 字母整体下移 */
.sidebar-top {
    padding-top: 75px; 
}

/* 悬浮条主样式 */
.floating-sidebar {
    color: var(--sidebar-text-color, #ffffff);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
    height: 100%;
    background-color: var(--sidebar-bg-color, #333); /* <--- 添加这行 */
    border-radius: var(--sidebar-border-radius); /* 新增：应用圆角变量 */
    /* 确保辉光效果可以正确应用 */
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, border 0.3s ease-in-out;
}

/* 新增：隐藏可能在错误位置的列表 */
/*.floating-sidebar > .sidebar-items {
    /* display: none; */ /* <--- Removed this line */


/* 悬浮条项目列表 */
.sidebar-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* 修改：为第二个列表添加上外边距，替代之前的spacer*/
.sidebar-top > .sidebar-items:nth-of-type(2) {
    margin-top: calc(var(--sidebar-item-height) / 2); /* 恢复：使用变量计算间距 */
}

.sidebar-top > .sidebar-items:nth-of-type(n+3) { 
    display: none; /* 隐藏第三个及以后的列表 */
}
.sidebar-top > .sidebar-filters,
.sidebar-top > .sidebar-brand {
    display: none; /* 再次确认隐藏 brand 和 filters */
}

/* 悬浮条项目 */
.sidebar-item {
    height: var(--sidebar-item-height); 
    display: flex;
    align-items: flex-end; /* 修改：明确设置为底部对齐 */
    padding-bottom: var(--sidebar-item-padding-v); /* 修改：使用变量控制底部内边距 */
    justify-content: center; 
    cursor: pointer;
    transition: background-color var(--sidebar-transition);
    position: relative; /* 修改：确保 position 为 relative，作为绝对定位子元素的基准 */
    /* border-bottom: 1px solid var(--sidebar-border-color); */ /* <<< 移除：不再给所有项目添加边框 */
}

/* 最后一个项目取消底部边框 */
/* <<< 移除：不再需要移除最后一个项目的边框 */
/*
.sidebar-item:last-child {
    border-bottom: none;
}
*/

/* 新增：只在 I 和 V 项目下方添加横线 */
.sidebar-item.i,
.sidebar-item.v {
    border-bottom: 1px solid var(--sidebar-border-color);
}

/* 项目悬停效果 */
.sidebar-item:hover {
    background-color: var(--sidebar-hover-color);
}

/* 项目文本容器 - 修改为标签样式 */
.sidebar-text {
    /* position: fixed; */ /* 修改：改为 absolute 定位，相对于 .sidebar-item */
    position: absolute;
    left: calc(100% + 8px); /* # 新增：恢复定位到项目右侧，留8px间距 */
    top: 50%;             /* # 新增：恢复垂直居中对齐 */
    transform: translateY(-50%); /* # 新增：恢复垂直居中对齐 */
    /* bottom: calc(100% + 5px); */ /* # 移除：不再放上方 */
    /* left: 50%; */                 /* # 移除：不再放上方 */
    /* transform: translateX(-50%); */ /* # 移除：不再放上方 */
    background-color: var(--sidebar-hover-color); /* 添加背景色 */
    padding: 8px 12px;        /* 添加内边距 */
    border-radius: 4px;       /* 添加圆角 */
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); /* 添加阴影 */
    /* z-index: 10; */              /* 确保在顶层 (低于 VIP popup) */
    z-index: 10000;             /* 修改：提高 z-index */
    display: flex; /* 保留 flex 以便内部对齐 */
    flex-direction: column; /* 保留列方向 */
    opacity: 0;
    /* max-width: 180px; */           /* 保留最大宽度 */
    max-width: 0;               /* 修改：初始最大宽度为0，配合 transition */
    overflow: hidden;         /* 保留内部溢出隐藏 */
    /* white-space: normal; */      /* 允许文字换行 */
    white-space: normal;        /* 修改：允许文字换行，让R按钮可以正常显示两行文字 */
    text-align: left;         /* 修改：恢复左对齐 */
    /* transition: opacity 0.2s ease-in-out, visibility 0.2s; */ 
    transition: opacity 0.2s ease-in-out, max-width 0.2s ease-in-out, visibility 0.2s; /* 修改：添加 max-width 和 visibility 过渡 */
    pointer-events: none;     
    visibility: hidden;       
}

/* 新增：项目悬停时显示文本标签 */
.sidebar-item:hover .sidebar-text {
    opacity: 1;
    /* pointer-events: auto; */     
    max-width: 150px;         /* 修改：设置悬停时的最大宽度 */
    pointer-events: auto;     /* 修改：允许标签响应事件 */
    visibility: visible;      
}

/* 标签样式 */
.sidebar-label {
    font-size: var(--sidebar-font-size, 14px);
    opacity: 1;
    max-width: none; /* 移除宽度限制，让标签宽度自适应 */
    overflow: visible;
    white-space: normal; /* 允许文字正常换行 */
    display: block; /* 确保标签内文本换行 */
    line-height: 1.3;
    word-break: keep-all; /* 防止中文字符被意外拆分 */
}

/* 描述样式 */
.sidebar-desc {
    font-size: var(--sidebar-desc-size, 12px);
    opacity: 0.8;
    margin-top: 2px;
    display: block; /* 确保标签内文本换行 */
    line-height: 1.3;
}

/* 当前彩种指示器样式 (在标签内) */
.current-lottery {
    font-size: 11px;
    font-style: italic;
    opacity: 0.7;
    margin-top: 4px;
    display: block;
}

/* 项目图标 */
.sidebar-icon {
    width: var(--sidebar-icon-size); /* 修改：使用变量 */
    height: var(--sidebar-icon-size); /* 修改：使用变量 */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center; /* 保持 center，让伪元素占满 */
    margin: 0; 
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* 默认图标样式（如果没有背景图） */
.sidebar-icon:not([class*="icon"]) {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* 各个功能的图标样式 - 图标已移除，使用字母代替 */
/*
.picker-icon {
    background-image: url('/common/floating_sidebar/static/icons/picker-icon.svg');
}

.incentive-icon {
    background-image: url('/common/floating_sidebar/static/icons/incentive-icon.svg');
}

.notebook-icon {
    background-image: url('/common/floating_sidebar/static/icons/notebook-icon.svg');
}

.relation-icon {
    background-image: url('/common/floating_sidebar/static/icons/relation-icon.svg');
}

.arena-icon {
    background-image: url('/common/floating_sidebar/static/icons/arena-icon.svg');
}

.vip-icon {
    background-image: url('/common/floating_sidebar/static/icons/vip-icon.svg');
}
*/

/* 图标回退方案 - 使用字母替代图标 */
.sidebar-item .sidebar-icon::before {
    content: attr(data-letter); /* 使用 data-letter 属性显示字母 */
    font-size: var(--sidebar-letter-font-size, 24px); /* 修改：使用变量 */
    font-weight: bold;
    color: var(--sidebar-text-color, #ffffff);
    position: absolute; /* 绝对定位以覆盖图标区域 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 新增：明确让文字在伪元素内部贴底 */
    text-transform: uppercase; /* 字母大写 */
    /* --- 新增：添加 inset 阴影模拟 3D 效果 --- */
    background-color: rgba(255, 255, 255, 0.1); /* 添加背景色以显示阴影 */
    border-radius: 4px; /* 添加圆角 */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 -1px 1px rgba(255, 255, 255, 0.1);
    /* --- 结束新增 --- */
}

/* 特殊处理 G 和 V 字母的呼吸灯效果 */
.sidebar-item.g .sidebar-icon::before,
.sidebar-item.p.active .sidebar-icon::before, /* 新增对 P 的处理 */
.sidebar-item.v.active .sidebar-icon::before { /* <-- 新增：仅当 v 同时有 active 类时才应用动画 */
/* --- 结束修改 --- */
    animation: breathing-glow 2s infinite ease-in-out;
    color: var(--sidebar-highlight-color); /* 高亮颜色 */
}

/* R 字母默认样式 - 默认白色（与A按钮一致），等待权限检查 */
.sidebar-item.r .sidebar-icon::before {
    color: var(--sidebar-text-color); /* 默认白色 */
    animation: none; /* 默认无动画 */
}

/* R 字母管理员状态 - 显示紫色呼吸灯（代表镜像功能）*/
.sidebar-item.r.admin-enabled .sidebar-icon::before {
    animation: breathing-glow-purple 2s infinite ease-in-out;
    color: #9370db; /* 紫色高亮 */
}

/* R 字母禁用状态 - 保持默认样式，禁止点击 */
.sidebar-item.r.disabled {
    cursor: not-allowed !important;
    pointer-events: auto; /* 允许点击事件以显示禁用提示 */
}

.sidebar-item.r.disabled:hover {
    background: transparent !important;
    transform: none !important;
}

/* 新增：如果 G 或 V 没有 active 状态，则停止动画 */
.sidebar-item.g:not(.active) .sidebar-icon::before,
.sidebar-item.p:not(.active) .sidebar-icon::before, /* 新增对 P 的处理 */
.sidebar-item.v:not(.active) .sidebar-icon::before { /* 新增：应用到 V */
    animation: none;
    color: var(--sidebar-text-color); /* 恢复默认颜色 */
}

/* 呼吸灯效果 */
@keyframes breathing-glow {
    0% { text-shadow: 0 0 5px rgba(30, 144, 255, 0.5), 0 0 10px rgba(30, 144, 255, 0.5); }
    50% { text-shadow: 0 0 15px rgba(30, 144, 255, 1), 0 0 25px rgba(30, 144, 255, 1); }
    100% { text-shadow: 0 0 5px rgba(30, 144, 255, 0.5), 0 0 10px rgba(30, 144, 255, 0.5); }
}

/* R 字母专用紫色呼吸灯效果（代表镜像功能）*/
@keyframes breathing-glow-purple {
    0% { text-shadow: 0 0 5px rgba(138, 43, 226, 0.5), 0 0 10px rgba(147, 112, 219, 0.5); }
    50% { text-shadow: 0 0 15px rgba(138, 43, 226, 1), 0 0 25px rgba(147, 112, 219, 1); }
    100% { text-shadow: 0 0 5px rgba(138, 43, 226, 0.5), 0 0 10px rgba(147, 112, 219, 0.5); }
}

/* 字母样式 */
.sidebar-letter {
    font-size: var(--sidebar-letter-size);
    font-weight: bold;
    line-height: 1;
    display: none;
}

/* 高亮字母 */
.sidebar-letter.highlight {
    color: var(--sidebar-highlight-color);
}

/* 彩种选择器菜单 */
.picker-menu {
    position: absolute;
    left: calc(var(--sidebar-width) + 8px); 
    background-color: var(--sidebar-bg-color);
    border-radius: var(--sidebar-border-radius);
    /* box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.2); */ /* 旧的，光晕较大 */
    box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.4), /* 修改：减小白色辉光 */
                0 0 4px rgba(0, 0, 0, 0.15); /* 修改：减小内层阴影 */
    width: 200px;
    max-height: 500px;
    overflow-y: auto;
    z-index: 10000;
    transition: opacity var(--sidebar-transition), transform var(--sidebar-transition);
    opacity: 1;
}

/* 隐藏菜单 */
.picker-menu.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
}

/* 菜单头部 */
.picker-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--sidebar-border-color);
    font-weight: bold;
}

/* 关闭按钮 */
.close-picker-btn {
    background: none;
    border: none;
    color: var(--sidebar-text-color);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: background-color var(--sidebar-transition);
}

.close-picker-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 菜单内容区 */
.picker-menu-content {
    padding: 8px;
}

/* 彩种按钮 */
.lottery-button {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--sidebar-text-color);
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 4px;
    transition: background-color var(--sidebar-transition);
}

.lottery-button:hover {
    background-color: var(--sidebar-hover-color);
}

.lottery-button.active {
    background-color: var(--sidebar-highlight-color);
}

/* 彩种名称 */
.lottery-name {
    font-weight: bold;
    font-size: var(--sidebar-font-size);
}

/* 用户登录状态样式 */
.sidebar-item.logged-in .sidebar-icon {
    border: 2px solid var(--sidebar-highlight-color);
}

/* VIP等级标识 */
.vip-level {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: var(--sidebar-highlight-color);
    color: white;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 10px;
    font-weight: bold;
}

/* 通知标记 */
.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: #e53e3e;
    color: white;
    font-size: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

/* 响应式设计 - 平板设备 */
@media (max-width: 768px) {
    .floating-sidebar-container {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: translateY(0);
    }
    
    .floating-sidebar-container.hidden {
        transform: translateY(100%);
    }
    
    .floating-sidebar {
        width: 100%;
        border-radius: var(--sidebar-border-radius) var(--sidebar-border-radius) 0 0;
    }
    
    .sidebar-items {
        flex-direction: row;
        justify-content: space-around;
    }
    
    .sidebar-item {
        flex-direction: column;
        height: auto;
        border-bottom: none;
        border-right: 1px solid var(--sidebar-border-color);
        flex: 1;
        text-align: center;
        padding: 10px 5px;
    }
    
    .sidebar-item:last-child {
        border-right: none;
    }
    
    .sidebar-icon {
        margin-right: 0;
        margin-bottom: 5px;
    }
    
    .sidebar-text {
        opacity: 1;
        max-width: 100%;
        align-items: center;
    }
    
    .sidebar-letter {
        font-size: 16px;
    }
    
    .sidebar-label {
        display: none;
    }
    
    .sidebar-desc {
        font-size: 10px;
    }
    
    .current-lottery {
        font-size: 10px;
        padding: 1px 2px;
    }
    
    .picker-menu {
        left: 0;
        top: auto;
        bottom: 100%;
        width: 100%;
        border-radius: var(--sidebar-border-radius) var(--sidebar-border-radius) 0 0;
    }
    
    .vip-level {
        top: 0;
        right: 0;
    }
    
    .notification-badge {
        top: 0;
        right: 0;
    }
}

/* 响应式设计 - 手机设备 */
@media (max-width: 480px) {
    .sidebar-desc {
        display: none;
    }
    
    .sidebar-letter {
        font-size: 14px;
    }
    
    .sidebar-icon {
        width: 24px;
        height: 24px;
    }
    
    .sidebar-item {
        padding: 8px 4px;
    }
    
    .lottery-button {
        padding: 6px 8px;
    }
    
    .lottery-name {
        font-size: 12px;
    }
    
    .lottery-desc {
        font-size: 10px;
    }
}

/* --- 新增：底部 Profile 部分 --- */
.sidebar-profile {
    padding: 25px 8px 5px 8px; /* 修改：减少底部内边距，尝试让内容更贴底 */
    border-top: 1px solid var(--sidebar-border-color, rgba(74, 85, 104, 0.5));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.profile-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.profile-icons a {
    color: var(--sidebar-text-color, #ffffff);
    opacity: 0.7;
    font-size: 13px;
    transition: opacity var(--sidebar-transition);
}

.profile-icons a:hover {
    opacity: 1;
}

.profile-designer {
    font-size: 10px;
    opacity: 0.5;
    text-align: center;
    margin-top: auto;
}

/* --- 新增：顶部 Logo/Brand --- */
.sidebar-brand {
    padding: 20px 15px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    display: none; /* 直接隐藏 Brand 区域 */
    /* TODO: 添加 Logo 图标样式 */
}

/* --- 新增：区域标题 --- */
.sidebar-section-title {
    padding: 10px 15px 5px 15px;
    font-size: 11px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* border-top: 1px solid rgba(255, 255, 255, 0.1); */ /* 移除标题边框 */
    margin-top: 10px;
    display: none; /* 直接隐藏所有 Section Title */
}
/* 
.sidebar-brand + .sidebar-section-title {
    border-top: none;
    margin-top: 0;
}
*/

/* --- 新增：Filters 区域样式 --- */
.sidebar-filters {
    padding: 10px 15px;
    font-size: 12px;
    display: none; /* 直接隐藏 Filters 区域 */
}

/* 
.filter-item {
    margin-bottom: 10px;
}

.filter-item label {
    display: block;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3px;
}

.filter-item div {
    color: rgba(255, 255, 255, 0.9);
}
*/

/* --- 结束：Filters 区域样式 --- */

/* --- 新增：当用户菜单显示时，隐藏 V 项的默认悬停标签 --- */
.sidebar-item.v.profile-menu-active .sidebar-text {
    display: none; 
}
/* --- 结束新增 --- */

/* --- 新增：当 Picker 菜单显示时，隐藏 P 项的默认悬停标签 --- */
.sidebar-item.p.picker-menu-active .sidebar-text {
    display: none;
}
/* --- 结束新增 --- */

/* --- 新增：强制隐藏底部区域可能出现的列表和项目 --- */
.sidebar-bottom .sidebar-items,
.sidebar-bottom .sidebar-item { /* 同时隐藏列表和单个项目 */
    display: none !important; /* 使用 !important 确保覆盖 */
}

/* --- 新增：Arena竞技场菜单样式 --- */
.arena-menu {
    position: absolute;
    left: calc(var(--sidebar-width) + 8px);
    background-color: var(--sidebar-bg-color);
    border-radius: var(--sidebar-border-radius);
    box-shadow: 0 0 8px 1px rgba(255, 100, 100, 0.4), /* 红色辉光，突出竞技场主题 */
                0 0 4px rgba(0, 0, 0, 0.15);
    width: 180px;
    z-index: 10000;
    transition: opacity var(--sidebar-transition), transform var(--sidebar-transition);
    opacity: 1;
}

/* 隐藏Arena菜单 */
.arena-menu.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
}

/* Arena菜单头部 */
.arena-menu-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--sidebar-border-color);
    font-weight: bold;
    font-size: 12px;
    color: var(--sidebar-text-color);
    text-align: center;
}

/* Arena菜单内容区 */
.arena-menu-content {
    padding: 8px;
}

/* Arena菜单项 */
.arena-menu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--sidebar-text-color);
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 4px;
    transition: background-color var(--sidebar-transition);
    text-decoration: none;
    font-size: 13px;
}

.arena-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.arena-menu-item.disabled {
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

.arena-menu-item.disabled:hover {
    background-color: transparent;
}

/* A 按钮样式 - 开发中状态 */
.sidebar-item.a {
    cursor: not-allowed !important;
}

/* 当Arena菜单显示时，隐藏A项的默认悬停标签 */
.sidebar-item.a.arena-menu-active .sidebar-text {
    display: none;
}

/* --- 新增：V项用户信息浮窗样式 --- */
.user-profile-menu {
    position: absolute;
    left: calc(100% + 15px); /* 修改：增加与悬浮条的距离 */
    bottom: -150px; /* 修改：将弹窗的底部定位在 V 项下方 150px 处，使其整体下移 */
    width: 620px; /* 修改：增加宽度以确保内容不折叠 */
    background-color: var(--sidebar-bg-color, #333);
    border-radius: var(--sidebar-border-radius, 8px);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 22px rgba(30, 144, 255, 0.6); /* 修改：增强辉光效果 */
    padding: 15px 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 15px; /* 各部分之间的间距 */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sidebar-border-color, rgba(74, 85, 104, 0.5));
}

.user-profile-menu.hidden {
    display: none;
}

/* 移除：这个修改影响了V浮窗而不是P浮窗，P浮窗的定位是通过JavaScript控制的 */

.user-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sidebar-border-color, rgba(74, 85, 104, 0.5));
}

.user-nickname {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--sidebar-text-color, #fff);
}

.user-level-badge {
    background-color: #1e90ff; /* A shade of blue, similar to G-VIP */
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
}

.user-subscriptions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 修改：从3列改为2列，让每个卡片更宽 */
    gap: 10px;
}

.subscription-card {
    background-color: #2d2d2d;
    padding: 8px; /* 修改：减小内边距 */
    border-radius: 6px;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
    font-size: 0.8em; /* 修改：减小字体大小 */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.subscription-card.active {
    border-left-color: var(--sidebar-highlight-color, #ffd700);
}

.subscription-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.sub-card-title {
    font-weight: bold;
    color: var(--sidebar-text-color, #fff);
    margin-bottom: 8px;
    font-size: 1.1em; /* 稍微增大标题字号 */
}

.sub-card-svip,
.sub-card-gvip {
    color: #aaa;
    font-size: 1em; /* 增大状态文本字号 */
    line-height: 1.4;
    display: flex; /* 新增：使用flex布局 */
    align-items: center; /* 新增：垂直居中对齐 */
}

/* 新增：为VIP状态文本添加样式 */
.sub-card-vip-status {
    margin-left: 8px; /* 在标签和状态之间添加一些间距 */
}

.sub-card-svip.active,
.sub-card-gvip.active {
    color: #ffd700; /* 金色 */
    font-weight: bold;
}

.no-subs-info {
    grid-column: 1 / -1; /* 占据所有列 */
    text-align: center;
    padding: 20px;
    opacity: 0.7;
}

.user-profile-actions {
    display: flex;
    gap: 15px;
    margin-top: 5px;
    /* 移除不必要的背景和边框 */
}

.sidebar-menu-button {
    flex: 1;
    padding: 10px;
    background-color: #4a5568; /* A cool gray */
    color: #e2e8f0; /* Light gray text */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    box-shadow: 0 0 7px rgba(255, 255, 255, 0.7); /* 修改：增强按钮辉光 */
    transition: all 0.2s ease; /* 修改：确保所有变化的过渡都平滑 */
}

.sidebar-menu-button:hover {
    background-color: #2d3748; /* A darker gray for hover */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* 新增：增强悬停辉光 */
}

/* 新增：订阅按钮容器 */
.user-profile-subscribe-action {
    padding: 10px 0 5px;
    text-align: center;
}

/* 新增：联系信息样式 */
.contact-info {
    display: block; /* 设置为块级元素以便设置宽度 */
    width: 100%; /* 宽度设置为100%，使其填满容器 */
    background-color: #4A5568; /* 使用与其他按钮相同的背景色 */
    color: #fff; /* 白色文字 */
    padding: 10px 15px; /* 内边距 */
    text-decoration: none; /* 无下划线 */
    border-radius: 6px; /* 圆角 */
    border: 1px solid #5A667A; /* 边框颜色与其他按钮统一 */
    transition: all 0.3s ease; /* 统一过渡效果 */
    box-sizing: border-box; /* 确保 padding 不会影响总宽度 */
    box-shadow: 0 0 7px rgba(255, 255, 255, 0.7); /* 应用与其他按钮一致的辉光 */
    text-align: center; /* 文字居中对齐 */
    font-size: 14px; /* 字体大小 */
}

/* 保留原有的立即订阅按钮样式以防其他地方还在使用 */
.subscribe-now-button {
    display: block; /* 修改：改回 block 以便设置宽度 */
    width: 100%; /* 修改：宽度设置为100%，使其填满容器 */
    background-color: #4A5568; /* Use the same muted color */
    color: #fff;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 6px;
    border: 1px solid #5A667A; /* 修改：边框颜色与下方按钮统一 */
    cursor: pointer;
    transition: all 0.3s ease; /* 修改：统一过渡效果 */
    box-sizing: border-box; /* 新增：确保 padding 不会影响总宽度 */
    box-shadow: 0 0 7px rgba(255, 255, 255, 0.7); /* 修改：应用与下方按钮一致的辉光 */
}

.subscribe-now-button:hover {
    background-color: #007bff; /* Use the bright color on hover */
    color: #fff;
    border-color: #007bff; /* Match border color on hover */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.8); /* 修改：悬停时应用蓝色辉光 */
}

/* 新增：S-VIP到期日期激活状态 */
.svip-date-active {
    color: #28a745; /* 绿色 */
    font-weight: bold;
}

/* 新增：G-VIP到期日期激活状态 */
.gvip-date-active {
    color: #007bff; /* 蓝色 */
    font-weight: bold;
}

/* 新增：S-VIP激活状态的卡片边框 */
.subscription-card.svip-active-border {
    border-left-color: #28a745; /* 绿色 */
}

/* 新增：G-VIP激活状态的卡片边框 */
.subscription-card.gvip-active-border {
    border-left-color: #007bff; /* 蓝色 */
}

/* --- 结束：底部 Profile 部分 --- */

/* --- 新增：二级维度菜单样式 --- */
.picker-submenu {
    position: absolute; /* 相对于其offsetParent定位，这里应该是 .picker-menu */
    background-color: var(--sidebar-bg-color, #333); /* 与一级菜单背景一致 */
    border: 1px solid var(--sidebar-border-color, rgba(74, 85, 104, 0.5));
    border-radius: var(--sidebar-border-radius, 8px);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
    padding: 8px 12px; /* 统一内边距 */
    z-index: 10002; /* 比一级菜单 (picker-menu) 更高 */
    /* 初始隐藏，JS控制显示 */
    display: none; 
    /* --- 新增：Flex布局实现双列 --- */
    display: flex;
    gap: 16px; /* 列之间的间距 */
    min-width: auto; /* 移除固定最小宽度，让其自适应内容 */
}

/* --- 新增：列容器样式 --- */
.submenu-column {
    display: flex;
    flex-direction: column;
    gap: 4px; /* 列内项目间距 */
    min-width: 160px; /* 为每列设置一个最小宽度 */
}

/* --- 新增：深度第一列样式（右列） --- */
.submenu-column-right {
    border-left: 1px solid #ffd700; /* 黄色分隔线 */
    padding-left: 12px; /* 添加左边距以配合边框 */
}

/* --- 新增：深度第二列样式 --- */
.submenu-column-deep-second {
    /* 移除边框，与深度第一列保持一致 */
    padding-left: 0px; /* 移除左边距 */
}

/* --- 新增：G-VIP列样式 --- */
.submenu-column-gvip {
    border-left: 1px solid var(--sidebar-highlight-color, #1e90ff);
    padding-left: 12px; /* 添加左边距以配合边框 */
}

.picker-submenu.visible {
    display: flex; /* 修改：显示时使用 flex */
}

.picker-submenu .submenu-header {
    font-size: 0.8em;
    font-weight: bold;
    color: var(--sidebar-text-color, #ffffff);
    opacity: 0.7;
    padding: 4px 4px 6px 4px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--sidebar-border-color, rgba(74, 85, 104, 0.3));
}

/* --- 新增：深度标题的金色样式 --- */
.picker-submenu .submenu-header.submenu-header-deep {
    color: #ffd700;
    font-weight: bold; /* 加粗以突出 */
    opacity: 1; /* 覆盖继承的0.7透明度，使其完全不透明 */
    text-shadow: none; /* 移除所有发光/阴影效果，确保文字清晰 */
}

/* --- 新增：G-VIP 标题的蓝色样式 --- */
.picker-submenu .submenu-header.submenu-header-gvip {
    color: var(--sidebar-highlight-color, #1e90ff);
    font-weight: bold;
    opacity: 1;
    text-shadow: none;
}

.picker-submenu a {
    display: block;
    padding: 6px 8px;
    color: var(--sidebar-text-color, #ffffff);
    text-decoration: none;
    font-size: 0.9em;
    border-radius: 4px;
    transition: background-color var(--sidebar-transition, 0.2s ease);
}

.picker-submenu a:hover {
    background-color: var(--sidebar-hover-color, rgba(74, 85, 104, 0.95));
    color: var(--sidebar-highlight-color, #1e90ff);
}

.picker-submenu a[href="#"] {
    color: #888; /* 对于无效链接，使用灰色 */
    cursor: not-allowed;
}

.picker-submenu a[href="#"]:hover {
    background-color: transparent; /* 无效链接悬停时无背景变化 */
    color: #888;
}
/* --- 结束：二级维度菜单样式 --- */

/* --- 新增：G工具分类样式 --- */
.picker-category-separator {
    height: 1px;
    background-color: var(--sidebar-border-color, rgba(74, 85, 104, 0.5));
    margin: 12px 8px;
}

.g-tools-button {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: #1e90ff; /* 蓝色字体 */
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 4px;
    transition: background-color var(--sidebar-transition);
    font-weight: bold; /* 加粗字体 */
}

.g-tools-button:hover {
    background-color: var(--sidebar-hover-color);
}

.g-tools-name {
    font-weight: bold;
    font-size: var(--sidebar-font-size);
    color: #1e90ff; /* 确保蓝色显示 */
}

/* G工具子菜单样式 */
.g-tools-submenu {
    position: absolute;
    background-color: var(--sidebar-bg-color, #333);
    border: 1px solid var(--sidebar-border-color, rgba(74, 85, 104, 0.5));
    border-radius: var(--sidebar-border-radius, 8px);
    box-shadow: 0 0 8px 1px rgba(30, 144, 255, 0.4), /* 蓝色辉光效果 */
                0 0 4px rgba(0, 0, 0, 0.15);
    padding: 8px 12px;
    z-index: 10002;
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    /* 过渡效果 */
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.g-tools-submenu.visible {
    display: flex;
}

.g-tool-link {
    display: block;
    padding: 6px 8px;
    color: var(--sidebar-text-color, #ffffff);
    text-decoration: none;
    font-size: 0.9em;
    border-radius: 4px;
    transition: background-color var(--sidebar-transition, 0.2s ease);
}

.g-tool-link:hover {
    background-color: var(--sidebar-hover-color, rgba(74, 85, 104, 0.95));
    color: var(--sidebar-highlight-color, #1e90ff);
}
/* --- 结束：G工具分类样式 --- */

/* --- 新增：二级维度菜单辉光样式 --- */
.picker-submenu {
    /* 确保辉光效果可以正确应用 */
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* 排列五 (paiwu) - 灰蓝色 */
.picker-submenu.glow-paiwu {
    /* box-shadow: 0 0 8px 2px rgba(200, 225, 255, 0.7); */ /* 旧的，比 dimension_hub 的辉光稍强 */
    box-shadow: 0 0 5px 1px rgba(88, 113, 155, 0.6); /* 修改：根据文档更新为灰蓝色，并减小辉光范围 */
    border-color: rgba(88, 113, 155, 0.7); /* 修改：根据文档更新为灰蓝色 */
}

/* 七星彩 (qixingcai) - 蒂芙尼蓝 */
.picker-submenu.glow-qixingcai {
    /* box-shadow: 0 0 8px 2px rgba(218, 165, 32, 0.7); */ /* 旧的 */
    box-shadow: 0 0 5px 1px rgba(129, 216, 208, 0.6); /* 修改：根据文档更新为蒂芙尼蓝 */
    border-color: rgba(129, 216, 208, 0.7); /* 修改：根据文档更新为蒂芙尼蓝 */
}

/* 东方6+1 (dongfang) - 中国红 */
.picker-submenu.glow-dongfang {
    /* box-shadow: 0 0 8px 2px rgba(255, 99, 71, 0.7); */ /* 旧的 */
    box-shadow: 0 0 5px 1px rgba(204, 0, 0, 0.6); /* 修改：根据文档更新为中国红 */
    border-color: rgba(204, 0, 0, 0.7); /* 修改：根据文档更新为中国红 */
}

/* 福彩3D (fc3d) - 发光白 */
.picker-submenu.glow-fc3d {
    /* box-shadow: 0 0 8px 2px rgba(65, 105, 225, 0.7); */ /* 旧的 */
    box-shadow: 0 0 5px 1px rgba(200, 225, 255, 0.6); /* 修改：根据文档更新为发光白 */
    border-color: rgba(200, 225, 255, 0.7); /* 修改：根据文档更新为发光白 */
}

/* 排列三 (pailiesan) - 酒绿 */
.picker-submenu.glow-pailiesan {
    /* box-shadow: 0 0 8px 2px rgba(50, 205, 50, 0.7); */ /* 旧的 */
    box-shadow: 0 0 5px 1px rgba(153, 255, 0, 0.6); /* 修改：根据文档更新为酒绿 */
    border-color: rgba(153, 255, 0, 0.7); /* 修改：根据文档更新为酒绿 */
}

/* 天天彩选4 (ttcx4) - 暖杏 */
.picker-submenu.glow-ttcx4 {
    /* box-shadow: 0 0 8px 2px rgba(147, 112, 219, 0.7); */ /* 旧的 */
    box-shadow: 0 0 5px 1px rgba(254, 229, 200, 0.6); /* 修改：根据文档更新为暖杏 */
    border-color: rgba(254, 229, 200, 0.7); /* 修改：根据文档更新为暖杏 */
}
/* --- 结束：二级维度菜单辉光样式 --- */

/* --- 新增：悬浮侧边栏主体辉光样式 --- */
/* .floating-sidebar 定义已在第79行左右，包含 transition: box-shadow ..., border-color ..., border ... */

/* 排列五 (paiwu) - 灰蓝色 */
.floating-sidebar.glow-sidebar-paiwu {
    border: 1px solid #58719B;
    box-shadow: 0 0 7px 2px rgba(88, 113, 155, 0.7),
                inset 0 0 5px 1px rgba(88, 113, 155, 0.5);
}

/* 七星彩 (qixingcai) - 蒂芙尼蓝 */
.floating-sidebar.glow-sidebar-qixingcai {
    border: 1px solid #81D8D0;
    box-shadow: 0 0 7px 2px rgba(129, 216, 208, 0.7),
                inset 0 0 5px 1px rgba(129, 216, 208, 0.5);
}

/* 东方6+1 (dongfang) - 中国红 */
.floating-sidebar.glow-sidebar-dongfang {
    border: 1px solid #CC0000;
    box-shadow: 0 0 7px 2px rgba(204, 0, 0, 0.7),
                inset 0 0 5px 1px rgba(204, 0, 0, 0.5);
}

/* 福彩3D (fc3d) - 发光白 */
.floating-sidebar.glow-sidebar-fc3d {
    border: 1px solid #C8E1FF;
    box-shadow: 0 0 7px 2px rgba(200, 225, 255, 0.7),
                inset 0 0 5px 1px rgba(200, 225, 255, 0.5);
}

/* 排列三 (pailiesan) - 酒绿 */
.floating-sidebar.glow-sidebar-pailiesan {
    border: 1px solid #99FF00;
    box-shadow: 0 0 7px 2px rgba(153, 255, 0, 0.7),
                inset 0 0 5px 1px rgba(153, 255, 0, 0.5);
}

/* 天天彩选4 (ttcx4) - 暖杏 */
.floating-sidebar.glow-sidebar-ttcx4 {
    border: 1px solid #FEE5C8;
    box-shadow: 0 0 7px 2px rgba(254, 229, 200, 0.7),
                inset 0 0 5px 1px rgba(254, 229, 200, 0.5);
}
/* --- 结束新增 --- */

/* ===== G功能菜单样式（重构为P浮窗架构）===== */
.g-function-menu {
    position: absolute;
    left: calc(var(--sidebar-width) + 8px); 
    background-color: var(--sidebar-bg-color);
    border-radius: var(--sidebar-border-radius);
    box-shadow: 0 0 8px 1px rgba(30, 144, 255, 0.4), /* 蓝色辉光效果，与G按钮呼吸灯呼应 */
                0 0 4px rgba(0, 0, 0, 0.15);
    width: 160px;
    z-index: 10000;
    transition: opacity var(--sidebar-transition), transform var(--sidebar-transition);
    opacity: 1;
    overflow: hidden; /* 防止选项背景色溢出容器 */
}

.g-function-menu.visible {
    opacity: 1;
    transform: translateX(0);
}

/* 隐藏G功能菜单 */
.g-function-menu.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
}

.g-function-menu-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sidebar-border-color);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px 8px 0 0;
}

.g-function-menu-header span {
    color: var(--sidebar-highlight-color);
    font-weight: bold;
    font-size: 14px;
}

/* G菜单内容区 */
.g-function-menu-content {
    padding: 8px;
}

/* G菜单项 */
.g-menu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--sidebar-text-color);
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 4px;
    transition: background-color var(--sidebar-transition);
    font-size: 14px;
}

.g-menu-item:hover {
    background-color: var(--sidebar-hover-color);
}

/* 当G功能菜单显示时，隐藏G项的默认悬停标签 */
.sidebar-item.g.g-function-menu-active .sidebar-text {
    display: none;
}

/* ===== 镜像N二级菜单样式 ===== */
.mirror-n-submenu {
    position: absolute;
    background-color: var(--sidebar-bg-color);
    border: 1px solid var(--sidebar-border-color);
    border-radius: 8px;
    min-width: 280px;
    max-width: 320px;
    box-shadow: 0 0 8px 1px rgba(138, 43, 226, 0.4), /* 紫色辉光，与镜像功能主题一致 */
                0 0 4px rgba(0, 0, 0, 0.15);
    z-index: 10002;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    overflow: hidden; /* 防止选项背景色溢出容器 */
    /* 添加一些内边距，让鼠标移动更容易 */
    padding-left: 2px; /* 左侧稍微扩展，与G菜单重叠 */
}

.mirror-n-submenu.visible {
    opacity: 1;
    transform: translateX(0);
}

.mirror-n-submenu-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sidebar-border-color);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px 8px 0 0;
}

.mirror-n-submenu-header span {
    color: var(--sidebar-highlight-color);
    font-weight: bold;
    font-size: 14px;
}

.mirror-n-submenu-content {
    padding: 8px;
    display: flex;
    gap: 8px;
}

.mirror-n-submenu-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mirror-n-dimension-link {
    display: block;
    padding: 8px 12px;
    color: var(--sidebar-text-color);
    text-decoration: none;
    font-size: 13px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.mirror-n-dimension-link:hover {
    background-color: var(--sidebar-hover-color);
    color: white;
}

/* ===== A按钮开发中提示样式 ===== */
.development-tooltip {
    position: absolute;
    background-color: #ff6b35;
    color: white;
    border-radius: 6px;
    padding: 0;
    z-index: 10001;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.development-tooltip.visible {
    opacity: 1;
    transform: translateX(0);
}

.development-tooltip .tooltip-content {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
}

/* ===== G功能菜单激活状态 ===== */
.sidebar-item.g.g-function-menu-active {
    background-color: var(--sidebar-hover-color);
}

.sidebar-item.g.g-function-menu-active .sidebar-icon {
    color: var(--sidebar-highlight-color);
}