:root{
  --bg:#fff7ed;--bg2:#ffffff;--card:#ffffff;--ink:#1c1917;--ink2:#57534e;--ink3:#a8a29e;
  --line:#f1e7dc;--accent:#f97316;--accent2:#fb7185;--accent-ink:#fff;
  --ok:#16a34a;--warn:#eab308;--mute:#9ca3af;
  --shadow:0 1px 2px rgba(28,25,23,.05),0 8px 24px -12px rgba(249,115,22,.25);
  --shadow-lg:0 20px 60px -20px rgba(28,25,23,.35);
  --r:18px;--r-sm:12px;
  --font:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
html.dark{
  --bg:#0f0f14;--bg2:#17171f;--card:#1b1b25;--ink:#f5f5f4;--ink2:#b5b2ad;--ink3:#6f6c68;
  --line:#2a2a36;--accent:#fb923c;--accent2:#f472b6;--accent-ink:#1c1917;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-lg:0 30px 80px -20px rgba(0,0,0,.8);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;
  background-image:radial-gradient(1200px 500px at 10% -10%,rgba(251,146,60,.18),transparent 60%),radial-gradient(900px 400px at 100% 0,rgba(244,114,182,.14),transparent 60%);
  background-attachment:fixed;transition:background-color .3s,color .3s}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:var(--accent);text-decoration:none}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
@media (max-width:640px){.wrap{width:min(1180px,100% - 24px)}}
[hidden]{display:none!important}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;gap:14px;padding:10px 0}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);flex:none}
.logo-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));font-size:22px;box-shadow:var(--shadow)}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text strong{font-size:17px;letter-spacing:.02em}
.logo-text small{font-size:11px;color:var(--ink3)}
.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:0 10px 0 14px;height:42px;max-width:560px;transition:box-shadow .2s,border-color .2s}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.search svg{width:18px;height:18px;fill:none;stroke:var(--ink3);stroke-width:2;stroke-linecap:round;flex:none}
.search input{flex:1;border:0;background:none;outline:0;min-width:0;height:100%}
.search input::-webkit-search-cancel-button{display:none}
.topbar-actions{display:flex;gap:6px;flex:none}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);font-size:17px;transition:transform .15s,background .2s}
.icon-btn:hover{transform:translateY(-1px);background:var(--card)}
.icon-btn:active{transform:scale(.95)}
.theme-moon{display:none}html.dark .theme-sun{display:none}html.dark .theme-moon{display:inline}
@media (max-width:640px){
  .topbar-inner{flex-wrap:wrap;gap:8px}
  .logo-text small{display:none}
  .search{order:3;flex-basis:100%;max-width:none;height:40px}
  .topbar-actions{margin-left:auto}
}

/* hero */
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:34px 0 10px}
.hero h1{font-size:clamp(26px,4vw,40px);line-height:1.15;margin:0 0 10px;letter-spacing:-.01em}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0;color:var(--ink2);max-width:60ch}
.hero-stats{display:flex;gap:10px;flex:none}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;min-width:84px;text-align:center;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s}
.stat:hover{transform:translateY(-2px)}
.stat b{display:block;font-size:22px;line-height:1.1}
.stat span{font-size:12px;color:var(--ink3)}
@media (max-width:760px){.hero{flex-direction:column;align-items:stretch;padding-top:22px}.hero-stats{overflow-x:auto;scrollbar-width:none}.hero-stats::-webkit-scrollbar{display:none}}

/* tabs */
.tabs{display:flex;gap:4px;margin-top:18px;padding:4px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;width:fit-content;max-width:calc(100% - 32px)}
.tab{padding:8px 16px;border-radius:999px;color:var(--ink2);font-weight:500;white-space:nowrap;transition:background .2s,color .2s}
.tab.is-active{background:var(--ink);color:var(--bg)}
.tab-count{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:var(--accent2);color:#fff;font-size:11px;line-height:18px;text-align:center;margin-left:2px}
@media (max-width:640px){.tabs{width:auto;max-width:none;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{padding:7px 13px;font-size:14px}}

/* filters */
.filters{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){.chip-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-inline:-12px;padding-inline:12px}.chip-row::-webkit-scrollbar{display:none}}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink2);font-size:13.5px;white-space:nowrap;transition:all .18s}
.chip:hover{border-color:var(--accent)}
.chip.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px -8px var(--accent)}
.chip-ghost{background:transparent;border-style:dashed}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot-ongoing{background:var(--ok)}.dot-upcoming{background:var(--warn)}.dot-ended{background:var(--mute)}
.chip.is-active .dot{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;padding:7px 30px 7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink2);font-size:13.5px;cursor:pointer;max-width:180px;text-overflow:ellipsis}
.select-wrap::after{content:"⌄";position:absolute;right:11px;top:50%;transform:translateY(-60%);pointer-events:none;color:var(--ink3)}
.select-wrap select.is-set{border-color:var(--accent);color:var(--ink);font-weight:500}

.result-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 12px;color:var(--ink3);font-size:13px}
.active-filters{display:flex;gap:6px;flex-wrap:wrap}
.active-filters .af{padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:12px}

/* grid + card */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding-bottom:40px}
@media (max-width:640px){.grid{grid-template-columns:1fr;gap:12px}}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;cursor:pointer;display:flex;flex-direction:column;animation:pop .35s both}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card-art{position:relative;height:118px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:var(--art,linear-gradient(135deg,#f97316,#fb7185))}
.card-art::before{content:"";position:absolute;inset:0;background:radial-gradient(240px 120px at 100% 0,rgba(255,255,255,.35),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 6px,transparent 6px 14px);pointer-events:none}
.card-art::after{content:var(--emoji,"🧋");position:absolute;right:14px;bottom:8px;font-size:52px;opacity:.9;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));transform:rotate(-8deg)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.brand-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);font-size:12px;font-weight:600;letter-spacing:.02em}
.status{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:rgba(0,0,0,.28);color:#fff}
.status .dot{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.status-ongoing .dot{background:#4ade80}.status-upcoming .dot{background:#fde047}.status-ended .dot{background:#d1d5db}
.card-ip{position:relative;z-index:1;font-size:19px;font-weight:700;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.25);padding-right:60px}
.card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-theme{color:var(--ink2);font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12.5px;color:var(--ink3)}
.card-meta b{color:var(--ink2);font-weight:500}
.card-body .status{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink2);padding:2px 8px}
.card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.tag{font-size:11.5px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink2)}
.tag-rumor{background:color-mix(in srgb,var(--warn) 25%,transparent);color:#854d0e}
html.dark .tag-rumor{color:#fde68a}
.fav{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#9ca3af;font-size:17px;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform .15s}
html.dark .fav{background:rgba(27,27,37,.85)}
.fav:hover{transform:scale(1.1)}
.fav.is-on{color:#f43f5e;animation:heart .4s}
@keyframes heart{30%{transform:scale(1.35)}60%{transform:scale(.9)}}
.card-art .fav{top:auto;bottom:-17px;right:14px;display:none}
.countdown{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.countdown.urgent{background:color-mix(in srgb,#ef4444 14%,transparent);color:#ef4444}

/* empty */
.empty{text-align:center;padding:60px 0;color:var(--ink3)}
.empty-art{font-size:56px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:0 8px 20px -10px var(--accent);transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none}

/* calendar */
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cal-head h2{margin:0;font-size:18px;min-width:120px;text-align:center}
.cal-weekdays,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-weekdays span{text-align:center;font-size:12px;color:var(--ink3);padding:4px 0}
.cal-cell{min-height:92px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:border-color .15s,transform .15s;overflow:hidden}
.cal-cell:hover{border-color:var(--accent);transform:translateY(-1px)}
.cal-cell.is-out{opacity:.4}
.cal-cell.is-today .cal-d{background:var(--accent);color:var(--accent-ink)}
.cal-cell.is-selected{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.cal-d{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:600}
.cal-ev{font-size:11px;line-height:1.3;padding:2px 6px;border-radius:6px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--art,var(--accent))}
.cal-ev.is-start::before{content:"● "}
.cal-more{font-size:11px;color:var(--ink3)}
.cal-dots{display:none;gap:3px;flex-wrap:wrap}
.cal-dots i{width:6px;height:6px;border-radius:50%;background:var(--art,var(--accent))}
@media (max-width:700px){.cal-cell{min-height:52px;padding:4px;align-items:center}.cal-ev,.cal-more{display:none}.cal-dots{display:flex;justify-content:center}}
.cal-day-list{margin-top:16px;display:grid;gap:10px;padding-bottom:40px}
.cal-day-list h3{margin:6px 0 0;font-size:15px;color:var(--ink2)}
.row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.row:hover{transform:translateX(3px);box-shadow:var(--shadow)}
.row-art{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:var(--art,var(--accent));flex:none}
.row-main{flex:1;min-width:0}
.row-main b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-main span{font-size:12.5px;color:var(--ink3)}
.row .status{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink2);flex:none}

/* timeline */
.timeline{position:relative;padding:6px 0 40px 22px;border-left:2px dashed var(--line);margin-left:10px}
.tl-month{position:relative;margin:18px 0 10px}
.tl-month::before{content:"";position:absolute;left:-29px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
.tl-month h3{margin:0;font-size:16px}
.tl-month small{color:var(--ink3)}
.tl-items{display:grid;gap:8px}

/* saved */
.saved-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;color:var(--ink3);font-size:13px}
.saved-tools p{margin:0;flex:1}

/* sheet / modal */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-backdrop{position:absolute;inset:0;background:rgba(15,15,20,.55);backdrop-filter:blur(4px);animation:fade .25s}
@keyframes fade{from{opacity:0}}
.sheet-panel{position:relative;width:100%;max-width:720px;max-height:92dvh;background:var(--card);border-radius:24px 24px 0 0;box-shadow:var(--shadow-lg);overflow:auto;animation:up .32s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@media (min-width:720px){.sheet{align-items:center;padding:24px}.sheet-panel{border-radius:24px;max-height:88vh}}
.sheet-grab{position:sticky;top:0;z-index:3;height:0}
.sheet-grab::before{content:"";position:absolute;left:50%;top:8px;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.7);transform:translateX(-50%)}
.d-hero{position:relative;padding:22px 20px 18px;color:#fff;background:var(--art,linear-gradient(135deg,#f97316,#fb7185));overflow:hidden}
.d-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 180px at 100% 0,rgba(255,255,255,.35),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 6px,transparent 6px 14px)}
.d-hero::after{content:var(--emoji,"🧋");position:absolute;right:18px;bottom:-6px;font-size:84px;opacity:.85;filter:drop-shadow(0 8px 16px rgba(0,0,0,.3));transform:rotate(-8deg)}
.d-hero > *{position:relative;z-index:1}
.d-hero .brand-pill{margin-bottom:10px}
.d-hero h2{margin:0 0 6px;font-size:24px;line-height:1.2;padding-right:90px;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.d-hero p{margin:0;opacity:.95;padding-right:90px}
.d-close{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.3);color:#fff;display:grid;place-items:center;font-size:16px}
.d-body{padding:18px 20px 28px;display:grid;gap:18px}
.d-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.fact{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.fact small{display:block;color:var(--ink3);font-size:11.5px;margin-bottom:2px}
.fact b{font-size:14px;font-weight:600}
.d-actions{display:flex;gap:8px;flex-wrap:wrap}
.d-sec h4{margin:0 0 8px;font-size:14px;color:var(--ink3);font-weight:600;letter-spacing:.04em;display:flex;align-items:center;gap:6px}
.d-sec ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.d-sec li{position:relative;padding:8px 12px 8px 30px;background:var(--bg);border-radius:10px;font-size:14px}
.d-sec li::before{content:attr(data-i);position:absolute;left:10px;top:8px;font-size:12px;color:var(--accent);font-weight:700}
.d-sec p{margin:0;font-size:14px;color:var(--ink2)}
.d-links a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:13px;margin:0 6px 6px 0;background:var(--bg)}
.d-links a:hover{border-color:var(--accent)}
.d-bar{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink3)}
.bar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px}
.d-related{display:grid;gap:8px}

/* toast / fab */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:13.5px;opacity:0;pointer-events:none;transition:.25s;z-index:80;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.fab{position:fixed;right:18px;bottom:22px;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lg);font-size:18px;z-index:30}
.foot{padding:20px 0 60px;color:var(--ink3);font-size:12.5px;border-top:1px solid var(--line)}
.foot p{margin:4px 0}
body.no-scroll{overflow:hidden}
.skeleton{height:260px;border-radius:var(--r);background:linear-gradient(90deg,var(--card),var(--bg),var(--card));background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}