/* ===== CSS变量定义 ===== */
:root {
    /* 颜色变量 */
    --primary-color: #1abc9c;
    --text-primary: #333;
    --text-secondary: #444;
    --text-tertiary: #555;
    --text-muted: #666;
    --text-lightest: #6c757d;
    --border-color: #efefef;
    --border-light: #f2f2f2;
    --border-lighter: #e5e5e5;
    --bg-white: #fff;
    --bg-light: #fefefe;
    --bg-lighter: #fafafa;
    --bg-lightest: #f8f9fa;
    --link-color: #3d68a8;
    --success-color: #1abc9c;
    --danger-color: #e74c3c;
    --warning-color: #ff7043;
    --info-color: #8e44ad;
    --error-color: #c0392b;
    --hover-border: #dcdcdc;
    --hover-bg: #f8f8f8;
    --special-border: #d0d0d0;
    --special-text: #2c3e50;
    --special-bg: #d9eee8;
    --focus-border: #1abc9c;
    --muted-text: #2d2d2d;
    --light-text: #495057;
    --no-record-border: #ddd;

    /* 圆角变量 */
    --radius-small: 3px;
    --radius-medium: 8px;
    --radius-large: 10px;
    --radius-circle: 50%;

    /* 间距变量 */
    --spacing-xs: 2px;
    --spacing-md: 6px;
    --spacing-lg: 8px;
    --spacing-xl: 10px;
    --spacing-xxl: 12px;
    --spacing-xxxl: 14px;

    /* 阴影变量 */
    --shadow-inset: inset 0 1px 1px rgba(0, 0, 0, 0.05);

    /* 过渡变量 */
    --transition-fast: 0.2s ease;
}

/* ===== 通用工具类 ===== */

/* 状态图标基础样式 */
.status-icon-base {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: var(--radius-circle);
    color: white;
    font-size: 11px;
    font-weight: bold;
    margin-right: var(--spacing-md);
    vertical-align: middle;
    transform: translateY(-1px);
}

/* Flex布局工具类 */
.flex-center {
    display: flex;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* 过渡效果工具类 */
.transition-bg {
    transition: background-color var(--transition-fast);
}

.transition-border {
    transition: border-color var(--transition-fast);
}

.transition-shadow {
    transition: box-shadow var(--transition-fast);
}

.transition-all {
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* ===== 通用样式（无命名空间限制） ===== */

/* 随机按钮样式 - 匹配旧版风格 */
.random-btn {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 5px;
    background: linear-gradient(#f4f4f4, #ececec);
    border: 1px solid #d4d4d4;
    border-radius: var(--radius-small);
    color: var(--text-primary);
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    line-height: 18px;
    transform: translateY(-3px);
}

.random-btn:hover {
    border-color: #3072b3;
    background: linear-gradient(#599bdc, #3072b3);
    color: var(--bg-white);
    text-decoration: none;
}

/* ===== Add 页面样式 (Old.css) ===== */

/* 卡片容器样式 */
.page-add .info-group,
.page-add .qa-card,
.page-add .form-card {
    margin: 5px 0 10px;
    padding: var(--spacing-xxl) var(--spacing-xxxl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-large);
    background-color: var(--bg-light);
}

/* 说明文本卡片 */
.page-add .note-text {
    margin: var(--spacing-xxl) var(--spacing-xs) 0;
    padding: var(--spacing-xl) var(--spacing-xxl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-medium);
    background-color: var(--bg-light);
    color: var(--text-tertiary);
    font-size: 15px;
    line-height: 26px;
}

/* 圆形复选框样式 */
.page-add .answer-choice input[type="radio"],
.page-add .answer-label-with-checkbox input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* 自定义圆形图标 */
.page-add .answer-icon {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border: 1px solid var(--special-border);
    border-radius: var(--radius-circle);
    background-color: var(--bg-white);
    box-shadow: var(--shadow-inset);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-fast);
}

/* 选中状态的外圈颜色 */
.page-add .answer-choice input[type="radio"]:checked + .answer-icon,
.page-add .answer-label-with-checkbox input[type="radio"]:checked + .answer-icon {
    border-color: var(--primary-color);
}

/* 选中状态的实心圆 - 统一样式 */
.page-add .answer-choice input[type="radio"]:checked + .answer-icon::after,
.page-add .answer-label-with-checkbox input[type="radio"]:checked + .answer-icon::after {
    content: "";
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    border-radius: var(--radius-circle);
    background-color: var(--primary-color);
}

/* Doit页面特有的定位方式 */
.page-add .answer-choice input[type="radio"]:checked + .answer-icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Add页面特有的显示方式 */
.page-add .answer-label-with-checkbox input[type="radio"]:checked + .answer-icon::after {
    display: block;
}

/* Doit页面特有样式 */
.page-add .info-group {
    line-height: 30px;
}

.page-add .info-row {
    display: flex;
    align-items: baseline;
    color: var(--text-secondary);
}

.page-add .info-row + .info-row {
    margin-top: 4px;
}

.page-add .info-label {
    color: var(--text-muted);
    font-weight: 500;
}

.page-add .info-value {
    color: var(--text-primary);
    flex: 1;
}

.page-add .qa-question {
    display: flex;
    align-items: baseline;
    margin-bottom: 12px;
}

.page-add .qa-question .question-label {
    color: var(--primary-color);
    font-weight: 700;
}

.page-add .qa-question .question-text {
    color: var(--special-text);
    font-weight: 600;
    line-height: 30px;
}

.page-add .qa-card .answer-form {
    padding: 12px 0 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
}

.page-add .qa-result {
    padding-top: 12px;
    border-top: 1px dashed var(--special-bg);
    color: var(--text-secondary);
    line-height: 28px;
}

.page-add .qa-result-status {
    margin-top: 6px;
    font-weight: 600;
}

.page-add .qa-result-win {
    color: var(--primary-color);
}

.page-add .qa-result-lose {
    color: var(--error-color);
}

/* 答案列表样式 - Doit页面 */
.page-add .answer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 6px;
}

.page-add .answer-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--spacing-lg) var(--spacing-xxl);
    border: 1px solid #eaeaea;
    border-radius: var(--radius-medium);
    background-color: var(--bg-white);
    line-height: 26px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.page-add .answer-choice:hover {
    border-color: var(--hover-border);
    background-color: var(--hover-bg);
}

.page-add .answer-choice:focus-within {
    border-color: var(--focus-border);
    box-shadow: 0 0 0 2px rgba(26, 188, 156, 0.08);
}

.page-add .answer-title {
    color: var(--text-primary);
    font-weight: 600;
}

.page-add .answer-text {
    color: var(--text-tertiary);
    flex: 1;
}

/* Add页面特有样式 */

/* 表单容器 - 使用CSS自定义属性定义统一宽度 */
.page-add .form-container {
    --form-max-width: 550px; /* 统一的最大宽度 */
    --gap-size: 10px; /* 间距大小 */
}

/* 表单字段组 */
.page-add .form-field {
    margin-bottom: 12px; /* 增加字段间距 */
}

.page-add .form-field label {
    margin-bottom: 13px; /* 标签与输入框间距 */
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.4; /* 增加标签行高 */
}

/* 单个输入框 - 直接使用统一宽度 */
.page-add .single-input {
    width: 100%;
    max-width: var(--form-max-width);
    box-sizing: border-box;
    transform: translateY(-6px);
    font-size: 15px;
}

/* 并排输入框容器 */
.page-add .dual-input-container {
    display: flex;
    gap: var(--gap-size);
    max-width: var(--form-max-width);
    margin-top: 8px; /* 轻微增加上边距 */
}

.page-add .dual-input-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-add .dual-input-item input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    transform: translateY(-6px);
    font-size: 15px;
}

/* 答案标签样式 - 包含圆形复选框 */
.page-add .answer-label-with-checkbox {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 8px; /* 增加复选框间距 */
    cursor: pointer;
    line-height: 1.3; /* 增加行高 */
}

/* 答案标题样式 */
.page-add .answer-label-text {
    color: var(--text-secondary);
    font-weight: 600;
    line-height: 1.2;
    user-select: none;
}

/* 选中状态文字颜色统一样式 */
.page-add .answer-choice input[type="radio"]:checked ~ .answer-title,
.page-add .answer-choice input[type="radio"]:checked ~ .answer-text,
.page-add .answer-label-with-checkbox input[type="radio"]:checked ~ .answer-label-text {
    color: var(--primary-color);
    font-weight: 600;
}

/* hover效果 */
.page-add .answer-label-with-checkbox:hover .answer-icon {
    border-color: #bbb;
}
.page-add .answer-label-with-checkbox:hover .answer-label-text {
    color: var(--primary-color);
}

/* 提交按钮容器 */
.page-add .submit-container {
    max-width: var(--form-max-width);
}

/* 确定按钮样式 - 统一padding */
.page-add .answer-form input[type="submit"],
.page-add .form-card input[type="submit"] {
    padding: 6px 16px;
}

/* ===== Detail 页面样式 (OldDetail.css) ===== */

.page-detail .detail-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-large);
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    line-height: 1.9;
}

.page-detail .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px 18px;
    margin-bottom: 16px;
}

.page-detail .detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fafafa;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-medium);
    padding: var(--spacing-lg) var(--spacing-xxl);
}

.page-detail .detail-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 600;
}

.page-detail .detail-value {
    font-size: 16px;
    color: var(--muted-text);
}
.page-detail span.detail-value a{ font-size: unset; }

.page-detail .detail-question {
    margin: 14px 0;
    padding: var(--spacing-xxl) var(--spacing-xxxl);
    border-left: 3px solid #1abc9c;
    border-radius: var(--radius-medium);
    background: #f5fbf9;
}

.page-detail .question-title {
    color: var(--primary-color);
    font-weight: 700;
}

.page-detail .question-text {
    font-size: 17px;
    color: var(--text-primary);
}

.page-detail .answer-list {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-medium);
    overflow: hidden;
    margin-bottom: 18px;
}

.page-detail .answer-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--spacing-xl) var(--spacing-xxl);
    background: var(--bg-white);
}

.page-detail .answer-line + .answer-line {
    border-top: 1px dashed var(--border-lighter);
}

.page-detail .answer-index {
    min-width: 56px;
    color: var(--text-secondary);
    font-weight: 600;
}

.page-detail .answer-text {
    color: var(--text-tertiary);
}

.page-detail .status-block {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-medium);
    padding: var(--spacing-xxl) var(--spacing-xxxl);
    background: #fbfbfb;
}

.page-detail .status-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.page-detail .status-line + .status-line {
    border-top: 1px dashed #ededed;
}

.page-detail .status-label {
    color: #777;
}

.page-detail .status-value {
    font-weight: 600;
    color: var(--text-primary);
}

.page-detail .status-open {
    color: var(--primary-color);
}

.page-detail .status-finished {
    color: var(--warning-color);
}

.page-detail .status-draw {
    color: var(--info-color);
}

.page-detail .creation-time {
    margin-top: 18px;
    padding: var(--spacing-xxl) var(--spacing-xxxl);
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: var(--radius-medium);
    color: var(--text-lightest);
    font-size: 14px;
}

.page-detail .time-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.page-detail .time-line + .time-line {
    border-top: 1px dashed #e0e0e0;
    margin-top: 4px;
    padding-top: 8px;
}

.page-detail .time-label {
    color: var(--text-lightest);
    font-weight: normal;
}

.page-detail .time-value {
    color: var(--light-text);
    font-weight: 500;
}

/* ===== List 页面样式 (OldList.css) ===== */

/* 游戏记录列表容器 */
.page-list .game-records {
    margin: 0;
    padding: 0;
}

/* 单条记录样式 */
.page-list .record-item {
    border-radius: var(--radius-medium);
    margin-bottom: 3px;
    padding: var(--spacing-xxl) var(--spacing-xxxl);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* 悬停效果 */
.page-list .record-item:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: box-shadow var(--transition-fast);
}

/* 记录头部 */
.page-list .record-header {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 28px;
}

/* ID样式 */
.page-list .record-id {
    color: var(--muted-text);
    margin-right: var(--spacing-md);
    white-space: nowrap;
    flex-shrink: 0;
}

.page-list .record-id a {
    color: var(--link-color);
    text-decoration: none;
    padding: 1px 3px;
    border-radius: var(--radius-small);
    transition: background-color var(--transition-fast);
    font-size: unset;
}

.page-list .record-id a:hover {
    background-color: rgba(61, 104, 168, 0.1);
    text-decoration: none;
}

/* 状态文本样式 */
.page-list .record-status {
    flex: 1;
    color: var(--text-secondary);
    line-height: 28px;
    word-break: break-word;
}

/* 状态图标公共样式 */
.page-list .status-win::before,
.page-list .status-lose::before,
.page-list .status-ongoing::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: var(--radius-circle);
    color: white;
    font-size: 11px;
    font-weight: bold;
    margin-right: var(--spacing-md);
    vertical-align: middle;
    transform: translateY(-1px);
}

/* 获胜状态 */
.page-list .status-win {
    position: relative;
}

.page-list .status-win::before {
    content: "✓";
    background-color: var(--success-color);
}

/* 失败状态 */
.page-list .status-lose {
    position: relative;
}

.page-list .status-lose::before {
    content: "✗";
    background-color: var(--danger-color);
}

/* 进行中状态 */
.page-list .status-ongoing {
    position: relative;
}

.page-list .status-ongoing::before {
    content: "⏳";
    font-size: 12px;
    background-color: transparent;
}

/* 强调文本样式 */
.page-list .record-status strong {
    color: var(--muted-text);
    font-weight: 600;
    padding: 0 3px;
    border-radius: 2px;
}

/* 用户链接样式 */
.page-list .record-status a {
    color: var(--link-color);
    text-decoration: none;
    padding: 1px 3px;
    border-radius: var(--radius-small);
    transition: background-color var(--transition-fast);
    font-size: unset;
}

.page-list .record-status a:hover {
    background-color: rgba(61, 104, 168, 0.1);
    text-decoration: none;
}

/* 无记录提示样式 */
.page-list .no-records {
    padding: 40px 0 20px;
    text-align: center;
    color: #999;
    border-radius: var(--radius-medium);
    margin: 20px 0;
}

.page-list .no-records::before {
    content: "📝";
    display: block;
    font-size: 48px;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* 改进背景条纹效果 */
.page-list .record-item.line1 {
    background-color: #fdfdfd;
}

.page-list .record-item.line2 {
    background-color: var(--bg-lightest);
}

/* ===== 响应式媒体查询（整合） ===== */

@media (max-width: 600px) {
    /* Add页面响应式 */
    .page-add .form-container {
        --form-max-width: 95%; /* 小屏幕时使用百分比 */
    }

    /* List页面响应式 */
    .page-list .record-item {
        padding: var(--spacing-xl) var(--spacing-xxl);
    }

    .page-list .record-header {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .page-list .record-id {
        margin-right: 0;
        margin-bottom: 2px;
    }
}

@media (max-width: 480px) {
    /* Detail页面响应式 */
    .page-detail .detail-grid {
        gap: 10px;
    }

    /* List页面响应式 */
    .page-list .status-win::before,
    .page-list .status-lose::before,
    .page-list .status-ongoing::before {
        width: 14px;
        height: 14px;
        line-height: 14px;
        font-size: 10px;
        margin-right: 5px;
    }
}

@media (max-width: 410px) {
    /* Detail页面响应式 */
    .page-detail .detail-card {
        padding: 14px;
    }

    .page-detail .status-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (max-width: 400px) {
    /* List页面响应式 */
    .page-list .record-item {
        padding: 8px 10px;
        margin-bottom: 2px;
    }

    .page-list .record-status {
        font-size: 16px;
        line-height: 26px;
    }
}

@media (max-width: 320px) {
    /* List页面响应式 */
    .page-list .record-header {
        gap: 2px;
    }
}

@media (max-width: 300px) {
    /* Add页面响应式 */
    .page-add .dual-input-container {
        flex-direction: column;
        gap: 0;
    }

    .page-add .dual-input-item {
        margin-bottom: 15px;
    }

    /* Detail页面响应式 */
    .page-detail .creation-time {
        margin-top: 14px;
        padding: var(--spacing-xl) var(--spacing-xxl);
        font-size: 13px;
    }
}

@media (max-width: 280px) {
    /* Add页面响应式 */
    .page-add .answer-choice {
        padding: 6px;
    }
}