/* ============================================================================
   星野柚羽 主题 · 统一基础样式表  (assets/yuzu.css)
   ----------------------------------------------------------------------------
   设计来源：《星野柚羽 官方人设设定集 v2.3》
     冰蓝眼眸      → --acc        #4FB3E8
     银白猫耳猫尾  → 珍珠白底      #F4F9FF / #FFFFFF
     深蓝水手服    → 正文与终端    #16233F
     容易脸红      → 腮红粉        #FFB7C9
     姐姐蕾异色瞳  → 暖金（冰蓝+金） #F7C86B
     薰衣草护毛油  → 紫罗兰        #C9B6FF
   本文件是全站（门户 / anime / mod）唯一的色板与通用组件来源。
   页面专属布局请写在各自的 CSS 里，不要在这里加页面专用规则。
   ========================================================================= */

/* ── 1. 设计令牌 ─────────────────────────────────────────────────────────── */
:root {
  /* 品牌色 */
  --acc:        #4FB3E8;   /* 冰蓝（主色） */
  --acc2:       #8AD9F8;   /* 浅冰蓝 */
  --acc-deep:   #2A7FB8;   /* 深冰蓝（正文里的强调） */
  --pink:       #FFB7C9;   /* 腮红粉 */
  --gold:       #F7C86B;   /* 暖金 */
  --lav:        #C9B6FF;   /* 薰衣草 */

  /* 语义色 */
  --ok:   #37B98B;
  --bad:  #E8707F;
  --warn: #E0A93C;

  /* 状态色（anime 番剧状态；门户的 chip 也复用） */
  --st-watch: #4FB3E8;   /* 在看 */
  --st-want:  #F7C86B;   /* 想看 */
  --st-done:  #34D399;   /* 看过 */
  --st-hold:  #94A3B8;   /* 搁置 */
  --st-drop:  #FB7185;   /* 抛弃 */

  /* 底色与文字 */
  --bg:      #F4F9FF;
  --bg2:     #E9F4FF;
  --surface: #FFFFFF;
  --tint:    #EAF4FE;
  --t1:      #16233F;   /* 主文字（深藏青） */
  --t2:      #4C5F80;   /* 次文字 */
  --t3:      #8FA3BF;   /* 弱文字 */
  --on:      #FFFFFF;   /* 深色底上的文字 */

  /* 玻璃与描边 */
  --glass:   rgba(255,255,255,.88);
  --glass2:  rgba(255,255,255,.72);
  --card:    rgba(255,255,255,.92);
  --input-bg:rgba(234,244,254,.9);
  --stroke:  rgba(22,35,63,.10);
  --stroke-acc: rgba(79,179,232,.32);

  /* 终端（深藏青） */
  --code-bg: #111D36;
  --code-fg: #DCEBFA;

  /* 圆角 / 阴影 / 字体 */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;
  --sh:    0 10px 30px -20px rgba(43,127,184,.55);
  --sh-lg: 0 26px 56px -30px rgba(43,127,184,.62);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC',
          'HarmonyOS Sans SC', 'Segoe UI', 'Microsoft YaHei', sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', Consolas, monospace;
}

/* ── 2. 基础 ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--t2);
  min-height: 100vh;
  background:
    radial-gradient(1200px 620px at 6% -8%, rgba(138,217,248,.45), transparent 62%),
    radial-gradient(900px 520px at 97% 0%, rgba(255,183,201,.32), transparent 60%),
    radial-gradient(900px 640px at 50% 108%, rgba(201,182,255,.22), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg2) 55%, var(--bg));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
/* 星点（“星野”的夜空感） */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 14%, rgba(79,179,232,.75), transparent 60%),
    radial-gradient(1.4px 1.4px at 28% 30%, rgba(79,179,232,.5),  transparent 60%),
    radial-gradient(1.8px 1.8px at 67% 10%, rgba(255,183,201,.8), transparent 60%),
    radial-gradient(1.3px 1.3px at 85% 26%, rgba(79,179,232,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 6%,  rgba(247,200,107,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 93% 44%, rgba(201,182,255,.7), transparent 60%);
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { color: var(--t1); margin: 0; line-height: 1.3; }
p { margin: 0; }
img { max-width: 100%; display: block; }
::selection { background: rgba(79,179,232,.28); }

/* 布局容器（各页面可用 .wrap 包一层） */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ── 3. 壁纸层（由 yuzu.js 的 YZ.wallpaper() 注入图片） ──────────────────── */
.yz-bg  { position: fixed; inset: 0; z-index: -2; background-size: cover; background-position: center;
          opacity: 0; transition: opacity 1.2s ease; filter: saturate(.85); }
.yz-bg.in { opacity: 1; }
.yz-ov  { position: fixed; inset: 0; z-index: -1;
          background: radial-gradient(1100px 620px at 8% -8%, rgba(244,249,255,.92), rgba(233,244,255,.86) 55%, rgba(244,249,255,.94)); }

/* ── 4. 按钮 ─────────────────────────────────────────────────────────────── */
.btn, .b-pri, .b-sec, .b-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  border-radius: var(--r-pill); border: none; transition: all .2s ease;
  text-decoration: none; white-space: nowrap;
}
.b-pri   { background: linear-gradient(135deg, var(--acc), #66C6F0 60%, var(--acc2)); color: #fff;
           padding: 13px 26px; box-shadow: 0 14px 30px -14px rgba(79,179,232,1); }
.b-pri:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(79,179,232,1); }
.b-sec   { background: rgba(255,255,255,.9); color: var(--acc-deep); padding: 13px 26px;
           border: 1.5px solid var(--stroke-acc); }
.b-sec:hover { background: var(--tint); border-color: var(--acc); }
.b-ghost { background: var(--surface); color: var(--t2); font-size: 13.5px; padding: 11px 18px;
           border: 1px solid var(--stroke); }
.b-ghost:hover { color: var(--acc-deep); border-color: var(--acc); background: var(--tint); }
.b-dark  { background: linear-gradient(135deg, var(--t1), #26375C); color: #fff; font-size: 14px;
           padding: 11px 21px; box-shadow: 0 12px 26px -16px rgba(22,35,63,1); }
.b-dark:hover { transform: translateY(-2px); }
.b-dark:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.b-pri svg, .b-sec svg, .b-ghost svg { width: 15px; height: 15px; }

/* ── 5. 表单控件 ─────────────────────────────────────────────────────────── */
.inp, .finp, input[type=text], input[type=password], input[type=date], input[type=file], select, textarea {
  font-family: inherit; font-size: 15px; color: var(--t1);
  background: var(--input-bg); border: 1px solid rgba(79,179,232,.28);
  border-radius: var(--r-sm); padding: 10px 12px; outline: none; transition: all .18s;
  width: 100%;
}
.inp:focus, .finp:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--acc); box-shadow: 0 0 0 4px rgba(79,179,232,.14);
}
::placeholder { color: var(--t3); }
label { font-size: 12.5px; font-weight: 600; color: var(--t2); }

/* ── 6. 通用卡片 / 面板 ──────────────────────────────────────────────────── */
.card, .panel, .box {
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-lg);
  box-shadow: 0 4px 18px -14px rgba(22,35,63,.5);
}
.card  { padding: 24px; display: flex; flex-direction: column; gap: 11px; position: relative; overflow: hidden; }
.panel { padding: 24px; }
.glass { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
         border: 1px solid var(--stroke); border-radius: var(--r-lg); }

/* ── 7. 徽章 / 胶囊 ──────────────────────────────────────────────────────── */
.badge, .tag, .pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: rgba(79,179,232,.12); color: var(--acc-deep); border: 1px solid rgba(79,179,232,.22);
}
.pill.mute { background: rgba(148,163,255,.08); color: var(--t3); border-color: var(--stroke); }
.pill.se   { background: rgba(201,182,255,.16); color: #6D5BD0; border-color: rgba(201,182,255,.4); }
.pill.ok   { background: rgba(55,185,139,.14); color: #1E7A55; border-color: rgba(55,185,139,.34); }
.pill.warn { background: rgba(247,200,107,.2); color: #A9701A; border-color: rgba(247,200,107,.5); }

/* 圆点状态芯片（在线/离线/检测中） */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill);
        font-size: 11.5px; font-weight: 700; background: var(--surface); color: var(--t3);
        border: 1px solid var(--stroke); white-space: nowrap; }
.chip .d { width: 7px; height: 7px; border-radius: 50%; background: var(--t3); flex: 0 0 auto; }
.chip.on   { color: var(--ok);  border-color: rgba(55,185,139,.35); background: rgba(55,185,139,.08); }
.chip.on   .d { background: var(--ok);  box-shadow: 0 0 0 3px rgba(55,185,139,.16); }
.chip.off  { color: var(--bad); border-color: rgba(232,112,127,.35); background: rgba(232,112,127,.08); }
.chip.off  .d { background: var(--bad); box-shadow: 0 0 0 3px rgba(232,112,127,.16); }
.chip.na   { color: var(--t3); }
.chip.up   { color: #A9701A; border-color: rgba(247,200,107,.55); background: rgba(247,200,107,.18); }
.chip.up   .d { background: var(--gold); box-shadow: 0 0 0 3px rgba(247,200,107,.22); animation: yz-pulse 1.4s infinite; }
.chip.wait .d { animation: yz-pulse 1.1s infinite; }
.chip.hidden { display: none; }
@keyframes yz-pulse { 0%,100% { opacity:.35 } 50% { opacity:1 } }

/* 番剧状态芯片（anime 列表用；颜色沿用设定里的状态色） */
.st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill);
      font-size: 11.5px; font-weight: 700; white-space: nowrap; line-height: 1.7; }
.st .d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.st-watch { color: var(--st-watch); background: rgba(79,179,232,.14);  border: 1px solid rgba(79,179,232,.3); }
.st-want  { color: #B8862B;           background: rgba(247,200,107,.2); border: 1px solid rgba(247,200,107,.45); }
.st-done  { color: #1E8F6B;           background: rgba(52,211,153,.14); border: 1px solid rgba(52,211,153,.32); }
.st-hold  { color: #5C6B82;           background: rgba(148,163,184,.16);border: 1px solid rgba(148,163,184,.34); }
.st-drop  { color: #C2455C;           background: rgba(251,113,133,.14);border: 1px solid rgba(251,113,133,.32); }

/* ── 8. 区块标题 ─────────────────────────────────────────────────────────── */
.sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
             margin-bottom: 26px; flex-wrap: wrap; }
.sect-head h2 { font-size: 23px; font-weight: 850; display: flex; align-items: center; gap: 10px; }
.sect-head h2::before { content: ''; width: 6px; height: 20px; border-radius: 3px;
                        background: linear-gradient(180deg, var(--acc), var(--gold)); }
.sect-head .more { font-size: 13px; color: var(--t3); }

/* ── 9. 表格 ─────────────────────────────────────────────────────────────── */
.tbl-wrap { border: 1px solid var(--stroke); border-radius: var(--r-lg); overflow: hidden;
            background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.94)); }
table.yz { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.yz thead th { position: sticky; top: 0; z-index: 2; padding: 11px 12px; text-align: left;
                    font-size: 12px; font-weight: 750; letter-spacing: .5px; color: var(--acc-deep);
                    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(233,244,254,.96));
                    border-bottom: 1px solid var(--stroke-acc); }
table.yz tbody td { padding: 9px 12px; border-bottom: 1px solid rgba(79,179,232,.1);
                    font-size: 13.5px; color: var(--t1); vertical-align: middle;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.yz tbody tr:hover td { background: rgba(79,179,232,.08); }
table.yz tbody tr:last-child td { border-bottom: none; }

/* ── 10. 空态 / 页脚 / 提示 ──────────────────────────────────────────────── */
.empty { text-align: center; padding: 44px 22px; border-radius: var(--r-lg);
         border: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(233,244,254,.8)); }
.empty .ei { font-size: 2.6rem; margin-bottom: 10px; filter: drop-shadow(0 6px 16px rgba(79,179,232,.5)); }
.empty h3 { font-size: 1.06rem; font-weight: 700; margin-bottom: 5px; }
.empty p  { color: var(--t3); font-size: .86rem; margin-bottom: 14px; }

.foot { margin-top: 56px; border-top: 1px solid var(--stroke); padding: 28px 0;
        font-size: 13px; color: var(--t3); position: relative; z-index: 1; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.foot .yuzu { display: inline-flex; align-items: center; gap: 6px; color: var(--acc-deep); font-weight: 700; }

/* 提示条 */
.note { padding: 12px 15px; border-radius: var(--r); font-size: 13.5px;
        background: rgba(79,179,232,.1); border: 1px solid var(--stroke-acc); color: var(--acc-deep); }
.note.ok   { background: rgba(55,185,139,.12); border-color: rgba(55,185,139,.34); color: #1E7A55; }
.note.warn { background: rgba(247,200,107,.16); border-color: rgba(247,200,107,.45); color: #A9701A; }
.note.err  { background: rgba(232,112,127,.12); border-color: rgba(232,112,127,.34); color: #A83B4C; }

/* 工具类 */
.mono { font-family: var(--mono); }
.dim  { color: var(--t3); }
.right { text-align: right; }
.hidden { display: none !important; }
.fi { animation: yz-in .4s cubic-bezier(.2,.7,.3,1); }
@keyframes yz-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ── 11. 无障碍 / 减少动效 ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   全站动效层 + 整体样式微调（2026-11-07）
   配合 assets/motion.js 使用；纯视觉，不影响业务逻辑
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 关键帧 ─────────────────────────────────────────────────────────────── */
@keyframes yz-fade-up     { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes yz-orb-float   { 0%, 100% { transform: translate3d(0,0,0) scale(1); }
                            33%      { transform: translate3d(12px,-18px,0) scale(1.06); }
                            66%      { transform: translate3d(-10px,10px,0) scale(.97); } }
@keyframes yz-aurora      { 0%   { transform: translate3d(-2%,-1%,0) rotate(0deg) scale(1); }
                            50%  { transform: translate3d(2%,1.5%,0) rotate(6deg) scale(1.08); }
                            100% { transform: translate3d(-2%,-1%,0) rotate(0deg) scale(1); } }
@keyframes yz-grad-shift  { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
@keyframes yz-soft-pulse  { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }

/* ── 滚动进度条（motion.js 注入） ───────────────────────────────────────── */
.yz-progress {
  position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 9998;
  pointer-events: none; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--acc), var(--lav) 45%, var(--pink) 78%, var(--gold));
  box-shadow: 0 0 14px rgba(79, 179, 232, .55);
  transition: transform .12s linear;
}

/* ── 页面进入过渡（motion.js 注入） ─────────────────────────────────────── */
.yz-pagefade {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 1;
  background: linear-gradient(180deg, #F8FCFF, #EDF6FF 60%, #F6FBFF);
  transition: opacity .7s ease;
}
.yz-pagefade.out { opacity: 0; }

/* ── 极光背景层（motion.js 注入） ───────────────────────────────────────── */
.yz-aurora {
  position: fixed; inset: -18%; z-index: -1; pointer-events: none; opacity: .30;
  background:
    radial-gradient(38% 34% at 18% 22%, rgba(138, 217, 248, .55), transparent 70%),
    radial-gradient(30% 30% at 82% 18%, rgba(201, 182, 255, .50), transparent 70%),
    radial-gradient(34% 30% at 68% 84%, rgba(255, 183, 201, .40), transparent 70%),
    radial-gradient(26% 26% at 24% 82%, rgba(247, 200, 107, .32), transparent 70%);
  filter: blur(56px) saturate(1.15);
  animation: yz-aurora 26s ease-in-out infinite;
  will-change: transform;
}

/* ── 滚动入场 ───────────────────────────────────────────────────────────── */
.yz-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .66s cubic-bezier(.2,.7,.3,1), transform .66s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--yz-i, 0) * 45ms);
  will-change: opacity, transform;
}
.yz-reveal.yz-in { opacity: 1; transform: none; will-change: auto; }
/* 表格行（番剧库）只做淡入，避免影响表格布局 */
.yz-reveal.yz-reveal-row { transform: none !important; transition: opacity .5s ease !important; transition-delay: calc(var(--yz-i, 0) * 20ms) !important; }

/* ── 导航栏滚动反馈 ─────────────────────────────────────────────────────── */
nav.yz-scrolled {
  box-shadow: 0 18px 42px -32px rgba(43, 127, 184, .75) !important;
  border-bottom-color: rgba(22, 35, 63, .09) !important;
}

/* ── 返回顶部按钮 ───────────────────────────────────────────────────────── */
.yz-top {
  position: fixed; right: 20px; bottom: 22px; z-index: 200;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font: inherit;
  color: var(--acc-deep); background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(79, 179, 232, .32);
  box-shadow: 0 16px 34px -20px rgba(43, 127, 184, .8);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.94);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s, border-color .2s;
}
.yz-top.on { opacity: 1; visibility: visible; transform: none; }
.yz-top:hover { background: #fff; border-color: var(--acc); transform: translateY(-2px); }
.yz-top svg { width: 19px; height: 19px; }

/* ── 背景光斑动起来 ─────────────────────────────────────────────────────── */
.orbs i { animation: yz-orb-float 18s ease-in-out infinite; }
.orbs i:nth-child(2) { animation-delay: -6s; }
.orbs i:nth-child(3) { animation-delay: -12s; }

/* 标题渐变流动（页面自带动画时以页面为准） */
h1 em { background-size: 220% 100%; animation: yz-grad-shift 10s linear infinite; }

/* ── 整体样式微调 ───────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(233, 244, 254, .55); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(79, 179, 232, .55), rgba(201, 182, 255, .60));
  border-radius: var(--r-pill); border: 2px solid rgba(244, 249, 255, .9);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(79, 179, 232, .80), rgba(201, 182, 255, .85));
}
* { scrollbar-width: thin; scrollbar-color: rgba(79, 179, 232, .6) rgba(233, 244, 254, .55); }
:focus-visible { outline: 2px solid rgba(79, 179, 232, .75); outline-offset: 2px; border-radius: 8px; }

/* 通用卡片 hover 微动（页面自己的动画优先） */
.card, .stat, .dl-card, .proj, .ef-card, .oc-card, .anime-card {
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s, border-color .24s;
}

/* ── 减少动效：全部关闭 ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .yz-progress, .yz-pagefade, .yz-aurora { display: none !important; }
  .yz-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .yz-top { transition: none; }
  html { scroll-behavior: auto; }
  .orbs i, h1 em { animation: none !important; }
}