/* 四季与节气认知卡 /tool/season-learn */

.sl-mode {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    background: var(--calc-soft, #f1f5f9);
    padding: 5px;
    border-radius: 12px;
}
.sl-mode button {
    flex: 1;
    padding: 10px 4px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--calc-muted, #64748b);
    cursor: pointer;
    transition: all .2s;
}
.sl-mode button.is-active {
    background: #fff;
    color: #0891b2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

/* 当前节气 */
.sl-now {
    font-size: 14px;
    line-height: 1.7;
    color: var(--calc-text, #334155);
    background: linear-gradient(90deg, #ecfeff, #f0f9ff);
    border: 1px dashed #67e8f9;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 12px;
}
.sl-now b { color: #0891b2; font-size: 16px; }

/* 季节筛选 */
.sl-filter { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.sl-filter button {
    padding: 8px 16px;
    border: 2px solid var(--calc-border, #e2e8f0);
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: var(--calc-text, #334155);
    cursor: pointer;
    transition: all .15s;
}
.sl-filter button.is-active {
    border-color: #0891b2;
    background: #ecfeff;
    color: #0e7490;
}

/* 节气格子 */
.sl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.sl-term {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 6px 10px;
    border: 2px solid var(--calc-border, #e2e8f0);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: all .15s;
}
.sl-term:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.sl-term-e { font-size: 30px; }
.sl-term b { font-size: 16px; color: var(--calc-text, #334155); }
.sl-term small { font-size: 11px; color: var(--calc-muted, #64748b); }
.sl-term.is-spring { border-color: #bbf7d0; background: #f0fdf4; }
.sl-term.is-summer { border-color: #fed7aa; background: #fff7ed; }
.sl-term.is-autumn { border-color: #fde68a; background: #fffbeb; }
.sl-term.is-winter { border-color: #bfdbfe; background: #eff6ff; }
.sl-term.is-now { border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8, 145, 178, .18); }
.sl-term.is-picked { outline: 3px solid rgba(8, 145, 178, .35); }
.sl-now-dot {
    position: absolute;
    top: -8px;
    right: -6px;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: #0891b2;
    border-radius: 999px;
    padding: 2px 8px;
}
.sl-empty { color: var(--calc-muted, #64748b); text-align: center; grid-column: 1 / -1; }

/* 右侧详情卡 */
.sl-detail { min-height: 320px; display: flex; align-items: center; justify-content: center; position: relative; }
.sl-detail-empty { text-align: center; color: var(--calc-muted, #64748b); font-size: 17px; font-weight: 700; line-height: 2; }
.sl-detail-empty small { font-size: 13px; font-weight: 400; }
.sl-card {
    width: 100%;
    text-align: center;
    padding: 8px 4px;
    border-radius: 16px;
}
.sl-flip { animation: slFlip .5s ease; }
@keyframes slFlip {
    0% { transform: rotateY(90deg); opacity: 0; }
    100% { transform: rotateY(0); opacity: 1; }
}
.sl-card-e {
    font-size: 72px;
    line-height: 1;
    margin: 6px 0 10px;
    animation: slBob 2.4s ease-in-out infinite;
}
@keyframes slBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.sl-card-n { font-size: 34px; margin: 0 0 4px; color: var(--calc-text, #1e293b); }
.sl-card.is-spring .sl-card-n { color: #16a34a; }
.sl-card.is-summer .sl-card-n { color: #ea580c; }
.sl-card.is-autumn .sl-card-n { color: #b45309; }
.sl-card.is-winter .sl-card-n { color: #2563eb; }
.sl-card-py { color: var(--calc-muted, #64748b); font-size: 14px; margin: 0 0 14px; }
.sl-card-rows { text-align: left; max-width: 360px; margin: 0 auto 12px; display: grid; gap: 8px; }
.sl-card-rows p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--calc-text, #334155);
    background: var(--calc-soft, #f1f5f9);
    border-radius: 10px;
    padding: 8px 12px;
}
.sl-card-rows b { display: block; font-size: 13px; margin-bottom: 2px; }
.sl-card-fact {
    font-size: 15px;
    line-height: 1.8;
    color: #0e7490;
    background: #ecfeff;
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0 auto;
    max-width: 380px;
}
.sl-card-now { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: #0891b2; }
.sl-burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sl-burst span {
    position: absolute;
    top: 30%;
    font-size: 26px;
    animation: slFly 1.4s ease-out forwards;
}
@keyframes slFly {
    0% { transform: translateY(0) scale(.4); opacity: 1; }
    100% { transform: translateY(-150px) scale(1.3) rotate(20deg); opacity: 0; }
}

/* 节气歌 */
.sl-song-tip { font-size: 14px; color: var(--calc-text, #334155); margin: 0 0 14px; }
.sl-song-demo { color: #0891b2; font-weight: 800; }
.sl-song { display: grid; gap: 12px; }
.sl-song-line {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 22px;
    letter-spacing: 4px;
}
.sl-song-line p { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; color: var(--calc-text, #334155); font-weight: 600; }
.sl-song-line.is-spring { background: #f0fdf4; }
.sl-song-line.is-summer { background: #fff7ed; }
.sl-song-line.is-autumn { background: #fffbeb; }
.sl-song-line.is-winter { background: #eff6ff; }
.sl-song-season {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}
.is-spring .sl-song-season { background: #16a34a; }
.is-summer .sl-song-season { background: #ea580c; }
.is-autumn .sl-song-season { background: #d97706; }
.is-winter .sl-song-season { background: #2563eb; }
.sl-song-t {
    border: none;
    background: rgba(8, 145, 178, .1);
    color: #0891b2;
    font-size: 22px;
    font-weight: 800;
    border-radius: 10px;
    padding: 2px 6px;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.sl-song-t:hover { background: #0891b2; color: #fff; transform: scale(1.1); }
.sl-song-note {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--calc-text, #334155);
    background: var(--calc-soft, #f1f5f9);
    border-radius: 12px;
    padding: 12px 16px;
}
.sl-song-note p { margin: 0; }

/* 小测 */
.sl-quiz-intro { font-size: 15px; line-height: 1.8; color: var(--calc-text, #334155); }
.sl-best { text-align: center; font-weight: 700; color: #0891b2; }
.sl-quiz-top {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    color: var(--calc-muted, #64748b);
    margin-bottom: 14px;
}
.sl-score b { color: #0891b2; font-size: 20px; }
.sl-question {
    text-align: center;
    font-size: 21px;
    font-weight: 800;
    color: var(--calc-text, #1e293b);
    margin: 18px 0;
    line-height: 1.6;
}
.sl-answers { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sl-ans {
    padding: 12px 22px;
    border: 3px solid var(--calc-border, #e2e8f0);
    border-radius: 999px;
    background: #fff;
    font-size: 17px;
    font-weight: 700;
    color: var(--calc-text, #334155);
    cursor: pointer;
    transition: all .15s;
}
.sl-ans:active { transform: scale(.95); }
.sl-ans.is-right { border-color: #22c55e; background: #f0fdf4; }
.sl-ans.is-wrong { border-color: #ef4444; background: #fef2f2; opacity: .6; }
.sl-why {
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: #0e7490;
    background: #ecfeff;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 14px 0;
}
.sl-end-stars { text-align: center; font-size: 46px; letter-spacing: 6px; margin: 10px 0; }
.sl-end-score { text-align: center; font-size: 22px; font-weight: 800; color: var(--calc-text, #1e293b); }
.sl-end-comment { text-align: center; color: var(--calc-muted, #64748b); line-height: 1.7; }
#slQuizEnd { text-align: center; }

[hidden] { display: none !important; }

@media (max-width: 640px) {
    .sl-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .sl-term-e { font-size: 26px; }
    .sl-song-line { font-size: 18px; letter-spacing: 2px; padding: 12px; }
    .sl-song-t { font-size: 18px; }
    .sl-card-e { font-size: 56px; }
}

/* 黑夜模式 */
body.dark-mode .sl-mode { background: #1e293b; }
body.dark-mode .sl-mode button { color: #94a3b8; }
body.dark-mode .sl-mode button.is-active { background: #0f172a; color: #22d3ee; }
body.dark-mode .sl-now { background: #0f172a; border-color: #155e75; color: #cbd5e1; }
body.dark-mode .sl-now b { color: #22d3ee; }
body.dark-mode .sl-filter button { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .sl-filter button.is-active { background: #0c2b33; border-color: #22d3ee; color: #22d3ee; }
body.dark-mode .sl-term { background: #1e293b; border-color: #334155; }
body.dark-mode .sl-term b { color: #e2e8f0; }
body.dark-mode .sl-term.is-spring { background: #0a2013; border-color: #166534; }
body.dark-mode .sl-term.is-summer { background: #251505; border-color: #9a3412; }
body.dark-mode .sl-term.is-autumn { background: #241a05; border-color: #a16207; }
body.dark-mode .sl-term.is-winter { background: #0b1526; border-color: #1d4ed8; }
body.dark-mode .sl-term.is-now { border-color: #22d3ee; }
body.dark-mode .sl-detail-empty { color: #94a3b8; }
body.dark-mode .sl-card-n { color: #f1f5f9 !important; }
body.dark-mode .sl-card-rows p { background: #1e293b; color: #cbd5e1; }
body.dark-mode .sl-card-fact { background: #0c2b33; color: #67e8f9; }
body.dark-mode .sl-card-now { color: #22d3ee; }
body.dark-mode .sl-song-tip,
body.dark-mode .sl-song-note { color: #cbd5e1; }
body.dark-mode .sl-song-line p { color: #e2e8f0; }
body.dark-mode .sl-song-line.is-spring { background: #0a2013; }
body.dark-mode .sl-song-line.is-summer { background: #251505; }
body.dark-mode .sl-song-line.is-autumn { background: #241a05; }
body.dark-mode .sl-song-line.is-winter { background: #0b1526; }
body.dark-mode .sl-song-t { background: rgba(34, 211, 238, .15); color: #22d3ee; }
body.dark-mode .sl-song-t:hover { background: #22d3ee; color: #0f172a; }
body.dark-mode .sl-song-note { background: #1e293b; }
body.dark-mode .sl-song-demo { color: #22d3ee; }
body.dark-mode .sl-quiz-intro { color: #cbd5e1; }
body.dark-mode .sl-best { color: #22d3ee; }
body.dark-mode .sl-quiz-top { color: #94a3b8; }
body.dark-mode .sl-score b { color: #22d3ee; }
body.dark-mode .sl-question { color: #f1f5f9; }
body.dark-mode .sl-ans { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .sl-ans.is-right { background: #052e16; border-color: #22c55e; }
body.dark-mode .sl-ans.is-wrong { background: #2a0a0a; border-color: #ef4444; }
body.dark-mode .sl-why { background: #0c2b33; color: #67e8f9; }
body.dark-mode .sl-end-score { color: #f1f5f9; }
body.dark-mode .sl-end-comment { color: #94a3b8; }