/* ==========================================================================
   小浪起始页 · style.css
   毛玻璃 / 可爱风 / 悬浮+点击动效
   动效思路参考 uiverse.io 社区常见写法(hover 光扫、按钮填充、涟漪、弹跳)
   ========================================================================== */

:root{
  --radius: 24px;
  --blur: 20px;
  --card-min: 150px;
  --pink:#ff9ecb;  --purple:#a98bff;  --blue:#7cb8ff;  --cyan:#68e2f0;
  --green:#8fe3b0; --amber:#ffcf7a;  --coral:#ff9e8a;  --violet:#c79bff;
  --ink:#3c2c4d;   --ink-soft:#6d5b80; --ink-faint:#8e7fa3;
  --glass-bg: rgba(255,255,255,.34);
  --glass-bg-2: rgba(255,255,255,.22);
  --glass-line: rgba(255,255,255,.62);
  --glass-shadow: 0 18px 45px rgba(140,105,180,.20);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --ease-smooth: cubic-bezier(.22,.61,.36,1);
}

[hidden]{ display:none !important; }

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family: "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:transparent;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
body.no-scroll{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
img{ max-width:100%; }

/* ---------------- 背景 ---------------- */
.bg-layer{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
}
.bg-layer::before{
  content:""; position:absolute; inset:0;
  background:var(--bg-grad);
  background-size:220% 220%;
  animation: gradFlow 18s ease-in-out infinite;
  transition: background .6s ease;
}
body.has-bg-image .bg-layer::before{ background:var(--bg-image); background-size:cover; background-position:center; }
.bg-layer::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 34px 34px, 62px 62px;
  background-position: 0 0, 18px 24px;
  opacity:.5;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}

/* 背景预设 */
body.preset-candy  { --bg-grad: linear-gradient(135deg,#ffd9ec 0%,#e3d4ff 42%,#cdefff 100%); }
body.preset-aurora { --bg-grad: linear-gradient(135deg,#c9f3ff 0%,#d8d0ff 48%,#ffd7f0 100%); }
body.preset-sakura { --bg-grad: linear-gradient(135deg,#ffe3ee 0%,#ffeede 50%,#f2dcff 100%); }
body.preset-mint   { --bg-grad: linear-gradient(135deg,#d6fff0 0%,#dcf1ff 50%,#e8e0ff 100%); }
body.preset-dusk   { --bg-grad: linear-gradient(135deg,#473b7b 0%,#3584a7 52%,#30d2be 100%); color:#fff; }

body.preset-dusk{
  --ink:#fff; --ink-soft:#e7e6ff; --ink-faint:#c6c2e4;
  --glass-bg: rgba(255,255,255,.14); --glass-bg-2: rgba(255,255,255,.10);
  --glass-line: rgba(255,255,255,.30); --glass-shadow: 0 18px 45px rgba(0,0,0,.28);
}

@keyframes gradFlow{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* 浮动光斑 */
.blob{
  position:absolute; display:block; border-radius:50%;
  filter: blur(46px); opacity:.55; mix-blend-mode:normal;
  will-change: transform;
}
.b1{ width:42vw; height:42vw; left:-8vw; top:-10vw;  background:radial-gradient(circle at 30% 30%, #ffb4dc, #ff9ecb 60%, transparent 72%); animation: floatA 17s ease-in-out infinite; }
.b2{ width:36vw; height:36vw; right:-6vw; top:2vw;   background:radial-gradient(circle at 60% 40%, #c9b6ff, #a98bff 60%, transparent 72%); animation: floatB 21s ease-in-out infinite; }
.b3{ width:40vw; height:40vw; left:14vw; bottom:-16vw;background:radial-gradient(circle at 50% 50%, #9fe9ff, #68e2f0 60%, transparent 72%); animation: floatC 25s ease-in-out infinite; }
.b4{ width:26vw; height:26vw; right:12vw; bottom:-6vw; background:radial-gradient(circle at 40% 60%, #ffe6a8, #ffcf7a 60%, transparent 72%); animation: floatA 19s ease-in-out infinite reverse; }

@keyframes floatA{ 0%,100%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(6vw,4vw,0) scale(1.08); } }
@keyframes floatB{ 0%,100%{ transform: translate3d(0,0,0) scale(1.04); } 50%{ transform: translate3d(-7vw,5vw,0) scale(.96); } }
@keyframes floatC{ 0%,100%{ transform: translate3d(0,0,0) scale(.98); } 50%{ transform: translate3d(4vw,-5vw,0) scale(1.1); } }

.sparkles{
  position:absolute; inset:0; display:block; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,.95), transparent),
    radial-gradient(2px 2px at 78% 14%, rgba(255,255,255,.85), transparent),
    radial-gradient(2px 2px at 34% 82%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 88% 66%, rgba(255,255,255,.9), transparent),
    radial-gradient(2px 2px at 58% 42%, rgba(255,255,255,.75), transparent);
  animation: twinkle 4.5s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:.35; } 50%{ opacity:.95; } }

/* ---------------- 玻璃基类 ---------------- */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  box-shadow: var(--glass-shadow);
  position:relative;
}
.glass::before{ /* 顶部高光 */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 42%);
  opacity:.75;
}

/* ---------------- 布局 ---------------- */
.page{
  width:min(1220px, 100% - 40px);
  margin:0 auto; padding:22px 0 60px;
  display:flex; flex-direction:column; gap:22px;
}

/* ---------------- 顶部 dock ---------------- */
.dock{
  position:sticky; top:14px; z-index:40;
  border-radius:22px;
  display:flex; align-items:center; gap:16px;
  padding:10px 14px;
  animation: dropIn .6s var(--ease-bounce) both;
}
@keyframes dropIn{ from{ opacity:0; transform: translateY(-22px) scale(.96); } to{ opacity:1; transform:none; } }

.brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.brand-emoji{
  font-size:26px; display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px;
  border-radius:14px; background:linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.28));
  border:1px solid rgba(255,255,255,.7);
  animation: bob 3.2s ease-in-out infinite;
  box-shadow: 0 8px 18px rgba(255,158,203,.35);
}
@keyframes bob{ 0%,100%{ transform: translateY(0) rotate(-3deg); } 50%{ transform: translateY(-5px) rotate(3deg); } }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.brand-text b{ font-size:16px; letter-spacing:.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text i{ font-style:normal; font-size:12px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.dock-clock{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.dock-clock .clock-time{ font-size:22px; font-weight:800; font-variant-numeric: tabular-nums; letter-spacing:1px; }
.dock-clock .clock-meta{ display:flex; flex-direction:column; line-height:1.2; font-size:12px; color:var(--ink-faint); }
.dock-clock .clock-meta b{ font-size:12px; color:var(--ink-soft); }

.dock-actions{ margin-left:auto; display:flex; gap:10px; }
.dock-clock + .dock-actions{ margin-left:10px; }

/* ---------------- 按钮(带光扫) ---------------- */
.btn{
  position:relative; overflow:hidden; cursor:pointer;
  border-radius:14px; border:1px solid rgba(255,255,255,.7);
  padding:9px 15px; font-size:13.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:7px;
  color:var(--ink); background:rgba(255,255,255,.34);
  transition: transform .22s var(--ease-bounce), box-shadow .25s ease, background .25s ease;
}
.btn::after{ /* 光扫 */
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform:skewX(-18deg); transition:left .55s ease;
}
.btn:hover::after{ left:130%; }
.btn:hover{ transform: translateY(-2px); box-shadow:0 12px 26px rgba(150,110,190,.28); }
.btn:active{ transform: scale(.94); }
.btn-ghost:hover{ background:rgba(255,255,255,.6); }
.btn-line{ background:transparent; }
.btn-glow{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,#ff9ecb,#a98bff 60%,#7cb8ff);
  background-size:200% 200%;
  box-shadow:0 10px 24px rgba(169,139,255,.45);
  animation: gradShift 6s ease infinite;
}
@keyframes gradShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.btn-glow::after{ background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); }

/* ---------------- Hero ---------------- */
.hero{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:10px; }
.hero-title{
  margin:0; font-size:clamp(24px, 4.4vw, 40px); font-weight:800; letter-spacing:1px;
  background:linear-gradient(120deg,#ff7fbe,#a98bff 45%,#68c7f0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: titleIn .8s var(--ease-bounce) both .1s;
}
body.preset-dusk .hero-title{ background:linear-gradient(120deg,#fff,#ffd9ec 40%,#bff3ff); -webkit-background-clip:text; background-clip:text; }
@keyframes titleIn{ from{ opacity:0; transform: translateY(14px) scale(.94); } to{ opacity:1; transform:none; } }
.hero-sub{ margin:0; color:var(--ink-soft); font-size:14px; animation: titleIn .8s var(--ease-bounce) both .2s; }

/* ---------------- 搜索框 ---------------- */
.search{
  width:min(660px,100%); margin-top:6px; border-radius:20px;
  display:flex; align-items:center; gap:10px; padding:8px 10px 8px 16px;
  transition: box-shadow .3s ease, transform .3s var(--ease-bounce);
  animation: titleIn .8s var(--ease-bounce) both .28s;
}
.search:focus-within{ transform: translateY(-2px) scale(1.012); box-shadow:0 20px 46px rgba(169,139,255,.35), 0 0 0 2px rgba(255,158,203,.55); }
.search-ico{ font-size:17px; opacity:.8; }
.search input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-size:15px; color:var(--ink); padding:10px 2px;
}
.search input::placeholder{ color:var(--ink-faint); }
.search-go{
  border:0; cursor:pointer; color:#fff; font-size:17px; font-weight:800;
  width:42px; height:38px; border-radius:13px;
  background:linear-gradient(135deg,#ff9ecb,#a98bff);
  transition: transform .25s var(--ease-bounce), filter .25s ease;
}
.search-go:hover{ transform: translateX(3px) scale(1.06); filter:brightness(1.06); }
.search-go:active{ transform: scale(.9); }
.search-tips{
  position:absolute; left:0; right:0; top:calc(100% + 10px); z-index:30;
  border-radius:18px; padding:8px; overflow:hidden;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:0 20px 44px rgba(140,105,180,.28);
  animation: popIn .28s var(--ease-bounce) both;
}
body.preset-dusk .search-tips{ background:rgba(40,36,70,.6); }
.search-tip{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; cursor:pointer;
  transition: background .2s ease, transform .2s var(--ease-bounce);
}
.search-tip:hover{ background:rgba(255,255,255,.6); transform: translateX(3px); }
body.preset-dusk .search-tip:hover{ background:rgba(255,255,255,.16); }
.search-tip .st-emoji{ font-size:18px; }
.search-tip .st-name{ font-weight:600; font-size:14px; }
.search-tip .st-url{ margin-left:auto; font-size:11.5px; color:var(--ink-faint); max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@keyframes popIn{ from{ opacity:0; transform: translateY(-8px) scale(.97); } to{ opacity:1; transform:none; } }

/* ---------------- 公告 ---------------- */
.notice{
  width:min(760px,100%); border-radius:16px; padding:11px 18px; font-size:13.5px;
  color:var(--ink-soft); text-align:left; animation: titleIn .6s var(--ease-bounce) both;
}
.notice b{ color:var(--ink); }

/* ---------------- 分组 tabs ---------------- */
.tabs{ position:relative; border-radius:18px; padding:8px; align-self:center; max-width:100%; }
.tabs-scroll{
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; position:relative; z-index:2;
}
.tabs-scroll::-webkit-scrollbar{ display:none; }
.tab{
  position:relative; z-index:2; white-space:nowrap; cursor:pointer;
  border:0; background:transparent; color:var(--ink-soft);
  padding:9px 16px; border-radius:12px; font-size:13.5px; font-weight:600;
  transition: color .25s ease, transform .25s var(--ease-bounce);
}
.tab:hover{ transform: translateY(-2px); color:var(--ink); }
.tab.active{ color:#fff; }
.tab .tab-n{ font-size:11px; opacity:.7; margin-left:5px; }
.tab-pill{
  position:absolute; z-index:1; top:8px; left:8px; height:calc(100% - 16px); width:0;
  border-radius:12px; background:linear-gradient(135deg,#ff9ecb,#a98bff);
  box-shadow:0 8px 20px rgba(169,139,255,.45);
  transition: transform .38s var(--ease-bounce), width .38s var(--ease-bounce), opacity .2s ease;
  opacity:0;
}

/* ---------------- 卡片网格 ---------------- */
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
}

.tile{
  position:relative; overflow:hidden; cursor:pointer;
  border-radius:var(--radius); padding:18px 16px 15px;
  display:flex; flex-direction:column; gap:9px; align-items:center; text-align:center;
  background: var(--glass-bg-2);
  border:1px solid var(--glass-line);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  box-shadow: 0 10px 26px rgba(140,105,180,.14);
  transition: transform .3s var(--ease-bounce), box-shadow .3s ease, border-color .3s ease;
  animation: cardIn .5s var(--ease-bounce) both;
}
@keyframes cardIn{ from{ opacity:0; transform: translateY(20px) scale(.94); } to{ opacity:1; transform:none; } }

.tile::before{ /* 顶部柔光 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 46%);
  opacity:.6;
}
.tile::after{ /* 光扫 */
  content:""; position:absolute; top:-60%; left:-70%; width:55%; height:220%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: rotate(18deg); opacity:0;
  transition: left .7s ease, opacity .3s ease;
  pointer-events:none;
}
.tile:hover{
  transform: translateY(-8px) scale(1.035);
  box-shadow: 0 24px 50px rgba(150,110,190,.32);
  border-color: rgba(255,255,255,.95);
}
.tile:hover::after{ left:130%; opacity:1; }
.tile:active{ transform: translateY(-2px) scale(.965); }
.tile:focus-visible{ outline:3px solid rgba(169,139,255,.65); outline-offset:3px; }

.tile-emoji{
  width:56px; height:56px; border-radius:19px; display:grid; place-items:center;
  font-size:27px; position:relative; z-index:2;
  border:1px solid rgba(255,255,255,.8);
  box-shadow: 0 10px 22px rgba(160,120,200,.28), inset 0 -6px 12px rgba(255,255,255,.35);
  transition: transform .35s var(--ease-bounce);
}
.tile:hover .tile-emoji{ animation: bob .9s ease-in-out infinite; }
.tile-name{ font-size:15px; font-weight:700; position:relative; z-index:2; }
.tile-desc{
  font-size:12px; color:var(--ink-faint); position:relative; z-index:2;
  min-height:16px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tile-host{
  font-size:10.5px; color:var(--ink-faint); opacity:.85; position:relative; z-index:2;
  background:rgba(255,255,255,.42); border:1px solid rgba(255,255,255,.6);
  padding:2px 9px; border-radius:999px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body.preset-dusk .tile-host{ background:rgba(255,255,255,.12); }
.tile-badge{
  position:absolute; top:10px; right:10px; z-index:3;
  font-size:10px; padding:2px 8px; border-radius:999px; color:#fff;
  background:linear-gradient(135deg,#ff9ecb,#a98bff); box-shadow:0 6px 14px rgba(169,139,255,.4);
}
.tile-edit{
  position:absolute; top:9px; left:9px; z-index:4;
  width:28px; height:28px; border-radius:10px; border:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.7); cursor:pointer; font-size:13px;
  display:none; place-items:center;
  transition: transform .25s var(--ease-bounce), background .25s ease;
}
.tile-edit:hover{ transform: rotate(-12deg) scale(1.14); background:#fff; }
body.edit-mode .tile-edit{ display:none; }
/* 改地址入口:鼠标悬浮卡片时才出现 */
body.edit-mode .tile:hover .tile-edit,
body.edit-mode .tile:focus-within .tile-edit{ display:grid; }
@media (hover:none){ body.edit-mode .tile-edit{ display:grid; } }
body.edit-mode .tile{ border-style:dashed; border-color:rgba(255,158,203,.8); }

/* 色板 */
.c-pink  { background:linear-gradient(135deg,#ffc2e0,#ff8fc4); }
.c-purple{ background:linear-gradient(135deg,#d7c4ff,#a98bff); }
.c-blue  { background:linear-gradient(135deg,#bcd9ff,#7cb8ff); }
.c-cyan  { background:linear-gradient(135deg,#bff2fa,#68e2f0); }
.c-green { background:linear-gradient(135deg,#c6f5d8,#8fe3b0); }
.c-amber { background:linear-gradient(135deg,#ffe7b3,#ffcf7a); }
.c-coral { background:linear-gradient(135deg,#ffcbbf,#ff9e8a); }
.c-violet{ background:linear-gradient(135deg,#e3d0ff,#c79bff); }

/* 骨架屏 */
.tile.skeleton{ height:140px; cursor:default; animation:none; }
.tile.skeleton::before{
  background:linear-gradient(100deg, rgba(255,255,255,.15) 20%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.15) 80%);
  background-size:220% 100%; opacity:1;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer{ from{ background-position:130% 0; } to{ background-position:-130% 0; } }
.tile.skeleton:hover{ transform:none; box-shadow:none; }

/* 涟漪 */
.ripple{
  position:absolute; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  transform: scale(0); animation: rippleOut .6s ease-out forwards;
}
@keyframes rippleOut{ to{ transform: scale(3.2); opacity:0; } }

/* ---------------- 我的小站 ---------------- */
.boards{
  border-radius:20px; padding:14px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  animation: cardIn .55s var(--ease-bounce) both .3s;
}
.boards-title{ font-size:13px; font-weight:700; color:var(--ink-soft); }
.board-chip{
  display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:14px;
  background:rgba(255,255,255,.42); border:1px solid rgba(255,255,255,.7);
  font-size:13.5px; font-weight:600;
  transition: transform .25s var(--ease-bounce), box-shadow .25s ease, background .25s ease;
}
body.preset-dusk .board-chip{ background:rgba(255,255,255,.12); }
.board-chip:hover{ transform: translateY(-4px) scale(1.04); box-shadow:0 14px 28px rgba(150,110,190,.28); background:rgba(255,255,255,.7); }
.board-chip:active{ transform: scale(.95); }
.board-chip .bc-live{ font-size:10px; color:#fff; background:linear-gradient(135deg,#8fe3b0,#4ecf8a); padding:2px 7px; border-radius:999px; }

/* ---------------- 页脚 ---------------- */
.foot{ text-align:center; font-size:12.5px; color:var(--ink-faint); padding:10px 0 4px; line-height:1.9; }
.foot a{ text-decoration:underline dotted; }
.foot .dot{ opacity:.5; margin:0 8px; }

/* ---------------- 回到顶部 ---------------- */
.to-top{
  position:fixed; right:22px; bottom:24px; z-index:50;
  width:46px; height:46px; border-radius:16px; border:1px solid var(--glass-line);
  cursor:pointer; font-size:19px; font-weight:800; color:var(--ink);
  display:grid; place-items:center;
  animation: popIn .35s var(--ease-bounce) both;
  transition: transform .28s var(--ease-bounce), box-shadow .28s ease;
}
.to-top:hover{ transform: translateY(-5px) rotate(-6deg) scale(1.06); box-shadow:0 18px 34px rgba(150,110,190,.35); }
.to-top:active{ transform: scale(.9); }

/* ---------------- 侧边栏背景音乐 ---------------- */
.music{
  position:fixed; left:22px; bottom:24px; z-index:50;
  display:flex; align-items:center; gap:10px;
  padding:8px 14px 8px 8px; border-radius:999px;
  max-width:min(260px,62vw);
  animation: popIn .35s var(--ease-bounce) both;
  transition: transform .28s var(--ease-bounce), box-shadow .28s ease;
}
.music:hover{ transform: translateY(-4px) scale(1.02); box-shadow:0 18px 34px rgba(150,110,190,.30); }
.music-disc{
  flex:none; width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid var(--glass-line); color:var(--ink);
  display:grid; place-items:center; font-size:17px;
  background:rgba(255,255,255,.5);
  transition: transform .2s var(--ease-bounce);
}
body.preset-dusk .music-disc{ background:rgba(255,255,255,.14); }
.music-disc:active{ transform: scale(.9); }
.md-vinyl{ display:block; line-height:1; }
.music.playing .md-vinyl{ animation: spin 3.4s linear infinite; }
@keyframes spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
.music-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.music-title{ font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-state{ font-size:10.5px; font-style:normal; color:var(--ink-faint); white-space:nowrap; }
@media (max-width:560px){
  .music{ left:12px; bottom:14px; padding:6px 12px 6px 6px; }
  .music-disc{ width:36px; height:36px; font-size:15px; }
}
@media (prefers-reduced-motion: reduce){
  .music.playing .md-vinyl{ animation:none; }
}

/* ---------------- 弹窗 ---------------- */
.modal{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-mask{
  position:absolute; inset:0; background:rgba(70,50,90,.32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .25s ease both;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.modal-card{
  position:relative; z-index:2; width:min(520px,100%); border-radius:26px;
  padding:26px 26px 22px; text-align:center;
  animation: modalIn .42s var(--ease-bounce) both;
}
@keyframes modalIn{ from{ opacity:0; transform: translateY(24px) scale(.9); } to{ opacity:1; transform:none; } }
.modal-x{
  position:absolute; top:12px; right:12px; z-index:3;
  width:32px; height:32px; border-radius:11px; cursor:pointer; font-size:14px;
  border:1px solid rgba(255,255,255,.7); background:rgba(255,255,255,.4); color:var(--ink);
  transition: transform .25s var(--ease-bounce), background .2s ease;
}
.modal-x:hover{ transform: rotate(90deg) scale(1.08); background:#fff; }
.modal-emoji{ font-size:38px; animation: bob 2.6s ease-in-out infinite; }
.modal-card h3{ margin:8px 0 6px; font-size:18px; }
.modal-sub{ margin:0 0 16px; font-size:13px; color:var(--ink-faint); line-height:1.6; }
.field{ display:block; text-align:left; margin-bottom:12px; }
.field span{ display:block; font-size:12px; color:var(--ink-soft); margin-bottom:6px; font-weight:600; }
.field input{
  width:100%; padding:12px 14px; border-radius:14px; font-size:14px; color:var(--ink);
  border:1px solid rgba(255,255,255,.75); background:rgba(255,255,255,.5); outline:0;
  transition: box-shadow .25s ease, transform .25s var(--ease-bounce), background .25s ease;
}
body.preset-dusk .field input{ background:rgba(255,255,255,.14); }
.field input:focus{ background:rgba(255,255,255,.85); box-shadow:0 0 0 3px rgba(255,158,203,.5); transform: translateY(-1px); }
.modal-hint{ font-size:12px; min-height:18px; color:var(--ink-faint); margin:0 0 12px; text-align:left; }
.modal-hint.ok{ color:#3aa76d; }
.modal-hint.bad{ color:#e0607a; }
.modal-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------------- Toast ---------------- */
.toast-wrap{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast{
  pointer-events:auto; padding:11px 20px; border-radius:16px; font-size:13.5px; font-weight:600;
  color:var(--ink); background:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow:0 18px 40px rgba(140,105,180,.3);
  animation: toastIn .45s var(--ease-bounce) both;
  display:flex; align-items:center; gap:9px; max-width:min(88vw,520px);
}
.toast.out{ animation: toastOut .3s ease forwards; }
.toast.ok{ border-left:5px solid #6ddc9f; }
.toast.bad{ border-left:5px solid #ff8fa8; }
@keyframes toastIn{ from{ opacity:0; transform: translateY(26px) scale(.9); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform: translateY(14px) scale(.94); } }

/* ---------------- 小挂件:待办 / 打卡 / 倒计时 ---------------- */
.widgets{
  display:grid; gap:16px;
  grid-template-columns: 1.15fr 1fr 1fr;
}
.widget{
  border-radius:var(--radius); padding:16px 18px 15px;
  display:flex; flex-direction:column; gap:10px; min-width:0;
  animation: cardIn .55s var(--ease-bounce) both;
  transition: transform .3s var(--ease-bounce), box-shadow .3s ease;
}
.widget:hover{ transform: translateY(-4px); box-shadow:0 22px 46px rgba(150,110,190,.26); }

.w-head{ display:flex; align-items:center; gap:10px; }
.w-head h2{ margin:0; font-size:14.5px; font-weight:800; letter-spacing:.3px; }
.w-head-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.w-tag{
  margin-left:auto; font-size:11.5px; font-weight:700; color:var(--ink-soft);
  background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.7);
  padding:2px 9px; border-radius:999px;
}
body.preset-dusk .w-tag{ background:rgba(255,255,255,.12); }
.w-head-right .w-tag{ margin-left:0; }
.w-mini{
  cursor:pointer; border:1px solid rgba(255,255,255,.7); background:rgba(255,255,255,.4);
  color:var(--ink-soft); font-size:11px; padding:3px 9px; border-radius:999px;
  transition: transform .2s var(--ease-bounce), background .2s ease;
}
.w-mini:hover{ transform: translateY(-1px) scale(1.05); background:#fff; color:var(--ink); }

/* 待办 */
.w-progress{ height:6px; border-radius:999px; background:rgba(255,255,255,.4); overflow:hidden; }
.w-progress i{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,#ff9ecb,#a98bff 60%,#68e2f0);
  transition: width .5s var(--ease-smooth);
  background-size:200% 100%; animation: gradShift 5s ease infinite;
}
.todo-list{ display:flex; flex-direction:column; gap:7px; max-height:230px; overflow-y:auto; padding-right:2px; }
.todo-list::-webkit-scrollbar{ width:6px; }
.todo-list::-webkit-scrollbar-thumb{ background:rgba(169,139,255,.45); border-radius:999px; }
.todo-empty{ font-size:12.5px; color:var(--ink-faint); padding:12px 2px; text-align:center; }
.todo-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:13px;
  background:rgba(255,255,255,.42); border:1px solid rgba(255,255,255,.65);
  transition: transform .22s var(--ease-bounce), background .22s ease, opacity .22s ease;
  animation: cardIn .32s var(--ease-bounce) both;
}
body.preset-dusk .todo-item{ background:rgba(255,255,255,.10); }
.todo-item:hover{ transform: translateX(3px); background:rgba(255,255,255,.72); }
body.preset-dusk .todo-item:hover{ background:rgba(255,255,255,.18); }
.todo-item.done{ opacity:.62; }
.todo-item.done .todo-text{ text-decoration:line-through; text-decoration-color:rgba(169,139,255,.85); }
.todo-check{
  flex:0 0 20px; width:20px; height:20px; border-radius:7px; cursor:pointer;
  border:2px solid rgba(169,139,255,.7); background:rgba(255,255,255,.5);
  color:#fff; font-size:12px; font-weight:900; line-height:1; display:grid; place-items:center;
  transition: transform .22s var(--ease-bounce), background .22s ease, border-color .22s ease;
}
.todo-check:hover{ transform: scale(1.14); }
.todo-item.done .todo-check{ background:linear-gradient(135deg,#8fe3b0,#4ecf8a); border-color:transparent; }
.todo-text{ flex:1; font-size:13px; line-height:1.5; word-break:break-word; }
.todo-del{
  border:0; background:transparent; cursor:pointer; color:var(--ink-faint); font-size:13px;
  opacity:0; transition: opacity .2s ease, transform .2s var(--ease-bounce), color .2s ease;
}
.todo-item:hover .todo-del{ opacity:1; }
.todo-del:hover{ color:#e0607a; transform: scale(1.2) rotate(8deg); }
.todo-add{ display:flex; gap:8px; }
.todo-add input{
  flex:1; min-width:0; border-radius:13px; padding:10px 13px; font-size:13px; color:var(--ink);
  border:1px solid rgba(255,255,255,.7); background:rgba(255,255,255,.5); outline:0;
  transition: box-shadow .22s ease, background .22s ease;
}
.todo-add input:focus{ background:#fff; box-shadow:0 0 0 3px rgba(255,158,203,.45); }
.todo-add input:disabled{ opacity:.65; cursor:not-allowed; }
.todo-add-btn{
  flex:0 0 40px; border:0; border-radius:13px; cursor:pointer; color:#fff; font-size:17px; font-weight:800;
  background:linear-gradient(135deg,#ff9ecb,#a98bff);
  transition: transform .22s var(--ease-bounce), filter .22s ease;
}
.todo-add-btn:hover{ transform: scale(1.08) rotate(90deg); filter:brightness(1.07); }
.todo-add-btn:active{ transform: scale(.9); }
.w-lock{ margin:0; font-size:11.5px; color:var(--ink-faint); text-align:center; }

/* 打卡 */
.ck-body{ display:flex; align-items:center; gap:14px; padding:4px 0 2px; }
.ck-ring{
  --p:0; flex:0 0 82px; width:82px; height:82px; border-radius:50%; position:relative;
  display:grid; place-items:center;
  background: conic-gradient(from -90deg, #ffb0d4 calc(var(--p) * 1%), rgba(255,255,255,.42) 0);
  transition: background .5s ease;
}
.ck-ring.is-done{ background: conic-gradient(from -90deg, #6ddc9f calc(var(--p) * 1%), rgba(255,255,255,.42) 0); }
.ck-ring::before{
  content:""; position:absolute; inset:8px; border-radius:50%;
  background:rgba(255,255,255,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow: inset 0 0 12px rgba(255,255,255,.8);
}
body.preset-dusk .ck-ring::before{ background:rgba(60,55,95,.72); }
.ck-ring span{ position:relative; font-size:22px; font-weight:900; color:var(--ink); }
.ck-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ck-info b{ font-size:13.5px; }
.ck-info i{ font-style:normal; font-size:12px; color:var(--ink-soft); }
.ck-info em{ font-style:normal; font-size:10.5px; color:var(--ink-faint); opacity:.85; }
.ck-go{ align-self:flex-start; margin-top:2px; }

/* 最近 14 天条 */
.ck-strip{ display:flex; gap:4px; padding:2px 0; }
.ck-day{
  flex:1 1 0; height:9px; border-radius:999px;
  background:rgba(255,255,255,.42); border:1px solid rgba(255,255,255,.6);
  transition: background .3s ease, transform .25s var(--ease-bounce);
}
.ck-day.on{ background:linear-gradient(135deg,#8fe3b0,#4ecf8a); border-color:transparent; }
.ck-day:hover{ transform: scaleY(1.7); }
.ck-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.ck-btn{ font-size:12.5px; padding:8px 14px; }

/* 心情选择 */
.mood-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:14px; }
.mood{
  cursor:pointer; border:1px solid rgba(255,255,255,.75); background:rgba(255,255,255,.45);
  border-radius:15px; padding:11px 6px; display:flex; flex-direction:column; align-items:center; gap:3px;
  transition: transform .22s var(--ease-bounce), background .22s ease, box-shadow .22s ease;
}
.mood span{ font-size:22px; }
.mood i{ font-style:normal; font-size:11px; color:var(--ink-soft); }
.mood:hover{ transform: translateY(-3px) scale(1.05); background:#fff; }
.mood.on{
  background:linear-gradient(135deg, rgba(255,194,224,.92), rgba(215,196,255,.92));
  box-shadow:0 10px 22px rgba(169,139,255,.4); border-color:transparent;
}
.mood.on i{ color:#fff; }

/* 打卡飘心 */
.heart-pop{
  position:fixed; z-index:95; font-size:19px; pointer-events:none;
  animation: heartUp 1.3s ease-out forwards;
}
@keyframes heartUp{
  0%{ transform: translate(-50%,-50%) scale(.4); opacity:0; }
  25%{ opacity:1; }
  100%{ transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.25); opacity:0; }
}

/* 打卡日历 */
.cal-card{ width:min(560px,100%); }
.cal-head{ display:flex; align-items:center; justify-content:center; gap:14px; margin:6px 0 12px; }
.cal-head b{ font-size:15px; }
.cal-nav{
  cursor:pointer; border:1px solid rgba(255,255,255,.75); background:rgba(255,255,255,.5);
  color:var(--ink); border-radius:11px; width:32px; height:32px;
  transition: transform .2s var(--ease-bounce), background .2s ease;
}
.cal-nav:hover{ transform: scale(1.1); background:#fff; }
.cal-week, .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-week span{ font-size:11px; color:var(--ink-faint); text-align:center; }
.cal-cell{
  position:relative; aspect-ratio:1/1; border-radius:12px; display:grid; place-items:center;
  font-size:12.5px; background:rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.55);
  transition: transform .2s var(--ease-bounce), background .2s ease;
}
.cal-cell.empty{ background:transparent; border:0; }
.cal-cell i{ position:absolute; right:3px; bottom:1px; font-size:10px; font-style:normal; }
.cal-cell.on{ background:linear-gradient(135deg, rgba(143,227,176,.9), rgba(78,207,138,.9)); color:#0f3d24; border-color:transparent; }
.cal-cell.today{ box-shadow:0 0 0 2px rgba(255,158,203,.95); }
.cal-cell:not(.empty):hover{ transform: translateY(-2px) scale(1.06); }
.cal-stat{ margin:12px 0 0; font-size:12.5px; color:var(--ink-faint); text-align:center; }
body.preset-dusk .mood,
body.preset-dusk .cal-cell{ background:rgba(255,255,255,.12); }
body.preset-dusk .mood.on{ background:linear-gradient(135deg, rgba(255,158,203,.75), rgba(169,139,255,.75)); }
body.preset-dusk .cal-nav{ background:rgba(255,255,255,.14); }

/* 倒计时 */
.cd-list{ display:flex; flex-direction:column; gap:8px; }
.cd-item{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:13px;
  background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.65);
  transition: transform .25s var(--ease-bounce), box-shadow .25s ease;
  animation: cardIn .35s var(--ease-bounce) both;
}
body.preset-dusk .cd-item{ background:rgba(255,255,255,.10); }
.cd-item:hover{ transform: translateX(3px) scale(1.02); box-shadow:0 10px 22px rgba(150,110,190,.2); }
.cd-item.hot{
  background:linear-gradient(135deg, rgba(255,194,224,.75), rgba(215,196,255,.75));
  border-color:rgba(255,255,255,.85);
}
.cd-emoji{ font-size:19px; animation: bob 3.4s ease-in-out infinite; }
.cd-label{ font-size:13px; font-weight:700; display:flex; flex-direction:column; line-height:1.3; }
.cd-label i{ font-style:normal; font-size:10.5px; font-weight:500; color:var(--ink-faint); }
.cd-days{ margin-left:auto; font-size:12px; color:var(--ink-soft); white-space:nowrap; }
.cd-days b{ font-size:19px; font-weight:900; color:var(--ink); margin-right:2px; font-variant-numeric:tabular-nums; }

@media (max-width:980px){
  .widgets{ grid-template-columns: 1fr 1fr; }
  .widget:nth-child(1){ grid-column: 1 / -1; }
}
@media (max-width:620px){
  .widgets{ grid-template-columns: 1fr; }
  .widget:nth-child(1){ grid-column:auto; }
}

/* ---------------- 网站信息区(备案/版权) ---------------- */
.site-info{ border-radius:20px; padding:18px 22px 14px; animation: cardIn .55s var(--ease-bounce) both .2s; }
.si-row{ display:grid; grid-template-columns: 1.2fr 1fr 1.2fr 1fr; gap:16px; align-items:start; }
.si-col{ display:flex; flex-direction:column; gap:4px; min-width:0; font-size:12.5px; }
.si-col a{ color:var(--ink-soft); text-decoration:none; word-break:break-all; }
.si-col a:hover{ color:var(--ink); text-decoration:underline dotted; }
.si-name{ font-size:15px; font-weight:800; }
.si-slogan{ font-size:12px; color:var(--ink-faint); }
.si-k{ font-size:11.5px; color:var(--ink-faint); font-weight:700; }
.si-beian{ display:flex; flex-wrap:wrap; gap:4px 10px; color:var(--ink-soft); }
.si-beian i{ font-style:normal; color:var(--ink-faint); }
.si-copy{ margin:12px 0 0; padding-top:10px; border-top:1px dashed rgba(255,255,255,.7); font-size:11.5px; color:var(--ink-faint); text-align:center; }
@media (max-width:820px){
  .si-row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:520px){
  .si-row{ grid-template-columns: 1fr; }
}
/* 节日彩蛋粒子 */
.festival-layer{ position:fixed; inset:0; pointer-events:none; z-index:92; overflow:hidden; }
.festival-particle{ position:absolute; top:-40px; font-size:22px; animation: fall linear forwards; }
@keyframes fall{
  0%{ transform: translateY(-10vh) rotate(0deg); opacity:0; }
  10%{ opacity:1; }
  100%{ transform: translateY(105vh) rotate(360deg); opacity:.85; }
}
.festival-banner{
  position:fixed; left:50%; top:18px; transform:translateX(-50%); z-index:93;
  padding:10px 20px; border-radius:999px; font-size:13.5px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#ff9ecb,#a98bff); box-shadow:0 12px 30px rgba(169,139,255,.45);
  animation: popIn .5s var(--ease-bounce) both;
}

/* ---------------- 生日全屏烟花(v2) ---------------- */
/* canvas 的真实尺寸每帧由 JS 写死成 px;这里只是兜底:任何祖先 / 其他规则都别想把它挤小。
   故意不给 .fx-canvas 写 display —— 否则会盖掉 [hidden]{display:none!important},收场就藏不住了。 */
.fx-canvas{
  position:fixed !important;
  inset:0 !important;
  top:0 !important; left:0 !important;
  margin:0 !important;
  max-width:none !important; max-height:none !important;
  pointer-events:none !important;
  z-index:60 !important;
}
/* 演出暗幕:整屏夜空,让浅色玻璃背景上的烟花不发白。
   顶部最深(夜空,烟花在这一带),越往下越透明(玻璃卡片还看得清);
   底部叠一道暖色地平线光晕。JS 淡入 / 收场淡出并移除,不留残留。 */
.fx-night{
  /* 用 vw/vh(含经典滚动条那 15px)而不是纯 inset:0:inset:0 只撑到 clientWidth,
     实测 1585/1600,右侧会留一条没盖住的缝。JS 起飞时还会按视口像素写死宽高。 */
  position:fixed; inset:0; width:100vw; height:100vh; z-index:59; pointer-events:none;
  opacity:0; transition:opacity .9s ease;
  background:
    radial-gradient(125% 46% at 50% 106%, rgba(255,199,146,.20), rgba(255,199,146,0) 62%),
    linear-gradient(180deg, rgba(3,3,10,.88) 0%, rgba(6,7,18,.74) 44%, rgba(16,13,32,.42) 100%);
}

/* ---------------- 响应式 ---------------- */
@media (max-width:760px){
  .page{ width:min(1220px, 100% - 24px); gap:16px; }
  .dock{ flex-wrap:wrap; gap:10px; padding:10px; }
  .brand-text i{ display:none; }
  .btn-txt{ display:none; }
  .btn{ padding:10px 12px; }
  .dock-clock{ margin-left:auto; }
  .dock-actions{ margin-left:0; }
  .grid{ gap:12px; grid-template-columns: repeat(auto-fill, minmax(132px,1fr)); }
  .tile{ padding:15px 12px 13px; }
  .tile-emoji{ width:48px; height:48px; font-size:23px; }
  .blob{ filter: blur(34px); opacity:.45; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.06s !important; }
}