:root {
  --bg:#f6f4ee; --ink:#202426; --muted:#667074; --line:#d9d5ca;
  --panel:#fffdf8; --accent:#b3261e; --blue:#176b87; --green:#496b2e;
  --shadow:0 18px 46px rgba(35,31,24,.12);
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif; line-height:1.45; }
a { color:inherit; }
button,select { font:inherit; }
.page { width:min(1500px,calc(100% - 32px)); margin:0 auto; padding:18px 0 36px; }
.site-hero { position:relative; min-height:clamp(280px,40vw,520px); overflow:hidden; background:#202426; }
.site-hero::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 0%,rgba(12,16,18,.12) 42%,rgba(12,16,18,.72) 100%),linear-gradient(90deg,rgba(12,16,18,.38),rgba(12,16,18,.08) 52%,rgba(12,16,18,.32)); pointer-events:none; }
.site-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-inner { position:relative; z-index:2; width:min(1500px,calc(100% - 32px)); min-height:inherit; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:1fr auto; gap:18px; align-items:end; padding:clamp(24px,4vw,48px) 0; }
.hero-title { grid-column:1; grid-row:2; margin:0; color:#fffdf8; font-size:clamp(2.45rem,8vw,7rem); font-weight:820; line-height:.96; text-shadow:0 4px 28px rgba(0,0,0,.5); }
.stats { grid-column:2; grid-row:2; display:grid; grid-template-columns:repeat(3,minmax(86px,1fr)); gap:8px; min-width:min(100%,360px); }
.stat { color:#fffdf8; background:rgba(255,253,248,.06); border:1px solid rgba(255,253,248,.78); border-radius:8px; padding:10px 12px; backdrop-filter:blur(8px); }
.stat strong { display:block; font-size:1.22rem; }
.stat span { color:rgba(255,253,248,.78); font-size:.78rem; }
.season-nav { display:grid; grid-template-columns:auto minmax(180px,320px) auto; align-items:end; justify-content:center; gap:10px; padding:4px 0 18px; border-bottom:1px solid var(--line); }
.season-picker { display:grid; gap:4px; color:var(--muted); font-size:.78rem; font-weight:760; }
.season-picker select,.season-step { min-height:40px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); padding:7px 11px; }
.season-picker select { width:100%; font-weight:760; }
.season-step { cursor:pointer; color:var(--blue); font-weight:760; }
.season-step:disabled { opacity:.42; cursor:not-allowed; }
.season-step:not(:disabled):hover,.season-picker select:focus { border-color:var(--blue); outline:none; }
.filters { display:grid; gap:10px; padding:16px 0 0; }
.filter-heading,.paper-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.filter-heading h2,.paper-head h2 { margin:0; font-size:1.05rem; }
#result-count,#watch-count,.share-status { color:var(--muted); font-size:.86rem; }
.filter-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.filter-chip { min-height:34px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); padding:6px 10px; font-size:.88rem; font-weight:680; cursor:pointer; }
.filter-chip span { color:var(--muted); }
.filter-chip.is-active { background:var(--blue); border-color:var(--blue); color:#fffdf8; }
.filter-chip.is-active span { color:rgba(255,253,248,.78); }
.empty-state,.loading-state { color:var(--muted); }
.empty-state { display:none; }
.empty-state.is-visible { display:block; }
.loading-state.is-error { color:var(--accent); }
.dimsum-paper { display:grid; gap:12px; padding:18px 0 0; margin-top:16px; border-top:1px solid var(--line); }
.paper-title,.paper-actions,.shared-list-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.paper-actions,.shared-list-actions { justify-content:flex-end; }
.clear-watchlist,.shared-action,.share-watchlist { border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); cursor:pointer; font-weight:760; }
.clear-watchlist,.shared-action { min-height:34px; padding:5px 10px; font-size:.82rem; }
.share-watchlist { width:34px; height:34px; display:grid; place-items:center; color:var(--blue); padding:0; }
.share-watchlist:disabled { opacity:.44; cursor:not-allowed; }
.share-watchlist svg { width:17px; height:17px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.shared-list-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #bcd8e1; border-radius:8px; background:#eef7fb; padding:10px 12px; }
.shared-list-banner[hidden] { display:none; }
.shared-list-banner strong { display:block; font-size:.9rem; }
.shared-list-banner span { color:var(--muted); font-size:.78rem; }
.shared-action.primary { background:var(--blue); border-color:var(--blue); color:#fffdf8; }
.programme-grid { display:grid; grid-template-columns:repeat(7,minmax(178px,1fr)); gap:10px; overflow-x:auto; padding-bottom:4px; }
.programme-day { min-width:178px; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.programme-day h3 { margin:0; padding:8px 10px; background:#f1eee5; border-bottom:1px solid var(--line); font-size:.92rem; }
.programme-items { min-height:58px; }
.programme-empty { margin:0; padding:11px 10px; color:var(--muted); font-size:.78rem; }
.programme-item { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); gap:8px; padding:9px 38px 9px 10px; border-top:1px solid var(--line); }
.programme-item:first-child { border-top:0; }
.programme-item.is-clickable { cursor:pointer; }
.programme-item.is-clickable:hover { background:#f7f3e9; box-shadow:inset 3px 0 var(--accent); }
.programme-time { grid-column:1/-1; color:var(--accent); font-size:.82rem; font-weight:800; }
.programme-thumb { width:48px; aspect-ratio:1; border-radius:6px; object-fit:cover; background:#ded8ca; }
.programme-info { display:grid; align-content:start; gap:4px; min-width:0; }
.programme-title { margin:0; font-size:.84rem; line-height:1.25; font-weight:780; overflow-wrap:anywhere; }
.programme-scoreline { display:flex; justify-content:space-between; gap:6px; color:var(--muted); font-size:.74rem; }
.programme-score { color:var(--accent); font-weight:800; text-decoration:none; }
.programme-remove { position:absolute; top:6px; right:6px; width:26px; height:26px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--muted); cursor:pointer; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; padding-top:22px; }
.anime-card { position:relative; min-width:0; min-height:335px; display:grid; align-items:end; isolation:isolate; background:#202426; border:1px solid rgba(32,36,38,.18); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); cursor:pointer; transition:transform 160ms ease,box-shadow 160ms ease; }
.anime-card::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(12,16,18,.04),rgba(12,16,18,.22) 34%,rgba(12,16,18,.78) 72%,rgba(12,16,18,.94)); pointer-events:none; }
.anime-card.is-hidden { display:none; }
.anime-card.is-selected { border-color:rgba(214,69,55,.86); box-shadow:0 18px 46px rgba(166,44,34,.24),var(--shadow); }
.anime-card:hover,.anime-card:focus-visible { outline:0; transform:translateY(-2px); box-shadow:0 18px 44px rgba(0,0,0,.3); }
.poster { position:absolute; inset:0; z-index:0; background:#ded8ca; }
.poster img { width:100%; height:100%; object-fit:cover; transition:transform 180ms ease; }
.anime-card:hover .poster img { transform:scale(1.035); }
.rank-chip { position:absolute; z-index:2; top:10px; left:10px; background:rgba(32,36,38,.82); color:#fffdf8; border-radius:8px; padding:5px 8px; font-size:.82rem; font-weight:760; backdrop-filter:blur(8px); }
.score-stack { position:absolute; z-index:2; top:9px; right:10px; display:grid; justify-items:end; text-align:right; }
.score { display:inline-flex; align-items:baseline; gap:5px; color:#fffdf8; text-decoration:none; font-weight:820; text-shadow:0 2px 9px rgba(0,0,0,.8); }
.score-label { color:rgba(255,253,248,.86); font-size:.66rem; }
.score-value { font-size:1.5rem; line-height:1; }
.score-high .score-value { color:#64e58e; } .score-good .score-value { color:#7dd7ff; } .score-mid .score-value { color:#ffd166; } .score-low .score-value { color:#ff8a80; } .score-na .score-value { color:#d7d7d1; font-size:1rem; }
.votes { color:rgba(255,253,248,.88); font-size:.7rem; font-weight:720; text-shadow:0 1px 5px rgba(0,0,0,.8); }
.card-body { position:relative; z-index:2; display:grid; align-content:end; gap:7px; padding:58px 12px 12px; color:#fffdf8; text-shadow:0 1px 2px rgba(0,0,0,.42); }
.card-body h2 { margin:1px 0 0; font-size:1rem; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.english { margin:0; color:rgba(255,253,248,.9); font-size:.84rem; font-weight:680; line-height:1.22; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.category-tags,.tags { display:flex; flex-wrap:wrap; gap:6px; min-height:24px; }
.category-tags span,.tags span { min-height:24px; border-radius:6px; padding:3px 8px; font-size:.76rem; font-weight:650; text-shadow:none; }
.category-tags span { background:rgba(238,247,251,.92); color:var(--blue); }
.tags span { background:rgba(238,244,232,.9); color:var(--green); }
.watch-toggle { width:100%; min-height:38px; border:1px solid rgba(255,253,248,.62); border-radius:8px; background:linear-gradient(135deg,rgba(255,253,248,.98),rgba(238,247,251,.94)); color:var(--blue); padding:6px 10px; font-size:.82rem; font-weight:760; cursor:pointer; }
.watch-toggle::before { content:""; display:inline-block; width:22px; height:22px; margin-right:7px; vertical-align:middle; background:url("assets/dimsum-checkbox-empty.png") center/contain no-repeat; }
.watch-toggle.is-selected { color:#8f241b; border-color:rgba(214,69,55,.78); }
.watch-toggle.is-selected::before { background-image:url("assets/dimsum-checkbox-checked.png"); }
.meta { display:flex; justify-content:space-between; gap:10px; padding-top:7px; border-top:1px solid rgba(255,253,248,.24); color:rgba(255,253,248,.78); font-size:.74rem; }
footer { margin-top:26px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; }
footer a { color:var(--blue); font-weight:650; }
@media (max-width:760px) {
  .page,.hero-inner { width:min(100% - 20px,1500px); }
  .site-hero { min-height:390px; }
  .hero-inner { grid-template-columns:1fr; grid-template-rows:1fr auto auto; gap:14px; padding:24px 0; }
  .hero-title { grid-column:1; grid-row:2; font-size:clamp(3.1rem,17vw,5.4rem); }
  .stats { grid-column:1; grid-row:3; width:100%; }
  .season-nav { grid-template-columns:1fr 1fr; }
  .season-picker { grid-column:1/-1; grid-row:1; }
  .paper-head,.shared-list-banner { display:grid; }
  .paper-actions,.shared-list-actions { justify-content:flex-start; }
  .programme-grid { grid-template-columns:repeat(7,minmax(190px,1fr)); }
  .grid { grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:10px; }
  .anime-card { min-height:285px; }
  .card-body { padding:50px 10px 10px; }
  .meta { display:grid; }
}