/* Quiz Module Specific Styles */

.quiz-container {
    max-width: 800px;
    margin: 0 auto;
}

.setup-panel {
    background-color: var(--surface-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

#raw-text {
    width: 100%;
    height: 200px;
    background-color: var(--background-color);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    font-family: inherit;
    margin-bottom: 1rem;
    resize: vertical;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#raw-text:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-soft);
}

#quiz-area {
    background-color: var(--surface-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    border: 1px solid var(--border-color);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-main);
    display: none; /* 初始隐藏，由 JS 控制显示 */
}

/* --- Spoiler (答案遮盖) 核心样式 --- */

/* --- 基础样式 --- */
.spoiler {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    margin: 0 4px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease-in-out;
    
    /* 默认状态（浅色）：隐藏文字 */
    background-color: var(--border-color);
    color: var(--border-color); 
}

/* 浅色模式悬浮 */
.spoiler:hover {
    background-color: var(--surface-hover) !important;
    color: var(--success-color) !important;
    box-shadow: 0 0 8px var(--success-soft) !important;
}

/* --- 深色模式：通过 HTML 属性触发 (data-theme="dark") --- */
html[data-theme="dark"] .spoiler,
:root[data-theme="dark"] .spoiler {
    background-color: #333333;
    color: #333333;
}

html[data-theme="dark"] .spoiler:hover,
:root[data-theme="dark"] .spoiler:hover {
    background-color: #444444 !important;
    color: #66BB6A !important;
    box-shadow: 0 0 10px rgba(102, 187, 106, 0.4) !important;
}

/* --- 深色模式：通过系统设置触发 (prefers-color-scheme) --- */
@media (prefers-color-scheme: dark) {
    /* 只有当没有显式设置 light 模式时才生效 */
    :root:not([data-theme="light"]) .spoiler {
        background-color: #333333;
        color: #333333;
    }

    :root:not([data-theme="light"]) .spoiler:hover {
        background-color: #444444 !important;
        color: #66BB6A !important;
        box-shadow: 0 0 10px rgba(102, 187, 106, 0.4) !important;
    }
}