#home-intro {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: clamp(1.25rem, 3vw, 2rem);
 align-items: stretch;
 margin-bottom: var(--section-space, 3.5rem);
}

@media (max-width: 880px) {
 #home-intro { grid-template-columns: 1fr; }
}

.quote-card,
.intro-card {
 position: relative;
 background: var(--surface, #ffffff);
 border: 1px solid var(--line, rgba(108, 120, 98, 0.18));
 border-radius: 12px;
 box-shadow: var(--shadow-soft, 0 4px 24px rgba(60, 70, 50, 0.06));
 -webkit-backdrop-filter: blur(8px);
 backdrop-filter: blur(8px);
 overflow: hidden;
 padding: clamp(1.3rem, 2.8vw, 1.7rem) clamp(1.3rem, 2.6vw, 1.7rem);
 display: flex;
 flex-direction: column;
 transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;
}

.quote-card:hover,
.intro-card:hover {

 border-color: rgba(108, 120, 108, 0.28);
 box-shadow: 0 6px 28px rgba(60, 70, 50, 0.1);
 transform: translateY(-2px);
}

.quote-card::before,
.intro-card::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(to right,
 var(--sage, #6b9080) 0%, var(--sage, #6b9080) 55%,
 #5a4a3e 55%, #5a4a3e 80%,
 #8a7660 80%, #8a7660 100%);
 opacity: 0.4;
 transition: opacity 0.3s ease;
}
.quote-card:hover::before,
.intro-card:hover::before { opacity: 0.7; }

.quote-card-chapter,
.intro-card-chapter {
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 font-family: "Georgia", "Times New Roman", serif;
 font-size: 0.72rem;
 letter-spacing: 0.18em;
 color: var(--muted, #8a7e72);
 margin-bottom: 1rem;
}
.quote-card-num,
.intro-card-num {
 font-weight: 600;
 color: var(--sage, #6b9080);
 letter-spacing: 0.1em;
}
.quote-card-dot,
.intro-card-dot { opacity: 0.5; }
.quote-card-cn,
.intro-card-cn {
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 color: var(--sage, #6b9080);
 letter-spacing: 0.2em;
}

.quote-card { align-items: center; text-align: center; }

.quote-mark {
 position: absolute;
 top: 0.8rem;
 left: 1.2rem;
 font-family: "Songti SC", "STSong", "Noto Serif SC", "Georgia", serif;
 font-size: 3.2rem;
 line-height: 1;
 color: var(--sage, #6b9080);
 opacity: 0.14;
 pointer-events: none;
 user-select: none;
}
.dark-mode .quote-mark { color: #8aab9a; opacity: 0.18; }

.quote-tabs {
 display: inline-flex;
 align-items: center;
 gap: 1rem;
 padding-bottom: 0.6rem;
 margin-top: auto;
 margin-bottom: 1.2rem;
 border-bottom: 1px solid var(--line, rgba(108, 120, 98, 0.18));
}

.quote-tab {
 position: relative;
 display: inline-flex;
 align-items: center;
 padding: 0.2rem 0;
 background: transparent !important;
 border: 1px solid transparent !important;
 color: var(--muted, #8a7e72);
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.86rem;
 cursor: pointer;
 letter-spacing: 0.1em;
 transition: color 0.25s ease;
 -webkit-tap-highlight-color: transparent;
}
.quote-tab::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: -0.65rem;
 height: 1.5px;
 background: var(--sage, #6b9080);
 transform: scaleX(0);
 transform-origin: center;
 transition: transform 0.3s ease;
}
.quote-tab:hover { color: var(--ink, #3d3530); }
.quote-tab:hover::after { transform: scaleX(0.6); opacity: 0.5; }
.quote-tab.active {
 background: transparent !important;
 border-color: transparent !important;
 color: var(--sage, #6b9080);
 font-weight: 500;
 box-shadow: none !important;
}
.quote-tab.active::after { transform: scaleX(1); }

.dark-mode .quote-tab { color: rgba(218, 211, 190, 0.6); }
.dark-mode .quote-tab:hover { color: rgba(218, 211, 190, 0.85); }
.dark-mode .quote-tab.active { color: #8aab9a; }
.dark-mode .quote-tab.active::after { background: #8aab9a; }

.quote-card blockquote {
 font-family: "Songti SC", "STSong", "Noto Serif SC", "Georgia", serif;
 font-size: clamp(1.05rem, 2.4vw, 1.32rem);
 font-weight: 500;
 line-height: 1.9;
 text-align: center;
 color: var(--ink, #3d3530);
 margin: 0.4rem 0 0.8rem;
 position: relative;
 z-index: 1;
 max-width: 28em;
 letter-spacing: 0.04em;
}

.quote-source {
 margin: 0 0 0.6rem;
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.82rem;
 color: var(--muted, #8a7e72);
 letter-spacing: 0.06em;
 font-style: italic;
 min-height: 1.2em;
}
.quote-source:empty { display: none; }

.quote-foot {
 margin-top: auto;
 padding-top: 1rem;
 border-top: 1px dashed var(--line, rgba(108, 120, 98, 0.18));
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.6rem;
 width: 100%;
}
.quote-source-mark {
 color: var(--muted, #8a7e72);
 font-family: "Songti SC", "STSong", serif;
 font-size: 0.95rem;
 letter-spacing: 0.1em;
}

.quote-refresh {
 display: inline-flex;
 align-items: center;
 gap: 0.32rem;
 padding: 0.32rem 0.7rem;
 background: transparent;
 border: 1px solid var(--line, rgba(108, 120, 98, 0.2));
 border-radius: 999px;
 color: var(--muted, #8a7e72);
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.8rem;
 letter-spacing: 0.1em;
 cursor: pointer;
 transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
 -webkit-tap-highlight-color: transparent;
}
.quote-refresh:hover {
 color: var(--sage, #6b9080);
 border-color: var(--sage, #6b9080);
 background: rgba(107, 144, 128, 0.06);
}
.dark-mode .quote-refresh { color: rgba(218, 211, 190, 0.6); border-color: rgba(218, 211, 190, 0.2); }
.dark-mode .quote-refresh:hover { color: #8aab9a; border-color: #8aab9a; background: rgba(138, 171, 154, 0.1); }

.quote-actions-right {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
}

.quote-action {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.2rem;
 width: 30px;
 height: 30px;
 padding: 0;
 background: transparent;
 border: 1px solid var(--line, rgba(108, 120, 98, 0.2));
 border-radius: 999px;
 color: var(--muted, #8a7e72);
 cursor: pointer;
 transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
 -webkit-tap-highlight-color: transparent;
}
.quote-action:hover {
 color: var(--sage, #6b9080);
 border-color: var(--sage, #6b9080);
 background: rgba(107, 144, 128, 0.06);
 transform: translateY(-1px);
}
.quote-action:active { transform: translateY(0) scale(0.95); }

.quote-like {
 width: auto;
 min-width: 30px;
 padding: 0 0.5rem;
 font-size: 0.72rem;
 font-family: var(--mono, "SF Mono", "Menlo", monospace);
 font-variant-numeric: tabular-nums;
 letter-spacing: 0.02em;
}
.quote-like-count { line-height: 1; }
.quote-like.is-active {
 color: #c75a5a;
 border-color: rgba(199, 90, 90, 0.35);
 background: rgba(199, 90, 90, 0.06);
}
.quote-like.is-active svg {
 fill: #c75a5a;
 animation: heartPop 0.45s ease;
}
@keyframes heartPop {
 0% { transform: scale(1); }
 40% { transform: scale(1.35); }
 70% { transform: scale(0.92); }
 100% { transform: scale(1); }
}
.quote-copy.is-done {
 color: var(--sage, #6b9080);
 border-color: var(--sage, #6b9080);
 background: rgba(107, 144, 128, 0.12);
}

.dark-mode .quote-action { color: rgba(218, 211, 190, 0.6); border-color: rgba(218, 211, 190, 0.2); }
.dark-mode .quote-action:hover { color: #8aab9a; border-color: #8aab9a; background: rgba(138, 171, 154, 0.1); }
.dark-mode .quote-like.is-active { color: #e07070; border-color: rgba(224, 112, 112, 0.35); background: rgba(224, 112, 112, 0.1); }
.dark-mode .quote-like.is-active svg { fill: #e07070; }
.dark-mode .quote-copy.is-done { color: #8aab9a; border-color: #8aab9a; background: rgba(138, 171, 154, 0.15); }

@media (max-width: 480px) {
 .quote-actions-right { gap: 0.3rem; }
 .quote-action { width: 28px; height: 28px; }
 .quote-like { padding: 0 0.4rem; }
}

.today-card {
 align-items: stretch;
 text-align: left;
 display: flex;
 flex-direction: column;
 gap: 0.6rem;
}

.today-date {
 display: flex;
 align-items: baseline;
 gap: 0.5rem;
 margin: 0 0 0.1rem;
 font-family: "Songti SC", "STSong", "Noto Serif SC", "Georgia", serif;
 color: var(--ink, #3d3530);
 letter-spacing: 0.05em;
}
.today-date-month {
 font-size: 1rem;
 color: var(--sage, #6b9080);
 font-weight: 500;
 letter-spacing: 0.1em;
}
.today-date-num {
 font-size: clamp(2.4rem, 4.8vw, 3rem);
 font-weight: 600;
 line-height: 1;
 color: var(--ink, #3d3530);
 font-variant-numeric: tabular-nums;
 letter-spacing: 0.02em;
 position: relative;
 border-bottom: 2px solid var(--sage, #6b9080);
 padding-bottom: 0.08em;
 flex: 0 0 auto;
}
.today-date-week {
 margin-left: auto;
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.86rem;
 color: var(--muted, #8a7e72);
 letter-spacing: 0.14em;
 align-self: center;
}

.today-card .intro-card-rule { margin: 0; }

.today-list {
 list-style: none;
 margin: 0.2rem 0 0;
 padding: 0;
 display: flex;
 flex-direction: column;
 gap: 0.35rem;
}
.today-item {
 display: flex;
 align-items: baseline;
 gap: 0.7rem;
 font-size: 0.9rem;
 line-height: 1.7;
 border-bottom: 1px dashed var(--line, rgba(108, 120, 98, 0.18));
 padding-bottom: 0.4rem;
}
.today-item:last-child { border-bottom: none; padding-bottom: 0; }
.today-item-label {
 flex: 0 0 auto;
 min-width: 5em;
 white-space: nowrap;
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.82rem;
 color: var(--muted, #8a7e72);
 letter-spacing: 0.12em;
}
.today-item-value {
 flex: 1;
 font-family: "Songti SC", "STSong", "Noto Serif SC", "Georgia", serif;
 color: var(--ink, #3d3530);
 letter-spacing: 0.04em;
 min-width: 0;
 word-break: break-word;
 transition: opacity 0.4s ease, transform 0.4s ease;
}
.today-item-value.tip-fade {
 animation: tipFadeIn 0.5s ease both;
}
@keyframes tipFadeIn {
 0% { opacity: 0; transform: translateY(4px); }
 100% { opacity: 1; transform: translateY(0); }
}
.today-item-tip .today-item-value {
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.93rem;
 color: var(--ink, #3d3530);
}

.today-card .intro-card-sign {
 margin: 0.2rem 0 0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.6rem;
 flex-wrap: wrap;
}
.today-card .intro-card-sign-mark {
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.82rem;
 color: var(--muted, #8a7e72);
 letter-spacing: 0.12em;
}

.today-refresh {
 display: inline-flex;
 align-items: center;
 gap: 0.3rem;
 padding: 0.28rem 0.65rem;
 background: transparent;
 border: 1px solid var(--line, rgba(108, 120, 98, 0.2));
 border-radius: 999px;
 color: var(--muted, #8a7e72);
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.78rem;
 letter-spacing: 0.1em;
 cursor: pointer;
 transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.3s ease;
 -webkit-tap-highlight-color: transparent;
}
.today-refresh:hover {
 color: var(--sage, #6b9080);
 border-color: var(--sage, #6b9080);
 background: rgba(107, 144, 128, 0.06);
}
.today-refresh:active { transform: scale(0.96); }
.today-refresh svg { transition: transform 0.5s ease; }
.today-refresh:hover svg { transform: rotate(180deg); }
.dark-mode .today-refresh { color: rgba(218, 211, 190, 0.6); border-color: rgba(218, 211, 190, 0.2); }
.dark-mode .today-refresh:hover { color: #8aab9a; border-color: #8aab9a; background: rgba(138, 171, 154, 0.1); }

.dark-mode #home-intro .quote-card,
.dark-mode #home-intro .intro-card {
 background: rgba(35, 38, 34, 0.72);
 border-color: rgba(218, 211, 190, 0.13);
 box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}
.dark-mode #home-intro .quote-card blockquote {
 color: #e8e2d3;
}
.dark-mode #home-intro .quote-source,
.dark-mode #home-intro .intro-card-sign {
 color: rgba(218, 211, 190, 0.55);
}

.dark-mode #home-intro .today-date-num,
.dark-mode #home-intro .today-item-value {
 color: #e8e2d3;
}
.dark-mode #home-intro .today-date-month,
.dark-mode #home-intro .today-date-num {
 border-color: #8aab9a;
}
.dark-mode #home-intro .today-date-month { color: #8aab9a; }
.dark-mode #home-intro .today-date-week,
.dark-mode #home-intro .today-item-label {
 color: rgba(218, 211, 190, 0.55);
}
.dark-mode #home-intro .today-item {
 border-bottom-color: rgba(218, 211, 190, 0.12);
}
.dark-mode #home-intro .quote-card::before,
.dark-mode #home-intro .intro-card::before {
 opacity: 0.85;
}

.today-item-weather {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: 0.35rem 0.7rem;
 border-bottom: 1px dashed var(--line, rgba(108, 120, 98, 0.18));
 padding-bottom: 0.55rem;
}
.today-item-weather .today-item-label {
 flex: 0 0 auto;
 min-width: 5em;
 align-self: center;
}
.wx-main {
 flex: 1;
 display: inline-flex;
 align-items: baseline;
 gap: 0.45rem;
 flex-wrap: wrap;
 min-width: 0;
}
.wx-icon {
 font-size: 1.25rem;
 line-height: 1;
 align-self: center;
 margin-right: -0.1rem;
 filter: saturate(0.85);
}
.wx-temp {
 font-family: "Songti SC", "STSong", "Noto Serif SC", "Georgia", serif;
 font-size: 1.55rem;
 font-weight: 500;
 color: var(--ink-deep, #5d4a3a);
 letter-spacing: 0.01em;
 line-height: 1;
 font-variant-numeric: tabular-nums;
}
.wx-text {
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.88rem;
 color: var(--ink, #6a5942);
 letter-spacing: 0.04em;
}
.wx-city {
 font-family: inherit;
 font-size: 0.76rem;
 color: var(--muted, #8a7e72);
 background: transparent;
 border: none;
 border-bottom: 1px dashed rgba(138, 113, 90, 0.32);
 padding: 0 0 1px;
 cursor: pointer;
 letter-spacing: 0.06em;
 transition: color 0.2s ease, border-color 0.2s ease;
 margin-left: auto;
 align-self: center;
}
.wx-city:hover {
 color: var(--ink, #6a5942);
 border-bottom-color: rgba(138, 113, 90, 0.55);
}
.wx-city:focus-visible {
 outline: 1px dashed rgba(138, 113, 90, 0.5);
 outline-offset: 2px;
}
.wx-details {
 flex: 1 0 100%;
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: 0.35rem;
 font-size: 0.72rem;
 color: var(--muted, #9b8a73);
 margin-top: 0.2rem;
 letter-spacing: 0.02em;
 min-height: 0.95em;
}
.wx-detail-bit {
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
}
.wx-detail-sep {
 color: var(--line, rgba(108, 120, 98, 0.35));
 font-weight: 300;
}
.wx-daily {
 flex: 1 0 100%;
 display: flex;
 gap: 0;
 margin-top: 0.4rem;
 padding-top: 0.4rem;
 border-top: 1px dashed rgba(108, 120, 98, 0.15);
 font-size: 0.72rem;
 color: var(--muted, #9b8a73);
 flex-wrap: nowrap;
 overflow-x: auto;
}
.wx-day {
 flex: 1 1 0;
 min-width: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.18rem;
 padding: 0 0.3rem;
 position: relative;
 letter-spacing: 0.02em;
}
.wx-day + .wx-day::before {
 content: "";
 position: absolute;
 left: 0;
 top: 12%;
 bottom: 12%;
 width: 1px;
 background: rgba(108, 120, 98, 0.15);
}
.wx-day-name {
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 color: var(--muted, #8a7e72);
 font-size: 0.7rem;
 letter-spacing: 0.08em;
}
.wx-day-icon {
 font-size: 0.95rem;
 line-height: 1;
 filter: saturate(0.85);
}
.wx-day-range {
 font-variant-numeric: tabular-nums;
 font-family: "Songti SC", "STSong", serif;
 font-size: 0.74rem;
 color: var(--ink, #6a5942);
}

.today-item-weather[data-state="loading"] .wx-temp,
.today-item-weather[data-state="loading"] .wx-text,
.today-item-weather[data-state="loading"] .wx-city,
.today-item-weather[data-state="loading"] .wx-icon { opacity: 0.55; }
.today-item-weather[data-state="ready"] .wx-temp,
.today-item-weather[data-state="ready"] .wx-text,
.today-item-weather[data-state="ready"] .wx-city,
.today-item-weather[data-state="ready"] .wx-icon,
.today-item-weather[data-state="ready"] .wx-details,
.today-item-weather[data-state="ready"] .wx-daily {
 transition: opacity 0.4s ease;
}
.today-item-weather[data-state="error"] .wx-temp,
.today-item-weather[data-state="error"] .wx-icon { opacity: 0.4; }

.dark-mode #home-intro .wx-temp { color: #f0e8d4; }
.dark-mode #home-intro .wx-text { color: rgba(232, 226, 211, 0.85); }
.dark-mode #home-intro .wx-city { color: rgba(218, 211, 190, 0.65); border-bottom-color: rgba(218, 211, 190, 0.25); }
.dark-mode #home-intro .wx-city:hover { color: rgba(232, 226, 211, 0.9); border-bottom-color: rgba(218, 211, 190, 0.5); }
.dark-mode #home-intro .wx-details,
.dark-mode #home-intro .wx-daily { color: rgba(218, 211, 190, 0.55); }
.dark-mode #home-intro .wx-day-name { color: rgba(218, 211, 190, 0.6); }
.dark-mode #home-intro .wx-day-range { color: rgba(232, 226, 211, 0.78); }
.dark-mode #home-intro .wx-day + .wx-day::before { background: rgba(218, 211, 190, 0.1); }
.dark-mode #home-intro .wx-daily { border-top-color: rgba(218, 211, 190, 0.1); }
.dark-mode #home-intro .wx-detail-sep { color: rgba(218, 211, 190, 0.25); }

.wx-picker {
 position: fixed;
 inset: 0;
 z-index: 9000;
 display: none;
 background: rgba(40, 38, 34, 0.18);
 backdrop-filter: blur(2px);
 -webkit-backdrop-filter: blur(2px);
}
.wx-picker.is-open { display: block; }
.wx-picker-box {
 position: absolute;
 top: 22%;
 left: 50%;
 transform: translateX(-50%);
 width: min(360px, 92vw);
 background: var(--light, #f6f6f3);
 border: 1px solid rgba(108, 120, 108, 0.12);
 border-radius: 14px;
 box-shadow: 0 12px 40px rgba(60, 70, 68, 0.16);
 overflow: hidden;
 animation: wxPickerIn 0.18s ease;
}
@keyframes wxPickerIn {
 from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
 to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.wx-picker-head {
 display: flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.7rem 0.9rem;
 border-bottom: 1px solid rgba(108, 120, 108, 0.1);
}
.wx-picker-input {
 flex: 1;
 border: none;
 background: transparent;
 font-size: 0.95rem;
 font-family: inherit;
 color: var(--ink, #2f322e);
 letter-spacing: 0.02em;
 outline: none;
 padding: 0.3rem 0;
}
.wx-picker-input::placeholder { color: var(--muted, #8a7e72); opacity: 0.7; }
.wx-picker-close {
 flex: 0 0 auto;
 border: none;
 background: transparent;
 font-size: 1.3rem;
 line-height: 1;
 color: var(--muted, #8a7e72);
 cursor: pointer;
 padding: 0 0.3rem;
 transition: color 0.15s ease;
}
.wx-picker-close:hover { color: var(--ink, #2f322e); }
.wx-picker-body { max-height: 300px; overflow-y: auto; }
.wx-picker-list { padding: 0.3rem 0; }
.wx-picker-item {
 display: flex;
 flex-direction: column;
 gap: 0.1rem;
 width: 100%;
 border: none;
 background: transparent;
 text-align: left;
 cursor: pointer;
 padding: 0.55rem 1rem;
 font-family: inherit;
 transition: background 0.12s ease;
}
.wx-picker-item:hover,
.wx-picker-item:focus-visible {
 background: rgba(111, 148, 184, 0.1);
 outline: none;
}
.wx-picker-item-name {
 font-size: 0.95rem;
 color: var(--ink, #2f322e);
 letter-spacing: 0.03em;
}
.wx-picker-item-meta {
 font-size: 0.72rem;
 color: var(--muted, #8a7e72);
 letter-spacing: 0.02em;
}
.wx-picker-hint {
 padding: 0.8rem 1rem;
 font-size: 0.8rem;
 color: var(--muted, #8a7e72);
 letter-spacing: 0.03em;
 text-align: center;
}
.wx-picker-hint.is-empty { color: var(--muted, #8a7e72); opacity: 0.8; }

.dark-mode .wx-picker { background: rgba(0, 0, 0, 0.3); }
.dark-mode .wx-picker-box {
 background: #1a1d1f;
 border-color: rgba(218, 211, 190, 0.12);
 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.dark-mode .wx-picker-head { border-bottom-color: rgba(218, 211, 190, 0.1); }
.dark-mode .wx-picker-input { color: #f0e8d4; }
.dark-mode .wx-picker-input::placeholder { color: rgba(218, 211, 190, 0.4); }
.dark-mode .wx-picker-close { color: rgba(218, 211, 190, 0.5); }
.dark-mode .wx-picker-close:hover { color: #f0e8d4; }
.dark-mode .wx-picker-item:hover,
.dark-mode .wx-picker-item:focus-visible { background: rgba(111, 148, 184, 0.15); }
.dark-mode .wx-picker-item-name { color: #f0e8d4; }
.dark-mode .wx-picker-item-meta { color: rgba(218, 211, 190, 0.5); }
.dark-mode .wx-picker-hint { color: rgba(218, 211, 190, 0.5); }

@media (max-width: 880px) {
 .quote-card,
 .intro-card { padding: 1.4rem 1.3rem; }
 .intro-card-title { font-size: 1.4rem; }
 .quote-card-chapter,
 .intro-card-chapter { font-size: 0.7rem; }
 .quote-card blockquote { font-size: 1.05rem; line-height: 1.85; }
}

@media (max-width: 480px) {
 #home-intro { gap: 1rem; }
 .quote-card,
 .intro-card { padding: 1.2rem 1.1rem; }
 .quote-tabs { gap: 0.7rem; flex-wrap: wrap; }
 .quote-tab { font-size: 0.82rem; }
 .intro-card-title { font-size: 1.25rem; }
 .quote-card blockquote { font-size: 0.98rem; }
}

.today-clickable {
 cursor: pointer;
 border-bottom: 1px dashed transparent;
 transition: color 0.25s ease, border-color 0.25s ease;
 -webkit-tap-highlight-color: transparent;
}
.today-clickable:hover {
 color: var(--sage, #6b9080);
 border-bottom-color: var(--sage, #6b9080);
}
.today-date-num[data-today-action] {
 cursor: pointer;
 transition: color 0.25s ease, border-color 0.25s ease;
 -webkit-tap-highlight-color: transparent;
}
.today-date-num[data-today-action]:hover {
 color: var(--sage, #6b9080);
 border-bottom-color: var(--sage, #6b9080);
}
.dark-mode .today-clickable:hover,
.dark-mode .today-date-num[data-today-action]:hover {
 color: #8aab9a;
 border-bottom-color: #8aab9a;
}

.today-panel-inline {
 max-height: 0;
 overflow: hidden;
 opacity: 0;
 transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease;
 margin: 0;
}
.today-panel-inline.is-expanded {
 max-height: 600px;
 opacity: 1;
 margin: 0.6rem 0;
}
.today-panel-inline[hidden] { display: none; }

.today-panel-title {
 display: flex;
 align-items: baseline;
 gap: 0.5rem;
 margin: 0 0 0.6rem;
 padding-bottom: 0.5rem;
 border-bottom: 1px dashed var(--line, rgba(108, 120, 98, 0.18));
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.86rem;
 color: var(--muted, #8a7e72);
 letter-spacing: 0.12em;
}
.today-panel-title::before {
 content: "";
 display: inline-block;
 width: 3px;
 height: 0.9rem;
 background: var(--sage, #6b9080);
 border-radius: 2px;
 opacity: 0.6;
 align-self: center;
}
.dark-mode .today-panel-title {
 color: rgba(218, 211, 190, 0.55);
 border-bottom-color: rgba(218, 211, 190, 0.12);
}
.dark-mode .today-panel-title::before { background: #8aab9a; }

.today-cal-nav {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 0.7rem;
 padding: 0 0.2rem;
}
.today-cal-nav button {
 width: 32px; height: 32px;
 border: 1px solid var(--line, rgba(108, 120, 98, 0.18));
 background: transparent;
 border-radius: 50%;
 color: var(--muted, #8a7e72);
 cursor: pointer;
 font-size: 1rem;
 display: inline-flex; align-items: center; justify-content: center;
 transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.today-cal-nav button:hover {
 color: var(--sage, #6b9080);
 border-color: var(--sage, #6b9080);
 background: rgba(107,144,128,0.06);
 transform: scale(1.08);
}
.today-cal-month {
 font-family: "Songti SC", "STSong", serif;
 font-size: 1rem;
 color: var(--ink, #3d3530);
 letter-spacing: 0.08em;
 font-weight: 500;
}
.today-cal-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 3px;
 text-align: center;
 padding: 0.4rem;
 background: rgba(107, 144, 128, 0.03);
 border-radius: 10px;
}
.today-cal-dow {
 font-size: 0.72rem;
 color: var(--muted, #8a7e72);
 padding: 0.4rem 0 0.3rem;
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 letter-spacing: 0.05em;
}
.today-cal-day {
 font-size: 0.86rem;
 padding: 0.4rem 0;
 color: var(--ink, #3d3530);
 border-radius: 8px;
 cursor: pointer;
 transition: background 0.2s, color 0.2s, transform 0.15s;
 font-variant-numeric: tabular-nums;
}
.today-cal-day:hover {
 background: rgba(107, 144, 128, 0.1);
 transform: scale(1.1);
}
.today-cal-day.is-today {
 background: var(--sage, #6b9080);
 color: #fff;
 font-weight: 600;
 box-shadow: 0 2px 8px rgba(107, 144, 128, 0.3);
}
.today-cal-day.is-festival { color: var(--fest-color, #c75a5a); font-weight: 600; }
.today-cal-day.is-empty { visibility: hidden; }
.today-cal-info {
 margin-top: 0.9rem;
 padding: 0.7rem 0.9rem;
 background: rgba(107, 144, 128, 0.06);
 border-left: 3px solid var(--sage, #6b9080);
 border-radius: 0 8px 8px 0;
 font-size: 0.84rem;
 color: var(--muted, #8a7e72);
 line-height: 1.7;
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 letter-spacing: 0.04em;
 min-height: 2em;
}

.today-festival-list { list-style: none; margin: 0; padding: 0; }
.today-festival-item {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 padding: 0.7rem 0.5rem;
 border-bottom: 1px dashed var(--line, rgba(108, 120, 98, 0.12));
 font-size: 0.92rem;
 transition: background 0.2s ease;
 border-radius: 6px;
}
.today-festival-item:hover { background: rgba(107, 144, 128, 0.04); }
.today-festival-item:last-child { border-bottom: none; }
.today-festival-name {
 font-family: "Songti SC", "STSong", serif;
 color: var(--ink, #3d3530);
 letter-spacing: 0.04em;
}
.today-festival-name small {
 color: var(--muted, #8a7e72);
 font-size: 0.76rem;
 margin-left: 0.5rem;
}
.today-festival-count {
 font-family: var(--mono, "SF Mono", "Menlo", monospace);
 font-size: 0.84rem;
 color: var(--sage, #6b9080);
 font-variant-numeric: tabular-nums;
 letter-spacing: 0.02em;
}
.today-festival-count.is-today {
 color: #c75a5a;
 font-weight: 600;
}
.today-festival-source {
 font-size: 0.72rem;
 color: var(--muted, #8a7e72);
 letter-spacing: 0.04em;
 margin: 0 0 0.6rem;
 padding-left: 0.8rem;
 position: relative;
}
.today-festival-source::before {
 content: "";
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 width: 4px;
 height: 4px;
 background: var(--sage, #6b9080);
 border-radius: 50%;
 opacity: 0.6;
}
.dark-mode .today-festival-source { color: rgba(218, 211, 190, 0.5); }
.dark-mode .today-festival-source::before { background: #8aab9a; }
.today-festival-dot {
 display: inline-block;
 width: 7px;
 height: 7px;
 border-radius: 50%;
 margin-right: 0.45rem;
 vertical-align: middle;
 box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.dark-mode .today-festival-dot { box-shadow: 0 0 0 2px rgba(31, 29, 26, 0.7); }
.today-festival-off {
 display: inline-block;
 font-style: normal;
 margin-left: 0.4rem;
 padding: 0 5px;
 font-size: 0.66rem;
 font-family: var(--mono, "SF Mono", "Menlo", monospace);
 color: var(--sage, #6b9080);
 background: rgba(107, 144, 128, 0.12);
 border-radius: 3px;
 letter-spacing: 0.02em;
 vertical-align: middle;
 line-height: 1.5;
}
.dark-mode .today-festival-off { color: #8aab9a; background: rgba(138, 171, 154, 0.18); }

.today-solar-detail {
 text-align: center;
 padding: 0.8rem 0 0.4rem;
}
.today-solar-name {
 font-family: "Songti SC", "STSong", serif;
 font-size: 1.8rem;
 color: var(--sage, #6b9080);
 letter-spacing: 0.2em;
 margin-bottom: 0.5rem;
 font-weight: 500;
}
.today-solar-desc {
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.92rem;
 color: var(--muted, #8a7e72);
 line-height: 1.9;
 margin-bottom: 1rem;
 padding: 0 0.5rem;
}
.today-solar-next {
 font-size: 0.84rem;
 color: var(--ink, #3d3530);
 padding: 0.6rem 0.9rem;
 background: rgba(107, 144, 128, 0.06);
 border-radius: 8px;
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 letter-spacing: 0.06em;
 display: inline-block;
}

.today-tips-list { list-style: none; margin: 0; padding: 0; }
.today-tips-item {
 padding: 0.65rem 0.5rem;
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.94rem;
 color: var(--ink, #3d3530);
 border-bottom: 1px dashed var(--line, rgba(108, 120, 98, 0.12));
 letter-spacing: 0.04em;
 display: flex;
 align-items: baseline;
 gap: 0.6rem;
 transition: background 0.2s ease;
 border-radius: 6px;
}
.today-tips-item:hover { background: rgba(107, 144, 128, 0.04); }
.today-tips-item:last-child { border-bottom: none; }
.today-tips-item::before {
 content: "·";
 color: var(--sage, #6b9080);
 font-weight: bold;
 flex-shrink: 0;
 font-size: 1.2em;
 line-height: 1;
}
.today-tips-more {
 margin-top: 1rem;
 text-align: center;
}
.today-tips-more button {
 padding: 0.5rem 1.2rem;
 border: 1px solid var(--line, rgba(108, 120, 98, 0.2));
 background: transparent;
 border-radius: 999px;
 color: var(--muted, #8a7e72);
 font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
 font-size: 0.84rem;
 cursor: pointer;
 transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
 letter-spacing: 0.1em;
}
.today-tips-more button:hover {
 color: var(--sage, #6b9080);
 border-color: var(--sage, #6b9080);
 background: rgba(107, 144, 128, 0.06);
 transform: translateY(-1px);
}

.dark-mode .today-cal-month { color: #e8e2d3; }
.dark-mode .today-cal-grid { background: rgba(138, 171, 154, 0.04); }
.dark-mode .today-cal-dow { color: rgba(218, 211, 190, 0.5); }
.dark-mode .today-cal-day { color: #e8e2d3; }
.dark-mode .today-cal-day:hover { background: rgba(138, 171, 154, 0.15); }
.dark-mode .today-cal-day.is-festival { color: var(--fest-color, #e07070); }
.dark-mode .today-cal-info {
 background: rgba(138, 171, 154, 0.08);
 color: rgba(218, 211, 190, 0.6);
 border-left-color: #8aab9a;
}
.dark-mode .today-festival-name { color: #e8e2d3; }
.dark-mode .today-festival-name small { color: rgba(218, 211, 190, 0.5); }
.dark-mode .today-festival-item { border-bottom-color: rgba(218, 211, 190, 0.1); }
.dark-mode .today-festival-item:hover { background: rgba(138, 171, 154, 0.06); }
.dark-mode .today-solar-name { color: #8aab9a; }
.dark-mode .today-solar-desc { color: rgba(218, 211, 190, 0.55); }
.dark-mode .today-solar-next { color: #e8e2d3; background: rgba(138, 171, 154, 0.08); }
.dark-mode .today-tips-item {
 color: #e8e2d3;
 border-bottom-color: rgba(218, 211, 190, 0.1);
}
.dark-mode .today-tips-item:hover { background: rgba(138, 171, 154, 0.06); }
.dark-mode .today-tips-more button { color: rgba(218, 211, 190, 0.6); border-color: rgba(218, 211, 190, 0.2); }
.dark-mode .today-tips-more button:hover { color: #8aab9a; border-color: #8aab9a; background: rgba(138, 171, 154, 0.1); }

@media (max-width: 480px) {
 .today-panel-inline.is-expanded { max-height: 560px; }
 .today-solar-name { font-size: 1.5rem; }
 .today-cal-grid { padding: 0.2rem; gap: 2px; }
 .today-cal-day { font-size: 0.82rem; padding: 0.35rem 0; }
}