/* ============================================================
   逍遥官网 · v8 —— 樱粉 · 玻璃拟态（frosted glass）
   规范：真实 backdrop-filter 磨砂 + 分层白边/内高光 + 柔和樱花背景做景深；
        单一深樱粉强调色（CTA 白字过 AA）；统一圆角刻度；
        prefers-reduced-transparency 下退为实底，reduced-motion 下静止。
   ============================================================ */
:root{
  /* 樱粉强调（CTA 用深樱粉保证白字对比 ≥ AA；亮樱粉仅作点缀/图标） */
  --cta:#C6376F; --cta-press:#AE2C61;
  --rose:#E85D93; --sakura:#FF8FB8;
  /* 文本 */
  --ink:#54263F; --ink-soft:#7A4A60;
  /* 玻璃材质 */
  --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.44);
  --glass-strong:rgba(255,255,255,.74);
  --glass-border:rgba(255,255,255,.70); --line:rgba(198,55,111,.16);
  --rose-tint:rgba(232,93,147,.12); --rose-tint-2:rgba(232,93,147,.20);
  --hi:inset 0 1px 0 rgba(255,255,255,.75);
  /* 圆角 / 阴影 */
  --r-card:20px; --r-row:14px; --r-tile:12px; --r-pill:999px;
  --blur:saturate(170%) blur(20px);
  --shadow:0 14px 40px rgba(190,50,110,.16), 0 2px 8px rgba(190,50,110,.08);
  --shadow-sm:0 6px 18px rgba(190,50,110,.12);
  --ok-dot:#25A578; --warn:#D6355E;
  --font-disp:"M PLUS Rounded 1c",-apple-system,system-ui,sans-serif;
  --font-body:"Noto Sans SC","M PLUS Rounded 1c",system-ui,sans-serif;
  --max:940px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light dark}
body{
  min-height:100dvh; font-family:var(--font-body); color:var(--ink); line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* 樱花景深：粉 + 天蓝 + 淡紫，供玻璃磨砂透出层次 */
  background:
    radial-gradient(1200px 720px at 86% -12%, rgba(255,143,184,.55), transparent 60%),
    radial-gradient(1000px 620px at -6% 4%, rgba(150,200,255,.34), transparent 55%),
    radial-gradient(900px 900px at 50% 122%, rgba(206,150,255,.28), transparent 60%),
    linear-gradient(180deg,#FFF0F6,#FCE1EE);
  background-attachment:fixed;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--cta);text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--cta);outline-offset:2px;border-radius:8px}
a,button,.btn,.fsitem,.catcard,.archive,.nav a{touch-action:manipulation;-webkit-tap-highlight-color:rgba(198,55,111,.16)}
.wrap{max-width:var(--max);margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- 玻璃基类 ---- */
.glass{background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);box-shadow:var(--shadow),var(--hi)}

/* ---- header（磨砂玻璃条）---- */
.site-head{position:sticky;top:0;z-index:20;
  background:rgba(255,240,246,.55);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--glass-border)}
.site-head .wrap{display:flex;align-items:center;gap:12px;height:58px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-disp);font-weight:800;
  font-size:18px;color:var(--ink);letter-spacing:.3px}
.brand .mark{width:33px;height:33px;border-radius:var(--r-tile);display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,var(--sakura),var(--cta));box-shadow:var(--shadow-sm),var(--hi)}
.brand .mark svg{width:19px;height:19px}
.nav{margin-left:auto;display:flex;gap:6px}
.nav a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-row);
  font-weight:600;font-size:14px;color:var(--ink-soft);border:1px solid transparent;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.nav a:hover{background:var(--glass);color:var(--ink);border-color:var(--glass-border)}
.nav a[aria-current="page"]{background:var(--glass-strong);color:var(--cta);border-color:var(--glass-border);box-shadow:var(--hi)}
.nav a svg{width:17px;height:17px}

/* ---- hero（樱花实拍 + 柔和玻璃罩）---- */
.hero{position:relative;margin:18px 0 6px;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--glass-border);box-shadow:var(--shadow),var(--hi);isolation:isolate}
.hero .ph{position:absolute;inset:0;z-index:-2;background:var(--hero-img,linear-gradient(135deg,#ffd6e8,#cfe9ff)) center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(255,240,246,.86) 0%,rgba(255,240,246,.62) 44%,rgba(255,240,246,.20) 100%)}
.hero-in{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center;padding:28px 24px}
.hero h1{font-family:var(--font-disp);font-weight:800;font-size:31px;line-height:1.2;letter-spacing:.6px;
  color:var(--ink);text-wrap:balance}
.hero .lead{margin-top:10px;color:var(--ink-soft);font-size:14.5px;max-width:38ch}
.status{display:inline-flex;align-items:center;gap:8px;margin-top:15px;padding:7px 15px;border-radius:var(--r-pill);
  font-weight:600;font-size:13px;background:var(--glass-strong);border:1px solid var(--glass-border);
  box-shadow:var(--hi);color:var(--ink);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--ok-dot);box-shadow:0 0 0 4px rgba(37,165,120,.16)}
.status.down .dot{background:var(--warn);box-shadow:0 0 0 4px rgba(214,53,94,.16)}
.status.down{color:var(--warn)}
.mascot{position:relative;justify-self:center;width:100%;max-width:220px;aspect-ratio:3/4;border-radius:var(--r-row);
  background:var(--mascot-img,linear-gradient(160deg,#fff,#ffe6f1)) center top/cover no-repeat;
  border:2px solid rgba(255,255,255,.8);box-shadow:var(--shadow-sm)}

/* ---- panel（磨砂玻璃卡）---- */
.panel{position:relative;border-radius:var(--r-card);margin:16px 0;overflow:hidden;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);box-shadow:var(--shadow),var(--hi)}
.panel-head{display:flex;align-items:center;gap:10px;padding:14px 18px;color:var(--ink);
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.28)}
.panel-head svg{width:18px;height:18px;color:var(--cta)}
.panel-head h2{font-family:var(--font-disp);font-weight:800;font-size:15.5px;letter-spacing:.3px;flex:1}
.panel-head .hcount{font-size:12px;font-weight:700;color:var(--cta);
  background:var(--rose-tint);border:1px solid var(--line);padding:2px 9px;border-radius:var(--r-pill)}
.panel-body{padding:16px 16px 18px}

/* ---- stats（玻璃药丸）---- */
.stats{display:flex;flex-wrap:wrap;align-items:stretch;margin-bottom:16px;
  background:var(--glass-2);border:1px solid var(--glass-border);border-radius:var(--r-row);padding:4px;box-shadow:var(--hi)}
.stat{flex:1;min-width:92px;text-align:center;padding:10px 8px}
.stat + .stat{border-left:1px solid var(--line)}
.stat b{display:block;font-family:var(--font-disp);font-weight:800;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--ink-soft)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid transparent;
  font-family:var(--font-body);font-weight:700;font-size:14.5px;border-radius:var(--r-row);padding:12px 18px;
  transition:background .15s,color .15s,transform .1s,border-color .15s,box-shadow .15s}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--cta);color:#fff;box-shadow:0 8px 20px rgba(198,55,111,.28),var(--hi)}
.btn-primary:hover{background:var(--cta-press)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:var(--glass);color:var(--ink);border-color:var(--glass-border);box-shadow:var(--hi)}
.btn-ghost:hover{border-color:var(--cta);color:var(--cta)}

.note{margin-top:14px;font-size:13px;color:var(--ink-soft);line-height:1.85;
  background:var(--glass-2);border:1px solid var(--glass-border);border-radius:var(--r-row);padding:11px 14px;box-shadow:var(--hi)}
.note b{color:var(--cta);font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.actions .btn{flex:1;min-width:160px}

/* ---- 分类行（玻璃子卡 + 樱粉图标块）---- */
.cat-grid{display:flex;flex-direction:column;gap:10px}
.catcard{display:flex;align-items:center;gap:13px;padding:14px 14px;background:var(--glass-2);
  border:1px solid var(--glass-border);border-radius:var(--r-row);color:var(--ink);text-align:left;width:100%;cursor:pointer;
  box-shadow:var(--hi);transition:border-color .15s,background .15s,transform .1s}
.catcard:hover{border-color:var(--sakura);background:var(--glass-strong);transform:translateY(-1px)}
.catcard .ic{width:44px;height:44px;flex-shrink:0;border-radius:var(--r-tile);display:grid;place-items:center;
  color:#fff;background:linear-gradient(145deg,var(--sakura),var(--cta));box-shadow:0 6px 14px rgba(198,55,111,.24),var(--hi)}
.catcard .ic svg{width:22px;height:22px}
.catcard .t{flex:1;min-width:0}
.catcard .t b{display:block;font-family:var(--font-disp);font-weight:800;font-size:15.5px;line-height:1.35}
.catcard .t p{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.catcard .go{flex-shrink:0;width:18px;height:18px;color:var(--sakura)}
.catcard .go svg{width:100%;height:100%}

/* ---- 往期版本（独立 · 樱粉染色玻璃，与三分类区隔）---- */
.archive-wrap{margin-top:18px}
.archive-cap{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--ink-soft);
  letter-spacing:.4px;margin:0 2px 10px}
.archive-cap::before,.archive-cap::after{content:"";height:1px;flex:1;background:var(--line)}
.archive{display:flex;align-items:center;gap:13px;padding:14px 14px;border-radius:var(--r-row);
  background:var(--rose-tint);border:1px solid var(--rose-tint-2);color:var(--ink);text-align:left;width:100%;cursor:pointer;
  box-shadow:var(--hi);transition:border-color .15s,background .15s,transform .1s}
.archive:hover{border-color:var(--cta);background:var(--rose-tint-2);transform:translateY(-1px)}
.archive .ic{width:44px;height:44px;flex-shrink:0;border-radius:var(--r-tile);display:grid;place-items:center;
  color:var(--cta);background:rgba(255,255,255,.6);border:1px solid var(--glass-border)}
.archive .ic svg{width:22px;height:22px}
.archive .t{flex:1;min-width:0}
.archive .t b{display:block;font-family:var(--font-disp);font-weight:800;font-size:15.5px}
.archive .t p{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.archive .go{flex-shrink:0;width:18px;height:18px;color:var(--cta)}
.archive .go svg{width:100%;height:100%}

/* ---- netdisk 浏览 ---- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;margin:0 0 14px;color:var(--ink-soft)}
.crumbs a{color:var(--cta);font-weight:600;cursor:pointer}
.crumbs a svg{width:16px;height:16px;flex-shrink:0}
.crumbs .sep{opacity:.5}
.fs{display:flex;flex-direction:column;gap:8px}
.fsitem{display:flex;align-items:center;gap:12px;padding:12px 13px;background:var(--glass-2);border:1px solid var(--glass-border);
  border-radius:var(--r-row);box-shadow:var(--hi);transition:border-color .15s,background .15s;color:var(--ink);text-align:left;width:100%;cursor:pointer}
.fsitem:hover{border-color:var(--sakura);background:var(--glass-strong)}
.fsitem .ic{width:38px;height:38px;flex-shrink:0;border-radius:var(--r-tile);display:grid;place-items:center;
  color:var(--cta);background:rgba(255,255,255,.6);border:1px solid var(--glass-border)}
.fsitem .ic svg{width:20px;height:20px;display:block}
.fsitem.dir .ic{color:#fff;background:linear-gradient(145deg,var(--sakura),var(--cta));border-color:transparent}
.fsitem .nm{flex:1;min-width:0;font-weight:600;font-size:14.5px;word-break:break-all}
.fsitem .sz{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;flex-shrink:0}
.empty{text-align:center;color:var(--ink-soft);padding:40px 16px;font-size:14px}

/* 使用说明步骤 */
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:12px}
.steps li{position:relative;padding-left:38px;color:var(--ink);font-size:14px;line-height:1.7}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:1px;
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-disp);font-weight:800;font-size:12.5px;color:#fff;
  background:linear-gradient(145deg,var(--sakura),var(--cta));box-shadow:var(--hi)}
.steps b{color:var(--cta);font-weight:700}
.steps mark,.guide-line mark{color:var(--cta);font-weight:700;background:var(--rose-tint-2);
  padding:.04em .32em;border-radius:.4em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.guide-line{color:var(--ink);font-size:14px;line-height:1.8;white-space:pre-line}

/* ---- footer ---- */
.foot{max-width:var(--max);margin:24px auto 30px;padding:16px 16px 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:12.5px;color:var(--ink-soft)}
.foot a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.foot .sp{margin-left:auto}

/* ---- skeleton ---- */
.sk{color:transparent!important;background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.7),rgba(255,255,255,.35));
  background-size:200% 100%;border-radius:6px;animation:sk 1.3s ease infinite}
@keyframes sk{to{background-position:-200% 0}}

/* ---- 樱花飘落（优化：仅 transform 上 GPU；外层匀速下落 + 内层自然摆动/旋转）---- */
.petal-layer{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden;contain:strict}
.petal{position:absolute;top:-8vh;will-change:transform;animation:petal-fall linear infinite}
.petal i{display:block;border-radius:12px 2px 12px 2px;
  background:radial-gradient(circle at 30% 30%,#ffe1ec,#ff9ec4);
  box-shadow:0 1px 2px rgba(214,90,140,.16);
  will-change:transform;animation:petal-sway ease-in-out infinite alternate}
@keyframes petal-fall{to{transform:translate3d(0,114vh,0)}}
@keyframes petal-sway{from{transform:translateX(-14px) rotate(-35deg)}to{transform:translateX(14px) rotate(42deg)}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .petal-layer{display:none}
}

/* ---- 无障碍：降低透明度时退为实底（不糊、保对比）---- */
@media (prefers-reduced-transparency: reduce){
  :root{--glass:#FFFFFF;--glass-2:#FCEEF4;--glass-strong:#FFFFFF;--glass-border:#F3D3E2;--line:#F0D2E0}
  .site-head{background:#FFF0F6;-webkit-backdrop-filter:none;backdrop-filter:none}
  .panel,.glass,.status{-webkit-backdrop-filter:none;backdrop-filter:none}
  .panel-head{background:#FFF6FA}
}

/* ---- 响应式（移动优先）---- */
@media (min-width:620px){
  .cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
}
@media (max-width:760px){
  .hero-in{grid-template-columns:1fr;padding:22px 18px;text-align:center}
  .hero h1{font-size:25px}
  .hero .lead{margin-inline:auto}
  .status{margin-inline:auto}
  .mascot{max-width:150px;order:-1}
  .nav a span{display:none}
  .nav a{padding:8px 10px}
  .stat b{font-size:20px}
}
@media (max-width:420px){
  .wrap{padding-left:14px;padding-right:14px}
  .hero{margin-top:14px}
  .hero h1{font-size:22px}
  .panel-body{padding:14px 13px 16px}
  .catcard,.archive{padding:12px 12px;gap:12px}
  .actions .btn{min-width:0}
}

/* ---- 深色模式（夜樱玻璃：深梅紫底 + 磨砂 + 樱粉高亮）---- */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#F8E9F1; --ink-soft:#D2AEC2;
    --cta:#FF7FB0; --cta-press:#F26AA0; --rose:#FF8FB8; --sakura:#FFA9C6;
    --glass:rgba(52,26,42,.52); --glass-2:rgba(60,32,50,.42); --glass-strong:rgba(64,34,54,.66);
    --glass-border:rgba(255,255,255,.14); --line:rgba(255,255,255,.10);
    --rose-tint:rgba(255,127,176,.14); --rose-tint-2:rgba(255,127,176,.24);
    --hi:inset 0 1px 0 rgba(255,255,255,.14);
    --shadow:0 16px 44px rgba(0,0,0,.42);
    --shadow-sm:0 8px 20px rgba(0,0,0,.36);
  }
  body{background:
    radial-gradient(1200px 720px at 86% -12%, rgba(255,127,176,.20), transparent 60%),
    radial-gradient(1000px 620px at -6% 4%, rgba(124,160,255,.14), transparent 55%),
    radial-gradient(900px 900px at 50% 122%, rgba(180,110,255,.16), transparent 60%),
    linear-gradient(180deg,#241019,#160B12)}
  .site-head{background:rgba(28,14,22,.55)}
  /* 暗色下 hero 用深梅罩，保证浅色标题可读 */
  .hero::after{background:linear-gradient(105deg,rgba(24,11,18,.88) 0%,rgba(24,11,18,.58) 44%,rgba(24,11,18,.22) 100%)}
  /* CTA 在暗色下为亮樱粉，按钮文字改深梅色以保对比 */
  .btn-primary{color:#3A0E22}
  .btn-primary{box-shadow:0 8px 20px rgba(255,127,176,.24),var(--hi)}
  .catcard .ic,.fsitem.dir .ic,.brand .mark,.steps li::before{color:#3A0E22}
  .archive .ic{background:rgba(255,255,255,.12);border-color:var(--glass-border);color:var(--cta)}
  .mascot{border-color:rgba(255,255,255,.16)}
  @media (prefers-reduced-transparency: reduce){
    :root{--glass:#2A1420;--glass-2:#32182660;--glass-strong:#33192A;--glass-border:#4A2C3E;--line:#3E2233}
    .site-head{background:#241019}
    .panel,.glass,.status,.panel-head{-webkit-backdrop-filter:none;backdrop-filter:none}
    .panel-head{background:rgba(255,255,255,.04)}
  }
}