:root{
  --bg:#070912; --ink:#eef1ff; --muted:rgba(226,232,255,.55);
  --glass:rgba(255,255,255,.055); --stroke:rgba(255,255,255,.12);
  --grad:linear-gradient(100deg,#ffd166,#ff7ab6 48%,#8b9dff);
  --r:22px;
  --cn:#ff6b6b; --ea:#34d399; --west:#8b9dff; --me:#f59e0b; --ind:#f472b6; --world:#38bdf8;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* 浮动光斑背景 */
.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blobs i{position:absolute;border-radius:50%;filter:blur(110px);opacity:.35}
.blobs i:nth-child(1){width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:#4c1d95;animation:float1 22s ease-in-out infinite alternate}
.blobs i:nth-child(2){width:38vmax;height:38vmax;right:-10vmax;top:24vmax;background:#be185d;opacity:.26;animation:float2 26s ease-in-out infinite alternate}
.blobs i:nth-child(3){width:42vmax;height:42vmax;left:14vmax;bottom:-18vmax;background:#1d4ed8;opacity:.28;animation:float1 30s ease-in-out infinite alternate-reverse}
@keyframes float1{to{transform:translate(6vmax,4vmax) scale(1.08)}}
@keyframes float2{to{transform:translate(-5vmax,-6vmax) scale(1.12)}}

.glass{background:var(--glass);border:1px solid var(--stroke);border-radius:var(--r);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1080px;margin:0 auto;padding:22px 20px 10px}
.brand{display:flex;align-items:center;gap:12px}
.logo{font-size:34px;filter:drop-shadow(0 0 12px rgba(255,209,102,.5))}
.brand h1{margin:0;font-size:21px;font-family:"Noto Serif SC",serif;font-weight:900;letter-spacing:.5px}
.brand p{margin:2px 0 0;font-size:10.5px;letter-spacing:3.2px;text-transform:uppercase;color:var(--muted);font-family:"Outfit",sans-serif}
.clock{font-family:"Outfit",sans-serif;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13.5px;letter-spacing:.4px;text-align:right}
.clock b{color:var(--ink);font-weight:600}

main{max-width:1080px;margin:0 auto;padding:14px 20px 30px}

/* hero */
.hero{padding:38px 24px 34px;text-align:center;margin-bottom:16px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 50% -20%,rgba(139,157,255,.14),transparent 70%);pointer-events:none}
.eyebrow{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--muted);font-family:"Outfit",sans-serif}
.hero-emoji{font-size:84px;line-height:1;margin:14px 0 6px;filter:drop-shadow(0 10px 34px rgba(0,0,0,.45))}
.hero-name{margin:2px 0 4px;font-size:44px;font-family:"Noto Serif SC",serif;font-weight:900}
.hero-en{font-family:"Outfit",sans-serif;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)}
.hero-date{margin-top:10px;font-size:15px;color:var(--muted)}
.hero-desc{margin-top:4px;font-size:13px;color:var(--muted);opacity:.85}
.timer{display:flex;gap:10px;justify-content:center;margin:22px 0 20px;flex-wrap:wrap}
.tile{min-width:86px;padding:12px 10px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.tile b{display:block;font-family:"Outfit",sans-serif;font-weight:800;font-size:40px;font-variant-numeric:tabular-nums;line-height:1}
.tile i{display:block;margin-top:6px;font-style:normal;font-size:11.5px;color:var(--muted);letter-spacing:2px}
.tile.today{border-color:rgba(255,209,102,.45);background:rgba(255,209,102,.08)}
.tile.today b{color:#ffd166;font-size:26px}
.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* 标签 */
.tag{display:inline-block;padding:2.5px 10px;font-size:11px;border-radius:999px;border:1px solid;letter-spacing:1px}
.tag[data-region="cn"]{color:var(--cn);border-color:rgba(255,107,107,.4)}
.tag[data-region="ea"]{color:var(--ea);border-color:rgba(52,211,153,.4)}
.tag[data-region="west"]{color:var(--west);border-color:rgba(139,157,255,.4)}
.tag[data-region="me"]{color:var(--me);border-color:rgba(245,158,11,.4)}
.tag[data-region="ind"]{color:var(--ind);border-color:rgba(244,114,182,.4)}
.tag[data-region="world"]{color:var(--world);border-color:rgba(56,189,248,.4)}

/* 卡片网格 */
.grid{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.card{padding:16px 16px 14px;border-radius:20px;background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(14px);
 cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease;position:relative;outline:none}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:rgba(255,255,255,.28)}
.card.selected{border-color:rgba(255,209,102,.55);background:rgba(255,209,102,.05)}
.card .row1{display:flex;justify-content:space-between;align-items:flex-start}
.card .emoji{font-size:34px;line-height:1}
.card .name{margin-top:10px;font-weight:700;font-size:17px}
.card .en{margin-top:2px;font-size:11.5px;color:var(--muted);font-family:"Outfit",sans-serif;letter-spacing:.6px}
.card .date{margin-top:9px;font-size:12.5px;color:var(--muted)}
.card .bottom{margin-top:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.card .days b{display:inline-block;font-family:"Outfit",sans-serif;font-weight:800;font-size:38px;line-height:1;font-variant-numeric:tabular-nums}
.card .days i{font-style:normal;font-size:11px;color:var(--muted);margin-left:5px}
.daystoday b{font-size:22px!important;color:#ffd166}

.share{opacity:0;transform:translateY(2px);transition:.18s;background:rgba(255,255,255,.09);color:var(--ink);
 border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 11px;font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap}
.card:hover .share,.card:focus-within .share{opacity:1;transform:none}
.share:hover{background:rgba(255,255,255,.16)}
@media (hover:none){.share{opacity:1;transform:none}}

/* 筛选工具条 */
.toolbar{position:sticky;top:10px;z-index:6;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;margin-top:4px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--muted);
 border-radius:999px;padding:5.5px 13px;font-size:12.5px;cursor:pointer;font-family:inherit;transition:.15s}
.chip:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.chip.active{color:#181226;background:linear-gradient(100deg,#ffd166,#ff7ab6);border-color:transparent;font-weight:600}
.search{flex:0 0 200px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--ink);
 border-radius:999px;padding:7px 14px;font-size:13px;outline:none;font-family:inherit}
.search::placeholder{color:var(--muted)}
.search:focus{border-color:rgba(139,157,255,.6)}

.empty{text-align:center;color:var(--muted);padding:34px 0;font-size:14px}

/* 按钮 */
.btn{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);color:var(--ink);border-radius:999px;
 padding:9px 18px;font-size:13.5px;cursor:pointer;font-family:inherit;transition:.15s}
.btn:hover{background:rgba(255,255,255,.15);transform:translateY(-1px)}
.btn.primary{background:var(--grad);color:#181226;border:none;font-weight:700}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}

/* toast */
.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);opacity:0;transition:.25s;
 background:rgba(20,22,40,.92);border:1px solid rgba(255,255,255,.18);color:var(--ink);
 padding:9px 18px;border-radius:999px;font-size:13px;z-index:99;pointer-events:none;backdrop-filter:blur(10px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* 分享图片弹窗 */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,6,14,.72);backdrop-filter:blur(8px)}
.modal-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:13px;max-height:94vh;overflow:auto;padding:8px}
#shareCanvas{width:min(76vw,370px);height:auto;border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15)}
.modal-hint{margin:0;font-size:11.5px;color:var(--muted);letter-spacing:.5px}
.modal-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.modal-close{position:absolute;top:2px;right:-2px;z-index:2;width:32px;height:32px;border-radius:50%;
 border:1px solid rgba(255,255,255,.2);background:rgba(10,12,24,.7);color:var(--ink);cursor:pointer;font-size:13px}

.foot{max-width:1080px;margin:0 auto;padding:8px 20px 34px;text-align:center;color:var(--muted);font-size:12px;line-height:1.8}
.foot .mono{font-family:"Outfit",sans-serif;letter-spacing:2px;text-transform:uppercase;font-size:10.5px;opacity:.7}

/* ===================== detail page ===================== */
#ambient{position:fixed;inset:0;z-index:-2;display:none;transition:opacity .4s}
body.has-ambient .blobs{display:none}

.detail .hero{display:none}
.detail main{max-width:860px}
#detailBody{padding:6px 4px 10px}

.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;
 font-size:13.5px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
 background:rgba(255,255,255,.06);transition:.15s;backdrop-filter:blur(10px)}
.back:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}

.detail-head{text-align:center;margin:26px 0 8px}
.detail-emoji{font-size:96px;line-height:1;margin-bottom:10px;filter:drop-shadow(0 14px 40px rgba(0,0,0,.5))}
.detail-name{margin:0;font-size:52px;font-weight:800;font-family:"Outfit","Noto Sans SC",sans-serif;
 background:linear-gradient(100deg,#fff,#c9d4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.detail-sub{margin-top:8px;font-size:15px;color:rgba(255,255,255,.75);letter-spacing:.3px}
.detail-meta{margin-top:14px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
 color:var(--muted);font-size:14px}
.meta-dot{opacity:.5}

.lang-switch{margin-top:16px;display:inline-flex;background:rgba(255,255,255,.07);
 border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:3px;gap:2px}
.lang-btn{border:none;background:transparent;color:var(--muted);padding:6px 16px;border-radius:999px;
 cursor:pointer;font-size:13px;font-family:inherit;transition:.15s}
.lang-btn.active{background:rgba(255,255,255,.14);color:#fff;font-weight:600}

/* 详情页倒计时放大 */
.detail .tile{min-width:110px;padding:18px 12px}
.detail .tile b{font-size:56px}
.detail .tile i{font-size:12.5px}

.detail-intro{margin:30px auto 8px;padding:26px 30px;max-width:660px;text-align:center}
.intro-text{margin:0;font-size:15.5px;line-height:1.85;color:rgba(238,241,255,.9)}
.intro-src{margin:10px 0 0;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
 color:var(--muted);font-family:"Outfit",sans-serif}

.detail .actions{margin-top:26px}

@media (max-width:640px){
  .detail-name{font-size:36px}
  .detail-emoji{font-size:74px}
  .detail .tile{min-width:84px;padding:12px 8px}
  .detail .tile b{font-size:40px}
  .detail-intro{padding:20px 18px}
}

/* 渐变文字 */
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

@media (max-width:640px){
  .top{padding:16px 14px 6px}
  .brand h1{font-size:18px}
  .clock{display:none}
  .hero{padding:28px 14px 26px}
  .hero-name{font-size:34px}
  .hero-emoji{font-size:66px}
  .tile{min-width:72px}
  .tile b{font-size:32px}
  .toolbar{border-radius:20px;flex-wrap:wrap}
  .search{flex:1 1 100%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .card .days b{font-size:30px}
  .share{opacity:1;transform:none;padding:5px 9px;font-size:11px}
}