/* ============================================================
   SIGGE 毛伊西格 · 全站样式
   首页 / 二级列表页 / 三级详情页 共用
   ============================================================ */

@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/JetBrainsMono/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/JetBrainsMono/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/JetBrainsMono/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
}

@font-face{
  font-family:"Fraunces";
  src:url("../fonts/Fraunces/Fraunces144pt-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/Fraunces/Fraunces144pt-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/Fraunces/Fraunces144pt-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/Fraunces/Fraunces144pt-Black.woff2") format("woff2");
  font-weight:900;font-style:normal;font-display:swap;
}

:root{
  --bg:#F6F7F9;
  --ink:#16150F;
  --ink-soft:#2A2723;
  --muted:#6B6862;
  --muted-2:#A8A197;
  --accent:#6E56F7;
  --line:#E3E0DA;
  --num:#D8D5CD;
  --card:#FFFFFF;
  /* —— 间距令牌（P2-J：统一区块节奏，消除 100/40/64/72 混用）—— */
  --space-section:88px;       /* 主区块上下内边距（桌面统一值） */
  --space-hero-top:72px;      /* Hero 顶部 */
  --space-hero-bottom:104px;  /* Hero 底部（略大于区块，作分隔） */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block;object-fit:cover}
a{color:inherit;text-decoration:none}

.wrap,.hero,.section,.section--feed,.footer,.page{
  width:100%;max-width:1440px;margin-left:auto;margin-right:auto;
  padding-left:120px;padding-right:120px;
}

.nav{
  position:sticky;top:0;z-index:100;
  height:76px;display:flex;align-items:center;justify-content:space-between;
  background:rgba(246,247,249,.7);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(22,21,15,.06);
}
.nav__logo{font-family:"Inter",sans-serif;font-weight:700;font-size:19px;letter-spacing:.01em;display:inline-flex;align-items:center}
.nav__logo-img{height:40px;width:auto;display:block}
.nav__menu{display:contents}
.nav__links{display:flex;gap:38px}
@media (min-width:1280px){
  .nav__links{
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    margin:0;
  }
}
.nav__links a{font-size:15px;color:var(--muted);transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__links a.is-on{color:var(--ink);font-weight:500}
.nav__item--has-menu{position:relative}
.nav__item--has-menu .nav__trigger{display:flex;align-items:center;gap:5px}
.nav__item--has-menu .caret{font-size:9px;line-height:1;opacity:.55;transition:transform .2s}
.nav__item--has-menu:hover .caret,.nav__item--has-menu:focus-within .caret{transform:rotate(180deg)}
.nav__submenu{position:absolute;top:calc(100% + 12px);left:0;min-width:170px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px rgba(22,21,15,.12);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.nav__item--has-menu:hover .nav__submenu,.nav__item--has-menu:focus-within .nav__submenu{opacity:1;visibility:visible;transform:translateY(0)}
.nav__submenu a{padding:10px 13px;border-radius:8px;color:var(--muted);font-size:15px;white-space:nowrap;transition:background .15s,color .15s}
.nav__submenu a:hover{background:var(--bg);color:var(--ink)}
.nav__submenu a.is-on{color:var(--ink);font-weight:500}
.nav__cta{
  background:var(--accent);color:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:15px;
  padding:0;border-radius:999px;
  width:35px;height:35px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;-webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,box-shadow .18s ease;
}
.nav__cta:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(110,86,247,.30)}
.nav__cta-ico{width:20px;height:20px;display:block}
.nav__cta.is-logged{background:#efedfb}
.nav__cta-avatar{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.nav__cta-initial{font-size:15px;font-weight:700;color:var(--accent);line-height:1}
.nav__toggle{
  display:none;position:relative;width:44px;height:44px;flex:none;
  background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.nav__toggle span{
  position:absolute;left:11px;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
.nav__toggle span:nth-child(1){top:16px}
.nav__toggle span:nth-child(2){top:21px}
.nav__toggle span:nth-child(3){top:26px}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0}
.nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.hero{display:flex;gap:69.5px;align-items:center;justify-content:flex-start;padding-top:var(--space-hero-top);padding-bottom:var(--space-hero-bottom);background:var(--bg)}
.hero__visual{
  position:relative;width:529px;height:620px;flex:none;margin-left:auto;
}
.hero__main{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:429px;height:620px;border-radius:24px;overflow:hidden;
  box-shadow:0 24px 52px rgba(22,21,15,.16);
}
.hero__main img{width:100%;height:100%;object-fit:cover}
.hero__float{
  position:absolute;left:280px;top:290px;width:249px;height:330px;
  border-radius:10px;overflow:hidden;
  box-shadow:0 16px 38px rgba(22,21,15,.24);
}
.hero__float img{width:100%;height:100%;object-fit:cover}
.hero__info{
  position:absolute;left:0;top:410px;width:343px;height:219px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(130%);
  border:1px solid rgba(255,255,255,.65);border-radius:18px;
  padding:20px 22px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 14px 34px rgba(22,21,15,.1);
}
.hero__info strong{display:block;font-size:26px;font-weight:700;color:var(--ink)}
.hero__tags{display:flex;flex-wrap:wrap;gap:8px}
.hero__tags span{
  background:#fff;border:1px solid rgba(22,21,15,.1);border-radius:999px;
  padding:6px 11px;font-size:12px;color:var(--accent);
  cursor:default;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.hero__tags span:hover{
  background:rgba(110,86,247,.12);   /* 同款主题紫底 */
  border-color:transparent;
  color:var(--accent);
}
.hero__content{width:560px;display:flex;flex-direction:column;gap:22px}
.hero__eyebrow{font-family:"Inter",sans-serif;font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--accent)}
.hero__title{font-family:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;font-size:76px;line-height:1.08;font-weight:700}
.hero__title em{font-style:normal;color:var(--accent)}
.hero__desc{font-size:17px;line-height:1.7;color:var(--muted);width:560px}
.hero__cta{display:flex;gap:16px}
.btn-primary{
  background:var(--ink);color:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:15px;
  padding:17px 30px;border-radius:999px;
}
.btn-ghost{
  border:1px solid rgba(22,21,15,.18);color:var(--ink);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;
  padding:17px 30px;border-radius:999px;
}

.marquee{height:56px;background:var(--accent);display:flex;align-items:center;overflow:hidden}
.marquee__track{display:flex;width:max-content;flex:none;animation:marquee 42s linear infinite;will-change:transform}
.marquee__track span{
  font-family:"Inter",sans-serif;font-weight:500;font-size:16px;color:#fff;
  white-space:nowrap;flex:none;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.section{padding-top:var(--space-section);padding-bottom:var(--space-section);background:var(--bg)}
.section--feed{padding-top:var(--space-section);padding-bottom:var(--space-section)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.section__title{font-family:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;font-size:60px;line-height:1;font-weight:700}
.section__sub{font-size:15px;color:var(--muted);margin-top:14px}
.section__right{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex:none}
.section__index{font-family:"Inter",sans-serif;font-weight:500;font-size:16px;color:var(--accent)}
.more-btn{
  display:inline-flex;align-items:center;gap:10px;background:#fff;
  border:1px solid rgba(22,21,15,.14);border-radius:999px;padding:11px 18px;
  font-size:15px;font-weight:500;transition:border-color .2s,transform .2s;
}
.more-btn:hover{border-color:rgba(22,21,15,.34);transform:translateY(-1px)}
.more-btn i{font-style:normal;color:var(--muted-2)}

.feed{margin-top:44px}
.post{display:flex;gap:48px;padding:44px 0}
.post__time{width:230px;flex:none}
.post__date{font-family:"Fraunces",serif;font-weight:700;font-size:75px;line-height:1;color:var(--ink-soft)}
.post__clock{font-size:13px;color:var(--muted-2);margin-top:6px}
.post__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.post__head{display:flex;align-items:center;gap:12px;cursor:pointer}
.post__avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none}
.post__avatar img{width:100%;height:100%}
.post__name{font-size:17px;font-weight:500;line-height:1.2}
.post__dev{font-size:13px;color:var(--muted-2);margin-top:4px}
.post__text{font-size:21px;line-height:1.75;width:640px;cursor:pointer}
.post__meta{display:flex;align-items:center;gap:18px}
.post__loc{font-size:13.5px;font-weight:500;color:var(--accent)}
.post__act{display:inline-flex;align-items:center;font-size:13.5px;color:var(--muted-2)}
.post__act .act-item{white-space:nowrap}
.post__act .act-item:not(:first-child){margin-left:10px}
.post__act .act-item:not(:first-child)::before{content:"·";margin-right:10px;color:var(--muted-2)}

.grid{display:flex;flex-wrap:wrap;gap:8px;width:640px;align-items:flex-start}
.grid img{border-radius:10px}
.g-1 img{max-width:640px;width:100%;height:auto;object-fit:contain}
.grid.g-1.is-portrait img{max-width:380px}
/* 多图统一按容器百分比分配宽度（原硬编码 316/208/424px 在窄屏放不下会逐个换行，崩成单列长条）
   并统一 1:1 方形 + cover 防拉伸；单图/竖图（g-1/g-p1）保留按方向的原生比例 */
/* 两张图保留图片原比例（竖图组显示竖图，不被裁成方形）；同方向两张天然等高，不存在大小不一。
   必须显式 aspect-ratio:auto，否则 1280 档 .grid img 的 1:1 会补上把竖图裁方 */
.g-2 img{width:calc((100% - 8px)/2);height:auto;aspect-ratio:auto}
/* 三图：flex 2:1「左大图（1:1）+ 右上下两小图（各 1:1）」。
   大图用 aspect-ratio 定高、不依赖父高，杜绝早先 grid span 2 循环依赖导致大图高度坍 0 的问题 */
.g-3{display:flex;gap:8px;flex-wrap:nowrap;width:100%;max-width:640px;align-items:stretch}
.g-3__big{flex:2 1 0;min-width:0}
.g-3__big img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:10px}
.g-3__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.g-3__col img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:10px}
.g-4 img{width:calc((100% - 8px)/2);height:auto;aspect-ratio:1/1;object-fit:cover}
.g-5 img{height:auto;aspect-ratio:1/1;object-fit:cover}
.g-5 img:nth-child(-n+2){width:calc((100% - 8px)/2)}   /* 上排 2 张各半宽 */
.g-5 img:nth-child(n+3){width:calc((100% - 16px)/3)}   /* 下排 3 张各三分之一 */
.g-6 img,.g-7 img,.g-8 img,.g-9 img{width:calc((100% - 16px)/3);height:auto;aspect-ratio:1/1;object-fit:cover}
.g-p1 img{max-width:480px;width:100%;height:auto;object-fit:contain}
.g-p2 img{width:calc((100% - 8px)/2);height:auto;aspect-ratio:1/1;object-fit:cover}

.post__video{
  position:relative;width:fit-content;max-width:100%;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,#33334a,#54546f);
  display:block;cursor:pointer;
}
.post__video:not(:has(img)):not(:has(video)){aspect-ratio:16/9;width:640px;max-width:100%}
/* feed 封面图 / 真实 video：按自然比例显示（竖视频保持竖），尺寸封顶避免过长；
   object-fit:contain 防止 <video> 默认 fill 把竖视频拉成横 */
.post__video img.post__video-cover,
.post__video video{
  width:auto;height:auto;max-width:100%;max-height:540px;margin:0 auto;display:block;background:#000;object-fit:contain;
}
.post__video video.is-vertical{max-width:320px}
.post__video--h{aspect-ratio:16/9}
.post__video--v{width:320px;aspect-ratio:9/16}
.post__video--640{width:fit-content;max-width:100%;overflow-x:auto}
/* 提权：必须压过正文页 .post__video video{width:100%}（line ~462）与自身 max-width:100%，
   让横视频在任何视口都恒为 640px；max-width:none 解除窄屏下的列宽压缩（手机上由卡片 overflow 滚动） */
.post__video.post__video--640 video{width:640px;max-width:none}
.post__video--640 video.is-vertical{max-width:320px;width:auto;max-height:540px}
.post__video .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.32);transition:transform .2s;
}
.post__video:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.post__video .play::after{
  content:"";width:0;height:0;margin-left:5px;
  border-style:solid;border-width:11px 0 11px 19px;
  border-color:transparent transparent transparent #16150f;
}
.post__video .badge{
  position:absolute;top:12px;left:12px;
  background:rgba(22,21,15,.5);color:#fff;font-size:12px;letter-spacing:.04em;
  padding:4px 11px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.post__video .dur{
  position:absolute;bottom:12px;right:12px;
  background:rgba(22,21,15,.6);color:#fff;font-size:12px;
  padding:3px 9px;border-radius:6px;font-variant-numeric:tabular-nums;
}

.articles{margin-top:44px}
.row{display:flex;align-items:center;gap:40px;padding:32px 0;border-bottom:1px solid var(--line)}
.row:first-child{border-top:1px solid var(--line)}
.row__thumb{display:block;width:320px;height:240px;border-radius:10px;overflow:hidden;flex:none}
.row__thumb img{width:100%;height:100%}
.row__body{display:flex;align-items:center;gap:32px;flex:1}
.row__num{font-family:"Fraunces",serif;font-weight:700;font-size:64px;line-height:1;color:var(--num);flex:none}
.row__col{display:flex;flex-direction:column;gap:10px;flex:1}
.row__tag{font-family:"Inter",sans-serif;font-weight:500;font-size:13px;color:var(--accent)}
.row__title{font-size:28px;font-weight:700;line-height:1.3;font-family:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif}
.row__title a:hover{color:var(--accent)}
.row__desc{font-size:15px;line-height:1.7;color:var(--muted)}
.row__meta{font-size:14px;color:var(--muted)}

.gear{margin-top:44px;display:flex;gap:30px}
.gear--grid{flex-wrap:wrap;gap:30px 30px}
.card{
  width:380px;flex:none;background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 18px 40px rgba(22,21,15,.08);
  display:flex;flex-direction:column;
}
.card__photo{aspect-ratio:1/1;overflow:hidden}
.card__photo img{width:100%;height:100%}
.card__body{padding:20px 22px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__title{
  font-size:20px;font-weight:700;line-height:1.3;min-height:2.6em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.card__desc{font-size:14px;line-height:1.5;color:var(--muted)}
.card__row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto}
.card__price{font-family:"JetBrains Mono","Inter",sans-serif;font-weight:700;font-size:32px;line-height:1;letter-spacing:-.02em;color:var(--accent)}
.card__price .cur,.gear-detail__price .cur,
.card__price .dec,.gear-detail__price .dec{font-size:.5em;font-weight:700;line-height:1;vertical-align:baseline}
.card__buy{
  background:var(--ink);color:#fff;font-family:"Inter",sans-serif;font-weight:500;font-size:15px;
  padding:12px 22px;border-radius:999px;flex:none;
}

.footer{padding-top:80px;padding-bottom:64px;background:var(--bg);display:flex;flex-direction:column;gap:32px}
.footer__line{height:1px;background:var(--line)}
.footer__logo{display:flex;align-items:center}
.footer__logo-img{height:64px;width:auto;display:block}
.footer__brand{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer__bottom{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1;min-width:200px}
.footer__copy{font-size:13px;line-height:1.8;color:var(--muted);min-width:200px}
.footer__beian{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:12px;color:var(--muted-2);line-height:1.8}
.footer__beian-link{color:var(--muted-2);text-decoration:none;transition:color .2s}
.footer__beian-link:hover{color:var(--accent)}
.footer__icons{display:flex;align-items:center;gap:10px;flex:none}
.reicon{width:17px;height:17px;color:inherit;display:block}
.footer__icon{
  position:relative;width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Inter","Noto Sans SC",sans-serif;font-size:11px;font-weight:600;color:var(--ink);
  text-decoration:none;background:#fff;border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(22,21,15,.06);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.footer__icon:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(22,21,15,.12);border-color:var(--accent)}
.footer__icon img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.footer__icon-pop{
  position:absolute;bottom:calc(100% + 10px);right:0;width:120px;padding:8px;
  background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(22,21,15,.18);display:none;z-index:5;
}
.footer__icon-pop img{width:100%;height:auto;display:block;border-radius:6px}
.footer__icon:hover .footer__icon-pop{display:block}

/* ============================================================
   二级页：列表页
   ============================================================ */
.page{padding-top:var(--space-section);padding-bottom:var(--space-section)}
.crumbs{font-size:13px;color:var(--muted-2);display:flex;align-items:center;gap:8px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.page-title{font-family:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;font-size:60px;line-height:1;font-weight:700;margin-top:24px}
.page-desc{font-size:17px;line-height:1.75;color:var(--muted);margin-top:18px;max-width:660px}
.tabs{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap}
.tab{
  font-size:15px;font-weight:500;color:var(--muted);background:#fff;
  border:1px solid rgba(22,21,15,.12);border-radius:999px;padding:9px 18px;
  transition:background .2s,color .2s,border-color .2s;
}
.tab:hover{border-color:rgba(22,21,15,.3);color:var(--ink)}
.tab.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.count{font-size:13px;color:var(--muted-2);margin-top:22px}

.load-more{display:flex;justify-content:center;margin-top:56px}
.load-more a{
  background:#fff;border:1px solid rgba(22,21,15,.16);border-radius:999px;
  padding:14px 32px;font-size:15px;font-weight:500;
}
.load-more a:hover{border-color:rgba(22,21,15,.4)}
.pager{display:flex;justify-content:center;gap:10px;margin-top:56px;align-items:center}
.pager a,.pager b{
  min-width:44px;height:44px;padding:0 12px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-family:"Inter",sans-serif;font-size:15px;background:#fff;
  border:1px solid rgba(22,21,15,.12);color:var(--muted);font-weight:400;
}
.pager a.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager i{font-style:normal;color:var(--muted-2)}

/* ============================================================
   三级页：详情
   ============================================================ */
.detail{padding-top:44px;padding-bottom:110px}
.detail__card{
  padding:35px 0 0;max-width:850px;
  margin-left:auto;margin-right:auto;
}
.detail__head{display:flex;align-items:center;gap:16px}
.detail__av{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none}
.detail__av img{width:100%;height:100%}
.detail__name{font-size:19px;font-weight:700}
.detail__dev{font-size:13.5px;color:var(--muted-2);margin-top:5px;letter-spacing:.02em}
.detail__text{font-size:26px;line-height:1.72;margin-top:34px;letter-spacing:.01em;max-width:920px}
/* 正文超链接：无下划线，鼠标滑过显示主题色（裸 URL 由 site.js 自动包成 <a>） */
.detail__text a,.prose a{color:inherit;text-decoration:none;word-break:break-all;cursor:pointer;transition:color .18s}
.detail__text a:hover,.prose a:hover{color:var(--accent)}
/* 正文内的图片/视频已由下方 .media 与 .detail__video 单独展示，此处仅取文字，避免重复 */
.detail__text img,.detail__text video{display:none}
.detail__text p + p{margin-top:12px}
.detail__text a + br,.detail__text br{display:none}
/* ============================================================
   正文音乐播放器（仅 QQ 音乐）
   在正文粘贴 QQ 音乐分享链接即可自动生成（site.js 转换并注入官方 outchain iframe）
   ============================================================ */
.music-player{margin:16px 0 8px;max-width:380px}
.music-player__embed iframe{display:block;width:100%;max-width:380px;height:66px;border:0;border-radius:10px;background:#f7f8fa}
.media{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:34px}
.media img{
  width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;
  border-radius:8px;margin-bottom:0;
  box-shadow:0 6px 22px rgba(22,21,15,.05);
}
.media:has(> img:nth-child(4)):not(:has(> img:nth-child(5))){grid-template-columns:repeat(2,1fr)}
.media--p1{grid-template-columns:1fr;justify-items:start}
.media--p1 img{max-width:min(70%,640px);width:auto;height:auto;aspect-ratio:auto;object-fit:contain}
.media--p2{grid-template-columns:repeat(2,1fr)}
.media--p2 img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.post__video img,.post__video video{width:100%;height:auto;display:block;flex:none;background:#000}
.post__video video{aspect-ratio:16/9}
.detail__video{width:100%;max-width:920px;max-height:82vh;border-radius:14px;display:block;margin-top:34px;background:#000;object-fit:contain}
.detail__video.is-vertical{max-width:420px}
.detail__foot{display:flex;align-items:center;justify-content:space-between;margin-top:45px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap;gap:14px}
.detail__loc{font-size:14.5px;font-weight:500;color:var(--accent)}
.detail__time{font-size:13.5px;color:var(--muted-2)}
.actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.actions span{
  display:inline-flex;align-items:center;gap:8px;padding:12px 22px;
  border:1px solid var(--line);border-radius:999px;font-size:14.5px;color:var(--muted);
  cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .2s;
}
.actions span:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.actions span.is-liked{border-color:var(--accent);color:var(--accent);background:rgba(110,86,247,.06)}

.comments{margin:40px auto 0;padding-top:30px;border-top:1px solid var(--line);max-width:850px}
.comments__title{font-size:17px;font-weight:700}

comment-widget{
  --halo-cw-primary-1-color:#6E56F7;   /* 主题紫：按钮 / 链接 / 激活态 */
  --halo-cw-primary-3-color:#ECE7FE;   /* 浅紫：hover / 选中背景 */
  display:block;
}

.post__act .act-cmt{color:inherit;text-decoration:none}
.comment{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.comment:last-of-type{border-bottom:0;padding-bottom:6px}
.comment__av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none}
.comment__av img{width:100%;height:100%}
.comment__who{font-size:15px;font-weight:500}
.comment__body{font-size:15.5px;line-height:1.7;margin-top:6px;color:#2C2A26}
.comment__time{font-size:12.5px;color:var(--muted-2);margin-top:8px}
.c-input{display:flex;gap:16px;align-items:center;margin-top:30px}
.c-input__av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none}
.c-input__av img{width:100%;height:100%}
.c-input__box{
  flex:1;display:flex;align-items:center;gap:10px;background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 22px;
  transition:border-color .2s;
}
.c-input__box:focus-within{border-color:var(--accent);background:#fff}
.c-input__box input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:14.5px;color:var(--ink);font-family:inherit}
.c-input__send{background:var(--ink);color:#fff;border-radius:999px;padding:11px 22px;font-size:13.5px;cursor:pointer;flex:none;transition:background .2s}
.c-input__send:hover{background:var(--accent)}

.prevnext{display:flex;gap:20px;margin:56px auto 0;max-width:850px}
.prevnext a{
  flex:1;background:#fff;border-radius:22px;padding:28px 32px;
  box-shadow:0 10px 30px rgba(22,21,15,.05);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;
}
.prevnext a:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(22,21,15,.1)}
.prevnext strong{display:block;color:var(--ink);font-weight:600;font-size:17px;margin-top:10px}
.prevnext a:hover strong{color:var(--accent)}
.prevnext .is-next{text-align:right;margin-left:auto}

.prose{max-width:850px;margin:0 auto;padding-top:55px}
.prose p{font-size:18px;line-height:1.95;color:#2C2A26;margin-bottom:22px}
.art-hero + .prose > p:first-of-type{
  font-size:20px;line-height:1.85;color:#2C2A26;
}
.prose h2{font-size:28px;font-weight:700;margin:42px 0 16px;line-height:1.35}
.prose h3{font-size:21px;font-weight:700;margin:30px 0 12px}
.prose blockquote{border-left:3px solid var(--accent);padding:2px 0 2px 20px;color:var(--muted);font-size:18px;line-height:1.85;margin:30px 0}
.prose figure{margin:34px 0}
.prose figure img{width:100%;border-radius:10px}
.prose figcaption{font-size:13.5px;color:var(--muted-2);margin-top:10px}
.prose ul{margin:0 0 24px 22px}
.prose li{font-size:18px;line-height:1.9;color:#2C2A26;margin-bottom:10px}
.prose strong{font-weight:700}

.art-hero{padding-top:56px;padding-bottom:48px}
.art-hero__tag{font-family:"Inter",sans-serif;font-weight:500;font-size:13px;color:var(--accent)}
.art-hero__title{font-family:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;font-size:44px;line-height:1.18;font-weight:700;margin-top:18px;max-width:920px}
.art-hero__meta{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:22px}
.art-cover{width:850px;max-width:100%;margin:38px auto 0;border-radius:10px;overflow:hidden;height:520px}
.art-cover img{width:100%;height:100%}
.tags{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap;max-width:850px;margin-left:auto;margin-right:auto}
.tag{font-size:14px;line-height:1.6;color:var(--accent);font-weight:500;cursor:pointer;text-decoration:none}
.tag::before{content:"#"}
.tag:hover{color:var(--accent-strong)}

.gear-detail{
  display:grid;
  grid-template-columns:520px 1fr;
  grid-template-areas:"head head" "media info";
  column-gap:56px;row-gap:28px;
  margin-top:44px;align-items:start;
}
.gear-detail__head{grid-area:head}
.gear-detail__media{grid-area:media;width:520px}
.gear-detail__main{border-radius:24px;overflow:hidden;aspect-ratio:1/1;background:#fff}
.gear-detail__main img{width:100%;height:100%;object-fit:cover}
.gear-detail__info{grid-area:info;min-width:0;max-width:560px}
.gear-detail__eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--accent)}
.gear-detail__title{font-size:44px;line-height:1.12;font-weight:700;margin-top:14px;font-family:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif}
.gear-detail__price{font-family:"JetBrains Mono",'Inter',ui-monospace,'SFMono-Regular',Menlo,monospace;font-size:32px;font-weight:700;color:var(--accent);letter-spacing:-.01em;margin-top:24px}
/* 价格前缀小标签（如「到手价：」）：小号、弱化色、正文字体，与等宽大号价格形成对比 */
.gear-detail__price .price-prefix{display:inline-block;font-family:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0;margin-right:6px;vertical-align:baseline}
/* 货币符号 ¥ 用页面统一黑体（Noto Sans SC），不用等宽体，与正文字体保持一致 */
.gear-detail__price .cur,.card__price .cur{font-family:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;font-weight:700}
.gear-detail__desc{font-size:17px;line-height:1.72;color:var(--muted)}
.rating{display:flex;align-items:baseline;gap:10px;margin-top:18px;font-size:14px;color:var(--muted)}
.rating b{font-family:"Inter",sans-serif;font-size:24px;color:var(--accent)}
.spec{margin-top:26px;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:88px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.spec dt{color:var(--muted-2)}
.spec dd{color:var(--ink);font-weight:500;text-align:left}
.spec:empty{display:none}
.buy-channels{
  margin-top:18px;padding:18px 22px;
  background:rgba(110,86,247,.06);border:1px solid rgba(110,86,247,.16);border-radius:10px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.buy-channels__info{display:flex;flex-direction:column;gap:5px}
.buy-channels__label{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--ink)}
.buy-channels__note{font-size:12px;color:var(--muted-2)}
.buy-channels__value{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:"Inter",sans-serif;font-size:17px;font-weight:600;color:var(--accent);text-decoration:none;
  transition:gap .2s,opacity .2s;
}
.buy-channels__value svg{width:16px;height:16px}
.buy-channels__value:hover{gap:12px;opacity:.82}

.related{margin:96px auto 0;padding-top:52px;border-top:1px solid var(--line);max-width:850px}
.related__title{font-size:28px;font-weight:700;margin-bottom:28px;font-family:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif}
.related .gear{gap:19px}
.related .card{flex:1 1 0;width:auto;min-width:0}
.related .card__body{padding:14px 15px 15px}
.related .card__title{font-size:15px;line-height:1.3;min-height:2.6em}
.related .card__desc{font-size:11px;line-height:1.45}
.related .card__price{font-size:21px}
.related .card__buy{font-size:12px;padding:9px 16px}

/* ============================================================
   通用卡片网格（分类卡 / 友链卡 / 专题分类卡共用，原 .books）
   ============================================================ */
.card-grid{margin-top:44px;display:flex;gap:30px 30px;flex-wrap:wrap}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1280px){
  .wrap,.hero,.section,.section--feed,.footer,.page{padding-left:60px;padding-right:60px}
  .post__body,.grid,.post__text{width:100%;max-width:640px}
  /* 图片视觉统一：多图 1:1 方形 + cover 防拉伸；单/双/g-3 纳入统一比例体系，杜绝高矮不一 */
  .grid img{max-width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
  .g-1 img{width:100%;max-width:640px;aspect-ratio:4/3;object-fit:cover}
  .grid.g-1.is-portrait img{max-width:380px;aspect-ratio:3/4}
  /* g-2 保留图片原比例（竖图组显示竖图），覆盖上方 .grid img 的 1:1 强制方形。
     注意 .g-2 img 与 .grid img 特异性同为 (0,1,1)，必须在此显式声明 auto 才能压过后者 */
  .g-2 img{aspect-ratio:auto}
  .g-p1 img{max-width:480px;aspect-ratio:3/4;object-fit:cover}
  .g-p2 img{aspect-ratio:1/1;object-fit:cover}
  .g-3__big img,.g-3__col img{aspect-ratio:1/1;object-fit:cover}
  .gear{flex-wrap:wrap}
  .card{width:100%;max-width:380px}
  .page-title{font-size:52px}
  .art-hero__title{font-size:42px}
  .art-cover{height:380px}
  /* P2-K：中文首字去 drop-cap，改导语式大字（见基础规则），此处首字母覆写已无意义 */
  .gear-detail{grid-template-columns:1fr;grid-template-areas:"head" "media" "info";row-gap:40px;column-gap:0}
  .gear-detail__media{width:100%;max-width:520px}
  .gear-detail__info{max-width:100%}
  .buy-channels{margin-top:18px}
  .detail__card{padding:12px 0 0}
}

/* ============================================================
   导航折叠（<1280px，即 ≤1279）：汉堡按钮 + 下拉面板
   —— 原 ≤640px 的下拉规则与二级菜单内联规则上移至此；
      ≥1280px 恢复内联居中（见上方 min-width:1280px）
   ============================================================ */
@media (max-width:1279px){
  .nav__toggle{display:block}
  .nav__menu{
    display:flex;flex-direction:column;align-items:stretch;
    position:fixed;top:76px;left:0;right:0;
    background:rgba(246,247,249,.96);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
    border-bottom:1px solid rgba(22,21,15,.08);
    padding:8px 24px 22px;
    box-shadow:0 18px 40px rgba(22,21,15,.08);
    transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .nav.is-open .nav__menu{
    transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;
  }
  .nav__links{flex-direction:column;gap:0;align-items:stretch;position:static;left:auto;top:auto;transform:none;margin:0}
  .nav__links a{
    padding:15px 0;font-size:17px;color:var(--ink);
    border-bottom:1px solid rgba(22,21,15,.07);
  }
  .nav__links a:last-child{border-bottom:0}
  .nav__cta{align-self:flex-start;margin-top:18px}
  .nav__item--has-menu .nav__submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;padding:2px 0 4px 16px;min-width:0;gap:0}
  .nav__item--has-menu .nav__submenu a{font-size:16px;padding:11px 0;border-bottom:1px solid rgba(22,21,15,.07)}
  .nav__item--has-menu .nav__submenu a:last-child{border-bottom:0}
  .nav__item--has-menu .caret{transform:rotate(0)}
}
@media (max-width:900px){
  .wrap,.hero,.section,.section--feed,.footer,.page{padding-left:24px;padding-right:24px}
  .hero{flex-direction:column;align-items:flex-start;gap:40px}
  .hero__visual{width:100%;max-width:529px;height:auto;aspect-ratio:529/620;margin:0 auto}
  .hero__main{left:50%;top:0;transform:translateX(-50%);width:81.1%;height:100%;border-radius:10px}
  .hero__float{left:43.5%;top:50.2%;width:47%;height:53.2%;border-radius:20px}
  .hero__info{left:0;top:69.4%;width:64.8%;height:35.3%;border-radius:10px;padding:5%}
  .hero__info strong{font-size:16px}
  .hero__tags{gap:6px}
  .hero__tags span{font-size:11px;padding:5px 9px}
  .hero__content,.hero__desc{width:100%;max-width:640px}
  .hero__title{font-size:54px}
  .section__head{flex-direction:column;align-items:flex-start;gap:24px}
  .section__right{align-items:flex-start}
  .section__title{font-size:56px}
  .post{flex-direction:column;gap:20px}
  .post__time{width:auto;display:flex;align-items:baseline;gap:12px}
  .post__date{font-size:40px}
  .post__clock{margin-top:0}
  .row{flex-direction:column;align-items:flex-start;gap:20px}
  .row__body{width:100%}
  .page-title{font-size:40px}
  .art-hero__title{font-size:34px}
  .art-cover{height:240px}
  .prose p,.prose li{font-size:17px}
  .prose h2{font-size:24px}
  .detail__card{padding:8px 0 0}
  .detail__text{font-size:20px}
  .media{gap:4px}
  .media--p1 img{max-width:min(70%,640px)}   /* 与基础档同比例，避免 70%→78% 跳变造成图片忽大忽小 */
  .media--p2 img{aspect-ratio:auto}
  .gear-detail__title{font-size:32px}
  .prevnext{flex-direction:column;gap:16px}
  .prevnext .is-next{text-align:left;margin-left:auto}
  .footer__logo{font-size:64px}
  .lb__nav{width:44px;height:44px;font-size:22px}
  .lb__nav--prev{left:12px}
  .lb__nav--next{right:12px}
  .lb__stage{max-width:92vw}
  .lb__img{max-width:92vw;max-height:62vh}
  .lb__thumbs{bottom:14px}
  .lb__thumbs img{width:48px;height:48px}
}

/* ============================================================
   手机端（≤640px）：在 900px 基础上进一步收紧
   ========================================================== */
@media (max-width:640px){

  .hero{padding-top:44px;padding-bottom:64px;gap:32px}
  .hero__title{font-size:40px}
  .hero__desc{font-size:16px}
  .hero__cta{gap:12px}
  .btn-primary,.btn-ghost{font-size:14px;padding:14px 22px}

  .post{padding:32px 0;gap:14px}
  .post__date{font-size:32px}
  .post__text{font-size:18px}
  .post__video{width:100%}
  .post__video--v{width:100%;max-width:260px}

  .row{gap:18px;padding:26px 0}
  .row__body{width:100%;gap:20px}
  .row__col{min-width:0}
  .row__thumb{width:100%;height:auto;aspect-ratio:4/3}
  .row__num{font-size:38px}
  .row__title{font-size:22px}

  .gear{gap:20px}
  .card{width:100%;max-width:100%}

  .section{padding-top:72px;padding-bottom:72px}
  .section__title{font-size:40px}
  .footer__logo{font-size:46px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:10px}

  .login-modal{padding:18px}
  .login-modal__card{padding:30px 24px 26px}
  .login-modal__title{font-size:26px}
}

/* ==========================================================
   交互层 · 可点击 / 灯箱 / 提示 / 回到顶部
   ========================================================== */

.is-clickable{position:relative;cursor:pointer}
.is-clickable::before{
  content:"";position:absolute;inset:-14px -20px;z-index:0;
  background:#fff;border-radius:22px;opacity:0;pointer-events:none;
  transition:opacity .22s ease,box-shadow .22s ease,transform .22s ease;
  transform:scale(.995);
}
.is-clickable:hover::before{
  opacity:1;transform:none;box-shadow:0 16px 46px rgba(22,21,15,.09);
}
.is-clickable>*{position:relative;z-index:1}
.card.is-clickable::before{inset:-10px -10px}

.is-text-link{cursor:pointer;transition:color .18s ease}
.is-text-link:hover{
  text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:2px;text-underline-offset:7px;
}

.is-zoomable{cursor:zoom-in;transition:filter .2s ease}
.is-zoomable:hover{filter:brightness(1.04)}

.lb{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(18,17,12,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .26s ease;
}
.lb.is-on{opacity:1;pointer-events:auto}
.lb__bar{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;color:rgba(255,255,255,.7);
  font-family:"Inter",sans-serif;font-size:13px;letter-spacing:.04em;
}
.lb__close{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:#fff;font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;
}
.lb__close:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}
.lb__stage{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:78vw;
}
.lb__img{
  max-width:78vw;max-height:70vh;border-radius:10px;object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  opacity:0;transform:scale(.97);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
.lb.is-ready .lb__img{opacity:1;transform:none}
.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;
  border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);
  color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
}
.lb__nav:hover{background:rgba(255,255,255,.18)}
.lb__nav--prev{left:40px}
.lb__nav--next{right:40px}
.lb__nav[hidden]{display:none}
.lb__thumbs{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;max-width:80vw;overflow-x:auto;padding:4px 8px;scrollbar-width:none;
}
.lb__thumbs::-webkit-scrollbar{display:none}
.lb__thumbs img{
  width:62px;height:62px;flex:none;object-fit:cover;border-radius:10px;
  opacity:.4;cursor:pointer;border:2px solid transparent;transition:opacity .2s,border-color .2s;
}
.lb__thumbs img:hover{opacity:.75}
.lb__thumbs img.is-on{opacity:1;border-color:#fff}
.lb__hint{
  position:absolute;bottom:104px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.35);font-size:12px;font-family:"Inter",sans-serif;
}

.toast{
  position:fixed;left:50%;bottom:44px;transform:translate(-50%,16px);z-index:210;
  background:var(--ink);color:#fff;font-size:14px;line-height:1;
  padding:14px 24px;border-radius:999px;white-space:nowrap;
  box-shadow:0 14px 40px rgba(22,21,15,.22);
  opacity:0;pointer-events:none;transition:opacity .24s ease,transform .24s cubic-bezier(.2,.8,.2,1);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   登录弹窗（主题化 · 字段对齐 Halo halo-form-wrapper）
   ============================================================ */
.login-modal{
  position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(18,17,12,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .24s ease;
}
.login-modal.is-on{opacity:1;pointer-events:auto}
.login-modal__backdrop{position:absolute;inset:0}
.login-modal__card{
  position:relative;width:100%;max-width:400px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;
  padding:36px 34px 32px;
  box-shadow:0 30px 80px rgba(22,21,15,.28);
  transform:translateY(12px) scale(.985);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.login-modal.is-on .login-modal__card{transform:none}
.login-modal__close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,transform .2s;
}
.login-modal__close:hover{background:var(--bg);color:var(--ink);transform:rotate(90deg)}
.login-modal__brand{font-family:"Inter",sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em}
.login-modal__title{font-size:30px;font-weight:700;line-height:1.2;margin-top:14px}
.login-modal__form{margin-top:26px;display:flex;flex-direction:column;gap:18px}

/* ============================================================
   分享海报弹窗（点击详情页「分享」生成，site.js openSharePoster）
   ============================================================ */
.poster-modal{
  position:fixed;inset:0;z-index:230;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(18,17,12,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .24s ease;
}
.poster-modal.is-on{opacity:1;pointer-events:auto}
.poster-modal__backdrop{position:absolute;inset:0}
.poster-modal__body{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  transform:translateY(12px) scale(.985);transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.poster-modal.is-on .poster-modal__body{transform:none}
.poster-modal__img{
  display:block;width:auto;height:auto;max-width:min(78vw,420px);max-height:72vh;
  border-radius:14px;box-shadow:0 30px 80px rgba(22,21,15,.4);
}
.poster-modal__tip{font-size:13.5px;color:rgba(255,255,255,.85);letter-spacing:.04em}
.poster-modal__ops{display:flex;gap:12px}
.poster-modal__btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.12);color:#fff;font-size:14px;cursor:pointer;text-decoration:none;
  transition:background .2s,border-color .2s;
}
.poster-modal__btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6)}
.poster-modal__dl{background:var(--accent);border-color:var(--accent)}
.poster-modal__dl:hover{background:#5b46e0;border-color:#5b46e0}
.poster-modal__close{
  position:absolute;top:-14px;right:-14px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(22,21,15,.7);color:#fff;font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;
}
.poster-modal__close:hover{background:#16150F;transform:rotate(90deg)}
@media (max-width:640px){
  .poster-modal{padding:16px}
  .poster-modal__img{max-width:88vw;max-height:66vh}
}

/* ============================================================
   申请友链弹窗（视觉对齐登录弹窗）
   ============================================================ */
.friend-apply__btn{
  margin-top:32px;display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:15px;
  padding:17px 30px;border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 10px 26px rgba(110,86,247,.25);
  transition:transform .18s ease,box-shadow .18s ease,background .2s;
}
.friend-apply__btn:hover{transform:translateY(-2px);background:#5d44e6;box-shadow:0 14px 34px rgba(110,86,247,.32)}
.apply-modal{
  position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(18,17,12,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility .24s;
}
.apply-modal.is-on{opacity:1;visibility:visible;pointer-events:auto}
.apply-modal__backdrop{position:absolute;inset:0}
.apply-modal__card{
  position:relative;width:100%;max-width:460px;max-height:calc(100vh - 48px);overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:36px 34px 32px;
  box-shadow:0 30px 80px rgba(22,21,15,.28);
  transform:translateY(12px) scale(.985);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.apply-modal.is-on .apply-modal__card{transform:none}
.apply-modal__close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,transform .2s;
}
.apply-modal__close:hover{background:var(--bg);color:var(--ink);transform:rotate(90deg)}
.apply-modal__brand{font-family:"Inter",sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--muted-2)}
.apply-modal__title{font-size:26px;font-weight:700;line-height:1.2;margin-top:8px}
.apply-modal__sub{font-size:14px;color:var(--muted);margin-top:8px}
.apply-form{margin-top:26px;display:flex;flex-direction:column;gap:18px}
.apply-field{display:flex;flex-direction:column;gap:8px}
.apply-field__k{font-size:13px;font-weight:600;color:var(--ink-soft)}
.apply-field__k i{font-style:normal;color:#D14343;margin-left:2px}
.apply-field input{
  width:100%;height:46px;padding:0 16px;font-size:15px;font-family:inherit;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.apply-field input::placeholder{color:var(--muted-2)}
.apply-field input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(110,86,247,.12)}
.apply-field--captcha input{min-width:0;letter-spacing:.12em}
.apply-captcha{display:flex;align-items:center;gap:8px}
.apply-captcha input{
  flex:1;height:46px;padding:0 16px;font-size:15px;font-family:inherit;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.apply-captcha input::placeholder{color:var(--muted-2)}
.apply-captcha input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(110,86,247,.12)}
.apply-captcha img{
  width:150px;height:46px;flex:none;object-fit:contain;
  border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;
}
.apply-captcha button{
  width:38px;height:46px;flex:none;
  border:1px solid var(--line);background:#fff;border-radius:10px;
  color:var(--muted);font-size:17px;line-height:1;cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.apply-captcha button:hover{background:var(--bg);color:var(--ink);transform:rotate(90deg)}
.apply-form__err{font-size:13.5px;line-height:1.5;color:#D14343;margin-top:-4px}
.apply-form__submit{
  align-self:center;padding:15px 42px;border:0;
  background:var(--accent);color:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:16px;
  border-radius:999px;cursor:pointer;box-shadow:0 10px 26px rgba(110,86,247,.25);
  transition:transform .18s ease,box-shadow .18s ease,background .2s,opacity .2s;
}
.apply-form__submit:hover{transform:translateY(-2px);background:#5d44e6;box-shadow:0 14px 34px rgba(110,86,247,.32)}
.apply-form__submit:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.lm-field{display:flex;flex-direction:column;gap:8px}
.lm-field label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.lm-field input{
  width:100%;height:48px;padding:0 16px;font-size:15px;font-family:inherit;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.lm-field input::placeholder{color:var(--muted-2)}
.lm-field input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(110,86,247,.12)}
.lm-input-stack{position:relative;display:flex;align-items:center}
.lm-input-stack input{padding-right:48px}
.lm-eye{
  position:absolute;right:6px;width:36px;height:36px;border:0;background:none;color:var(--muted-2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px;
  transition:color .2s,background .2s;
}
.lm-eye:hover{color:var(--ink);background:rgba(22,21,15,.05)}
.lm-row{display:flex;justify-content:flex-end;margin-top:-6px}
.lm-forgot{font-size:13px;font-weight:500;color:var(--accent)}
.lm-forgot:hover{text-decoration:underline;text-underline-offset:3px}
.lm-submit{
  height:50px;margin-top:6px;border:0;background:var(--accent);color:#fff;
  font-family:"Inter",sans-serif;font-weight:700;font-size:16px;border-radius:999px;cursor:pointer;
  transition:background .2s,transform .2s,opacity .2s;
}
.lm-submit:hover{background:#5d44e6;transform:translateY(-1px)}
.lm-submit:disabled{opacity:.6;cursor:default;transform:none}
.lm-error{font-size:13.5px;line-height:1.5;color:#D14343}

.to-top{
  position:fixed;right:34px;bottom:34px;z-index:110;
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(22,21,15,.12);background:#fff;color:var(--ink);font-size:17px;
  cursor:pointer;box-shadow:0 10px 30px rgba(22,21,15,.1);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:.26s cubic-bezier(.2,.8,.2,1);
}
.to-top:hover{background:var(--ink);color:#fff;transform:translateY(0) scale(1.06)}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto}

.is-filtered-out{display:none !important}

.act-item{cursor:pointer;transition:color .18s ease}
.act-item:hover{color:var(--accent)}
.act-item.is-liked{color:var(--accent);font-weight:500}
.actions span{cursor:pointer}
.actions span.is-liked{color:var(--accent)}

html{scroll-behavior:smooth}

/* ============================================================
   通用卡片网格 · 响应式
   ============================================================ */
@media (max-width:900px){
  .card-grid{gap:20px}
}

/* ============================================================
   独立页面专属样式（page.html / person.html / link.html /
   photos.html / page_topic_home.html / page_topic_list.html）
   —— 由 SIGGE 静态原型各页面的 <style> 块原样迁移，全站共用一份
   ============================================================ */

.about-head{position:relative;padding-top:64px}
.about-head::before{
  content:"";position:absolute;z-index:-1;top:-40px;left:-60px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(110,86,247,.14),transparent 70%);
  filter:blur(6px);pointer-events:none;
}
.about-eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.about-meta{font-size:14px;color:var(--muted-2);margin-top:20px}
.about-body{margin-top:44px;padding-bottom:100px}
.about-body .prose{margin-left:0}
.person-body{margin-top:44px}
.person-body .prose{margin-left:0}
.topic-body{margin-top:36px}
.topic-body .prose{margin-left:0}

.about-author{
  display:flex;gap:22px;align-items:center;max-width:850px;
  background:var(--card);border-radius:10px;padding:22px 24px;margin-top:48px;
  box-shadow:0 18px 40px rgba(22,21,15,.08);
}
.about-author__avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none;background:var(--bg)}
.about-author__main{flex:1;min-width:0}
.about-author__name{font-size:18px;font-weight:700;color:var(--ink)}
.about-author__bio{font-size:14px;color:var(--muted);line-height:1.7;margin-top:6px}
.about-author__link{display:inline-block;font-size:14px;font-weight:500;color:var(--accent);margin-top:12px}
.about-author__link:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

@media (max-width:640px){
  .about-head{padding-top:40px}
  .about-head::before{width:240px;height:240px;top:-20px;left:-30px}
  .about-body{margin-top:32px;padding-bottom:72px}
  .person-body{margin-top:32px}
  .topic-body{margin-top:24px}
  .about-author{flex-direction:column;align-items:flex-start;gap:14px;padding:18px;margin-top:36px}
  .about-author__avatar{width:60px;height:60px}
}

.friend-card{
  width:360px;flex:none;background:var(--card);border-radius:10px;overflow:hidden;
  box-shadow:0 18px 40px rgba(22,21,15,.08);
  display:flex;flex-direction:column;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s;
}
.friend-card:hover{transform:translateY(-3px);box-shadow:0 24px 52px rgba(22,21,15,.12)}
.friend-card__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px}
.friend-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.friend-card__id{display:flex;align-items:center;gap:12px;min-width:0}
.friend-card__name{font-size:20px;font-weight:700;line-height:1.3;min-width:0}
.friend-card__avatar{
  width:48px;height:48px;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:"Inter","Noto Sans SC",sans-serif;font-size:18px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#6E56F7,#A18BFF);
  box-shadow:0 4px 12px rgba(var(--avatar-rgb,110,86,247),.28);
}
.friend-card__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.friend-card:nth-child(2) .friend-card__avatar{background:linear-gradient(135deg,#6E56F7,#A78BFA);box-shadow:0 4px 12px rgba(var(--avatar-rgb,110,86,247),.28)}
.friend-card:nth-child(3) .friend-card__avatar{background:linear-gradient(135deg,#0EA5A4,#5FD3D0);box-shadow:0 4px 12px rgba(var(--avatar-rgb,14,165,164),.28)}
.friend-card:nth-child(4) .friend-card__avatar{background:linear-gradient(135deg,#F0A500,#FFD27A);box-shadow:0 4px 12px rgba(var(--avatar-rgb,240,165,0),.28)}
.friend-card:nth-child(5) .friend-card__avatar{background:linear-gradient(135deg,#3B82F6,#8DB4FF);box-shadow:0 4px 12px rgba(var(--avatar-rgb,59,130,246),.28)}
.friend-card:nth-child(6) .friend-card__avatar{background:linear-gradient(135deg,#E4559B,#FF9BCB);box-shadow:0 4px 12px rgba(var(--avatar-rgb,228,85,155),.28)}
.friend-card__tag{
  font-size:12px;font-weight:600;color:var(--accent);
  background:rgba(110,86,247,.1);border-radius:999px;padding:4px 11px;flex:none;
}
.friend-card__desc{font-size:14.5px;line-height:1.65;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.friend-card__link{
  margin-top:6px;font-size:14px;font-weight:500;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
}
.friend-card__link:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

.friend-apply{margin-top:96px;padding-top:52px;border-top:1px solid var(--line)}
.friend-apply__text{font-size:18px;line-height:1.75;color:var(--muted);max-width:680px;margin-top:18px}
.friend-apply__box{
  margin-top:28px;background:var(--card);border-radius:10px;padding:28px 30px;
  box-shadow:0 18px 40px rgba(22,21,15,.08);
  display:flex;flex-direction:column;gap:16px;max-width:680px;
}
.friend-apply__row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.friend-apply__k{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--ink);min-width:84px}
.friend-apply__v{font-size:16px;line-height:1.7;color:var(--ink-soft)}
.friend-apply__v a{color:var(--accent);font-weight:500}
.friend-apply__note{font-size:13px;color:var(--muted-2);margin-top:4px}

@media (max-width:1280px){.friend-card{width:100%;max-width:340px}}
@media (max-width:900px){.friend-card{width:100%;max-width:340px}}
@media (max-width:640px){.friend-card{width:100%;max-width:100%}.friend-apply__box{padding:22px 20px}}

.album-note{font-size:13px;color:var(--muted-2);margin-top:40px}
.album-more{display:block;margin:80px auto 0;padding:13px 32px;font-size:15px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid rgba(22,21,15,.12);border-radius:999px;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.album-more:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(22,21,15,.12)}
.album-more[hidden]{display:none}
.album-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.album-cell{
  position:relative;
  padding:0;border:0;background:var(--card);
  border-radius:10px;overflow:hidden;cursor:pointer;
  box-shadow:0 18px 40px rgba(22,21,15,.08);
  aspect-ratio:4/3;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s;
}
.album-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.album-cell:hover{transform:translateY(-3px);box-shadow:0 24px 52px rgba(22,21,15,.12)}
.album-cell:hover img{transform:scale(1.04)}

.album-lb{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,21,15,.94);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}
.album-lb.open{opacity:1;visibility:visible;pointer-events:auto}
.album-lb__stage{margin:0;max-width:90vw;max-height:84vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.album-lb__stage img{max-width:90vw;max-height:78vh;object-fit:contain;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.album-lb__go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:10px 24px;font-size:14px;font-weight:600;color:#16150f;background:#fff;border-radius:999px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.album-lb__go:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.album-lb__close{
  position:absolute;top:22px;right:26px;width:44px;height:44px;
  font-size:30px;line-height:1;color:#fff;background:rgba(255,255,255,.08);
  border-radius:50%;transition:background .2s;
}
.album-lb__close:hover{background:rgba(255,255,255,.18)}
.album-lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;font-size:34px;line-height:1;color:#fff;
  background:rgba(255,255,255,.08);border-radius:50%;transition:background .2s;
}
.album-lb__nav:hover{background:rgba(255,255,255,.18)}
.album-lb__prev{left:24px}
.album-lb__next{right:24px}
.album-lb__nav:disabled{opacity:.28;cursor:default}

@media (max-width:900px){.album-grid{grid-template-columns:repeat(3,1fr)}.album-lb__nav{width:44px;height:44px;font-size:28px}.album-lb__prev{left:12px}.album-lb__next{right:12px}}
@media (max-width:640px){.album-grid{grid-template-columns:repeat(2,1fr);gap:12px}.album-note{margin-top:28px}}

.cat-card{
  width:360px;flex:none;background:var(--card);border-radius:10px;overflow:hidden;
  box-shadow:0 18px 40px rgba(22,21,15,.08);
  display:flex;flex-direction:column;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s;
}
.cat-card:hover{transform:translateY(-3px);box-shadow:0 24px 52px rgba(22,21,15,.12)}
.cat-card__body{padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px}
.cat-card__top{display:flex;align-items:center;gap:14px}
.cat-card__icon{font-size:26px;line-height:1;flex:none}
.cat-card__name{font-size:22px;font-weight:700;line-height:1.3}
.cat-card__desc{font-size:14.5px;line-height:1.65;color:var(--muted)}
.cat-card__foot{margin-top:4px;display:flex;align-items:center;justify-content:space-between}
.cat-card__count{font-size:13px;color:var(--muted-2)}
.cat-card__link{font-size:14px;font-weight:500;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.cat-card__link:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

@media (max-width:1280px){.cat-card{width:100%;max-width:340px}}
@media (max-width:900px){.cat-card{width:100%;max-width:340px}}
@media (max-width:640px){.cat-card{width:100%;max-width:100%}}

.row__num.is-after{order:2}
/* ============================================================
   博主工具（发布弹窗 + 导航发布/评论提醒按钮）
   移植自 theme-aloha（.src-backup），风格对齐 SIGGE 主题。
   旧主题用到的变量在此别名映射到本主题设计令牌。
   ============================================================ */
:root{
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --bg-primary: var(--bg);
  --bg-secondary: var(--card);
  --bg-hover: rgba(110,86,247,.08);
  --border-color: var(--line);
  --border-strong: rgba(22,21,15,.22);
  --radius-full: 999px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

.nav-tools{
  display:flex;align-items:center;
  gap:15px;                 /* 评论提醒 ↔ 发布 固定 15px */
  margin-left:auto;         /* 整组钉到右侧（菜单已绝对居中，不影响其位置） */
  margin-right:15px;        /* 发布 ↔ 头像 固定 15px */
}
.nav-tool{
  position:relative;
  flex:0 0 auto;
  width:35px;height:35px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  background:transparent;border:1px solid transparent;
  color:var(--muted);
  cursor:pointer;
  transition:transform .18s ease,color .18s ease,background .18s ease,border-color .18s ease;
}
.nav-tool[hidden]{display:none}
.nav-tool:hover,.nav-tool:focus-visible{
  transform:translateY(-1px);
  color:var(--accent);
  background:var(--bg);
  border-color:var(--line);
  outline:none;
}
.nav-tool .svg-icon{width:20px;height:20px;display:block}
.nav-tool__badge{
  position:absolute;top:-3px;right:-3px;
  min-width:16px;height:16px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;line-height:1;
  box-shadow:0 0 0 2px var(--bg);
  pointer-events:none;
}
@media (max-width:640px){
  .nav-tool{align-self:flex-start;margin-top:18px}
}


.publisher-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.publisher-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.publisher-modal {
  position: relative;
  width: 560px;
  max-width: 100%;
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-10px);
  transition: transform 0.2s ease;
}

.publisher-modal-overlay.is-open .publisher-modal {
  transform: translateY(0);
}

.publisher-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 5;
}

.publisher-modal-close:hover,
.publisher-modal-close:focus-visible {
  background: var(--bg-hover);
  color: var(--text-primary);
  outline: none;
}

.publisher-modal-close .svg-icon {
  width: 20px;
  height: 20px;
}

.publisher-modal-body {
  padding: 22px 24px 0;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.publisher-modal-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.publisher-category {
  flex: 0 0 auto;
  position: relative;
}

.publisher-category-select {
  appearance: none;
  -webkit-appearance: none;
  height: 34px;
  padding: 0 24px 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
}

.publisher-category-select:focus {
  border-color: var(--border-strong);
}

.publisher-category::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--text-primary);
  pointer-events: none;
}

.publisher-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.publisher-tab {
  position: relative;
  padding: 8px 14px 12px;
  background: transparent;
  border: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.15s ease;
}

.publisher-tab:hover,
.publisher-tab:focus-visible {
  color: var(--text-primary);
  outline: none;
}

.publisher-tab.is-active {
  color: var(--accent);
}

.publisher-tab.is-active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.publisher-article-title {
  flex: 1 1 auto;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease;
}

.publisher-article-title:focus {
  border-color: var(--border-strong);
}

.publisher-article-title::placeholder {
  color: var(--text-primary);
  font-weight: 400;
}

.publisher-location {
  flex: 1 1 auto;
  min-width: 0;        /* flex 子项默认 min-width:auto，会被内容撑破容器 → 移动端整页横向溢出 */
  max-width: 100%;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease;
}

.publisher-location:focus {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.publisher-location::placeholder {
  color: var(--text-primary);
  font-weight: 500;
}

.publisher-item-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.publisher-item-form[hidden] {
  display: none;
}

.publisher-item-header-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.publisher-item-header-row .publisher-category {
  flex: 0 0 auto;
}

.publisher-item-header-row .publisher-article-title {
  flex: 1 1 auto;
}

.publisher-item-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.publisher-item-cover {
  position: relative;
  width: 130px;
  height: 130px;
  flex: 0 0 130px;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--border-color);
  overflow: hidden;
  background: var(--bg-secondary);
}

.publisher-item-cover-add {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.publisher-item-cover-add:hover,
.publisher-item-cover-add:focus-visible {
  background: var(--bg-hover);
  color: var(--text-primary);
  outline: none;
}

.publisher-item-cover-add .svg-icon {
  width: 28px;
  height: 28px;
}

.publisher-item-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.publisher-item-cover-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.publisher-item-cover-remove[hidden],
.publisher-item-cover-add[hidden],
.publisher-item-cover img[hidden] {
  display: none;
}

.publisher-item-cover-remove:hover,
.publisher-item-cover-remove:focus-visible {
  background: rgba(0, 0, 0, 0.7);
  outline: none;
}

.publisher-item-cover-menu {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 5;
}

.publisher-item-cover-menu[hidden] {
  display: none;
}

.publisher-item-cover-menu-item {
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.publisher-item-cover-menu-item:hover,
.publisher-item-cover-menu-item:focus-visible {
  background: var(--bg-hover);
  outline: none;
}

.publisher-cover-url-row {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.publisher-cover-url-row.is-open {
  display: flex;
}

.publisher-item-fields {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* 桌面端：所有物品字段（物品名称 / 到手价格 / 购买渠道）label 与输入框同行。
   移动端 ≤640 由下面 media 块进一步调整宽度和对齐。 */
.publisher-item-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.publisher-item-field label {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.publisher-item-field input {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  font-size: 0.9375rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease;
}

.publisher-item-field input:focus {
  border-color: var(--border-strong);
}

.publisher-item-field input::placeholder {
  color: var(--text-primary);
}


.publisher-content {
  width: 100%;
  min-height: 120px;
  max-height: 240px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-primary);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
}

.publisher-content:focus {
  border-color: var(--border-strong);
}

.publisher-content::placeholder {
  color: var(--text-primary);
}

.publisher-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border-color);
}

.publisher-toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  margin: 0 4px;
}

.publisher-toolbar-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.publisher-toolbar-btn:hover,
.publisher-toolbar-btn:focus-visible {
  background: var(--bg-hover);
  color: var(--text-primary);
  outline: none;
}

.publisher-toolbar-btn .svg-icon {
  width: 18px;
  height: 18px;
}

.publisher-toolbar-btn.is-active {
  background: var(--bg-hover);
  color: var(--accent);
}

.publisher-emoji-panel {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  max-height: 116px;
  overflow-y: auto;
}

.publisher-emoji-panel.is-open {
  display: flex;
}

.publisher-emoji-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}

.publisher-emoji-btn:hover,
.publisher-emoji-btn:focus-visible {
  background: var(--bg-hover);
  outline: none;
}

.publisher-media-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.publisher-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  gap: 10px;
}

.publisher-media-item {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-secondary);
}

.publisher-media-item img,
.publisher-media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.publisher-media-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.publisher-media-remove:hover,
.publisher-media-remove:focus-visible {
  background: rgba(0, 0, 0, 0.7);
  outline: none;
}

.publisher-media-add {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 2px dashed var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.publisher-media-add:hover,
.publisher-media-add:focus-visible {
  border-color: var(--border-strong);
  color: var(--text-primary);
  outline: none;
}

.publisher-media-add .svg-icon {
  width: 24px;
  height: 24px;
}

.publisher-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.publisher-action-btn {
  height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.publisher-action-btn:hover,
.publisher-action-btn:focus-visible {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
  outline: none;
}

.publisher-action-btn .svg-icon {
  width: 14px;
  height: 14px;
}

.publisher-library {
  display: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.publisher-library.is-open {
  display: block;
}

.publisher-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.publisher-library-close {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.8125rem;
  cursor: pointer;
}

.publisher-library-close:hover {
  color: var(--text-primary);
}

.publisher-library-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.publisher-library-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-secondary);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
}

.publisher-library-item:hover,
.publisher-library-item:focus-visible {
  border-color: var(--border-strong);
  outline: none;
}

.publisher-library-item img,
.publisher-library-item video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.publisher-url-input-row {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.publisher-url-input-row.is-open {
  display: flex;
}

.publisher-url-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--text-primary);
  outline: none;
}

.publisher-url-input:focus {
  border-color: var(--border-strong);
}

.publisher-url-confirm {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  border: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.publisher-url-confirm:hover,
.publisher-url-confirm:focus-visible {
  opacity: 0.9;
  outline: none;
}

.publisher-video-panel {
  display: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.publisher-video-panel.is-open {
  display: block;
}

.publisher-video-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.publisher-video-row:first-child {
  margin-top: 0;
}

.publisher-video-cover-row.is-collapsed {
  display: none;
}

.publisher-video-url-input,
.publisher-video-poster-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--text-primary);
  outline: none;
}

.publisher-video-url-input:focus,
.publisher-video-poster-input:focus {
  border-color: var(--border-strong);
}

.publisher-video-local {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.publisher-video-local:hover,
.publisher-video-local:focus-visible {
  background: var(--bg-hover);
  color: var(--text-primary);
  outline: none;
}

.publisher-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px 18px;
  background: var(--bg-primary);
}

.publisher-btn {
  height: 38px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.publisher-btn:hover,
.publisher-btn:focus-visible {
  opacity: 0.9;
  transform: translateY(-1px);
  outline: none;
}

.publisher-btn-secondary {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.publisher-btn-primary {
  background: var(--accent);
  border: none;
  color: #fff;
}

.publisher-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.publisher-btn .svg-icon {
  width: 16px;
  height: 16px;
}

.publisher-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.875rem;
  z-index: 1002;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.publisher-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.pub-spec{margin-top:12px;padding:14px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary)}
.pub-spec__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pub-spec__title{font-size:0.8125rem;font-weight:600;color:var(--text-primary)}
.pub-spec__add{height:30px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-sm);background:var(--bg-secondary);border:1px solid var(--border-color);font-size:0.8125rem;font-weight:500;color:var(--accent);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.pub-spec__add:hover,.pub-spec__add:focus-visible{background:var(--bg-hover);border-color:var(--accent);outline:none}
.pub-spec__rows{display:flex;flex-direction:column;gap:8px}
.pub-spec__headrow{display:grid;grid-template-columns:1fr 1.3fr 28px;gap:8px;margin-bottom:2px}
.pub-spec__headrow span{font-size:0.75rem;color:var(--muted);padding:0 2px}
.pub-spec__row{display:grid;grid-template-columns:1fr 1.3fr 28px;gap:8px;align-items:center}
.pub-spec__label,.pub-spec__value{width:100%;height:34px;padding:0 12px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);font-size:0.9375rem;color:var(--text-primary);outline:none;transition:border-color .15s ease}
.pub-spec__label::placeholder,.pub-spec__value::placeholder{color:var(--muted-2)}
.pub-spec__label:focus,.pub-spec__value:focus{border-color:var(--border-strong)}
.pub-spec__rm{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;border:none;font-size:13px;line-height:1;cursor:pointer;transition:background .15s ease}
.pub-spec__rm:hover,.pub-spec__rm:focus-visible{background:rgba(0,0,0,.7);outline:none}
.pub-spec__hint{margin:10px 0 0;font-size:0.75rem;line-height:1.5;color:var(--muted)}

/* ============================================================
   申请友链弹窗 · 窄屏适配（置于文件末尾，确保覆盖上面的基础规则）
   ============================================================ */
@media (max-width:640px){
  .apply-modal{padding:16px}
  .apply-modal__card{padding:30px 22px 26px}
  .apply-modal__title{font-size:24px}
  .apply-captcha{gap:6px}
  .apply-captcha img{width:118px}
  .apply-captcha button{width:34px}
  .friend-apply__btn{width:100%;justify-content:center}
}

/* ============================================================
   好友动态（/friends）
   ============================================================ */
.friend-feed__text{cursor:default;display:flex;flex-direction:column;gap:8px}
.friend-feed__title{
  font-size:18px;font-weight:700;line-height:1.4;color:var(--ink);
  text-decoration:none;transition:color .18s ease;
}
.friend-feed__title:hover{color:var(--accent)}
.friend-feed__summary{
  font-size:14px;line-height:1.75;color:var(--muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.friends-more-wrap{display:flex;justify-content:center;margin-top:8px}
.friends-more{
  font-size:15px;font-weight:500;color:var(--muted);background:#fff;
  border:1px solid rgba(22,21,15,.12);border-radius:999px;padding:9px 22px;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.friends-more:hover{border-color:rgba(22,21,15,.3);color:var(--ink)}
.friends-more:disabled{opacity:.6;cursor:default}
.friends-empty{
  margin-top:44px;padding:40px 24px;text-align:center;
  font-size:14px;line-height:1.8;color:var(--muted-2);
  background:#fff;border:1px dashed rgba(22,21,15,.14);border-radius:16px;
}

@media (max-width:640px){
  .friend-feed__title{font-size:16px}
  .friend-feed__summary{font-size:13px}
  .friends-empty{margin-top:28px;padding:28px 18px}
}

/* 申请友链 / 好友动态 按钮组（ghost = 次级，样式对齐首页 .btn-ghost） */
.friend-apply__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:32px}
.friend-apply__actions .friend-apply__btn{margin-top:0}
.friend-apply__btn--ghost{
  background:transparent;color:var(--ink);
  border:1px solid rgba(22,21,15,.18);
  box-shadow:none;text-decoration:none;
  padding:17px 30px;                          /* 与首页 .btn-ghost 逐字一致 */
}
.friend-apply__btn--ghost:hover{
  border-color:rgba(22,21,15,.4);background:rgba(22,21,15,.04);transform:translateY(-1px);
}

/* ============================================================
   SIGGE 同步补丁 · 来自静态原型 2026-10-22
   覆盖内容：P0 对比度(--muted-2)/字体优先级/reduced-motion + P1 配色(--accent-strong/--num)/图片网格流体/按钮态
   以「追加覆盖」方式并入，不影响上方 Aloha 基础规则（后定义者胜出）。
   注意：导航抽屉、FOUC、灯箱焦点陷阱因主题结构(Thymeleaf 片段/独立 JS)不同而暂未并入。
   ============================================================ */
@font-face{
  font-family:"Noto Sans SC Local";
  src:url("../fonts/NotoSansSC-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --muted-2:#706B62;     /* P0 对比度：≈2.4:1 → ≈4.9:1 过 AA */
  --accent-strong:#4A32C9; /* P1 更深的紫，专喂 13px 小字，过 AA(≈7:1) */
  --num:#B7B0C6;        /* P1 装饰数字从 ≈1.3:1 提亮到可见档 */
}
/* 字体优先级：系统默认 → 自托管 woff2 → Google Fonts */
body{
  font-family:"PingFang SC","Microsoft YaHei","微软雅黑","Noto Sans SC Local","Noto Sans SC","Inter","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
}
/* 紫色小字改 --accent-strong 过 AA */
.hero__eyebrow{color:var(--accent-strong)}
.section__index{color:var(--accent-strong)}
.row__tag{color:var(--accent-strong)}
.art-hero__tag{color:var(--accent-strong)}
/* 图片网格流体化 */
.grid{width:100%;max-width:640px}
@media (max-width:680px){
  /* 窄屏三图改为「大图整行 + 两小图并排」：从 grid 切回 flex，大图改 4:3 横幅 */
  .g-3{display:flex;flex-wrap:wrap}
  .g-3__big{flex:1 1 100%;width:100%}
  .g-3__big img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
  .g-3__col{flex:1 1 100%;width:100%;flex-direction:row;flex-wrap:wrap}
  .g-3__col img{width:calc(50% - 4px);height:auto;aspect-ratio:1/1;object-fit:cover}
}
/* 按钮 hover/active 反馈 */
.btn-primary{cursor:pointer;transition:background .2s ease,transform .2s ease}
.btn-primary:hover{background:#000;transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.btn-ghost:hover{border-color:rgba(22,21,15,.4);background:rgba(22,21,15,.04);transform:translateY(-1px)}
.btn-ghost:active{transform:translateY(0)}
.more-btn{cursor:pointer}
.more-btn:active{transform:translateY(0);border-color:rgba(22,21,15,.5)}
.card__buy{cursor:pointer;transition:background .2s ease,transform .2s ease}
.card__buy:hover{background:#000;transform:translateY(-1px)}
.card__buy:active{transform:translateY(0)}
/* 尊重 reduced-motion（P0） */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .marquee__track{animation:none}
}

/* ============================================================
   个人页 person.html（/about）· 消费「主题设置 → 个人页面」
   版式复刻 moban8169 slider_area 全屏 hero；技能区 / 博客区
   沿用全站 .section 范式。色值/字号/间距一律取主题令牌。
   ============================================================ */

/* ---- 全屏 Hero ---- */
.person-hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:flex-end;
  padding-top:120px;padding-bottom:96px;
  overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#241F3D 0%,#463A78 52%,#6E56F7 128%);
}
.person-hero__media{position:absolute;inset:0;z-index:0}
.person-hero__img,.person-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.person-hero__img{animation:personKenBurns 24s ease-in-out infinite alternate;will-change:transform}
.person-hero__video{background:#000}
.person-hero__mask{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,17,12,.46) 0%,rgba(18,17,12,.28) 42%,rgba(18,17,12,.64) 100%);
}
@keyframes personKenBurns{from{transform:scale(1)}to{transform:scale(1.12)}}

.person-hero__content{position:relative;z-index:1;width:100%}
.person-hero__greeting{
  font-family:"Inter",sans-serif;font-weight:500;font-size:17px;
  letter-spacing:.14em;color:rgba(255,255,255,.85);
}
.person-hero__name{
  font-family:"Fraunces","Noto Sans SC",serif;font-weight:700;
  font-size:76px;line-height:1.06;margin-top:12px;
  text-shadow:0 10px 44px rgba(0,0,0,.28);
}
.person-hero__rotator{position:relative;height:42px;margin-top:14px;min-width:6em}
.person-hero__word{
  position:absolute;left:0;top:0;white-space:nowrap;
  font-family:"Fraunces",serif;font-style:italic;font-weight:600;font-size:28px;
  color:#D9CEFF;opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s ease;
}
.person-hero__word.is-on{opacity:1;transform:none}
.person-hero__desc{margin-top:22px;font-size:17px;line-height:1.85;color:rgba(255,255,255,.82);max-width:560px}
.person-hero__links{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.person-hero__link{
  width:48px;height:48px;border-radius:50%;flex:none;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;
  font-family:"Inter","Noto Sans SC",sans-serif;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.person-hero__link:hover{transform:translateY(-3px);background:rgba(255,255,255,.22);border-color:#fff}
.person-hero__link .reicon{width:20px;height:20px}
.person-hero__link img{width:22px;height:22px;border-radius:4px;object-fit:cover}
.person-hero__link span{font-size:12px;font-weight:600}
.person-hero__scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.22em;color:rgba(255,255,255,.65);
}
.person-hero__scroll::after{
  content:"";width:1px;height:42px;
  background:linear-gradient(180deg,rgba(255,255,255,.75),transparent);
  animation:personScrollHint 2.2s ease-in-out infinite;
}
@keyframes personScrollHint{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ---- 技能区 ---- */
.person-skills{position:relative;overflow:hidden}
.person-skills__bg,.person-blog__bg{
  position:absolute;top:34px;left:50%;transform:translateX(-50%);
  font-family:"Inter",sans-serif;font-weight:800;font-size:180px;line-height:1;
  letter-spacing:.02em;color:transparent;
  -webkit-text-stroke:1px rgba(22,21,15,.08);
  white-space:nowrap;pointer-events:none;user-select:none;
}
.person-skills__eyebrow,.person-blog__eyebrow,.person-about__eyebrow{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-strong);font-weight:600;
}
.person-skills__grid{position:relative;margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.person-skills__icons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.person-skills__icon{
  aspect-ratio:1/1;background:var(--card);border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(22,21,15,.05);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s,border-color .24s;
}
.person-skills__icon:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 40px rgba(22,21,15,.1)}
.person-skills__icon img{width:42%;height:42%;object-fit:contain}
.person-skills__icon .reicon{width:34px;height:34px;color:var(--accent)}
.person-skills__bars{display:flex;flex-direction:column;gap:28px}
.person-skills__bar-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.person-skills__bar-label{font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.person-skills__bar-num{font-family:"JetBrains Mono","Inter",sans-serif;font-weight:700;font-size:15px;color:var(--accent)}
.person-skills__bar-track{margin-top:10px;height:8px;border-radius:999px;background:rgba(22,21,15,.07);overflow:hidden}
.person-skills__bar-fill{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#A18BFF);
  transition:width 1.2s cubic-bezier(.2,.8,.2,1);
}

/* ---- 博客区 ---- */
.person-blog{position:relative;overflow:hidden}
.person-blog .articles{position:relative}

/* ---- 关于正文区 ---- */
.person-about .person-body{margin-top:44px}
.person-about .prose{margin-left:0}

/* 封面兜底链最后一档：品牌渐变占位（无封面图且无默认图时） */
.row__thumb.is-fallback{background:linear-gradient(135deg,#6E56F7,#A18BFF)}

/* ============================================================
   专题首页 page_topic_home.html（/zhuanti）· NOIR 暗色电影风
   ============================================================ */

/* ---- NOIR 全屏 Hero ---- */
.topic-hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;color:#F6F2EA;background:#12110D;
}
/* 无图/无视频时的默认金色光晕 */
.topic-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 50% 38%,rgba(201,169,106,.30),transparent 58%);
  pointer-events:none;
}
.topic-hero__media{position:absolute;inset:0;z-index:1}
.topic-hero__img,.topic-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.topic-hero__img{animation:topicKenBurns 26s ease-in-out infinite alternate;will-change:transform}
.topic-hero__video{background:#000}
.topic-hero__mask{
  position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse at 50% 42%,rgba(18,17,12,.22) 0%,rgba(18,17,12,.70) 62%,rgba(12,11,8,.94) 100%);
}
@keyframes topicKenBurns{from{transform:scale(1.02)}to{transform:scale(1.14)}}

.topic-hero__inner{position:relative;z-index:3;max-width:880px}
.topic-hero__eyebrow{
  font-family:"Inter",sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.32em;color:#D8C79A;
}
.topic-hero__title{
  font-family:"Fraunces","Noto Sans SC",serif;font-weight:700;
  font-size:76px;line-height:1.1;margin-top:18px;
  text-shadow:0 8px 44px rgba(0,0,0,.45);
}
.topic-hero__desc{margin:22px auto 0;font-size:17px;line-height:1.95;color:rgba(246,242,234,.78);max-width:640px}
.topic-hero__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  margin-top:38px;height:52px;padding:0 34px;border-radius:999px;
  background:#F6F2EA;color:#16150F;font-weight:700;font-size:15px;letter-spacing:.04em;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.topic-hero__cta:hover{transform:translateY(-2px);background:#fff;box-shadow:0 20px 52px rgba(0,0,0,.45)}
.topic-hero__scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.22em;color:rgba(246,242,234,.6);
}
.topic-hero__scroll::after{
  content:"";width:1px;height:42px;
  background:linear-gradient(180deg,rgba(246,242,234,.75),transparent);
  animation:personScrollHint 2.2s ease-in-out infinite;
}

/* ---- 关于区 · about-area-two ---- */
.topic-about{padding-top:var(--space-section);padding-bottom:var(--space-section);background:var(--bg)}
.topic-about__inner{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:72px;align-items:center}
.topic-about__media{position:relative}
.topic-about__img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;
  box-shadow:0 30px 70px rgba(22,21,15,.18);
}
.topic-about__social{position:absolute;left:22px;bottom:22px;display:flex;gap:12px}
.topic-about__social-btn{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border:1px solid rgba(22,21,15,.08);color:var(--ink);
  font-family:"Inter","Noto Sans SC",sans-serif;font-size:12px;font-weight:600;
  box-shadow:0 10px 26px rgba(22,21,15,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.topic-about__social-btn:hover{transform:translateY(-3px);background:var(--accent);color:#fff}
.topic-about__social-btn .reicon{width:20px;height:20px}
.topic-about__social-btn img{width:22px;height:22px;object-fit:contain}
.topic-about__eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-strong);font-weight:600}
.topic-about__title{font-family:"Noto Sans SC","Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;font-size:44px;line-height:1.22;font-weight:700;margin-top:14px}
.topic-about__text{margin-top:18px;font-size:16px;line-height:1.95;color:var(--muted);white-space:pre-line}
.topic-about__progress{margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}
.topic-about__progress-title{
  font-family:"Inter",sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.22em;color:var(--muted-2);text-transform:uppercase;
}
.topic-rings{margin-top:24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.topic-ring{display:flex;flex-direction:column;align-items:center;gap:10px}
.topic-ring__dial{position:relative;width:96px;height:96px}
.topic-ring__dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.topic-ring__bg{fill:none;stroke:rgba(22,21,15,.08);stroke-width:8}
.topic-ring__fill{
  fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;
  transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1);
}
.topic-ring__num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono","Inter",sans-serif;font-weight:700;font-size:20px;color:var(--ink);
}
.topic-ring__label{font-size:13.5px;line-height:1.5;color:var(--muted);text-align:center}

/* ---- 精选文章轮播 ---- */
.topic-carousel__track{
  display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:44px;padding-bottom:8px;scrollbar-width:none;
}
.topic-carousel__track::-webkit-scrollbar{display:none}
.topic-carousel__track .card{scroll-snap-align:start;width:340px;flex:none;transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s}
.topic-carousel__track .card:hover{transform:translateY(-3px);box-shadow:0 24px 52px rgba(22,21,15,.12)}
.topic-carousel .card__photo{aspect-ratio:4/3}
.topic-carousel .card__photo a{display:block;width:100%;height:100%}
.topic-carousel .card__row{margin-top:14px}
.topic-carousel .card__price{
  font-family:"Noto Sans SC","Inter",sans-serif;font-weight:500;font-size:14px;
  letter-spacing:0;color:var(--muted);
}
.topic-carousel__nav{display:flex;gap:10px}
.topic-carousel__btn{
  width:46px;height:46px;border-radius:50%;flex:none;
  border:1px solid rgba(22,21,15,.14);background:#fff;color:var(--ink);
  font-size:17px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .2s,transform .2s,color .2s;
}
.topic-carousel__btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.topic-carousel__btn:disabled{opacity:.35;cursor:default}

/* ---- 专题分页时间轴 ---- */
.topic-timeline__grid{position:relative}
.topic-timeline__idx{
  font-family:"Fraunces",serif;font-weight:700;font-size:30px;line-height:1;
  color:var(--num);min-width:52px;
}
.topic-pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topic-pager__btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 20px;border-radius:999px;
  background:#fff;border:1px solid rgba(22,21,15,.12);
  font-size:14px;font-weight:500;color:var(--ink);
  transition:border-color .2s,transform .2s,background .2s;
}
.topic-pager__btn:hover{border-color:rgba(22,21,15,.34);transform:translateY(-1px)}
.topic-pager__btn.is-disabled{opacity:.4;cursor:default}
.topic-pager__btn.is-disabled:hover{transform:none;border-color:rgba(22,21,15,.12)}
.topic-pager__count{font-size:13px;color:var(--muted-2);padding:0 4px;font-variant-numeric:tabular-nums}

/* 卡片封面兜底（品牌渐变占位） */
.card__photo.is-fallback{background:linear-gradient(135deg,#6E56F7,#A18BFF)}

/* ---- 通用二维码弹窗（person.html links 二维码附件） ---- */
.qr-modal{
  position:fixed;inset:0;z-index:240;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(18,17,12,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .24s ease;
}
.qr-modal.is-on{opacity:1;pointer-events:auto}
.qr-modal__backdrop{position:absolute;inset:0}
.qr-modal__card{
  position:relative;max-width:min(88vw,360px);
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px 28px 22px;
  box-shadow:0 30px 80px rgba(22,21,15,.3);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transform:translateY(12px) scale(.985);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.qr-modal.is-on .qr-modal__card{transform:none}
.qr-modal__img{
  display:block;width:min(72vw,260px);height:auto;
  border-radius:10px;background:#fff;border:1px solid var(--line);
}
.qr-modal__tip{font-size:13.5px;color:var(--muted)}
.qr-modal__close{
  position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,transform .2s;
}
.qr-modal__close:hover{background:var(--bg);color:var(--ink);transform:rotate(90deg)}

/* 锚点目标避开 sticky 导航 */
#skills,#blogs,#about,#noirCarousel,#topics{scroll-margin-top:96px}

/* ============================================================
   个人页 / 专题首页 · 响应式（1440 / 1280 / 900 / 640 / 390）
   ============================================================ */
@media (max-width:1440px){
  .person-skills__bg,.person-blog__bg{font-size:150px}
  .topic-about__inner{gap:56px}
}
@media (max-width:1280px){
  .person-hero__name{font-size:64px}
  .topic-hero__title{font-size:64px}
  .person-skills__grid{gap:44px}
  .topic-rings{grid-template-columns:repeat(2,1fr);gap:24px}
  .topic-about__inner{gap:44px}
}
@media (max-width:900px){
  .person-hero{padding-top:104px;padding-bottom:96px}
  .person-hero__name{font-size:54px}
  .person-hero__word{font-size:24px}
  .person-hero__rotator{height:36px}
  .person-skills__grid{grid-template-columns:1fr;gap:44px}
  .person-skills__icons{max-width:440px}
  .topic-hero__title{font-size:52px}
  .topic-about__inner{grid-template-columns:1fr;gap:40px}
  .topic-about__media{max-width:440px}
  .topic-carousel__track .card{width:300px}
  .topic-timeline__idx{font-size:24px;min-width:44px}
}
@media (max-width:640px){
  .person-hero{padding-top:96px;padding-bottom:104px}
  .person-hero__name{font-size:44px}
  .person-hero__greeting{font-size:15px}
  .person-hero__word{font-size:20px}
  .person-hero__rotator{height:30px}
  .person-hero__desc{font-size:16px;margin-top:18px}
  .person-hero__link{width:44px;height:44px}
  .person-hero__links{gap:12px;margin-top:28px}
  .person-skills__bg,.person-blog__bg{font-size:88px;top:18px}
  .person-skills__grid{margin-top:40px}
  .person-skills__icons{gap:12px;max-width:none}
  .person-skills__icon .reicon{width:28px;height:28px}
  .person-skills__bars{gap:20px}
  .topic-hero__title{font-size:40px}
  .topic-hero__desc{font-size:15px}
  .topic-hero__cta{height:48px;padding:0 26px}
  .topic-about{padding-top:72px;padding-bottom:72px}
  .topic-about__title{font-size:32px}
  .topic-rings{grid-template-columns:repeat(2,1fr);gap:18px}
  .topic-ring__dial{width:80px;height:80px}
  .topic-ring__num{font-size:17px}
  .topic-carousel__track{gap:16px}
  .topic-carousel__track .card{width:78vw}
  .qr-modal{padding:16px}
  .qr-modal__card{padding:22px 20px 18px}
}
@media (max-width:390px){
  /* 小屏收紧留白，让两列相册的单张尽可能大（原 161px 偏碎） */
  .wrap,.hero,.section,.section--feed,.footer,.page{padding-left:16px;padding-right:16px}
  .album-grid{gap:10px}
  .person-hero__name{font-size:38px}
  .topic-hero__title{font-size:34px}
  .topic-pager__btn{padding:0 15px;font-size:13px;height:40px}
  .person-skills__icon .reicon{width:24px;height:24px}
}
/* 窄屏：hover 高亮底板横向不再外扩
   原 inset:-14px -20px 的绝对定位伪元素即使 opacity:0 也计入 scrollWidth，会在窄屏撑出横向滚动条。
   本段必须在基础 .is-clickable 规则（约 701 行）之后，故置于文件末尾。 */
@media (max-width:640px){
  .is-clickable::before{inset:-14px 0}
  .card.is-clickable::before{inset:-10px 0}
}