/* ============================================================
   Leyr 全站样式 · 手绘风统一版
   ------------------------------------------------------------
   【如何修改】
   1. 配色/字体/布局等外观变量集中在下方 :root，改它就行。
   2. 本文件被 index.html / article.html / gallery.html 引用，
      全站手绘风统一从这里取。
   ============================================================ */

/* ============ 外观变量（改这里调整整体风格） ============ */
:root{
  /* 钴蓝色阶梯：主题色（蓝） */
  --cobalt-50 :#eef2fd;   /* 最浅：页面底色调 */
  --cobalt-100:#dfe7fb;
  --cobalt-200:#c3d2f8;
  --cobalt-300:#96aef3;   /* 次级填充 */
  --cobalt-400:#6a8bef;
  --cobalt-600:#2653d6;   /* 主色：文字/描边/强调 */
  --ink       :#131316;   /* 近黑：正文 */

  /* 字体系统：拉丁几何无衬线 + 中文黑体，等宽体用于标签 */
  --font-display:"Avenir Next","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"SF Mono",ui-monospace,"Cascadia Code","JetBrains Mono",Consolas,monospace;

  /* 缓动曲线 */
  --ease-quart:cubic-bezier(.165,.84,.44,1);
  --ease-inout:cubic-bezier(.77,0,.175,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);   /* 回弹，用于手绘元素 */

  /* 手绘不规则圆角（全站统一的"手绘感"来源，成对使用） */
  --radius-hand-a:12px 4px 12px 4px/4px 12px 4px 12px;
  --radius-hand-b:4px 12px 4px 12px/12px 4px 12px 4px;
  --radius-hand-btn:14px 4px 14px 4px/4px 14px 4px 14px;   /* 按钮用（同 login 输入框） */
  --line-hand:rgba(19,19,22,.75);   /* 手绘深色描边（同 login 卡片/输入框） */

  /* 布局 */
  --maxw:1080px;
  --nav-h:64px;

  /* ---- 手绘语言共用 token ----
     （原 login.html / verify.html 各自内联了一套，现统一到这里） */
  --font-hand:"Segoe Print","Bradley Hand","Comic Sans MS","Chalkboard SE",cursive;
  --deco-light:#c3d2f8;   /* 装饰大字母：浅蓝 */
  --deco-blue :#3b5bdb;   /* 装饰大字母：深蓝 */
  --deco-green:#8cc63f;   /* 装饰大字母：草绿 */
  --deco-red  :#e2544a;   /* 装饰大字母：红 */
  --card-pink :#ffc9d6;   /* 双层卡的粉色衬底 */
  --paper     :#fdfdfd;   /* 标签压在边框上时用来盖住边线 */
  --shadow-hand:0 10px 30px rgba(19,19,22,.15);   /* 手绘卡统一投影 */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-display);
  color:var(--ink);
  background:var(--cobalt-50);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--cobalt-600);color:#fff}
a{color:inherit;text-decoration:none}

/* ============ 全页背景：随机二次元图（原图直出 + 蓝白罩层） ============ */
.bg-layer{
  position:fixed;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.6s var(--ease-quart);
}
.bg-layer.loaded{opacity:.9}
.bg-veil{
  position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(238,242,253,.30) 0%,
    rgba(238,242,253,.52) 45%,
    rgba(238,242,253,.78) 100%);
}

/* ============ 背景三种模式（CONFIG.background.mode）============
   解决"hero 图和背景不适配"：背景不再用无关的随机图 */

/* 模式一 hero：背景 = hero 图本身的大模糊版 → 与 hero 永远同色系，
   两者在视觉上连成一片（hero 底部本来就是渐隐的，正好接上） */
body.bg-hero .bg-layer.from-hero{
  filter:blur(56px) saturate(.85) brightness(1.06);
  transform:scale(1.18);        /* 放大，避免模糊后四周露白边 */
}
body.bg-hero .bg-layer.loaded{opacity:.8}
body.bg-hero .bg-veil{
  background:linear-gradient(180deg,
    rgba(238,242,253,.16) 0%,
    rgba(238,242,253,.40) 42%,
    rgba(238,242,253,.82) 100%);
}

/* 模式 acg：二次元风背景 + 与 hero 的「色调统一」
   思路：让两张图都过一遍钴蓝 —— 照片 hero 加一层钴蓝 multiply，
   二次元背景降饱和 + 加深白罩 + 淡钴蓝罩，于是它们看起来是一套的 */
body.bg-acg .bg-layer{filter:saturate(.78) contrast(.96)}
body.bg-acg .bg-layer.loaded{opacity:.62}          /* 压一档，主角让给 hero */
body.bg-acg .bg-veil{
  background:linear-gradient(180deg,
    rgba(238,242,253,.52) 0%,
    rgba(238,242,253,.72) 45%,
    rgba(238,242,253,.93) 100%);
}
body.bg-acg::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(38,83,214,.14) 0%,rgba(38,83,214,.06) 55%,rgba(38,83,214,.02) 100%);
}
body.bg-acg .hero-frame::after{          /* hero 也上同一层钴蓝调色 */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,64,175,.26) 0%,rgba(38,83,214,.10) 60%,rgba(238,242,253,.16) 100%);
  mix-blend-mode:multiply;
}

/* 模式二 plain：不要图片，钴蓝渐变 + 细网点（最干净、最快、永不撞色） */body.bg-plain .bg-layer{
  opacity:1;
  background:
    radial-gradient(1100px 560px at 12% -8%, #dbe4fa 0%, rgba(219,228,250,0) 62%),
    radial-gradient(900px 520px at 100% 4%, #e6edfc 0%, rgba(230,237,252,0) 58%),
    linear-gradient(180deg,#f8fbff 0%,#eef2fd 55%,#e6edfb 100%);
}
body.bg-plain .bg-layer::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(38,83,214,.13) 1px, transparent 1.2px);
  background-size:19px 19px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
          mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
}
body.bg-plain .bg-veil{display:none}

/* ============ 顶部导航：透明度渐变效果（上实下虚 + 渐变模糊） ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:calc(var(--nav-h) + 28px);          /* 多出的 28px 用于渐变淡出 */
  display:flex;align-items:flex-start;
}
/* 模糊层：用 mask 做透明度渐变，越往下越透明 */
.nav::before{
  content:"";position:absolute;inset:0;
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.35) 60%,rgba(255,255,255,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}
.nav-inner{
  position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  height:var(--nav-h);padding:0 24px;
  display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:.02em}
.brand svg{width:30px;height:30px;flex:none}
.nav-links{display:flex;gap:4px;margin-left:auto}
/* 导航链接：login 手绘小字按钮（下划线生长 + 悬停微旋转） */
.nav-links a{
  font-size:14px;font-weight:600;letter-spacing:.08em;
  padding:6px 4px;margin:0 10px;
  color:rgba(19,19,22,.75);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:color .25s,background-size .3s var(--ease-quart),transform .2s var(--ease-back);
}
.nav-links a:hover{color:var(--cobalt-600);background-size:100% 2px;transform:translateY(-2px) rotate(-2deg)}
.nav-links a:active{transform:scale(.94)}
.nav-links a.active{color:var(--cobalt-600);background-size:100% 2px}
/* 描边小按钮（CTA 备用样式，当前导航无 CTA） */
.nav-links a.nav-cta{
  margin-left:8px;
  color:var(--cobalt-600);font-weight:600;
  border:1.5px solid var(--cobalt-600);
  border-radius:var(--radius-hand-a);   /* 手绘不规则圆角 */
  background:rgba(255,255,255,.55);
  transition:transform .2s var(--ease-back),box-shadow .25s var(--ease-quart),background .25s var(--ease-quart);
}
.nav-links a.nav-cta:hover{
  color:#fff;background:var(--cobalt-600);
  transform:translateY(-1px) rotate(-1deg);
  box-shadow:0 4px 14px rgba(38,83,214,.3);
}

/* ============ 通用容器 ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{margin:72px 0}

/* 等宽体小标签：mono caption 风格 */
.tag{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cobalt-600);
}

/* ============ Hero：Bing 每日图片（贴顶全宽 + 上下边缘透明度渐变） ============ */
.hero{
  /* 贴顶全宽：hero 从视口顶部开始，导航以毛玻璃渐变浮于图上 */
  margin-top:0;
  /* 横向铺满：撑破 .wrap 容器到视口边缘 */
  width:100vw;margin-left:calc(50% - 50vw);
}
.hero-frame{
  position:relative;height:min(60vh,560px);
  /* 透明度渐变开始/结束：图片上下边缘淡出 */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 88%,transparent 100%);
  overflow:hidden;
}
.hero-img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* 入场：从底部 clip 揭开 + Ken Burns 缓推 */
  clip-path:inset(100% 0 0 0);
  animation:heroReveal 1.4s var(--ease-quart) .1s forwards,
            kenburns 9s var(--ease-quart) .2s forwards;
}
@keyframes heroReveal{to{clip-path:inset(0% 0 0 0)}}
@keyframes kenburns{from{transform:scale(1.22)}to{transform:scale(1)}}
.hero-fallback{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--cobalt-300),var(--cobalt-600));
}
.hero-text{
  position:absolute;left:28px;bottom:22px;color:#fff;z-index:2;
  text-shadow:0 2px 24px rgba(19,19,22,.45);
}
.hero-title{
  font-size:clamp(2.2rem,6.5vw,4.2rem);font-weight:700;line-height:1.08;
  letter-spacing:.01em;overflow:hidden;
}
/* 标题逐词升起（rotateX 翻转入场） */
.hero-title .w{display:inline-block;transform:translateY(110%) rotateX(-45deg);opacity:0;
  animation:wordUp .9s var(--ease-quart) forwards}
@keyframes wordUp{to{transform:translateY(0) rotateX(0);opacity:1}}
.hero-caption{margin-top:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.hero-copyright{
  position:absolute;bottom:16px;z-index:2;
  right:max(20px, calc((100vw - var(--maxw)) / 2 + 24px));
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(19,19,22,.5);
}

/* ============ 开场：滚动驱动的 cover → 内容（替代原来的 hero 图） ============
   三段进度（对应草图 wy=0 / wy/2 / wy）：
     ① 小标题框在正中
     ② 标题框向上移出 + 淡出，大面板从下方升起
     ③ 大面板就位，面板内部的小框浮现
   进度由 main.js 按滚动量实时计算（transform/opacity，不触发重排） */
.intro{position:relative;height:200vh}          /* 滚动舞台：2 屏高 */
.intro-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;   /* 大面板居中 */
  padding:0 24px;
}

/* 海报底雾：整屏柔白渐隐 —— 不是"框"，只是保证文字压在任意壁纸上都读得清 */
.intro-sticky::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 54% at 50% 50%,
    rgba(255,255,255,.80) 0%, rgba(255,255,255,.34) 58%, rgba(255,255,255,0) 100%);
}

/* ① 海报主标题：不要任何容器，巨型字号直接压在壁纸上 */
.intro-title{
  position:absolute;left:50%;top:50%;z-index:2;
  transform:translate(-50%,-50%);                          /* 初值，JS 会覆盖 */
  font-size:clamp(3.2rem,14vw,9rem);font-weight:700;line-height:1;letter-spacing:.02em;
  color:var(--cobalt-600);text-align:center;
  text-shadow:0 4px 28px rgba(255,255,255,.92), 0 1px 2px rgba(255,255,255,.95);
  will-change:transform,opacity;
}
.intro-title span{
  text-decoration:underline wavy var(--cobalt-300);
  text-decoration-thickness:6px;text-underline-offset:16px;
}

/* ② 标语块：同样无容器，海报式排版（这是"大框"去掉框之后的样子） */
.intro-sheet{
  position:relative;z-index:2;
  width:min(680px,90vw);padding:0;
  text-align:center;
  will-change:transform,opacity;
}
.intro-sheet-body .tag{display:block;margin-bottom:10px}
.intro-sheet-body p{
  margin:0;font-size:clamp(14px,1.5vw,17px);line-height:1.8;letter-spacing:.12em;
  color:rgba(19,19,22,.86);
  text-shadow:0 2px 16px rgba(255,255,255,.92);
}

/* ③ 底部提示：海报"署名行"的位置，不用分隔线（分隔线也是框感） */
.intro-sheet-inner{
  margin-top:26px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;color:var(--cobalt-400);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease-quart),transform .5s var(--ease-quart);
}
.intro-sheet-inner.on{opacity:1;transform:none}
.intro-sheet-inner::after{content:"↓";animation:introBob 1.8s var(--ease-inout) infinite}
@keyframes introBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

@media (max-width:640px){
  .intro{height:170vh}
  .intro-title{font-size:clamp(3rem,18vw,5rem)}
  .intro-sheet{width:min(90vw,560px)}
}

/* ============ 个人卡：圆形 Logo + 名字 + 展示块 ============
   按需求**去掉卡片框**：不再有描边/白底/投影，内容直接浮在壁纸上 */
.profile{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  padding:24px 0;
}
.avatar{
  width:88px;height:88px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,#fff,var(--cobalt-100));
  border:1.5px solid var(--cobalt-600);
  display:flex;align-items:center;justify-content:center;
}
.avatar svg{width:56px;height:56px}
.profile-main{flex:1;min-width:260px}
.profile-name{font-size:26px;font-weight:700;letter-spacing:.01em}
.profile-bio{color:rgba(19,19,22,.78);font-size:14px;margin-top:2px}   /* 无卡片底，字色提亮保证可读 */

/* ---- 个人卡展示块（原 GitHub 贡献图的位置）----
   三种形态共用这一套手绘语言：描边 + 不规则圆角 + 偶数项换向 */
.p-block{width:100%;margin-top:22px}

/* 方案一：数据牌 */
.stat-row{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.stat-tile{
  flex:1 1 120px;padding:14px 16px;text-align:center;
  border:1.8px solid var(--line-hand);border-radius:var(--radius-hand-btn);
  background:rgba(255,255,255,.62);
}
.stat-tile:nth-child(even){border-radius:var(--radius-hand-a)}
.stat-tile b{display:block;font-size:30px;line-height:1.15;color:var(--cobalt-600);letter-spacing:.01em}
.stat-tile span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:rgba(19,19,22,.62)}

/* 技能标签墙 */
.skill-wall{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.skill-chip{
  font-size:12.5px;font-weight:600;padding:4px 12px;
  border:1.5px solid var(--line-hand);border-radius:var(--radius-hand-a);
  background:rgba(255,255,255,.55);color:rgba(19,19,22,.8);
  transition:transform .2s var(--ease-back),background .25s,border-color .25s,color .25s;
}
.skill-chip:hover{transform:translateY(-2px) rotate(-2deg);border-color:var(--cobalt-600);color:var(--cobalt-600);background:#fff}

/* 方案二：迷你照片条 */
.mini-photos{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:10px}
.mini-photo{
  display:block;overflow:hidden;
  border:1.8px solid var(--line-hand);border-radius:var(--radius-hand-btn);
  background:rgba(255,255,255,.55);
  transition:transform .2s var(--ease-back),box-shadow .25s var(--ease-quart);
}
.mini-photo:nth-child(even){border-radius:var(--radius-hand-a)}
.mini-photo:hover{transform:translateY(-3px) rotate(-.8deg);box-shadow:var(--shadow-hand)}
.mini-photo img{width:100%;height:86px;object-fit:cover;display:block}

/* 方案三：写作热力图（自建，不用任何第三方图片） */
.heat-grid{display:grid;grid-template-rows:repeat(7,10px);grid-auto-flow:column;gap:3px;margin-top:10px}
.heat-c{display:block;width:10px;height:10px;border-radius:3px;background:var(--cobalt-100)}
.heat-c.lv0{background:var(--cobalt-100)}
.heat-c.lv1{background:var(--cobalt-300)}
.heat-c.lv2{background:var(--cobalt-400)}
.heat-c.lv3{background:var(--cobalt-600)}
.heat-legend{
  display:flex;align-items:center;gap:4px;margin-top:10px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:rgba(19,19,22,.55);
}
.heat-legend em{margin-left:auto;font-style:normal}

/* 积木式：一个块 = 一个 .pb-item（profileBlock 用 + 组合多个） */
.pb-item + .pb-item{margin-top:20px}

/* 方案四：技术栈图标行 */
.stack-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.stack-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px 8px 11px;
  border:1.8px solid var(--line-hand);border-radius:var(--radius-hand-btn);
  background:rgba(255,255,255,.6);
  font-size:13px;font-weight:600;color:rgba(19,19,22,.82);
  transition:transform .2s var(--ease-back),border-color .25s,color .25s,background .25s;
}
.stack-item:nth-child(even){border-radius:var(--radius-hand-a)}
.stack-item:hover{transform:translateY(-2px) rotate(-1.5deg);border-color:var(--cobalt-600);color:var(--cobalt-600);background:#fff}
.stack-item svg{
  width:20px;height:20px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  opacity:.85;
}

/* 方案五：折腾时间轴 */
.tl{list-style:none;margin:12px 0 0;padding:0 0 0 18px;position:relative}
.tl::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;border-left:2px dashed rgba(19,19,22,.28)}
.tl li{position:relative;margin-bottom:12px}
.tl li:last-child{margin-bottom:0}
.tl li::before{
  content:"";position:absolute;left:-18px;top:5px;
  width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--cobalt-600);
}
.tl time{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--cobalt-400)}
.tl p{margin:2px 0 0;font-size:13.5px;line-height:1.65;color:rgba(19,19,22,.78)}

/* 方案六：最近在折腾（手绘便签 + 图钉） */
.now-note{
  position:relative;margin-top:12px;padding:20px 18px 14px;
  border:1.8px dashed rgba(19,19,22,.35);border-radius:var(--radius-hand-btn);
  background:rgba(255,255,255,.72);
  font-size:14px;line-height:1.75;color:rgba(19,19,22,.85);
  transform:rotate(-.4deg);
}
.now-note::before{        /* 左上角的图钉 */
  content:"";position:absolute;left:16px;top:-7px;
  width:13px;height:13px;border-radius:50%;
  background:var(--card-pink);border:1.8px solid var(--line-hand);
}
.now-note span{
  display:block;margin-top:8px;text-align:right;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:rgba(19,19,22,.5);
}

@media (max-width:640px){
  .mini-photos{grid-template-columns:repeat(3,1fr)}
  .stat-tile b{font-size:26px}
  .heat-grid{grid-template-rows:repeat(7,8px)}
  .heat-c{width:8px;height:8px}
  .stack-item{font-size:12.5px;padding:7px 12px 7px 9px}
}

/* ============ 卡片网格：项目入口 & Blog 精选共用 ============
   统一手绘语言：深色描边 + 不规则圆角 + 交替方向 + 悬停微旋转
   （原为通用玻璃拟态，与 .tool / .album-card / .photo-cell 不一致） */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:18px}
.card{
  position:relative;padding:26px 24px 22px;overflow:hidden;
  border-radius:var(--radius-hand-btn);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  border:1.8px solid var(--line-hand);
  box-shadow:0 6px 20px rgba(19,19,22,.08);
  transition:transform .2s var(--ease-back),box-shadow .25s var(--ease-quart),background .25s;
}
.card:nth-child(even){border-radius:var(--radius-hand-a)}   /* 交替圆角方向，同 .tool 做法 */
.card:hover{
  transform:translateY(-3px) rotate(-.6deg);
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow-hand);
}
.card .date{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt-400)}
.card h3{font-size:17px;font-weight:650;margin:8px 0 6px;line-height:1.4}
.card h3 span{
  background-image:linear-gradient(var(--cobalt-600),var(--cobalt-600));
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s var(--ease-quart);
}
.card:hover h3 span{background-size:100% 1.5px}
.card .excerpt{font-size:13px;color:rgba(19,19,22,.55);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============ 常用工具导行：手绘按钮（同 login 手绘语言） ============ */
.tools-row{
  display:flex;flex-wrap:wrap;gap:14px;
}
.tool{
  flex:1 1 160px;padding:18px 20px;
  display:flex;flex-direction:column;gap:4px;
  border:1.8px solid var(--line-hand);                 /* 手绘深色描边 */
  border-radius:var(--radius-hand-btn);                /* 手绘不规则圆角 */
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .2s var(--ease-back),box-shadow .25s var(--ease-quart),border-color .25s,background .25s;
}
.tool:nth-child(even){border-radius:4px 14px 4px 14px/14px 4px 14px 4px}   /* 交替圆角方向 */
.tool:hover{
  background:rgba(255,255,255,.78);
  border-color:var(--cobalt-600);
  transform:translateY(-2px) rotate(-1deg);
  box-shadow:0 6px 18px rgba(38,83,214,.15);
}
.tool:active{transform:scale(.96)}
.tool .no{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--cobalt-400)}
.tool .name{font-size:15px;font-weight:600}
.tool .desc{font-size:12px;color:rgba(19,19,22,.5)}

/* ============ 区块标题 ============ */
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.sec-head h2{font-size:22px;font-weight:700}
.sec-head .tag{flex:none}

/* ============ 页脚 ============ */
footer{
  margin-top:90px;padding:26px 0 34px;text-align:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:rgba(19,19,22,.45);
  border-top:1px solid var(--cobalt-100);
}

/* ============ 滚动显现动画 ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-quart),transform .8s var(--ease-quart)}
.reveal.in{opacity:1;transform:none}

/* 移动端微调 */
@media (max-width:640px){
  .nav-inner{gap:14px;padding:0 16px}
  .nav-links a{padding:6px 2px;margin:0 6px;font-size:13px}
  .hero-frame{height:38vh}
  .hero-copyright{display:none}   /* 小屏隐藏版权行，避免与说明文字重叠 */
  .hero-text{left:18px;bottom:16px}
  .profile{padding:22px}
  .tool{flex:1 1 45%}
}

/* ============================================================
   子页面共用（article.html / gallery.html）
   ============================================================ */

/* 子页顶栏：手绘小字按钮风格，与主导航同语言 */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:calc(var(--nav-h) + 28px);
  display:flex;align-items:flex-start;
}
.topbar::before{
  content:"";position:absolute;inset:0;
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.35) 60%,rgba(255,255,255,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}
.topbar-inner{
  position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  height:var(--nav-h);padding:0 24px;
  display:flex;align-items:center;gap:14px;
}
.topbar-inner .brand svg{width:30px;height:30px}
.topbar-back{
  margin-left:auto;
  font-size:14px;font-weight:600;letter-spacing:.08em;
  padding:6px 4px;
  color:rgba(19,19,22,.75);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:color .25s,background-size .3s var(--ease-quart),transform .2s var(--ease-back);
}
.topbar-back:hover{color:var(--cobalt-600);background-size:100% 2px;transform:translateY(-2px) rotate(-2deg)}

/* 分类徽标（随笔 / 随手拍 / 其他分类通用） */
.badge{
  display:inline-block;
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;
  color:var(--cobalt-600);
  border:1.2px solid var(--cobalt-600);
  border-radius:var(--radius-hand-a);
  padding:2px 8px;
  background:rgba(255,255,255,.5);
}
/* 分类分色：原来所有分类都是同一种钴蓝，卡片墙一片同色没节奏 */
.badge[data-cat="随笔"]  {color:var(--cobalt-600);border-color:var(--cobalt-600)}
.badge[data-cat="linux"] {color:#2c7a3f;border-color:#2c7a3f}
.badge[data-cat="笔记"]  {color:#6a4fb0;border-color:#6a4fb0}
.badge[data-cat="折腾"]  {color:#b0691a;border-color:#b0691a}
.badge[data-cat="随手拍"]{color:#b03030;border-color:#b03030}

/* ============ 文章页：手绘白卡 + 排版 ============ */
.article-wrap{max-width:760px;margin:0 auto;padding:calc(var(--nav-h) + 48px) 24px 40px}
.article-card{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  border:2px solid var(--line-hand);                       /* 手绘深色描边 */
  border-radius:26px 20px 24px 18px/20px 26px 18px 24px;   /* 手绘不规则圆角（同 login 卡） */
  box-shadow:0 18px 60px rgba(19,19,22,.10);
  padding:44px 48px 40px;
}
.article-head{margin-bottom:26px;padding-bottom:18px;border-bottom:1.5px dashed rgba(19,19,22,.2)}
.article-head h1{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:700;line-height:1.3;margin:10px 0 8px}
.article-meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--cobalt-400);
}
.article-body{font-size:15.5px;line-height:1.85;color:rgba(19,19,22,.88)}
.article-body h2{font-size:21px;font-weight:700;margin:38px 0 12px;padding-left:12px;border-left:4px solid var(--cobalt-600);border-radius:2px}
.article-body h3{font-size:17px;font-weight:650;margin:28px 0 10px}
.article-body p{margin:14px 0}
.article-body a{color:var(--cobalt-600);border-bottom:1.5px solid var(--cobalt-300);transition:border-color .2s}
.article-body a:hover{border-color:var(--cobalt-600)}
.article-body img{max-width:100%;border-radius:10px;margin:16px 0;border:1.5px solid rgba(19,19,22,.15)}
.article-body pre{
  background:#14161c;color:#e6e9f2;
  border-radius:var(--radius-hand-btn);
  padding:18px 20px;margin:18px 0;
  overflow-x:auto;
  font-family:var(--font-mono);font-size:13px;line-height:1.7;
}
.article-body code{font-family:var(--font-mono);font-size:.88em}
.article-body p code,.article-body li code{
  background:var(--cobalt-100);color:var(--cobalt-600);
  padding:2px 7px;border-radius:6px;
}
.article-body blockquote{
  margin:18px 0;padding:12px 18px;
  border-left:4px solid var(--cobalt-300);
  background:rgba(255,255,255,.5);
  border-radius:0 var(--radius-hand-btn) var(--radius-hand-btn) 0;
  color:rgba(19,19,22,.6);
}
.article-body ul,.article-body ol{margin:14px 0;padding-left:26px}
.article-body li{margin:6px 0}
.article-body hr{border:none;border-top:1.5px dashed rgba(19,19,22,.2);margin:30px 0}
.article-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.article-body th,.article-body td{border:1px solid var(--cobalt-200);padding:8px 12px;text-align:left}
.article-body th{background:var(--cobalt-100);font-weight:600}
/* 单元格不透明底：文章卡是半透磨砂，透明单元格会被背景图穿透影响阅读 */
.article-body td{background:rgba(255,255,255,.88)}

/* ============ 图集页 ============ */
.gallery-wrap{max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h) + 48px) 24px 40px}
.gallery-panel{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  border:2px solid var(--line-hand);
  border-radius:26px 20px 24px 18px/20px 26px 18px 24px;
  box-shadow:0 18px 60px rgba(19,19,22,.10);
  padding:36px 40px;
}
.gallery-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.gallery-head h1{font-size:24px;font-weight:700}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.album-card{
  position:relative;border-radius:var(--radius-hand-btn);overflow:hidden;cursor:pointer;
  border:1.8px solid var(--line-hand);
  background:rgba(255,255,255,.55);
  transition:transform .2s var(--ease-back),box-shadow .25s var(--ease-quart);
}
.album-card:hover{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 10px 30px rgba(19,19,22,.15)}
.album-card img{width:100%;height:180px;object-fit:cover;display:block}
.album-card .album-info{padding:14px 16px}
.album-card .album-name{font-size:16px;font-weight:650}
.album-card .album-desc{font-size:12px;color:rgba(19,19,22,.5);margin-top:2px}
.album-card .album-count{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--cobalt-400);margin-top:6px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.photo-grid img{
  width:100%;height:200px;object-fit:cover;display:block;cursor:zoom-in;
  border-radius:8px;border:1.5px solid rgba(19,19,22,.2);
  transition:transform .2s var(--ease-back);
}
.photo-grid img:hover{transform:scale(1.02) rotate(-.4deg)}
.gallery-empty{
  padding:60px 24px;text-align:center;
  color:rgba(19,19,22,.45);font-size:14px;
  border:1.5px dashed rgba(19,19,22,.25);border-radius:var(--radius-hand-btn);
}
/* 灯箱 */
.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(19,19,22,.88);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease-quart);
}
.lightbox.show{opacity:1;pointer-events:auto}
.lightbox img{max-width:92vw;max-height:80vh;border-radius:8px;box-shadow:0 20px 80px rgba(0,0,0,.5)}
.lightbox .lb-caption{color:rgba(255,255,255,.8);font-size:13px;font-family:var(--font-mono);letter-spacing:.08em}
/* 灯箱里的「查看原图」：默认展示 1920px 中图（快），要看 3~6MB 原图时才点这里 */
.lightbox .lb-orig{
  position:absolute;bottom:48px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  color:rgba(255,255,255,.82);text-decoration:none;
  border:1px solid rgba(255,255,255,.35);border-radius:14px 4px 14px 4px;
  padding:6px 14px;background:rgba(0,0,0,.25);transition:background .2s,border-color .2s,color .2s;
}
.lightbox .lb-orig:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.7);color:#fff}
.lightbox .lb-orig[hidden]{display:none}
.lightbox .lb-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);color:#fff;
  background:rgba(255,255,255,.08);cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lightbox .lb-btn:hover{background:rgba(255,255,255,.2)}
.lightbox .lb-prev{left:20px}
.lightbox .lb-next{right:20px}
.lightbox .lb-close{position:absolute;top:18px;right:22px;transform:none}

@media (max-width:640px){
  .article-card{padding:30px 22px 28px}
  .gallery-panel{padding:26px 20px 24px}
  .photo-grid img{height:150px}
}

/* ============ 投稿页 / 审核页（write.html / review.html） ============ */
/* 表单控件：手绘描边，与 login 卡同一语言 */
.field{margin-bottom:16px}
.field label{
  display:block;margin-bottom:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;color:var(--cobalt-600);
}
.field input,.field select,.field textarea{
  width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.85);
  border:1.8px solid var(--line-hand);
  border-radius:14px 4px 14px 4px/4px 14px 4px 14px;
  padding:10px 14px;font-size:14.5px;color:rgba(19,19,22,.88);
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.field textarea{font-family:var(--font-mono);font-size:13.5px;line-height:1.7;min-height:260px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--cobalt-600);
  box-shadow:0 0 0 3px rgba(38,83,214,.12);
}
.field-row{display:grid;grid-template-columns:1fr 1fr 140px;gap:14px}

/* 手绘按钮（login 页词汇：不规则圆角 + 悬浮翘起旋转） */
.btn-hand{
  display:inline-block;cursor:pointer;
  font-size:14px;font-weight:600;letter-spacing:.06em;
  padding:9px 22px;
  background:rgba(255,255,255,.9);color:rgba(19,19,22,.85);
  border:2px solid var(--line-hand);
  border-radius:var(--radius-hand-btn);
  transition:transform .2s var(--ease-back),box-shadow .25s var(--ease-quart),background .2s;
}
.btn-hand:hover{transform:translateY(-2px) rotate(-2deg);box-shadow:0 8px 22px rgba(19,19,22,.14)}
.btn-hand:active{transform:scale(.94)}
.btn-hand:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-hand.btn-primary{background:var(--cobalt-600);border-color:var(--cobalt-600);color:#fff}
.btn-hand.btn-danger{color:#b03030;border-color:#b03030}

/* 投稿页布局：编辑 | 预览 双栏 */
.write-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.preview-box{
  background:rgba(255,255,255,.6);
  border:1.5px dashed rgba(19,19,22,.25);
  border-radius:var(--radius-hand-btn);
  padding:18px 20px;min-height:260px;
  font-size:14.5px;line-height:1.8;color:rgba(19,19,22,.85);
  word-break:break-word;
}
.preview-box img{max-width:100%;border-radius:8px}
.preview-box pre{background:#16161a;color:#e8e8ec;padding:14px 16px;border-radius:10px;overflow-x:auto;font-size:12.5px}
.preview-box code{font-family:var(--font-mono);font-size:.92em;background:var(--cobalt-100);border-radius:4px;padding:1px 5px}
.preview-box pre code{background:none;padding:0}
.preview-box h2,.preview-box h3,.preview-box h4{margin:14px 0 8px}
.preview-box .md-table-wrap{overflow-x:auto;margin:12px 0}
.preview-box table{border-collapse:collapse;width:100%;margin:0}
.preview-box th,.preview-box td{border:1px solid rgba(19,19,22,.2);padding:6px 10px;font-size:13px}
.preview-box blockquote{border-left:3px solid var(--cobalt-400);margin:10px 0;padding:4px 12px;color:rgba(19,19,22,.6)}

/* 图片附件条 */
.attach-row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
.attach-chip{
  display:flex;align-items:center;gap:8px;
  border:1.5px solid var(--line-hand);border-radius:var(--radius-hand-btn);
  background:rgba(255,255,255,.85);padding:5px 10px 5px 6px;
  font-family:var(--font-mono);font-size:11px;
}
.attach-chip img{width:34px;height:34px;object-fit:cover;border-radius:6px}
.attach-chip .rm{cursor:pointer;color:#b03030;font-weight:700;padding:0 2px}
.hint{font-size:12px;color:rgba(19,19,22,.45);line-height:1.7}
.status-msg{margin-top:14px;font-size:14px;font-weight:600}
.status-msg.ok{color:#2c7a3f}
.status-msg.err{color:#b03030}

/* 审核页 */
.token-gate{max-width:420px;margin:calc(var(--nav-h) + 80px) auto}
.pending-card{
  background:rgba(255,255,255,.92);
  border:2px solid var(--line-hand);
  border-radius:26px 20px 24px 18px/20px 26px 18px 24px;
  box-shadow:0 18px 60px rgba(19,19,22,.10);
  padding:28px 32px;margin-bottom:22px;
}
.pending-card .p-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pending-card .p-head h2{font-size:19px}
.pending-card .p-meta{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  color:var(--cobalt-400);margin-bottom:14px;
}
.pending-card .p-body{
  border-top:1.5px dashed rgba(19,19,22,.18);padding-top:14px;
  font-size:14.5px;line-height:1.8;word-break:break-word;
}
.pending-card .p-body img{max-width:100%;border-radius:8px}
.pending-card .p-body pre{background:#16161a;color:#e8e8ec;padding:14px 16px;border-radius:10px;overflow-x:auto;font-size:12.5px}
.pending-card .p-body code{font-family:var(--font-mono);font-size:.92em;background:var(--cobalt-100);border-radius:4px;padding:1px 5px}
.pending-card .p-body pre code{background:none;padding:0}
.pending-card .p-body table{border-collapse:collapse}
.pending-card .p-body th,.pending-card .p-body td{border:1px solid rgba(19,19,22,.2);padding:6px 10px;font-size:13px}
.pending-card .p-body blockquote{border-left:3px solid var(--cobalt-400);margin:10px 0;padding:4px 12px;color:rgba(19,19,22,.6)}
.pending-actions{display:flex;gap:12px;margin-top:18px}

@media (max-width:860px){
  .write-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}

/* ============ 精选照片（首页照片条 + photos.html 照片墙） ============ */
.sec-more{
  margin-left:auto;font-size:13px;font-weight:600;letter-spacing:.06em;
  color:rgba(19,19,22,.6);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:color .25s,background-size .3s var(--ease-quart),transform .2s var(--ease-back);
}
.sec-more:hover{color:var(--cobalt-600);background-size:100% 2px;transform:translateY(-2px) rotate(-2deg)}

/* 首页照片条：3 列手绘描边格子 */
.photos-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photo-cell{
  display:block;overflow:hidden;
  border:1.8px solid var(--line-hand);
  border-radius:var(--radius-hand-btn);
  background:rgba(255,255,255,.55);
  transition:transform .2s var(--ease-back),box-shadow .25s var(--ease-quart);
}
.photo-cell:nth-child(even){border-radius:var(--radius-hand-a)}
.photo-cell:hover{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 10px 30px rgba(19,19,22,.15)}
.photo-cell img{width:100%;height:180px;object-fit:cover;display:block}

/* 照片墙：瀑布流（CSS columns），悬浮出说明 */
.wall{columns:3 260px;column-gap:14px}
.wall-cell{
  position:relative;break-inside:avoid;margin:0 0 14px;
  overflow:hidden;cursor:zoom-in;
  border:1.8px solid var(--line-hand);
  border-radius:var(--radius-hand-btn);
  background:rgba(255,255,255,.55);
  transition:transform .2s var(--ease-back),box-shadow .25s var(--ease-quart);
}
.wall-cell:nth-child(even){border-radius:var(--radius-hand-a)}
.wall-cell:hover{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 10px 30px rgba(19,19,22,.15)}
.wall-cell img{width:100%;display:block}
.wall-cell figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px 12px 10px;
  font-size:12.5px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(19,19,22,.72));
  opacity:0;transition:opacity .25s var(--ease-quart);
}
.wall-cell:hover figcaption{opacity:1}

@media (max-width:640px){
  .photos-strip{grid-template-columns:repeat(2,1fr)}
  .photo-cell img{height:130px}
  .wall{columns:2 150px}
}

/* ============ 图片上传页（upload.html，站长专用无入口） ============ */
.up-drop{
  border:2px dashed rgba(19,19,22,.35);
  border-radius:var(--radius-hand-btn);
  background:rgba(255,255,255,.55);
  padding:44px 20px;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s var(--ease-back);
}
.up-drop:hover{border-color:var(--cobalt-600);background:rgba(255,255,255,.8)}
.up-drop.over{border-color:var(--cobalt-600);background:var(--cobalt-100);transform:scale(1.01)}
.up-drop p{margin:2px 0;font-size:14.5px;color:rgba(19,19,22,.7)}

.up-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 14px;margin-top:8px;
  border:1.5px solid rgba(19,19,22,.2);border-radius:var(--radius-hand-btn);
  background:rgba(255,255,255,.7);font-size:13px;
}
.up-row .up-name{font-family:var(--font-mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-row .up-st{flex-shrink:0;color:rgba(19,19,22,.55)}
.up-row.ok{border-color:#2c7a3f}
.up-row.ok .up-st{color:#2c7a3f;font-weight:600}
.up-row.err{border-color:#b03030}
.up-row.err .up-st{color:#b03030;font-weight:600}

.up-result{
  display:flex;gap:14px;align-items:flex-start;
  margin-top:14px;padding:12px;
  border:1.8px solid var(--line-hand);border-radius:var(--radius-hand-btn);
  background:rgba(255,255,255,.85);
}
.up-result img{width:96px;height:96px;object-fit:cover;border-radius:8px;border:1.5px solid rgba(19,19,22,.2);flex-shrink:0}
.up-result-body{min-width:0}
.up-fn{font-family:var(--font-mono);font-size:11px;color:rgba(19,19,22,.55);word-break:break-all;margin-bottom:8px}
.up-copies{display:flex;flex-wrap:wrap;gap:8px}
.up-copies .btn-hand{padding:5px 12px;font-size:12px}

/* ============ write.html 移动端防溢出（2026-09-11 截图验收补丁） ============ */
.write-grid > *{min-width:0}                 /* 防 grid 子项被长代码行撑破 */
@media (max-width:640px){
  .up-row{flex-wrap:wrap;row-gap:6px}        /* 管理行允许换行 */
  .gallery-head{flex-wrap:wrap;row-gap:4px}  /* 标题区"写作后台"不再被挤换行 */
}

/* ============ 站长暗门模式（主页长按开场标题框 10s 触发，2026-09-11） ============ */
/* 无任何提示文字：游客看到只会以为闹鬼，不知道能点 */
.hero-frame,.intro-title{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.hero-img,.hero-text,.hero-copyright{pointer-events:none}  /* 手势统一落在长按目标上 */
.intro-title{cursor:default}

body.admin-mode{touch-action:manipulation}                 /* 模式内禁用双击缩放 */
body.admin-mode .bg-layer{filter:sepia(.95) contrast(1.2) brightness(.3) saturate(.45)}   /* 死黑 + 重复古 */
body.admin-mode .bg-veil{background:rgba(110,0,0,.78);animation:adminFlicker 3.1s steps(1) infinite} /* 血红色罩 + 接触不良式闪烁 */
body.admin-mode .wrap,body.admin-mode .nav{filter:sepia(.6) brightness(.48) saturate(.65) contrast(1.12)} /* 总体画面压暗 + 复古 */
body.admin-mode .hero-frame,body.admin-mode .intro-title{cursor:pointer}
body.admin-mode .hero-title{color:#e8b4b4;text-shadow:0 0 14px rgba(190,0,0,.95),0 2px 6px rgba(0,0,0,.8)} /* 标题血色光晕 */
body.admin-mode .hero-caption,body.admin-mode .hero-copyright{color:rgba(230,180,180,.6)}
body.admin-mode .intro-title{                                   /* 暗门模式下开场标题框也转血色 */
  color:#e8b4b4;border-color:rgba(190,0,0,.65);
  text-shadow:0 0 16px rgba(190,0,0,.95),0 2px 6px rgba(0,0,0,.8);
  box-shadow:0 0 40px rgba(150,0,0,.45);
}

/* 四周暗角压黑，视线收向中央 */
body.admin-mode::after{
  content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, transparent 34%, rgba(0,0,0,.82) 100%);
}

/* 闪烁：大部分时候正常，偶发骤降，像电压不稳 */
@keyframes adminFlicker{
  0%,88%,94%,100%{opacity:1}
  90%{opacity:.5}
  92%{opacity:.85}
  96.5%{opacity:.62}
}

/* ============================================================
   手绘统一语言（全站共用）
   ------------------------------------------------------------
   原本 login.html 与 verify.html 各自内联了一整套样式，
   其中 59 条选择器完全重复 —— 现统一上提到这里，
   两页只保留自己特有的规则。任何页面都能直接复用这些类。
   ============================================================ */

/* ---- 全屏手绘外框：页面里放 <div class="page-frame"></div> 即可 ---- */
.page-frame{
  position:fixed;inset:14px;z-index:0;pointer-events:none;
  border:2px solid rgba(19,19,22,.35);
  border-radius:255px 18px 225px 18px/18px 225px 18px 255px;
}
.page-frame::after{
  content:"";position:absolute;inset:5px;
  border:1.5px solid rgba(19,19,22,.15);
  border-radius:18px 225px 18px 255px/225px 18px 255px 18px;
}

/* ---- 双层卡：粉色衬底向右下错位，像草图里垫在下面那张 ---- */
.card-stack{position:relative;z-index:1;width:100%;max-width:400px}
.card-stack::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(255,201,214,.55);
  border:2px solid rgba(255,150,175,.85);
  border-radius:20px 26px 18px 24px/26px 20px 24px 18px;
  transform:translate(12px,12px) rotate(1.2deg);
}

/* ---- 手写体标题：替代缺失的 assets/login.png、assets/verify.png ---- */
.sketch-title{
  display:block;width:100%;text-align:center;
  font-family:var(--font-hand);font-weight:700;
  font-size:46px;line-height:1.15;letter-spacing:.02em;
  color:var(--deco-blue);
  text-decoration:underline wavy var(--cobalt-400);
  text-decoration-thickness:3px;text-underline-offset:9px;
  text-shadow:0 6px 14px rgba(59,91,219,.25);
  opacity:0;transform:translateY(14px) rotate(-6deg) scale(.7);
  animation:chPop .6s var(--ease-back) .2s forwards;
}

/* ---- 散落的装饰大字母（草图里随手画的 O G I L） ---- */
.deco{
  position:absolute;z-index:2;pointer-events:none;
  font-family:var(--font-hand);font-weight:700;line-height:1;
  opacity:0;transform:scale(.4) rotate(0deg);
  animation:chPop .7s var(--ease-back) forwards;
}
.deco.l-a{left:-56px;top:200px;font-size:104px;color:var(--deco-light);--r:-9deg;animation-delay:.55s}
.deco.l-b{left:14px;top:78px;font-size:40px;color:var(--deco-blue);--r:11deg;animation-delay:.65s}
.deco.l-c{right:14px;top:74px;font-size:36px;color:var(--deco-blue);--r:-12deg;animation-delay:.75s}
.deco.l-d{right:4px;top:170px;font-size:42px;color:var(--deco-blue);--r:7deg;animation-delay:.85s}

/* ---- 入场动画：标题与装饰字母共用 ---- */
@keyframes chPop{to{opacity:1;transform:translateY(0) rotate(var(--r,0deg)) scale(1)}}

/* ---- 底排：手写体大字母 + 中间的小字按钮 ---- */
.bottom-row{position:relative;z-index:1;display:flex;align-items:center;gap:6px;margin-top:26px}
.big-letter{
  display:inline-block;flex:none;
  font-family:var(--font-hand);font-weight:700;line-height:1;
  opacity:0;transform:scale(.4);
  animation:chPop .7s var(--ease-back) forwards;
}
.big-letter.n {width:62px;font-size:58px;color:var(--deco-green);--r:-8deg;animation-delay:.95s}
.big-letter.go{width:108px;font-size:50px;color:var(--deco-red);--r:4deg;animation-delay:1.05s;margin-top:6px}
.big-letter.at{width:40px;font-size:46px;color:var(--deco-green);--r:-8deg;animation-delay:.95s}
.big-letter.ok{width:44px;font-size:44px;color:var(--deco-green);--r:6deg;animation-delay:1.05s;margin-top:4px}

/* ---- 小字按钮：手写风下划线生长 + 悬停微旋转 ---- */
.mini-actions{flex:1;display:flex;align-items:center;justify-content:center;gap:16px}
.mini-btn{
  background:none;border:none;cursor:pointer;
  padding:4px 2px;
  font-size:14px;font-weight:600;letter-spacing:.08em;
  color:rgba(19,19,22,.75);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:color .25s,background-size .3s var(--ease-quart),transform .2s var(--ease-back);
}
.mini-btn:hover{color:var(--deco-blue);background-size:100% 2px;transform:translateY(-2px) rotate(-2deg)}
.mini-btn:active{transform:scale(.94)}
.mini-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.mini-btn.primary{color:var(--deco-blue)}
.mini-actions .dot{color:rgba(19,19,22,.3);flex:none}

/* ---- 返回主页胶囊 ---- */
.back-home{
  position:fixed;top:22px;left:26px;z-index:2;
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:rgba(19,19,22,.6);
  padding:8px 16px;border-radius:var(--radius-hand-a);
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1.5px solid rgba(19,19,22,.25);
  transition:color .25s,border-color .25s,transform .25s var(--ease-back);
}
.back-home:hover{color:var(--cobalt-600);border-color:var(--cobalt-600);transform:translateX(-3px)}
.back-home svg{width:15px;height:15px}

/* ---- 页脚小字（固定版） ---- */
.foot{
  position:fixed;bottom:18px;left:0;right:0;z-index:2;
  text-align:center;pointer-events:none;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  color:rgba(19,19,22,.5);
}

/* ============================================================
   认证页（login.html / verify.html）
   body 加 class="auth-page"。
   下面用到 .card / .field 的地方一律用 .auth-page 作用域，
   否则会撞上全站的文章卡 .card 与表单 .field。
   ============================================================ */
body.auth-page{
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
/* 按钮默认不继承字体（原 login 内联样式里有这条，全站补上更一致） */
button{font-family:inherit}
.auth-page .card-stack{max-width:400px}

/* 登录/验证卡：深色描边白卡 + 粉色衬底（还原草图双层） */
.auth-page .card{
  position:relative;z-index:1;
  padding:112px 36px 30px;      /* 顶部留足：手写标题骑在卡片顶边上 */
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  border:2px solid rgba(19,19,22,.85);
  border-radius:26px 20px 24px 18px/20px 26px 18px 24px;
  box-shadow:0 18px 60px rgba(19,19,22,.14);
  overflow:visible;             /* 覆盖全站 .card 的 overflow:hidden，标题要骑出顶边 */
  transform:rotate(-.5deg);
  transition:none;              /* 覆盖全站 .card 的悬停过渡 */
  animation:cardIn .9s var(--ease-quart) both;
}
.auth-page .card:hover{transform:rotate(-.5deg);background:rgba(255,255,255,.95);box-shadow:0 18px 60px rgba(19,19,22,.14)}
@keyframes cardIn{
  from{opacity:0;transform:translateY(34px) rotate(-.5deg) scale(.97)}
  to  {opacity:1;transform:translateY(0)     rotate(-.5deg) scale(1)}
}
/* 校验失败时由 JS 加 .shake */
.auth-page .card.shake{animation:shake .45s var(--ease-quart)}
@keyframes shake{
  0%,100%{transform:translateX(0) rotate(-.5deg)}
  20%{transform:translateX(-9px) rotate(-1.2deg)}
  45%{transform:translateX(7px)  rotate(-.1deg)}
  70%{transform:translateX(-4px) rotate(-.8deg)}
}

/* 标题骑跨在卡片顶边中央 */
.auth-page .head{
  position:absolute;top:0;left:50%;z-index:3;
  width:300px;transform:translate(-50%,-50%);
}

/* 表单：标签压在输入框边框左上角（草图画法），与全站 .field 不同 */
.auth-page form{position:relative;z-index:1}
.auth-page .field{position:relative;margin-bottom:20px}
.auth-page .field label{
  position:absolute;top:-9px;left:14px;z-index:2;
  display:block;margin:0;padding:0 6px;
  font-family:var(--font-display);
  font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;
  color:rgba(19,19,22,.65);
  background:var(--paper);      /* 盖住边框，像写在框上 */
  border-radius:4px;
}
.auth-page .field input,
.auth-page .field select,
.auth-page .field textarea{
  width:100%;box-sizing:border-box;
  padding:13px 16px;
  font-family:inherit;font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.9);
  border:1.8px solid rgba(19,19,22,.7);
  border-radius:var(--radius-hand-btn);
  outline:none;
  transition:border-color .25s var(--ease-quart),box-shadow .25s var(--ease-quart);
}
.auth-page .field input::placeholder{color:rgba(19,19,22,.3)}
.auth-page .field input:focus{
  border-color:var(--cobalt-600);
  box-shadow:0 0 0 4px rgba(38,83,214,.10);
}
.auth-page .field.error input{border-color:var(--deco-red);box-shadow:0 0 0 4px rgba(226,84,74,.10)}
.auth-page .field .err-msg{display:none;margin:5px 0 0 6px;font-size:12px;color:var(--deco-red)}
.auth-page .field.error .err-msg{display:block}

/* 状态提示 */
.auth-page .status{
  min-height:20px;margin-top:14px;text-align:center;
  font-size:13px;opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--ease-quart),transform .3s var(--ease-quart);
}
.auth-page .status.show{opacity:1;transform:none}
.auth-page .status.ok {color:#1e9e5a}
.auth-page .status.err{color:var(--deco-red)}

/* 认证页移动端微调 */
@media (max-width:480px){
  .card-stack{max-width:none}
  .auth-page .card{padding:96px 24px 24px}
  .auth-page .head{width:220px}
  .sketch-title{font-size:34px;text-underline-offset:7px}
  .deco.l-a{font-size:84px;top:150px;left:-6px}
  .deco.l-b{left:4px;top:72px;font-size:34px}
  .deco.l-c{right:8px;top:70px}
  .deco.l-d{top:164px;font-size:36px}
  .big-letter.n {width:52px;font-size:46px}
  .big-letter.go{width:92px;font-size:42px}
  .page-frame{inset:8px}
  .back-home{top:14px;left:14px}
  .foot{display:none}
}

/* ============================================================
   开场报头（无框）+ 去掉白色罩（2026-09-16）
   ------------------------------------------------------------
   只做两件事，其余一律不动：
     1) 去掉蒙在壁纸上的白色罩（不要底雾 / 不要白色背景）
     2) 主页开场改成"海报报头"：左对齐、巨型站名 + 波浪签名
        —— 报头**不要任何框和线**；其余元素继续用手绘描边 + 毛玻璃模糊
   （所以本区块不覆盖 .card / .tool / .stat-tile / .stack-item 等，
     它们保持文件上半部分那套手绘卡片样式）
   ============================================================ */

/* 1) 去掉白色罩 */
.bg-veil{display:none}

/* 2) 海报报头：无框、无线、左对齐（覆盖上面那版居中海报的定位） */
.intro{
  position:relative;height:auto;min-height:100vh;overflow:hidden;   /* 撑满整屏：下一节绝不露头 */
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 30px) 0 56px;
}
.intro-inner{
  width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;
  text-align:left;
  will-change:transform,opacity;
}
.intro-kicker{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cobalt-600);
}
.intro-title{
  position:static;left:auto;top:auto;z-index:auto;transform:none;
  margin:16px 0 0;
  font-size:clamp(3.4rem,15vw,11rem);font-weight:700;line-height:.96;letter-spacing:-.015em;
  color:var(--cobalt-600);text-align:left;
  text-shadow:0 2px 20px rgba(255,255,255,.85), 0 1px 3px rgba(255,255,255,.9);
}
.intro-title span{
  text-decoration:underline wavy var(--cobalt-300);
  text-decoration-thickness:6px;text-underline-offset:18px;
}
.intro-sub{
  margin:22px 0 0;max-width:46ch;
  font-size:clamp(14px,1.5vw,17px);line-height:1.85;letter-spacing:.04em;
  color:rgba(19,19,22,.86);
  text-shadow:0 1px 10px rgba(255,255,255,.8);
}
.intro-hint{
  margin-top:30px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;color:var(--cobalt-600);
  text-shadow:0 1px 10px rgba(255,255,255,.8);
}
.intro-hint::after{content:" ↓";display:inline-block;animation:introBob 1.8s var(--ease-inout) infinite}

/* 3) 不在卡片里的文字加"光晕"兜底 —— 报头和正文现在压在照片上，
      小字必须有 halo 才读得清（这是字自己的描边，不是整页白罩） */
.intro-kicker,.intro-sub,.intro-hint,.sec-head h2,.profile-name,.profile-bio,footer{
  text-shadow:0 0 4px rgba(255,255,255,.95), 0 0 16px rgba(255,255,255,.85), 0 1px 2px rgba(255,255,255,.95);
}
.intro-title{
  text-shadow:0 0 6px rgba(255,255,255,.95), 0 0 30px rgba(255,255,255,.9), 0 2px 4px rgba(255,255,255,.95);
}

/* 4) 小元件也补上毛玻璃，和卡片保持一致（半径小一点，省性能） */
.stack-item,.skill-chip,.stat-tile,.now-note,.album-card,.mini-photo,
.photo-cell,.wall-cell,.attach-chip,.up-row,.badge{
  backdrop-filter:blur(6px) saturate(1.1);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
}

@media (max-width:640px){
  .intro{padding:calc(var(--nav-h) + 14px) 0 36px}
  .intro-title{font-size:clamp(3rem,19vw,5.4rem)}
  .intro-sub{max-width:none}
}

/* ============================================================
   主页「远景 / 中景 / 近景 / 人物」四层视差舞台（仅主页；子页仍用壁纸逻辑）
   ------------------------------------------------------------
   四层都是 fixed 铺满视口的盒子，各层用 background-size:cover + 位置百分数
   把图片里的"同一块地面"对到同一条落地线上，这样换图/关层时地面不会跳。
   JS 只负责写 transform（位移 + 呼吸），其余全在这里。
   ============================================================ */
.stage{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.stage-layer{
  position:absolute;inset:-6%;
  background-repeat:no-repeat;background-position:center;
  background-size:cover;
  transform-origin:50% 50%;
  will-change:transform;
}
/* 落地线：图片里的"地面"压到视口 96% 处 */
.stage-layer[data-layer="far"],
.stage-layer[data-layer="mid"]{
  inset:-8%;
  background-position:50% 46.5%;
  --stage-x:0px;
  --stage-y:0px;
}
/* 竖屏（手机/平板）：16:9 的远景若按 cover 铺，中景那栋房子会被放大成一堵墙。
   所以远景仍然 cover（天与海铺满），中景改成"按视口宽度固定放大 4.7 倍、底中对齐"
   —— 书店稳稳落在右下角，人物站在它前面；远景横竖屏都好看。
   竖屏的两层都不由 JS 算尺寸（透明图/固定放大），所以覆盖限位交给 CSS 这边。 */
body.is-portrait .stage-layer[data-layer="far"]{background-position:54% 54%}
body.is-portrait .stage-layer[data-layer="mid"]{
  background-size:470% auto !important;
  background-position:50% 100% !important;
}

/* 中景那栋房子偏右：横屏时往左挪一点，别被屏幕右边缘吃掉
   （--stage-x 由 JS 读出来算进"覆盖限位"的可视窗口里，不再用 transform） */
.stage-layer[data-layer="mid"]{
  --stage-x:clamp(-26vw, calc((1 - 100vw / 1920) * 30vw), 0vw);
}

/* 人物：已经裁掉透明边的 <img>，位置与大小都由 JS 算（贴右下角，整块在屏内）。
   这里只负责层级、投影和"别被选中/拖动"。 */
.stage-chara{
  position:absolute;
  right:3vw;bottom:8vh;left:auto;
  width:auto;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 18px 38px rgba(19,19,22,.32));
  user-select:none;-webkit-user-drag:none;
  transform-origin:50% 100%;
  will-change:transform;
}
/* 近景不带投影（它是贴在最前面的花丛/树叶，有影子反而脏） */
.stage-layer[data-layer="near"]{filter:none}

/* ---- 场景自定义：左下角一个「场景」按钮 + 缩略图面板 ---- */
.stage-ui{
  position:fixed;left:18px;bottom:16px;z-index:120;
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  opacity:.42;
  transition:opacity .25s var(--ease-quart);
}
.stage-ui:hover,.stage-ui:focus-within,.stage-ui.open{opacity:1}
.stage-ui-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.stage-ui button{
  cursor:pointer;padding:6px 11px;
  color:var(--cobalt-600);
  background:rgba(255,255,255,.72);
  border:1.5px solid var(--line-hand);
  border-radius:var(--radius-hand-a);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .2s var(--ease-back),background .25s,opacity .2s;
}
.stage-ui button:hover{transform:translateY(-2px) rotate(-1.5deg);background:#fff}
.stage-ui button em{font-style:normal;color:rgba(19,19,22,.62)}
.stage-ui button.cur{border-color:var(--cobalt-600);background:#fff}
.stage-ui-label{color:rgba(19,19,22,.5);font-size:9.5px;letter-spacing:.18em}

/* 面板：默认收起（hidden），点「场景」展开 */
.scene-panel{
  display:flex;flex-direction:column;gap:9px;
  max-height:min(62vh,540px);overflow-y:auto;
  padding:11px 12px;
  background:rgba(255,255,255,.86);
  border:1.5px solid var(--line-hand);
  border-radius:var(--radius-hand-a);
  box-shadow:0 16px 44px rgba(19,19,22,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.scene-panel[hidden],.stage-ui[hidden]{display:none}
.scene-row.off{opacity:.55}
.scene-head{display:flex;align-items:baseline;gap:6px;margin-bottom:5px}
.scene-head b{font-weight:600;color:var(--cobalt-600);letter-spacing:.2em}
.scene-now{color:rgba(19,19,22,.55);font-size:9.5px;letter-spacing:.06em}
.scene-thumbs{display:flex;gap:6px;flex-wrap:wrap}
.thumb{
  position:relative;width:66px;height:37px;padding:0;
  background-size:cover;background-position:center;
  border:1.5px solid rgba(19,19,22,.22);border-radius:6px;
  transition:transform .18s var(--ease-back),border-color .2s,box-shadow .2s;
}
.thumb:hover{transform:translateY(-2px) scale(1.04);border-color:var(--cobalt-600)}
.thumb.cur{border-color:var(--cobalt-600);box-shadow:0 0 0 2px rgba(38,83,214,.35)}
.thumb.cur::after{
  content:"✓";position:absolute;right:2px;bottom:0;font-size:11px;color:var(--cobalt-600);
  text-shadow:0 0 3px #fff,0 0 6px #fff;
}
/* 「关掉这一层」：斜杠格 + 叉 */
.thumb-off{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,rgba(19,19,22,.06) 0 4px,transparent 4px 8px),
             rgba(255,255,255,.6);
}
.thumb-off::before{content:"✕";font-size:13px;color:rgba(19,19,22,.55)}
.thumb-off.off{border-color:var(--cobalt-600);box-shadow:0 0 0 2px rgba(38,83,214,.35)}

@media (max-width:760px){
  .stage-ui{left:10px;bottom:10px;gap:6px;font-size:9.5px}
  .stage-ui button{padding:5px 9px}
  .scene-panel{max-height:64vh;padding:9px}
  .thumb{width:56px;height:32px}
}
/* 竖屏的媒体查询（宽度判断在窄屏上会失效，所以按横竖屏来） */
body.is-portrait .stage-ui{left:10px;bottom:10px;gap:6px;font-size:9.5px}
/* 竖屏：人物压在 "Leyr" 后面时，字的光晕再加厚一点，保证标题读得清 */
body.is-portrait .intro-title{
  text-shadow:0 0 8px rgba(255,255,255,.98), 0 0 26px rgba(255,255,255,.95), 0 2px 4px rgba(255,255,255,.98);
}

@media (max-width:760px){
  .intro{padding:calc(var(--nav-h) + 14px) 0 36px}   /* 加高，避免首屏漏出下一节 */
  .intro-title{font-size:clamp(3rem,19vw,5.4rem)}
  .intro-sub{max-width:none}
}

/* 小屏导航：原来算下来 419px 装不下 390px；这里把间距收紧并允许横向滚动兜底 */
@media (max-width:640px){
  .nav-inner,.topbar-inner{gap:10px;padding:0 14px}
  .nav-links{gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-left:auto}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{margin:0 5px;font-size:12.5px;white-space:nowrap}
  .topbar-back{font-size:13px}
}

/* 小屏报头：波浪签名线会压到标语，这里把间距拉开、线收细 */
@media (max-width:760px){
  .intro-title span{text-decoration-thickness:4px;text-underline-offset:10px}
  .intro-sub{margin-top:34px}
}