:root {
    --bg-dark: #121417; --sidebar-bg: #000; --card-bg: #1e2126;
    --primary: #007bff; --gold: #f1c40f; --text: #e9ecef; --border: #343a40;
    --danger: #dc3545; --success: #28a745;
}
body { font-family: system-ui, sans-serif; margin: 0; display: flex; height: 100vh; background: var(--bg-dark); color: var(--text); }

/* --- 侧边栏与主布局 --- */
.sidebar {
    width: 220px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    padding: 20px 10px;
    flex-shrink: 0;
    height: 100vh;
    box-sizing: border-box;
    display: flex;             /* 新增：让侧边栏变成 flex 容器 */
    flex-direction: column;    /* 新增：从上往下排 */
}

/* 确保游戏列表区可以独立滚动，不影响上面的固定导航 */
#games-container {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}
.sidebar-brand { color: var(--primary); font-size: 1.2rem; font-weight: bold; padding: 10px; margin-bottom: 20px; }
.sidebar-group { color: #555; font-size: 0.8rem; font-weight: bold; padding: 15px 10px 5px; text-transform: uppercase; }
.sidebar-item { display: block; padding: 10px 12px; color: #888; text-decoration: none; border-radius: 6px; margin-bottom: 4px; transition: 0.2s; }
.sidebar-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.sidebar-item.active { background: rgba(0, 123, 255, 0.1); color: var(--primary); border-right: 3px solid var(--primary); border-radius: 4px 0 0 4px; }
.main-content { flex: 1; padding: 30px 40px; overflow-y: auto; }

/* ==========================================
   侧边栏：折叠与长按拖拽排序功能
   ========================================== */
.sidebar-group-wrapper {
    margin-top: 15px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
    transition: opacity 0.2s;
}

.sidebar-group-header {
    color: var(--primary);
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    cursor: grab; /* 提示可拖拽 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    border-radius: 6px;
    -webkit-touch-callout: none; /* 移动端防长按弹出菜单 */
}

/* 模拟长按/抓取时的反馈 */
.sidebar-group-header:active {
    cursor: grabbing;
    background: rgba(255, 255, 255, 0.05);
}

/* 拖拽悬停到其他目标上的高亮效果 */
.sidebar-group-wrapper.drag-over {
    border: 2px dashed var(--gold);
    background: rgba(241, 196, 15, 0.1);
    border-radius: 8px;
}

/* 折叠倒三角动画 */
.toggle-icon {
    font-size: 12px;
    color: #888;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    padding: 0 5px;
}

/* 切换为收起状态时逆时针旋转 90 度 */
.toggle-icon.collapsed {
    transform: rotate(-90deg);
}

/* 卡池列表平滑折叠容器 */
.sidebar-pool-list {
    overflow: hidden;
    max-height: 1000px; 
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 1;
}

.sidebar-pool-list.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* --- 概览卡片 --- */
.stats-header { display: flex; gap: 20px; margin-bottom: 30px; }
.stat-box { flex: 1; background: var(--card-bg); padding: 20px; border-radius: 8px; border: 1px solid var(--border); text-align: center; }
.stat-value { font-size: 1.8rem; font-weight: bold; color: var(--gold); margin-top: 10px; }

/* --- 基础按钮与统一输入框 --- */
.btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; color: white; transition: 0.2s; font-size: 14px; }
.btn-primary { background: var(--primary); }
.btn-primary:hover { background: #0056b3; }

/* ✨ 核心：全局统一的输入框样式 */
.input-box {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 6px;
    outline: none;
    transition: 0.2s;
    box-sizing: border-box;
}
.input-box:focus { border-color: var(--primary); }
.input-box::placeholder { color: #666; }

/* --- 弹窗与角色方块 --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: var(--card-bg); padding: 25px; border-radius: 10px; width: 90%; max-width: 800px; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.box { width: 40px; height: 40px; background: #333; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; user-select: none; font-weight: bold; font-size: 16px; position: relative; border: 2px solid transparent; transition: all 0.2s; }
.box:hover { border-color: #666; transform: translateY(-2px); }
.box.s4 { background: #6c5ce7; color: #fff; }
.box.s5 { background: var(--gold); color: #000; box-shadow: 0 0 10px rgba(243, 156, 18, 0.5); }
.box-add-more { width: 40px; height: 40px; border: 2px dashed #555; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #888; transition: 0.2s; }
.box-add-more:hover { border-color: #aaa; color: #fff; }
.char-tag { 
    font-size: 10px; 
    line-height: 1.1; 
    margin-top: 2px; 
    text-align: center; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100%; 
    padding: 0 2px; 
    transform: scale(0.9); /* 如果字太挤，可以微微缩小 */
}

/* --- 录入方块的专属抽数标签 --- */
.box { position: relative; overflow: hidden; } /* 确保方块是相对定位 */

.box-pull-num {
    display: none; /* 默认隐藏 */
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 11px;
    font-family: monospace;
    font-weight: bold;
    color: #000; /* 黑字白底，在出金光效下最清晰 */
    background: rgba(255, 255, 255, 0.9);
    padding: 0 3px;
    border-radius: 3px;
    z-index: 5;
}

/* 魔法显形：只有当父级是 5 星时，抽数才会浮现 */
.box.s5 .box-pull-num {
    display: block; 
}

/* --- 主页数据进度条 --- */
#list-wrap { display: flex; flex-direction: column; gap: 12px; padding: 10px 0; }
.char-row { display: flex; align-items: center; gap: 15px; animation: fadeIn 0.3s ease; }
.char-icon { width: 45px; height: 45px; border: 2px solid #555; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; background: #222; text-align: center; overflow: hidden; }
.char-bar { height: 28px; border-radius: 4px; display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }

/* 滚动条 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #555; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   ✨ 模拟器与弹窗统一分离组件 (摆脱内联样式)
   ========================================= */
.sim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; margin-bottom: 15px; }
.sim-cb-label { display: flex; align-items: center; gap: 5px; font-size: 13px; background: #2c3038; padding: 6px 10px; border-radius: 6px; cursor: pointer; border: 1px solid #444; color: #eee; transition: 0.2s; }
.sim-cb-label:hover { border-color: var(--primary); background: #3a3f4a; }
.sim-pull-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; align-items: center; }

/* 抽卡方块 */
.sim-item { width: 55px; height: 55px; border-radius: 6px; display: flex; font-size: 13px; font-weight: bold; text-align: center; line-height: 1.1; padding: 2px; position: relative; flex-direction: column; justify-content: flex-end; padding-bottom: 6px; }
.sim-item-5 { background: linear-gradient(135deg, #f39c12, #e67e22); color: #fff; box-shadow: 0 0 10px rgba(243, 156, 18, 0.6); border: 2px solid #fff; }
.sim-item-4 { background: linear-gradient(135deg, #9b59b6, #8e44ad); color: #fff; }
.sim-item-3 { background: #34495e; color: #95a5a6; font-weight: normal; }

/* 模拟器历史容器：为左侧的福袋预留充足的展示空间 */
#sim-results {
    padding-left: 75px !important; 
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 通用按钮池 (彻底替换了 style="..." 写死的颜色) */
.btn-action-gray { background: #444; color: #fff; border: 1px solid #555; }
.btn-action-gray:hover { background: #555; }
.btn-sim-open { background: #8e44ad; color: white; border: 1px solid #9b59b6; font-weight: bold; margin-right: 10px; }
.btn-sim-open:hover { background: #9b59b6; }
.btn-blue { background: #2980b9; color: #fff; }
.btn-blue:hover { background: #3498db; }
.btn-green { background: #27ae60; color: #fff; }
.btn-green:hover { background: #2ecc71; }
.btn-orange { background: #e67e22; color: #fff; }
.btn-orange:hover { background: #f39c12; }
.btn-red { background: #c0392b; color: #fff; }
.btn-red:hover { background: #e74c3c; }
.btn-nav-gold { background: #d35400; color: white; flex: 1; }
.btn-nav-gold:hover { background: #e67e22; }

/* 选择器下拉 */
.picker-item { padding: 6px 2px; background: #3d414a; text-align: center; border-radius: 4px; font-size: 12px; cursor: pointer; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid transparent; }
.picker-item:hover { background: #4b515d; color: #fff; border-color: #666; }
.char-picker {
    position: absolute;
    background: #1e2126; /* 必须有深色背景 */
    border: 1px solid #444;
    border-radius: 10px;
    padding: 12px;
    z-index: 9999; /* 必须最高 */
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    display: none;
}

/* 面板背景墙容器 */
.sim-panel-dark { background: #222; border: 1px solid #333; }
.sim-stats-panel { background: #1a1c20; border: 1px solid #333; }
.sim-history-panel { background: #111; border: 1px inset #222; }

/* js动态菜单 */
.add-menu { position: fixed; background: #333; border: 1px solid #555; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 2000; overflow: hidden; display: none; min-width: 120px; }
.menu-item { padding: 12px 16px; color: #eee; cursor: pointer; font-size: 14px; transition: background 0.2s; text-align: center; }
.menu-item:hover { background: #444; color: #fff; }
.menu-item:not(:last-child) { border-bottom: 1px solid #444; }

/* =========================================
   ☀️ 亮色模式 (Light Mode) 降维打击式覆盖
   ========================================= */
[data-theme="light"] {
    --bg-dark: #f3f4f6 !important; 
    --sidebar-bg: #ffffff !important; 
    --card-bg: #ffffff !important;
    --primary: #0ea5e9 !important; 
    --text: #1f2937 !important; 
    --border: #e5e7eb !important;
}

[data-theme="light"] body { background: var(--bg-dark); color: var(--text); }
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5 { color: #111827 !important; }

[data-theme="light"] .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--border); box-shadow: 1px 0 10px rgba(0,0,0,0.02); }
[data-theme="light"] .sidebar-item { color: #4b5563 !important; }
[data-theme="light"] .sidebar-item:hover { background: #f3f4f6 !important; color: #111827 !important; }
[data-theme="light"] .sidebar-item.active { background: #e0f2fe !important; color: var(--primary) !important; border-right: 3px solid var(--primary); }

[data-theme="light"] .stat-box { background: var(--card-bg) !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
[data-theme="light"] .modal-content { background: var(--card-bg) !important; border: 1px solid var(--border) !important; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }

/* 彻底覆盖所有容器面板背景 */
[data-theme="light"] #edit-body,
[data-theme="light"] .sim-history-panel,
[data-theme="light"] .sim-panel-dark,
[data-theme="light"] .sim-stats-panel,
[data-theme="light"] .char-picker,
[data-theme="light"] .add-menu {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] #edit-body, [data-theme="light"] .sim-history-panel { background: #f9fafb !important; box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.02) !important; }

/* 【精准修复】以前漏掉的暗灰色操作按钮与添加框 */
[data-theme="light"] .btn-action-gray {
    background: #e5e7eb !important; color: #374151 !important; border: 1px solid #d1d5db !important; font-weight: 500 !important; text-shadow: none !important;
}
[data-theme="light"] .btn-action-gray:hover { background: #d1d5db !important; }
[data-theme="light"] .box-add-more { border-color: #d1d5db !important; color: #9ca3af !important; }
[data-theme="light"] .box-add-more:hover { border-color: var(--primary) !important; color: var(--primary) !important; }

/* 【精准修复】输入框、下拉菜单、复选框 */
[data-theme="light"] .input-box,
[data-theme="light"] select,
[data-theme="light"] .picker-item,
[data-theme="light"] .sim-cb-label {
    background: #ffffff !important; color: #111827 !important; border: 1px solid #d1d5db !important; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.02) !important;
}
[data-theme="light"] .sim-cb-label:hover, [data-theme="light"] .picker-item:hover { border-color: var(--primary) !important; background: #f0f9ff !important; color: var(--primary) !important; }
[data-theme="light"] .input-box::placeholder { color: #9ca3af !important; }
[data-theme="light"] .input-box:focus { border-color: var(--primary) !important; }
[data-theme="light"] .box:hover { border-color: #9ca3af !important; }

/* 录入界面小方块适配 */
[data-theme="light"] .box.s4 { background: #8b5cf6 !important; color: #fff !important; border-color: #8b5cf6 !important; }
[data-theme="light"] .box.s5 { background: #f59e0b !important; color: #fff !important; border-color: #f59e0b !important; }
[data-theme="light"] .char-icon { background: #fff !important; color: #333 !important; border-color: #d1d5db !important; }

/* 模拟器小方块和排版适配 */
[data-theme="light"] .sim-pull-row { background: #ffffff !important; border: 1px solid #e5e7eb !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; }
[data-theme="light"] .sim-item-3 { background: #f3f4f6 !important; color: #6b7280 !important; border: 1px solid #e5e7eb !important; }
[data-theme="light"] .menu-item { color: #374151 !important; border-bottom-color: #e5e7eb !important; }
[data-theme="light"] .menu-item:hover { background: #f3f4f6 !important; color: var(--primary) !important; }

/* 柔化所有的深色边框 */
[data-theme="light"] div[style*="border-top"], [data-theme="light"] div[style*="border-bottom"], [data-theme="light"] div[style*="border-right"] { border-color: #e5e7eb !important; }

/* 让亮色模式下的下拉菜单选项也变成亮色 */
[data-theme="light"] .input-box option, 
[data-theme="light"] .input-box optgroup {
    background-color: #ffffff !important;
    color: #111827 !important;
}

/* 默认隐藏模拟器方格左上角的数字 */
.sim-item .pull-num { 
    display: none; 
    position: absolute; 
    top: 2px; 
    left: 4px; 
    font-size: 10px; 
    color: #fff; 
    background: rgba(0,0,0,0.5);
    padding: 0 3px;
    border-radius: 3px;
    z-index: 5;
}

/* 只有 5 星（sim-item-5）才显示数字 */
.sim-item-5 .pull-num { 
    display: block !important; 
    background: rgba(255,255,255,0.9);
    color: #000;
    font-weight: bold;
}

/* --- 模拟器福袋显示补丁 --- */

/* 1. 强制让每一行抽卡记录允许内容溢出到左边 */
.sim-pull-row {
    position: relative !important; /* 必须是相对定位，作为福袋的基准 */
    overflow: visible !important;  /* 👈 核心修复：允许福袋显示在 -75px 的位置 */
    width: 100% !important;        /* 确保行撑满宽度 */
    min-height: 65px;              /* 防止行高度塌陷 */
    box-sizing: border-box;
}

/* 2. 这里的样式必须和 JS 里的类名严格对应 */
.spark-gift-card {
    position: absolute !important;
    left: -70px; /* 调整此值直到方块出现在您画的黄色圈内 */
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    width: 55px;
    height: 55px;
    border: 2px solid #f1c40f;
    border-radius: 8px;
    background: #000;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.7);
    z-index: 9999; /* 极高层级 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    animation: giftPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 3. 补全动画 */
@keyframes giftPopIn {
    0% { transform: translateY(-50%) scale(0); opacity: 0; }
    100% { transform: translateY(-50%) scale(0.9); opacity: 1; }
}

/* =========================================
   ✨ 亮色模式深度修复补丁 (图鉴背景、模拟器右侧大黑框等)
   ========================================= */
   
/* 1. 录入数据页 (.box) - 保持原本动态星级颜色，仅加深一点描边让它在白底上更立体 */
[data-theme="light"] .box {
    border: 1px solid rgba(0,0,0,0.15) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* 2. 配置页图鉴卡片 (.char-card & .add-btn-card) */
[data-theme="light"] .char-card {
    background: #ffffff !important;
    border-color: #d1d5db !important;
}
[data-theme="light"] .char-info {
    background: linear-gradient(to top, rgba(255,255,255,0.95) 20%, rgba(255,255,255,0)) !important;
    color: #111827 !important;
    text-shadow: none !important;
}
[data-theme="light"] .char-star {
    text-shadow: 1px 1px 0px rgba(255,255,255,0.8), 0 0 3px rgba(255,255,255,0.8) !important;
}
[data-theme="light"] .add-btn-card {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #6b7280 !important;
}
[data-theme="light"] .add-btn-card:hover {
    background: #eff6ff !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* 3. 模拟器：左侧选角卡片 (.char-select-card) */
[data-theme="light"] .char-select-card {
    background: #ffffff !important;
    border-color: #d1d5db !important;
}
[data-theme="light"] .char-select-name {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-top: 1px solid #e5e7eb !important;
}
[data-theme="light"] .char-select-card.selected .char-select-name {
    background: #eff6ff !important;
    color: var(--primary) !important;
}
[data-theme="light"] .char-select-fallback {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}

/* 4. 模拟器：右侧结果大黑框与内部卡片文字颜色 */
[data-theme="light"] #sim-result-container {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

/* 针对模拟器内抽出来的角色卡片，消除底部黑色遮罩，提升文字在亮色下的清晰度 */
[data-theme="light"] .sim-item div[style*="linear-gradient"] {
    background: linear-gradient(to top, rgba(255,255,255,0.95) 15%, rgba(255,255,255,0)) !important;
}
[data-theme="light"] .sim-item div[style*="text-shadow"] {
    color: #111827 !important;
    text-shadow: none !important;
}
[data-theme="light"] .sim-item .pull-num {
    color: #111827 !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
}

/* ==========================================
   修复亮色模式下，各类规则配置行内的文字颜色过浅问题
   ========================================== */
[data-theme="light"] .soft-rule-row span,
[data-theme="light"] .minor-pity-row span,
[data-theme="light"] .spark-rule-row span,
[data-theme="light"] .gift-rule-row span,
[data-theme="light"] .rule-row span {
    color: #111827 !important; /* 深黑灰色，对比度高且不刺眼 */
    font-weight: 600 !important; /* 稍微加粗一点，更易读 */
}

/* 顺手把卡池标题栏旁边可能存在的浅色提示字也变黑 */
[data-theme="light"] .pool-section .hint-text,
[data-theme="light"] .setup-card .hint-text {
    color: #4b5563 !important;
}

/* ==========================================
   修复首页及全局写死的浅灰色内联文字在亮色模式下看不清的问题
   ========================================== */
[data-theme="light"] p[style*="color: #888"],
[data-theme="light"] p[style*="color:#888"],
[data-theme="light"] p[style*="color: #aaa"],
[data-theme="light"] p[style*="color:#aaa"],
[data-theme="light"] div[style*="color: #888"],
[data-theme="light"] div[style*="color:#888"],
[data-theme="light"] div[style*="color: #aaa"],
[data-theme="light"] div[style*="color:#aaa"],
[data-theme="light"] span[style*="color: #888"],
[data-theme="light"] span[style*="color:#888"] {
    color: #4b5563 !important; /* 强制覆盖为深灰黑色 */
}