/* CustomTkinter 风格基础色调 */
:root {
    --bg-color: #f5f5f5;
    --frame-bg-color: #f8f9fa;
    --border-color: #CCCCCC;
    --text-color: #000000;
    --button-bg-color: #3b8edb;
    --button-hover-color: #2e6ea5;
    --secondary-button-bg-color: #6c757d;
    --secondary-button-hover-color: #5a6268;
    --primary-button-bg-color: #28a745;
    --primary-button-hover-color: #218838;
    --text-color-white: #FFFFFF;
    --font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --border-radius: 8px;
    --padding-medium: 15px;
    --gap: 15px;
    --gap-small: 10px;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    margin: 0; padding: 0;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    color: var(--text-color);
}

.app-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1400px;
    margin: var(--gap);
    gap: var(--gap);
}

/* 原始的 header 样式，应用于桌面端 */
.header {
    display: flex;
    justify-content: space-between; /* 子元素两端对齐 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 20px; /* 保持与下方控制面板的间距 */
}
.header h1 { font-size: 24px; color: var(--text-color); margin-bottom: 5px; }
.header .subtitle { font-size: 14px; color: #666; }

/* 这是一个好的实践，确保标题组不会影响布局 */
.header-title-group {
    flex-grow: 1; /* 占据可用空间 */
    text-align: left; /* 默认左对齐，移动端会居中 */
}

/* 为“返回排位数据绘制”按钮添加一些边距，防止它紧贴右边缘 */
/* 注意：这里修正了ID，从 #ranked-preset-btn 改为 #reset-to-rank-btn */
#reset-to-rank-btn {
    margin-left: 20px;  /* 与左侧内容保持距离 */
    flex-shrink: 0;     /* 防止按钮在空间不足时被压缩 */
}

.control-panel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: flex-start;
}

.control-group {
    background-color: var(--frame-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--padding-medium);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-width: 260px;
}

#character-group {
    flex: 1.5;
    min-width: 320px;
}

.group-title {
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 5px;
    color: #333;
}

.control-item { display: flex; align-items: center; gap: 8px; }
.control-item label { font-size: 14px; white-space: nowrap; flex-shrink: 0; }
.export-label { margin-left: auto; }

.custom-select, .custom-input {
    flex-grow: 1;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: #FFFFFF;
    font-size: 14px;
    height: 38px;
    box-sizing: border-box;
}

.custom-input.small-input {
    flex-grow: 0;
    width: 70px;
    text-align: center;
}

.custom-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-6.5%200-12.3%203.2-16.1%208.1-3.8%204.9-4.8%2011-2.5%2017.2l128%20192c3.7%205.6%209.7%209.1%2016.4%209.1s12.7-3.5%2016.4-9.1l128-192c2.2-6.2%201.2-12.3-2.5-17.2z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat; background-position: right 10px top 50%; background-size: 12px auto;
    cursor: pointer;
}
.custom-select:disabled { background-color: #e9ecef; cursor: not-allowed; }

.custom-button {
    display: flex; align-items: center; justify-content: center;
    padding: 0 15px; border: none; border-radius: 5px;
    font-size: 14px; font-weight: bold; color: var(--text-color-white);
    cursor: pointer; transition: background-color 0.2s ease;
    height: 38px;
}
.custom-button:disabled { background-color: #a0a0a0; cursor: not-allowed; }
.custom-button.primary { background-color: var(--primary-button-bg-color); }
.custom-button.primary:hover:not(:disabled) { background-color: var(--primary-button-hover-color); }
.custom-button.secondary { background-color: var(--secondary-button-bg-color); }
.custom-button.secondary:hover:not(:disabled) { background-color: var(--secondary-button-hover-color); }
.custom-button.large { height: 42px; font-size: 16px; }
.custom-button.small { height: 32px; font-size: 13px; }
.custom-button.full-width { width: 100%; margin-top: auto; } /* 占满宽度并推到底部 */

/* --- 新增布局样式 --- */
.character-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 网格 */
    gap: var(--gap-small);
}

.metric-selectors-row {
    display: flex;
    gap: var(--gap-small);
}
/* --- 结束新增 --- */

.export-section {
    border-top: 1px solid #ddd;
    margin-top: 10px;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox-group { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 5px; }
.custom-checkbox-container { display: flex; align-items: center; cursor: pointer; user-select: none; font-size: 14px; }
.custom-checkbox-container input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; }
.custom-checkbox { height: 18px; width: 18px; background-color: #eee; border: 1px solid var(--border-color); border-radius: 3px; margin-right: 8px; display: inline-block; position: relative; }
.custom-checkbox-container input[type="checkbox"]:checked ~ .custom-checkbox { background-color: var(--button-bg-color); border-color: var(--button-bg-color); }
.custom-checkbox:after { content: ""; position: absolute; display: none; }
.custom-checkbox-container input[type="checkbox"]:checked ~ .custom-checkbox:after { display: block; left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); }

.chart-container { position: relative; background-color: #FFFFFF; border: 1px solid #ddd; border-radius: var(--border-radius); padding: var(--padding-medium); min-height: 600px; flex-grow: 1; }
.watermark-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(15deg); font-size: 40px; color: #AAAAAA; opacity: 0.2; pointer-events: none; }
.watermark-bottom { position: absolute; bottom: 10px; right: 15px; font-size: 12px; color: #AAAAAA; opacity: 0.7; pointer-events: none; }

.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 5px 15px;
    font-size: 13px;
    z-index: 9998;
    box-sizing: border-box;
    /* 新增：过渡动画，让出现和消失都变得平滑 */
    transition: transform 0.4s ease-in-out;
    transform: translateY(0%); /* 默认在屏幕内 */
}
.status-bar.error {
    background-color: #c0392b;
}
/* 新增：状态栏的隐藏样式 */
.status-bar.hidden {
    transform: translateY(100%); /* 移动到屏幕下方，从而隐藏 */
}
.toast-notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(33, 33, 33, 0.9); color: #FFFFFF; padding: 12px 24px; border-radius: 25px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 9999; font-size: 15px; font-weight: 500; opacity: 0; visibility: hidden; transform: translate(-50%, -20px); transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s; }
.toast-notification.active { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* 响应式调整: 平板电脑 */
@media (max-width: 1200px) {
    .control-group { min-width: calc(50% - var(--gap) / 2); }
    #character-group { min-width: calc(50% - var(--gap) / 2); }
}

/* 响应式调整: 手机 */
@media (max-width: 768px) {
    .control-group,
    #character-group {
        flex-basis: 100%;
        flex-grow: 0;
        min-width: 0;
    }
    .chart-container { min-height: 400px; }

    /* --- 优化头部布局 for 手机端 --- */
    .header {
        flex-direction: column; /* 垂直堆叠 */
        align-items: center;   /* 水平居中 */
        gap: 15px;             /* 标题和按钮之间的间距 */
    }

    .header-title-group {
        flex-grow: 0; /* 在垂直布局中不再需要占据空间 */
        width: 100%; /* 确保标题组能自适应宽度 */
        text-align: center; /* 标题文字居中 */
    }

    /* 让返回按钮在手机上可以占据更多宽度，方便点击 */
    #reset-to-rank-btn { /* 修正后的ID */
        width: 80%; /* 占据大部分宽度 */
        max-width: 250px; /* 但不至于过宽，防止在宽屏手机上过大 */
        margin-left: 0; /* 移除桌面端的左边距 */
    }
    /* --- 结束优化头部布局 --- */

    /* --- 新增响应式布局 --- */
    .character-grid-container {
        grid-template-columns: 1fr; /* 2x2 网格恢复为单列 */
    }
    .metric-selectors-row {
        flex-direction: column; /* 并排的指标恢复为垂直堆叠 */
    }
    /* --- 结束新增 --- */
}

/* 确保作为按钮的链接没有下划线，并继承颜色 */
a.custom-button,
a.custom-button:visited {
    text-decoration: none; /* 移除下划线 */
    color: inherit; /* 继承父元素或 class 定义的颜色 */
}

/* 移除这个可能与特定按钮hover冲突的通用规则，
   因为 .custom-button.secondary:hover 已经定义了具体的悬停样式。
a.custom-button:hover {
    background-color: #eee;
}
*/