/* ========== 材料查找器样式 - 已添加暗夜模式支持 ========== */
.material-finder-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.finder-method-selector {
    margin-bottom: 30px;
}

.method-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.method-tab {
    padding: 10px 20px;
    background: #f1f5f9; /* 与主标签一致 */
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.method-tab.active {
    background: #1d4ed8; /* 更深的蓝色，与暗夜模式对应 */
    color: white;
    border-color: #1d4ed8;
}

.method-tab:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}
/* 暗夜模式下的标签页 */
:root[data-theme="dark"] .method-tab {
    background: #374151; /* 更深的灰色 */
    border-color: #4b5563;
    color: #e5e7eb; /* 更亮的文字 */
}

:root[data-theme="dark"] .method-tab.active {
    background: #1d4ed8; /* 更深的蓝色 */
    color: white;
    border-color: #1d4ed8;
}

:root[data-theme="dark"] .method-tab:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.finder-section {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* 暗夜模式下的查找器区域 */
:root[data-theme="dark"] .finder-section {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.filter-controls, .search-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.filter-item, .search-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.filter-item label, .search-input-group label {
    color: #374151;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
    transition: color 0.3s ease;
}

/* 暗夜模式下的标签 */
:root[data-theme="dark"] .filter-item label,
:root[data-theme="dark"] .search-input-group label {
    color: var(--text-primary);
}

.filter-item select, .search-input {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-size: 14px;
    transition: all 0.2s ease;
}

.filter-item select:focus, .search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 暗夜模式下的输入框 */
:root[data-theme="dark"] .filter-item select,
:root[data-theme="dark"] .search-input {
    background: #2d3748;
    border-color: #4a5568;
    color: var(--text-primary);
}

:root[data-theme="dark"] .filter-item select:focus,
:root[data-theme="dark"] .search-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.filter-actions, .search-actions {
    display: flex;
    justify-content: center;
}

.btn-find {
    padding: 10px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-find:hover {
    background: #2563eb;
}

.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 暗夜模式下的搜索建议 */
:root[data-theme="dark"] .search-suggestions {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.search-suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s;
    color: #374151;
}

.search-suggestion-item:hover {
    background: #f8fafc;
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

/* 暗夜模式下的搜索建议项 */
:root[data-theme="dark"] .search-suggestion-item {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

:root[data-theme="dark"] .search-suggestion-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.finder-results {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

/* 暗夜模式下的结果区域 */
:root[data-theme="dark"] .finder-results {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.target-item-info {
    background: #f8fafc;
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

/* 暗夜模式下的目标物品信息 */
:root[data-theme="dark"] .target-item-info {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}

.target-item-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.target-item-image {
    width: 80px;
    height: 60px;
    background: #4b5563;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.target-item-details {
    flex: 1;
}

.target-item-name {
    font-size: 16px;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

/* 暗夜模式下的物品名称 */
:root[data-theme="dark"] .target-item-name {
    color: #60a5fa;
}

.target-item-collection, .target-item-quality, .target-item-wear, .target-item-tradeup {
    color: #6b7280;
    margin-bottom: 4px;
    font-size: 13px;
    transition: color 0.3s ease;
}

/* 暗夜模式下的物品信息 */
:root[data-theme="dark"] .target-item-collection,
:root[data-theme="dark"] .target-item-quality,
:root[data-theme="dark"] .target-item-wear,
:root[data-theme="dark"] .target-item-tradeup {
    color: #cbd5e1;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.material-card {
    background: #ffffff;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.material-card:hover {
    transform: translateY(-2px);
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 暗夜模式下的材料卡片 */
:root[data-theme="dark"] .material-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .material-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.material-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.material-image {
    width: 60px;
    height: 45px;
    background: #4b5563;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.material-info {
    flex: 1;
}

.material-name {
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 4px;
    font-size: 14px;
    transition: color 0.3s ease;
}

/* 暗夜模式下的材料名称 */
:root[data-theme="dark"] .material-name {
    color: #60a5fa;
}

.material-quality {
    color: #6b7280;
    font-size: 13px;
    transition: color 0.3s ease;
}

/* 暗夜模式下的材料品质 */
:root[data-theme="dark"] .material-quality {
    color: #cbd5e1;
}

.material-wear-range {
    background: #f8fafc;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

/* 暗夜模式下的磨损范围 */
:root[data-theme="dark"] .material-wear-range {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}

.wear-range-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.wear-range-item:last-child {
    margin-bottom: 0;
}

.wear-label {
    color: #6b7280;
    font-size: 13px;
    transition: color 0.3s ease;
}

.wear-value {
    color: #374151;
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    transition: color 0.3s ease;
}

/* 暗夜模式下的磨损文本 */
:root[data-theme="dark"] .wear-label {
    color: #cbd5e1;
}

:root[data-theme="dark"] .wear-value {
    color: var(--text-primary);
}

.no-materials {
    text-align: center;
    padding: 40px;
    color: #9ca3af;
    font-size: 16px;
    grid-column: 1 / -1;
    transition: color 0.3s ease;
}

/* 暗夜模式下的无材料提示 */
:root[data-theme="dark"] .no-materials {
    color: #94a3b8;
}

/* 添加这些新样式 */
.materials-section-header {
    grid-column: 1 / -1;
    margin: 20px 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #374151;
    transition: border-color 0.3s ease;
}

/* 暗夜模式下的材料区域标题 */
:root[data-theme="dark"] .materials-section-header {
    border-bottom-color: var(--border-color);
}

.materials-section-header h4 {
    color: #60a5fa;
    margin: 0;
    transition: color 0.3s ease;
}

/* 修改高亮样式 */
.material-card[style*="border-left: 4px solid #10b981"] {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, #ffffff 4%);
    border-left: 4px solid #10b981 !important;
}

/* 暗夜模式下的绿色高亮 */
:root[data-theme="dark"] .material-card[style*="border-left: 4px solid #10b981"] {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, var(--card-bg) 4%);
    border-left: 4px solid #10b981 !important;
}

.material-card[style*="border-left: 4px solid #f59e0b"] {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, #ffffff 4%);
    border-left: 4px solid #f59e0b !important;
}

/* 暗夜模式下的橙色高亮 */
:root[data-theme="dark"] .material-card[style*="border-left: 4px solid #f59e0b"] {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.15) 0%, var(--card-bg) 4%);
    border-left: 4px solid #f59e0b !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .filter-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .materials-grid {
        grid-template-columns: 1fr;
    }
    
    .target-item-header {
        flex-direction: column;
        text-align: center;
    }
    
    .method-tabs {
        flex-direction: column;
    }
    
    .material-finder-container {
        padding: 10px;
    }
}

/* ========== 10合计算器样式 - 已添加暗夜模式支持 ========== */
#tenComboDiv {
    padding: 20px;
}

.ten-combo-container {
    display: flex;
    gap: 30px;
    /* 宽屏不再无限拉伸：面板定宽居中，槽位里的皮肤框才不会长成一条 */
    max-width: 1280px;
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    min-height: 70vh;
    transition: all 0.3s ease;
    /* content-box 下 padding 会加到宽度外面，内层区域会溢出容器边框 */
    box-sizing: border-box;
}

/* 暗夜模式下的10合容器 */
:root[data-theme="dark"] .ten-combo-container {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.combo-inputs-section {
    flex: 1;
    min-width: 700px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* 暗夜模式下的输入区域 */
:root[data-theme="dark"] .combo-inputs-section {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}

.combo-controls-section {
    width: 350px;
    flex-shrink: 0;
    padding: 20px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.combo-inputs-section h3,
.combo-controls-section h3 {
    color: #374151;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

/* 暗夜模式下的标题 */
:root[data-theme="dark"] .combo-inputs-section h3,
:root[data-theme="dark"] .combo-controls-section h3 {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

/* 一键填充区域 */
.bulk-fill-section {
    margin: 0 0 20px 0;
    padding: 16px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

/* 暗夜模式下一键填充区域 */
:root[data-theme="dark"] .bulk-fill-section {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.bulk-fill-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

.bulk-fill-label {
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
    transition: color 0.3s ease;
}

/* 暗夜模式下的标签 */
:root[data-theme="dark"] .bulk-fill-label {
    color: var(--text-primary);
}

.bulk-fill-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    margin: 0;
    min-width: 300px;
    transition: all 0.3s ease;
}

.bulk-fill-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 暗夜模式下的输入框 */
:root[data-theme="dark"] .bulk-fill-input {
    background: #2d3748;
    border-color: #4a5568;
    color: var(--text-primary);
}

:root[data-theme="dark"] .bulk-fill-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.bulk-fill-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
    min-width: 120px;
}

.bulk-fill-btn:hover {
    background: #2563eb;
}

/* ---------------------------------------------------------------------------
   汰换模拟器：材料槽位列表
   一行放下全部输入框（皮肤 · 材料磨损 · 最小 · 最大），数值框按「最长 6 字符」收紧
   --------------------------------------------------------------------------- */

/* 项目全局是 content-box：width:100% 的输入框会把 padding/border 加到外面，
   在 grid 槽位里会比列宽多出 18px，导致相邻列互相叠压、窄屏横向溢出。
   这里对槽位体系统一改为 border-box。 */
.slot-list,
.slot-row,
.slot-main,
.slot-cell,
.slot-no,
.slot-actions,
.slot-btn,
.picker-box,
.picker-input,
.picker-chip,
.num-input,
.product-wear-controls,
.product-control-item,
.product-short-input {
    box-sizing: border-box;
}

.slot-list {
    display: flex;
    flex-direction: column;
    margin: 14px 0 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}
:root[data-theme="dark"] .slot-list {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.slot-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 69px;
    align-items: end;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.slot-row:last-child { border-bottom: none; }
.slot-row:hover { background: rgba(148, 163, 184, 0.07); }
/* 复刻成功后短暂高亮，给出反馈 */
.slot-row.is-cloned { box-shadow: inset 0 0 0 2px rgba(34, 211, 238, 0.55); }

.slot-no {
    align-self: end;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background: rgba(148, 163, 184, 0.18);
    border-radius: 6px;
}
:root[data-theme="dark"] .slot-no {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.14);
}

.slot-main {
    display: grid;
    /* 皮肤搜索框弹性伸缩但不再无限变长；三个数值框按「完整显示 6 位小数」定尺，
       宽屏下也不会被挤成一条窄缝 */
    grid-template-columns: minmax(160px, 1fr) minmax(102px, 126px) minmax(86px, 106px) minmax(86px, 106px);
    gap: 8px;
    align-items: end;
    min-width: 0;
}

/* 宽屏：三个数值框直接参与 .slot-main 的四列网格，不额外占一层盒子 */
.slot-nums { display: contents; }

.slot-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.slot-label {
    font-size: 10px;
    line-height: 1;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picker-box { position: relative; min-width: 0; }

/* 磨损数值输入框 */
.num-input {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.num-input:focus {
    outline: none;
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
}
:root[data-theme="dark"] .num-input {
    background: rgba(15, 23, 42, 0.45);
    border-color: var(--border-color);
    color: #e5e7eb;
}
:root[data-theme="dark"] .num-input:focus {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}

/* 行操作：复刻上一行 / 清空本行 */
.slot-actions {
    display: flex;
    gap: 5px;
    align-items: end;
    justify-content: flex-end;
}

.slot-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}
.slot-btn:hover:not(:disabled) {
    border-color: #22d3ee;
    color: #0e7490;
    background: rgba(34, 211, 238, 0.10);
}
.slot-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.slot-btn.slot-btn--danger:hover {
    border-color: #ef4444;
    color: #dc2626;
    background: rgba(239, 68, 68, 0.10);
}
:root[data-theme="dark"] .slot-btn {
    background: rgba(15, 23, 42, 0.45);
    border-color: var(--border-color);
    color: #cbd5e1;
}

.picker-input {
    width: 100%;
    height: 32px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12.5px;
    background: #ffffff;
    color: #111827;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:root[data-theme="dark"] .picker-input {
    background: rgba(15, 23, 42, 0.45);
    border-color: var(--border-color);
    color: #e5e7eb;
}
.picker-input:focus {
    outline: none;
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
}

.picker-suggest {
    display: none;
    position: absolute;
    z-index: 40;
    top: calc(100% - 2px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}
:root[data-theme="dark"] .picker-suggest {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.picker-item:last-child { border-bottom: none; }
.picker-item:hover { background: rgba(34, 211, 238, 0.12); }
.picker-item.is-off { cursor: not-allowed; opacity: 0.55; }
.picker-item.is-off:hover { background: transparent; }

.picker-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.14);
    border-radius: 5px;
    overflow: hidden;
}
.picker-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

.picker-text { flex: 1 1 auto; min-width: 0; }
.picker-text .n {
    font-size: 12.5px; color: #111827;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-text .c {
    font-size: 11px; color: #6b7280;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:root[data-theme="dark"] .picker-text .n { color: #e5e7eb; }
:root[data-theme="dark"] .picker-text .c { color: #94a3b8; }

.picker-off {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 999px;
    padding: 1px 7px;
    white-space: nowrap;
}

.picker-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.10);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.picker-chip:hover { border-color: #22d3ee; background: rgba(34, 211, 238, 0.16); }
.picker-chip .picker-thumb { width: 34px; height: 24px; }

/* 模拟结果 */
.ten-sim { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.ten-sim h4 { margin: 0; font-size: 15px; }
.ten-sim .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.sim-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12.5px;
    color: #475569;
}
:root[data-theme="dark"] .sim-meta { color: #94a3b8; }

.sim-note,
.sim-warn,
.sim-error {
    font-size: 12.5px;
    line-height: 1.6;
    padding: 8px 12px;
    border-radius: 8px;
}
.sim-note { background: rgba(148, 163, 184, 0.12); color: #475569; }
:root[data-theme="dark"] .sim-note { color: #94a3b8; }
.sim-warn {
    background: rgba(251, 191, 36, 0.12);
    color: #b45309;
    border: 1px solid rgba(251, 191, 36, 0.4);
}
.sim-error {
    background: rgba(248, 113, 113, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(248, 113, 113, 0.4);
}

/* 产物设置：设置项并排一行，标题 / 按钮 / 结果区独占整行 */
.product-wear-controls {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 18px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    margin: 0;
    transition: all 0.3s ease;
}
/* 标题、按钮、结果区、附加面板独占整行。
   项目全局是 content-box，flex-basis:100% 会把 padding 加到外面撑破容器，必须显式 border-box */
.product-wear-controls > *:not(.product-control-item) {
    flex: 1 0 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* 暗夜模式下的产品磨损控制 */
:root[data-theme="dark"] .product-wear-controls {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.product-control-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    flex: 1 1 170px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.product-control-item label {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    transition: color 0.3s ease;
}

/* 暗夜模式下的产品控制标签 */
:root[data-theme="dark"] .product-control-item label {
    color: #94a3b8;
}

.product-short-input {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    margin: 0;
    transition: all 0.2s ease;
}

.product-short-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 暗夜模式下的短输入框 */
:root[data-theme="dark"] .product-short-input {
    background: #2d3748;
    border-color: #4a5568;
    color: var(--text-primary);
}

:root[data-theme="dark"] .product-short-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.btn-calculate-ten {
    background: #10b981;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    margin: 16px 0 0 0;
    width: 100%;
}

.btn-calculate-ten:hover {
    background: #0da271;
}

.result-section {
    margin: 20px 0 0 0;
    padding: 16px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 6px;
    display: none;
    transition: all 0.3s ease;
}

/* 暗夜模式下的结果区域 */
:root[data-theme="dark"] .result-section {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.result-section h4 {
    color: #065f46;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px 0;
    transition: color 0.3s ease;
}

/* 暗夜模式下的结果标题 */
:root[data-theme="dark"] .result-section h4 {
    color: #10b981;
}

.result-output {
    color: #065f46;
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
    padding: 12px;
    background: #ffffff;
    border-radius: 4px;
    text-align: center;
    border: 1px solid #d1fae5;
    line-height: 1.5;
    transition: all 0.3s ease;
}

/* 暗夜模式下的结果输出 */
:root[data-theme="dark"] .result-output {
    color: #10b981;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(16, 185, 129, 0.3);
}

.detailed-results {
    color: #374151;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    transition: color 0.3s ease;
}

/* 暗夜模式下的详细结果 */
:root[data-theme="dark"] .detailed-results {
    color: var(--text-primary);
}

.detailed-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #e5e7eb;
    margin: 0;
    transition: border-color 0.3s ease;
}

.detailed-item:last-child {
    border-bottom: none;
}

/* 暗夜模式下的详细项 */
:root[data-theme="dark"] .detailed-item {
    border-bottom-color: var(--border-color);
}

/* IEEE754转换器样式 - 已添加暗夜模式支持 */
.converter-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.converter-section {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* 暗夜模式下的转换器区域 */
:root[data-theme="dark"] .converter-section {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.input-group {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
}

.converter-input {
    flex: 1;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-size: 14px;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.3s ease;
}

.converter-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 暗夜模式下的转换器输入框 */
:root[data-theme="dark"] .converter-input {
    background: #2d3748;
    border-color: #4a5568;
    color: var(--text-primary);
}

:root[data-theme="dark"] .converter-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.btn-clear-converter {
    background: #ef4444;
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
}

.example-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.example-label {
    color: #6b7280;
    font-weight: 500;
    font-size: 13px;
    transition: color 0.3s ease;
}

/* 暗夜模式下的示例标签 */
:root[data-theme="dark"] .example-label {
    color: #94a3b8;
}

.example-btn {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.example-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

/* 暗夜模式下的示例按钮 */
:root[data-theme="dark"] .example-btn {
    background: #374151;
    border-color: #4a5568;
    color: var(--text-primary);
}

:root[data-theme="dark"] .example-btn:hover {
    background: #4a5568;
    border-color: #6b7280;
}

.results-section {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* 暗夜模式下的结果区域 */
:root[data-theme="dark"] .results-section {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

#ieee754ConverterDiv .result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f8fafc;
    border-radius: 6px;
    transition: all 0.3s ease;
}

#ieee754ConverterDiv .result-item.full-width {
    grid-column: 1 / -1;
}

/* 暗夜模式下的结果项 */
:root[data-theme="dark"] #ieee754ConverterDiv .result-item {
    background: rgba(255, 255, 255, 0.05);
}

#ieee754ConverterDiv .result-item label {
    color: #374151;
    font-weight: 500;
    min-width: 120px;
    font-size: 14px;
    transition: color 0.3s ease;
}

/* 暗夜模式下的结果标签 */
:root[data-theme="dark"] #ieee754ConverterDiv .result-item label {
    color: var(--text-primary);
}

.result-value {
    color: #374151;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    transition: color 0.3s ease;
}

.result-value.highlight {
    color: #10b981;
    font-weight: 600;
    font-size: 15px;
}

.result-value.error {
    color: #ef4444;
}

.result-value.mono {
    font-family: 'JetBrains Mono', monospace;
    background: #f3f4f6;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* 暗夜模式下的结果值 */
:root[data-theme="dark"] .result-value {
    color: var(--text-primary);
}

:root[data-theme="dark"] .result-value.mono {
    background: rgba(255, 255, 255, 0.1);
}

.comparison-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    transition: border-color 0.3s ease;
}

/* 暗夜模式下的比较区域 */
:root[data-theme="dark"] .comparison-section {
    border-top-color: var(--border-color);
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.comparison-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: #f8fafc;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* 暗夜模式下的比较项 */
:root[data-theme="dark"] .comparison-item {
    background: rgba(255, 255, 255, 0.05);
}

.action-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.btn-copy {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.btn-copy:hover {
    background: #2563eb;
}

.info-section {
    background: #f8fafc;
    padding: 16px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

/* 暗夜模式下的信息区域 */
:root[data-theme="dark"] .info-section {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}

.info-content {
    color: #6b7280;
    line-height: 1.5;
    font-size: 13px;
    transition: color 0.3s ease;
}

/* 暗夜模式下的信息内容 */
:root[data-theme="dark"] .info-content {
    color: #cbd5e1;
}

.info-content p {
    margin: 8px 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .ten-combo-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .combo-inputs-section {
        min-width: auto;
        width: 100%;
    }
    
    .combo-controls-section {
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* 窄屏把嵌套内边距压到最小：这两层都是 content-box，
       每 1px 内边距都会从槽位输入框的可用宽度里被扣掉，320px 屏上尤其明显 */
    .ten-combo-container {
        margin: 8px;
        padding: 10px;
        gap: 20px;
    }
    
    .combo-inputs-section,
    .combo-controls-section {
        padding: 10px;
    }
    
    .bulk-fill-controls {
        flex-direction: column;
        gap: 12px;
    }
    
    .bulk-fill-input {
        min-width: auto;
        width: 100%;
    }
    
    /* IEEE754转换器响应式 */
    .result-grid,
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .converter-container {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .material-finder-container {
        padding: 10px;
    }
    
    .ten-combo-container {
        margin: 10px;
        padding: 12px;
    }
    
    .converter-container {
        padding: 12px;
    }
}

/* ---------------------------------------------------------------------------
   汰换模拟器：窄屏槽位布局
   皮肤独占第一行，材料磨损 / 最小 / 最大 平分第二行。
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* 本面板宽度要先被 tabcontent / 容器 / 分区三层内边距吃掉，最外层再收紧一次 */
    #tenComboDiv.tabcontent { padding: 10px; }
    /* 窄屏排成两行：第 1 行 编号 · 皮肤 · 行操作；第 2 行 三个数值框独占整行。
       拆开 .slot-main 的子元素（display:contents）后数值框才能用满整行宽度，
       否则会被挤在皮肤那一列里，6 位小数显示不全。 */
    .slot-row {
        grid-template-columns: 22px minmax(0, 1fr) 58px;
        grid-template-areas:
            "no picker actions"
            "nums nums nums";
        gap: 8px 6px;
        padding: 10px 8px;
    }
    .slot-main { display: contents; }
    .slot-no { grid-area: no; }
    .slot-actions { grid-area: actions; gap: 4px; }
    .slot-cell--picker { grid-area: picker; }
    .slot-nums {
        grid-area: nums;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    /* 窄屏收紧行操作按钮，把省下的宽度让给数值输入框 */
    .slot-btn {
        width: 27px;
        height: 27px;
        font-size: 12px;
    }
}