body {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background-color: #f8fafc;
}

*, ::before, ::after {
    border-color: #e2e8f0;
}

.font-mono { font-family: 'JetBrains Mono', monospace; }
.glass-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); }
[v-cloak] { display: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 20px; }
.drag-item { cursor: grab; }
.drag-item:active { cursor: grabbing; }
.drag-over-top { border-top: 2px solid #4f46e5; }
.drag-over-bottom { border-bottom: 2px solid #4f46e5; }
.drag-over-middle { background-color: #e0e7ff; }
.ghost { opacity: 0.5; background: #f3f4f6; }

/* Optimize code block scrolling */
.prose pre {
    overflow-x: auto;
}
.prose pre::-webkit-scrollbar {
    height: 6px;
}
.prose pre::-webkit-scrollbar-track {
    background: transparent;
}
.prose pre::-webkit-scrollbar-thumb {
    background-color: #475569;
    border-radius: 20px;
}

/* --- 游戏化测验选项样式 --- */
.render-md p { display: inline; margin: 0; }

.quiz-option {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 2px solid #e2e8f0; /* slate-200 */
    border-radius: 0.75rem; /* 12px */
    background-color: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
    border-color: #c7d2fe; /* indigo-200 */
}

.quiz-option > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem; /* 36px */
    height: 2.25rem; /* 36px */
    margin-right: 1rem;
    background-color: #f1f5f9; /* slate-100 */
    color: #475569; /* slate-600 */
    font-weight: 700;
    border-radius: 9999px; /* full */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 选中状态 (复用 .opt-active) */
.opt-active {
    border-color: #4f46e5 !important; /* indigo-600 */
    background-color: #eef2ff !important; /* indigo-50 */
    color: #4338ca !important; /* indigo-700 */
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2), 0 2px 4px -2px rgba(79, 70, 229, 0.1) !important;
}

.opt-active > span:first-child {
    background-color: #4f46e5 !important; /* indigo-600 */
    color: #ffffff !important;
    transform: scale(1.1);
}

/* 检查答案后的状态 */
.quiz-option.correct { border-color: #16a34a !important; background-color: #f0fdf4 !important; animation: pulse-green 0.8s; }
.quiz-option.correct > span:first-child { background-color: #16a34a !important; color: #ffffff !important; }

.quiz-option.incorrect { border-color: #dc2626 !important; background-color: #fef2f2 !important; animation: shake 0.5s; }
.quiz-option.incorrect > span:first-child { background-color: #dc2626 !important; color: #ffffff !important; }

.quiz-option.disabled { cursor: not-allowed; opacity: 0.8; }
.quiz-option.disabled:hover { transform: none; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); border-color: #e2e8f0; }


/* Admonitions / Callouts 样式仿 MkDocs Material */
.admonition {
    margin: 1em 0;
    padding: 0;
    border-left: 0.25rem solid #448aff;
    background-color: rgba(68, 138, 255, 0.1);
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    overflow: hidden;
    font-size: 0.9rem;
}

.admonition-title {
    margin: 0;
    padding: 0.5rem 1rem;
    background-color: rgba(68, 138, 255, 0.1);
    font-weight: 700;
    border-bottom: 1px solid rgba(68, 138, 255, 0.1);
    color: #2196f3;
}

.admonition-content {
    padding: 0.8rem 1rem;
    color: #374151;
}

.admonition-content > :first-child { margin-top: 0; }
.admonition-content > :last-child { margin-bottom: 0; }

/* 不同类型的颜色 */
.admonition.note, .admonition.info { border-left-color: #448aff; }
.admonition.note .admonition-title, .admonition.info .admonition-title { background-color: rgba(68, 138, 255, 0.1); color: #2196f3; }

.admonition.tip, .admonition.success { border-left-color: #00bfa5; background-color: rgba(0, 191, 165, 0.05); }
.admonition.tip .admonition-title, .admonition.success .admonition-title { background-color: rgba(0, 191, 165, 0.1); color: #009688; }

.admonition.warning, .admonition.attention { border-left-color: #ff9100; background-color: rgba(255, 145, 0, 0.05); }
.admonition.warning .admonition-title, .admonition.attention .admonition-title { background-color: rgba(255, 145, 0, 0.1); color: #ff6d00; }

.admonition.danger, .admonition.error, .admonition.failure { border-left-color: #ff1744; background-color: rgba(255, 23, 68, 0.05); }
.admonition.danger .admonition-title, .admonition.error .admonition-title, .admonition.failure .admonition-title { background-color: rgba(255, 23, 68, 0.1); color: #d50000; }

/* 动画 */
@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}