/* ===== rex.css：浅色 / 深色两套底色 + Rex 式外壳 + 三种日历样式 + 设置页 =====
   浅色：Cuto 式画廊白（暖中性的近白底、白卡片、黑色胶囊按钮）
   深色：Rex 式梅紫渐变底、半透明卡片、黑色悬浮胶囊导航
   放在 styles.css 之后，只覆盖、不改原有结构。 */

/* ---------- 两套底色 ---------- */
html.theme-light { --page: #f6f5f3; --tile: #eeedeb; --line: #e5e3e0; --surface-solid: #ffffff; --glass: #ffffffb8; --glass-line: #ffffffa8; }
html.theme-dark {
  color-scheme: dark;
  --ink: #f6f0f8; --ink-2: #ddd3e2; --muted: #b6abbb; --line: #ffffff1a; --line-2: #ffffff33; --tile: #ffffff10;
  --page: #261d2a; --surface: #ffffff12; --surface-solid: #2f2534; --mat: #3a2f40;
  --sel: #f6f0f8; --on-sel: #1f1823; --pill: #09070a; --on-pill: #ffffff;
  --due-bg: #ffcf7a26; --glass-strong: #2a2130ee; --glass: #1c1520a8; --glass-line: #ffffff1c;
}
html.theme-dark body { background: radial-gradient(130% 55% at 50% -5%, #5a3f5f 0%, #3a2b40 38%, #241c28 70%, #1b151e 100%) fixed #241c28; }
html.theme-dark.is-poster body { background: var(--deep); }
html.theme-dark dialog { background: var(--surface-solid); border-color: var(--line); }
html.theme-dark .toast { background: #000000e8; color: #fff; }
html.theme-dark :focus-visible { outline-color: #f6f0f8; }
html.theme-dark .art-mat { border-color: #ffffff14; box-shadow: 0 14px 34px #00000059; }
html.theme-dark .row-mat { box-shadow: none; }
html.theme-dark .missing-art { background: #ffffff0d; }
html.theme-dark .due-row { background: var(--surface-solid); color: var(--ink); }
html.theme-dark .due-row small { color: var(--muted); }
html.theme-dark .due-row svg { color: #f2c46d; }
html.theme-dark .field input, html.theme-dark .field select, html.theme-dark .field textarea { background: #ffffff0d; }
html.theme-dark .stub-later { color: var(--ink-2) !important; }
html.theme-dark .primary-button.danger { background: #c4352c; }
html.theme-dark .danger:not(.primary-button) { color: #ff8f86; }

/* ---------- Rex 外壳：悬浮胶囊 + 独立圆形动作按钮 ---------- */
.bottom-nav { display: flex; align-items: center; gap: 10px; padding: 0; width: min(calc(100% - 28px), 420px); background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
.nav-capsule, .nav-action { background: #ffffffd9; border: 1px solid #0000000d; box-shadow: 0 12px 32px #1a1d2b26, 0 1px 2px #0000000f; backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7); }
.nav-capsule { flex: 1; min-width: 0; display: flex; gap: 2px; padding: 5px; border-radius: 999px; }
.nav-button { min-height: 54px; border-radius: 999px; color: var(--muted); }
.nav-button[aria-current="page"] { background: #0000000f; color: var(--ink); }
.nav-action { flex: none; width: 66px; height: 66px; min-height: 66px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.nav-action svg { width: 24px; height: 24px; }
html.theme-dark .nav-capsule, html.theme-dark .nav-action, html.is-poster .nav-capsule, html.is-poster .nav-action { background: #09070ae0; border-color: #ffffff14; box-shadow: 0 14px 34px #00000059; }
html.theme-dark .nav-button, html.is-poster .nav-button { color: #ffffffa3; }
html.theme-dark .nav-button[aria-current="page"], html.is-poster .nav-button[aria-current="page"] { background: #ffffff24; color: #fff; }
html.theme-dark .nav-action, html.is-poster .nav-action { color: #fff; }
.nav-action[aria-current="page"] { outline: 2px solid currentColor; outline-offset: -6px; }

/* 黑色胶囊按钮、圆形按钮 */
.primary-button { border-radius: 999px; padding-inline: 22px; }
.secondary-button { border-radius: 999px; border-color: var(--line-2); background: var(--surface); }
.topbar > .text-button, .back-button { min-height: 40px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--pill); color: var(--on-pill); border: 0; }
.topbar > .text-button svg { width: 16px; height: 16px; }
.theme-button:not(.on-glass) { background: var(--surface); border-color: var(--line); }
html.theme-dark .theme-button:not(.on-glass) { border-color: transparent; }
.round-button { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-solid); color: var(--ink); border: 1px solid var(--line); }

/* 分组卡片（inset grouped） */
.settings-card, .me-list, .group-card, .profile-card { border: 0; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px #0000000a; }
html.theme-dark .settings-card, html.theme-dark .me-list, html.theme-dark .group-card, html.theme-dark .profile-card { box-shadow: none; border: 1px solid #ffffff0d; }
.settings-card.is-stub { border: 1px dashed var(--line-2); }
.me-row { background: transparent; }
.me-list li + li { position: relative; border-top: 0; }
.me-list li + li::before { content: ""; position: absolute; left: 50px; right: 0; top: 0; border-top: 1px solid var(--line); }
.group-card { display: block; padding: 14px 16px; margin: 12px 0; }
.mine-row { border-radius: 12px; }
.notice { border-radius: 14px; }

/* 日历页头：Rex 式分段控件 */
.view-switch { border: 0; border-radius: 999px; padding: 3px; background: var(--tile); gap: 2px; }
.view-switch button { border-radius: 999px; color: var(--muted); }
.view-switch button + button { border-left: 0; }
.view-switch button[aria-pressed="true"] { background: var(--surface-solid); color: var(--ink); box-shadow: 0 1px 3px #0000001f; }
.month-nav button { background: var(--surface); border-color: transparent; }
.today-chip { border-radius: 999px; }
.tool-button { background: var(--surface); border-color: transparent; }

/* ---------- 今天页：Rex 式 7 天条 ---------- */
.week-strip { gap: 6px; padding: 10px 0 14px; }
.day-button { position: relative; border-radius: 16px; padding: 8px 2px 10px; gap: 1px; }
.day-button strong { font-family: var(--display); font-size: 1.25rem; line-height: 1.2; font-weight: 650; }
.day-button small { font-size: .6875rem; letter-spacing: .04em; }
.day-button small.is-sun { color: #e5484d; }
.is-poster .day-button small.is-sun { color: #ff9a9a; }
.day-dot { position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .45; }
.day-button[aria-current="date"] { background: var(--sel); color: var(--on-sel); }
.day-button[aria-current="date"] small.is-sun { color: inherit; }

/* ---------- 今天页样式：画廊白底（不是满屏海报时） ---------- */
html.today-gallery .home-view .today-hero { margin: 0; background: none; color: var(--ink); }
.today-gallery .hero-stage { aspect-ratio: auto; max-height: none; overflow: visible; background: none; padding-top: 82px; }
.today-gallery .today-hero.no-art .hero-stage { aspect-ratio: auto; }
.today-gallery .hero-media { position: relative; inset: auto; aspect-ratio: 1; background: var(--mat); padding: 12px; box-shadow: 0 1px 2px #0000000d, 0 18px 40px #1a1d2b1f; }
html.theme-dark.today-gallery .hero-media { box-shadow: 0 18px 40px #00000066; }
.today-gallery .hero-frame { position: relative; inset: auto; width: 100%; height: 100%; overflow: hidden; }
.today-gallery .hero-fade { display: none; }
.today-gallery .hero-top { left: 0; right: 0; padding-top: calc(10px + env(safe-area-inset-top)); }
.today-gallery .hero-top .date-heading h1 { font-family: var(--serif); font-weight: 600; color: var(--ink); text-shadow: none; }
.today-gallery .hero-top .date-heading h1 span { color: var(--muted); }
.today-gallery .hero-top .eyebrow { color: var(--muted); text-shadow: none; }
.today-gallery .hero-top .on-glass { color: var(--ink); background: var(--surface); border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.today-gallery .hero-step { top: calc(82px + (100% - 82px) / 2 - 22px); }
.today-gallery .hero-step.prev { left: 22px; } .today-gallery .hero-step.next { right: 22px; }
.today-gallery .hero-caption { margin-top: 20px; padding: 0; }
.today-gallery .hero-latin { color: var(--muted); }
.today-gallery .hero-caption h2 { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
.today-gallery .hero-meta span { background: var(--tile); }
.today-gallery .hero-meta span:first-child { background: var(--sel); color: var(--on-sel); }
.today-gallery .hero-line { color: var(--ink-2); }
.today-gallery .hero-cta { background: var(--pill); color: var(--on-pill); }
.today-gallery .follow-button.on-glass { color: var(--ink); background: var(--surface); border-color: var(--line-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
.today-gallery .follow-button.on-glass[aria-pressed="true"] { background: var(--sel); color: var(--on-sel); border-color: var(--sel); }
.today-gallery .hero-steps, .today-gallery .hero-swatches { color: var(--muted); }
.today-gallery .hero-swatches i { border-color: var(--line-2); }
html:not(.is-poster) .today-agenda { background: var(--surface); border: 0; border-radius: 22px; color: var(--ink); padding: 14px 16px; }
html:not(.is-poster) .today-agenda .text-button { color: var(--ink); }
html:not(.is-poster) .today-agenda .quiet-note, html:not(.is-poster) .today-agenda .mine-time, html:not(.is-poster) .today-agenda .mine-kind { color: var(--muted); }
html:not(.is-poster) .today-agenda .mine-row { background: var(--tile); color: var(--ink); }
html:not(.is-poster) .next-block:not(.is-colour) { color: var(--ink); background: var(--surface); border-color: transparent; }
html:not(.is-poster) .next-art .missing-art { background: var(--tile); border-color: var(--line-2); }
.today-agenda { border-radius: 22px; }

/* ---------- 日历：月格（画框 tile / 光点 dot） ---------- */
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekdays { margin: 4px -8px 6px; font-family: var(--label); font-size: .6875rem; letter-spacing: .14em; color: var(--muted); text-align: center; }
.cal-weekdays .is-sun { color: #e5484d; }
.cal-grid { gap: 4px; margin: 0 -8px; }
.cal-cell { position: relative; min-width: 0; padding: 0; border-radius: 10px; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; color: var(--ink); }
.cal-cell.is-out { visibility: hidden; }
.cal-cell:focus-visible { outline-offset: 2px; }
.swipe-surface.is-dragging .cal-cell { pointer-events: none; }

/* 画框：每格是当天精选插画；没有图的日子是取自分类 / 插画的淡色块 */
.is-tile .cal-cell { aspect-ratio: 1 / 1.2; min-height: 0; background: color-mix(in srgb, var(--c) 17%, var(--page)); }
html.theme-dark .is-tile .cal-cell { background: color-mix(in srgb, var(--c) 24%, #2a2030); }
.is-tile .cal-cell.is-empty { background: var(--tile); }
.is-tile .cal-cell.is-solemn { background: color-mix(in srgb, #9a9aa2 26%, var(--page)); }
.cell-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.is-solemn .cell-art img { filter: saturate(.3); }
.is-tile .cell-num { position: absolute; left: 5px; top: 3px; font-family: "Instrument Serif", var(--serif); font-size: 1.125rem; line-height: 1.2; color: var(--ink); }
.is-tile .cal-cell:has(.cell-art img)::before { content: ""; position: absolute; inset: 0 0 auto; height: 55%; background: linear-gradient(180deg, #00000066, transparent); z-index: 0; }
.is-tile .cal-cell:has(.cell-art img) .cell-num { color: #fff; text-shadow: 0 1px 6px #00000080; z-index: 1; }
.is-tile .is-today .cell-num { left: 4px; top: 4px; min-width: 22px; padding: 0 5px; border-radius: 999px; background: var(--sel); color: var(--on-sel) !important; text-shadow: none !important; text-align: center; font-size: 1rem; }
.is-tile .cal-cell[aria-current="date"] { overflow: visible; box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--ink); z-index: 2; }
.cell-count { position: absolute; right: 4px; top: 5px; z-index: 1; padding: 0 4px; border-radius: 6px; font-family: var(--label); font-size: .5625rem; line-height: 1.5; font-weight: 600; color: #fff; background: #00000052; }
.is-tile .cal-cell:not(:has(.cell-art img)) .cell-count { color: var(--muted); background: transparent; }
.is-tile .cell-marks { position: absolute; left: 4px; right: 4px; bottom: 4px; z-index: 1; display: flex; flex-wrap: wrap; gap: 2px; }
.is-tile .cell-marks > * { display: inline-grid; place-items: center; min-width: 14px; height: 14px; border-radius: 7px; background: #00000059; color: #fff; }
.is-tile .cell-marks .mark-dot { min-width: 8px; width: 8px; height: 8px; margin: 3px; box-shadow: 0 0 0 1.5px #fff; background: var(--dot); }
.is-tile .cell-marks .mark-icon svg { width: 10px; height: 10px; }

/* 光点：数字 + 最多 2 个节日色点 */
.is-dot .cal-grid { gap: 2px; }
.is-dot .cal-cell { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 5px 0 6px; background: none; overflow: visible; }
.is-dot .cell-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-family: "Instrument Serif", var(--serif); font-size: 1.3125rem; line-height: 1; }
.is-dot .is-today .cell-num { box-shadow: inset 0 0 0 1.5px var(--ink); }
.is-dot .cal-cell[aria-current="date"] .cell-num { background: var(--sel); color: var(--on-sel); box-shadow: none; }
.cell-dots { display: flex; align-items: center; gap: 3px; height: 7px; }
.cell-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.cell-dots b { font-family: var(--label); font-size: .625rem; line-height: 1; font-weight: 600; color: var(--muted); }
.is-dot .cell-marks { display: flex; gap: 2px; color: var(--muted); }
.is-dot .cell-marks .mark-dot { width: 5px; height: 5px; }
.is-dot .cell-marks .mark-icon svg { width: 10px; height: 10px; }

/* 选中的那一天：满屏插画 + 浅色 / 深色毛玻璃 */
.sel-bleed { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; margin: 18px -20px 0; overflow: hidden; background: color-mix(in srgb, var(--c) 30%, var(--page)); }
.sel-bleed.is-solemn { background: color-mix(in srgb, #9a9aa2 30%, var(--page)); }
.sel-bleed-art { position: absolute; inset: 0; z-index: -2; }
.sel-bleed-art img { width: 100%; height: 100%; object-fit: cover; }
.sel-bleed.is-solemn .sel-bleed-art img { filter: saturate(.35); }
.sel-bleed-fade { position: absolute; inset: -1px 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--page) 0%, transparent) 26%, transparent 60%, color-mix(in srgb, var(--page) 55%, transparent) 100%); }
.sel-bleed.is-top { min-height: 480px; margin: calc(-14px - env(safe-area-inset-top)) -20px 6px; }
.sel-bleed.is-top .sel-bleed-fade { background: linear-gradient(180deg, #00000038 0%, transparent 18%, transparent 52%, var(--page) 100%); }
html.theme-dark .sel-bleed.is-top .sel-bleed-fade { background: linear-gradient(180deg, #00000038 0%, transparent 18%, transparent 52%, #3a2b40 100%); }
.sel-glass { margin: 0 14px 14px; padding: 16px 16px 14px; border-radius: 24px; color: var(--ink); background: var(--glass); border: 1px solid var(--glass-line); box-shadow: 0 10px 30px #1a1d2b1f; backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); }
.sel-kicker { font-family: var(--label); font-size: .6875rem; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sel-main { display: block; width: 100%; padding: 4px 0 2px; text-align: left; min-height: 0; }
.sel-latin { display: block; font-family: var(--label); font-weight: 300; font-size: .6875rem; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-title { display: block; margin: 2px 0 2px; font-family: var(--serif); font-size: 1.75rem; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
.sel-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-size: .875rem; line-height: 1.6; color: var(--ink-2); }
.sel-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 12px; }
.sel-more:empty { display: none; }
.sel-second { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: var(--tile); font-size: .8125rem; font-weight: 600; max-width: 100%; }
.sel-second i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); flex: none; }
.more-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--label); font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.week-fests .more-chip { min-height: 32px; }
.sel-actions { display: flex; gap: 10px; align-items: center; }
.sel-actions .primary-button { flex: 1; justify-content: space-between; min-height: 48px; }
.sel-actions .primary-button svg { width: 18px; height: 18px; }

/* 画框卡片 */
.sel-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; margin: 16px 0 0; padding: 12px; border-radius: 24px; background: var(--surface); box-shadow: 0 1px 2px #0000000a, 0 12px 30px #1a1d2b14; }
html.theme-dark .sel-card { box-shadow: none; border: 1px solid #ffffff0d; }
.sel-card-art { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--c) 24%, var(--page)); }
.sel-card-art img, .sel-card-art .missing-art { width: 100%; height: 100%; object-fit: cover; }
.sel-card.is-solemn .sel-card-art img { filter: saturate(.35); }
.sel-card .sel-title { font-size: 1.375rem; }
.sel-card .sel-more { margin: 6px 0 10px; }
.sel-card .primary-button { min-width: 0; min-height: 44px; padding: 0 14px 0 18px; font-size: .875rem; white-space: nowrap; }
.sel-card .round-button { width: 44px; height: 44px; }
.cal-style-a-card .grid-note, .cal-style-a-full .grid-note { margin-top: 12px; }
.day-extras .group-card h3 { font-size: 1rem; }

/* ---------- 设置：Rex 式分组和磁贴 ---------- */
.rex-settings .topbar h1 { font-size: 2.125rem; }
.set-caption { margin: 24px 8px 8px; font-family: var(--label); font-size: .6875rem; line-height: 1.6; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.set-group { list-style: none; margin: 0; padding: 0; border-radius: 22px; background: var(--surface); overflow: hidden; box-shadow: 0 1px 2px #0000000a; }
html.theme-dark .set-group { box-shadow: none; border: 1px solid #ffffff0d; }
.set-group li + li { position: relative; }
.set-group li + li::before { content: ""; position: absolute; left: 60px; right: 0; top: 0; border-top: 1px solid var(--line); }
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 9px 14px 9px 14px; text-align: left; color: var(--ink); font-size: .9375rem; cursor: pointer; }
.set-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--tile); color: var(--ink); }
.set-icon svg { width: 18px; height: 18px; }
.set-label { flex: 1; min-width: 0; font-weight: 600; line-height: 1.45; }
.set-label small { display: block; margin-top: 1px; font-size: .75rem; line-height: 1.5; font-weight: 400; color: var(--muted); }
.set-value { display: inline-flex; align-items: center; gap: 2px; max-width: 52%; color: var(--muted); font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-row > svg:last-child { width: 15px; height: 15px; color: var(--muted); }
.set-value select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; min-height: 44px; padding: 0 2px; text-align: right; cursor: pointer; }
.set-value select option { color: #111214; }
.set-value .updown { width: 15px; height: 15px; }
.set-row.is-select:focus-within { box-shadow: inset 0 0 0 3px var(--ink); border-radius: 22px; }
.set-row.is-select select:focus-visible { outline: none; }
.set-row.is-segment { cursor: default; flex-wrap: wrap; }
/* iOS 式开关 */
.set-row input[role="switch"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 51px; height: 31px; margin: 0; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: background-color .2s ease; }
.set-row input[role="switch"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px #00000040; transition: transform .2s ease; }
.set-row input[role="switch"]:checked { background: #34c759; }
.set-row input[role="switch"]:checked::before { transform: translateX(20px); }
html.theme-light .set-row input[role="switch"]:not(:checked) { background: #dedcd9; }
/* 本机数据卡片 */
.set-hero { display: block; width: 100%; padding: 18px; text-align: left; color: var(--ink); }
.set-hero-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.set-hero-head strong { font-family: var(--serif); font-size: 1.375rem; font-weight: 600; }
.set-hero-head span { font-family: var(--label); font-size: .875rem; font-weight: 600; color: var(--muted); }
.usage-bar { display: flex; gap: 3px; height: 12px; margin: 12px 0 10px; border-radius: 999px; overflow: hidden; background: var(--tile); }
.usage-bar i { min-width: 6px; background: var(--seg); }
.usage-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .75rem; color: var(--muted); }
.usage-legend span { display: inline-flex; align-items: center; gap: 5px; }
.usage-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--seg); }
.set-hero small { display: block; margin-top: 10px; font-size: .75rem; line-height: 1.6; color: var(--muted); }
.set-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; }
.set-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; min-height: 124px; padding: 14px 16px; border-radius: 22px; background: var(--surface); text-align: left; color: var(--ink); box-shadow: 0 1px 2px #0000000a; }
html.theme-dark .set-tile { box-shadow: none; border: 1px solid #ffffff0d; }
.set-tile .set-icon { margin-bottom: auto; color: #fff; }
.set-tile:nth-child(1) .set-icon { background: #7c6cf0; }
.set-tile:nth-child(2) .set-icon { background: var(--accent); color: var(--accent-on); }
.set-tile:nth-child(3) .set-icon { background: #3fa89c; }
.set-tile:nth-child(4) .set-icon { background: #8d8a93; }
.set-tile strong { font-size: .9375rem; line-height: 1.4; }
.set-tile small { font-size: .75rem; line-height: 1.5; color: var(--muted); }
.set-tile.is-stub { border: 1px dashed var(--line-2); background: transparent; box-shadow: none; }
.set-foot { margin: 26px 0 4px; text-align: center; font-family: var(--label); font-size: .6875rem; letter-spacing: .12em; color: var(--muted); }
.set-note { margin-top: 10px; font-size: .75rem; line-height: 1.6; color: var(--muted); }
/* 主题色：两段式 */
.mini-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--tile); }
.mini-seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; font-size: .8125rem; color: var(--muted); }
.mini-seg button[aria-checked="true"] { background: var(--surface-solid); color: var(--ink); font-weight: 650; box-shadow: 0 1px 3px #0000001f; }
.mini-seg i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px #00000026; }
/* 样式选择：小预览图 */
.style-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.style-picker:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.style-option { position: relative; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.style-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.style-preview { position: relative; display: flex; flex-direction: column; justify-content: flex-start; aspect-ratio: 3 / 4; margin-bottom: 6px; border-radius: 14px; overflow: hidden; background: var(--page); border: 1px solid var(--line); box-shadow: 0 0 0 2px transparent; }
.style-option input:checked + .style-preview { box-shadow: 0 0 0 2.5px var(--ink); border-color: transparent; }
.style-option input:focus-visible + .style-preview { outline: 3px solid var(--ink); outline-offset: 3px; }
.style-name { font-size: .8125rem; line-height: 1.4; font-weight: 650; }
.style-name small { display: block; font-family: var(--label); font-size: .625rem; letter-spacing: .08em; color: var(--muted); font-weight: 500; }
.style-note { font-size: .6875rem; line-height: 1.5; color: var(--muted); }
.style-option input:checked ~ .style-name::before { content: "✓ "; }
.pv-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 7px 6px; }
.pv-grid i { aspect-ratio: 1 / 1.15; border-radius: 2px; background: hsl(calc(var(--k) * 47 + 20) 38% 68%); }
.pv-grid.is-dot { gap: 5px 3px; padding: 6px 8px; }
.pv-grid.is-dot i { width: 4px; height: 4px; aspect-ratio: auto; margin: auto; border-radius: 50%; background: var(--muted); }
.pv-grid.is-dot i:nth-child(11) { width: 9px; height: 9px; background: var(--ink); }
.pv-art { display: block; height: 46%; background: linear-gradient(160deg, #9fb4a8, #c8a98c 55%, #e9e2d6); }
.pv-art.is-bottom { margin-top: auto; height: 44%; -webkit-mask: linear-gradient(180deg, transparent, #000 35%); mask: linear-gradient(180deg, transparent, #000 35%); }
.pv-art.is-poster { height: 62%; -webkit-mask: linear-gradient(180deg, #000 60%, transparent); mask: linear-gradient(180deg, #000 60%, transparent); }
.pv-card { display: block; margin: auto 6px 6px; height: 28%; border-radius: 6px; background: var(--surface-solid); box-shadow: 0 2px 8px #0000001f; }
.pv-mat { display: block; margin: 14px 12px 0; padding: 5px; background: var(--surface-solid); box-shadow: 0 2px 8px #0000001f; }
.pv-mat .pv-art { height: auto; aspect-ratio: 1; }
.pv-lines { display: block; height: 30px; margin: 8px 10px; background: linear-gradient(var(--line-2) 0 0) 0 2px / 70% 5px no-repeat, linear-gradient(var(--line) 0 0) 0 14px / 90% 4px no-repeat, linear-gradient(var(--line) 0 0) 0 24px / 55% 4px no-repeat; }
.pv-poster .pv-lines, .pv-poster { background-color: #3d2c3a; }
.pv-poster .pv-lines { background: linear-gradient(#ffffffcc 0 0) 0 2px / 70% 5px no-repeat, linear-gradient(#ffffff66 0 0) 0 14px / 90% 4px no-repeat, linear-gradient(#ffffff66 0 0) 0 24px / 55% 4px no-repeat; }

/* ---------- 减弱视觉效果：没有毛玻璃、模糊和渐隐，全部实色 ---------- */
html.reduce-visual *, html.reduce-visual *::before, html.reduce-visual *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.reduce-visual .nav-capsule, html.reduce-visual .nav-action { background: var(--surface-solid); }
html.reduce-visual.theme-dark .nav-capsule, html.reduce-visual.theme-dark .nav-action, html.reduce-visual.is-poster .nav-capsule, html.reduce-visual.is-poster .nav-action { background: #09070a; }
html.reduce-visual .sel-glass { background: var(--surface-solid); border-color: var(--line); }
html.reduce-visual .sel-bleed-fade { display: none; }
html.reduce-visual .sel-bleed { justify-content: flex-start; min-height: 0; }
html.reduce-visual .sel-bleed-art { position: relative; inset: auto; height: 300px; z-index: 0; }
html.reduce-visual .sel-bleed.no-art .sel-bleed-art { height: 120px; }
html.reduce-visual .sel-glass { margin: -28px 14px 14px; position: relative; }
html.reduce-visual .hero-fade { background: linear-gradient(180deg, #00000059 0, #00000059 64px, transparent 64px); }
html.reduce-visual .hero-caption { margin-top: 0; padding-top: 18px; }
html.reduce-visual .is-tile .cal-cell::before { display: none; }
html.reduce-visual .is-tile .cal-cell:has(.cell-art img) .cell-num { background: #000000a6; border-radius: 6px; padding: 0 4px; text-shadow: none; }
html.reduce-visual .on-glass, html.reduce-visual .hero-step { background: #000000a6; border-color: transparent; }
html.reduce-visual dialog::backdrop { background: #17212db3; }
html.reduce-visual .step-nav { background: var(--page); }
html.reduce-visual .pv-art { -webkit-mask: none; mask: none; }

@media (hover: hover) {
  .set-row:not(.is-segment):not(.is-switch):hover, .set-tile:hover, .set-hero:hover { background-color: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
  .nav-button:not([aria-current]):hover { color: var(--ink); }
  html.theme-dark .nav-button:not([aria-current]):hover, html.is-poster .nav-button:not([aria-current]):hover { color: #fff; }
}
@media (max-width: 360px) {
  .nav-action { width: 58px; height: 58px; min-height: 58px; }
  .sel-card { grid-template-columns: 92px minmax(0, 1fr); }
  .style-note { display: none; }
}
html.reduce-motion .set-row input[role="switch"], html.reduce-motion .set-row input[role="switch"]::before { transition: none; }