/* ============================================================
余思鹏 YUSIPENG STUDIO — 设计令牌
取值严格对应画布设计稿
============================================================ */
:root{
color-scheme: dark;
/* 色彩 · 星空主题（取样自 bg-01-nebula-volumetric-light） */
--ink: #E9EEFF; /* 主文字：深空底上的冷白 */
--grey: #97A2C5; /* 正文次级文字 */
--mute: #626E96; /* 三级文字 / 占位 */
--line: #232B47; /* 发丝分割线 / 默认描边 */
--line-2: #313B5E; /* 次级描边 */
--brown: #9B8CFF; /* 强调色：星云紫（栏目标签 / 链接 / 草稿） */
--accent: #9B8CFF; /* 主强调 */
--accent-2: #4FD6DE; /* 次强调：极光青 */
--star: #DCE8FF; /* 星点 / 高光文字 */
--solid: linear-gradient(115deg, #8B6BFF 0%, #6F9DFF 50%, #4FD6DE 100%);
--on-solid: #05070E; /* 实心强调面上的文字 */
--bg: #06080F; /* 页面底 */
--footer: #04060C; /* 页脚底 */
--paper: #0A0E1A; /* 次级区块底色 */
--surface: #0E1322; /* 卡片 / 面板底 */
--surface-2:#151B2E; /* 抬升面 / 输入框 */
--media-bg: #0B0F1C; /* 图片占位底 */
--hover: #1B2340; /* 悬停底 */
--dark-line:rgba(255,255,255,.10); /* 深色区分割线 */
--on-dark: #C6D1EE; /* 深色区文字 */
/* 圆角：设计稿几乎为零，媒体 0 / 控件 2 */
--r: 2px;
/* 间距标度 */
--pad-page: 96px; /* 页面左右留白 */
--pad-side: 32px; /* 后台主区左右留白 */
--pad-bar: 20px; /* 侧边栏左右留白 */
/* 字体 */
--serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
--sans: "Sarasa Gothic SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
--mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, ui-monospace, monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
min-width:1440px;
background:var(--bg);
color:var(--ink);
font-family:var(--sans);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ text-decoration:none; color:inherit; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
p{ margin:0; }
h1,h2,h3,figure,blockquote{ margin:0; }
.mono{ font-family:var(--mono); }
/* 通用图片容器 */
.media{ position:relative; overflow:hidden; background:var(--media-bg); cursor:zoom-in; }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.media:hover img{ transform:scale(1.03); }
/* 通用按钮 */
.btn-solid{
display:inline-flex; align-items:center;
padding:12px 24px; border-radius:var(--r);
background:var(--solid); color:var(--on-solid);
font-size:14px; font-weight:600; line-height:1.2;
transition:opacity .2s;
}
.btn-solid:hover{ opacity:.85; }
.btn-white{
display:inline-flex; align-items:center;
padding:14px 28px; border-radius:var(--r);
background:var(--solid); color:var(--on-solid);
font-size:14px; font-weight:600; line-height:1.2;
transition:opacity .2s;
}
.btn-white:hover{ opacity:.85; }
/* ============================================================
顶部导航 Masthead padding 28/96 gap48
============================================================ */
.masthead{
display:flex; align-items:center; justify-content:space-between;
gap:48px; padding:28px var(--pad-page);
background:var(--surface); position:sticky; top:0; z-index:50;
}
.brand{ display:flex; align-items:baseline; gap:12px; }
.brand-cn{ font-family:var(--serif); font-weight:900; font-size:24px; line-height:1; color:var(--ink); }
.brand-en{ font-family:var(--mono); font-size:11px; letter-spacing:1.2px; color:var(--grey); }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-link{
font-size:14px; color:var(--grey); line-height:1.2;
transition:color .2s;
}
.nav-link:hover{ color:var(--ink); }
.nav-link.is-active{ color:var(--ink); font-weight:600; }
.nav-right{ display:flex; align-items:center; gap:22px; }
.icon-btn{ display:inline-flex; }
.nav-cta{ padding:12px 24px; }
.rule-line{ height:1px; width:100%; background:var(--line); }
/* ============================================================
Hero 主视觉区 padding 72/96/80 gap56
============================================================ */
.hero{
display:flex; align-items:flex-start; gap:56px;
padding:72px var(--pad-page) 80px; background:var(--surface);
}
.hero-left{ width:520px; flex:0 0 520px; display:flex; flex-direction:column; gap:24px; }
.kicker{
font-family:var(--mono); font-size:11px; letter-spacing:1.4px;
color:var(--brown); line-height:1.4;
}
.hero-title{
font-family:var(--serif); font-weight:900; font-size:58px;
line-height:70px; color:var(--ink);
}
.hero-dek{ font-size:15px; line-height:28px; color:var(--grey); }
.hero-cta{ display:flex; align-items:center; gap:24px; }
.btn-ghost{
display:inline-flex; align-items:center; gap:8px;
font-size:14px; color:var(--ink); line-height:1.2;
border-bottom:1px solid transparent; transition:border-color .2s;
}
.btn-ghost:hover{ border-bottom-color:var(--ink); }
/* Hero 影像列：纵向 gap14，整体下沉 64px */
.hero-right{ flex:1 1 auto; min-width:0; padding-top:64px; display:flex; flex-direction:column; gap:14px; }
.hero-media{ width:100%; height:600px; }
.caption-row{
display:flex; align-items:center; justify-content:space-between;
font-family:var(--mono); font-size:11px; color:var(--grey);
}
.caption-dim{ color:var(--mute); }
.stats-row{ display:flex; gap:44px; padding-top:28px; }
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat-num{ font-family:var(--mono); font-size:22px; color:var(--ink); line-height:1.2; }
.stat-label{ font-size:12px; color:var(--grey); line-height:1.2; }
/* ============================================================
作品画廊区 gap36
============================================================ */
.gallery{ display:flex; flex-direction:column; gap:36px; background:var(--surface); }
.section-head{
display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
padding:64px var(--pad-page) 0;
}
.section-head-text{ width:600px; flex:0 0 600px; display:flex; flex-direction:column; gap:12px; }
.section-title{ font-family:var(--serif); font-weight:900; font-size:44px; line-height:52px; color:var(--ink); }
.section-sub{ font-size:15px; line-height:26px; color:var(--grey); }
.filter-tabs{ display:flex; align-items:center; gap:8px; }
.chip{
display:inline-flex; align-items:center;
padding:8px 18px; border-radius:var(--r);
border:1px solid var(--line); background:transparent;
font-size:13px; color:var(--ink); line-height:1.2;
transition:background .2s,color .2s,border-color .2s;
}
.chip:hover{ border-color:var(--ink); }
.chip-active{ background:var(--solid); color:var(--on-solid); border-color:transparent; font-weight:600; }
/* 分类跳转标签：位置与尺寸与筛选标签一致，仅多一枚极小的 ↗ 提示可进入专属合集页 */
.chip-link{ text-decoration:none; cursor:pointer; }
.chip-link::after{ content:"→"; display:inline-block; margin-left:6px; font-size:11px; line-height:1; opacity:.55; }
.chip-link:hover{ background:var(--solid); color:var(--on-solid); border-color:transparent; }
.chip-link:hover::after{ opacity:.85; }
.gallery-row{
display:flex; gap:20px; padding:0 var(--pad-page);
align-items:flex-start;
}
.work-card{ display:flex; flex-direction:column; gap:14px; transition:opacity .3s; }
.work-card > .media{ width:100%; height:480px; }
/* 行型一 A：780 + 448 + gap20 = 1248，图高 480 */
.row-a > .work-card:nth-child(1){ flex:0 0 780px; width:780px; }
.row-a > .work-card:nth-child(2){ flex:0 0 448px; width:448px; }
/* 行型二 B：400 + 400 + 408 + gap40 = 1248，图高 520 */
.row-b > .work-card:nth-child(1),
.row-b > .work-card:nth-child(2){ flex:0 0 400px; width:400px; }
.row-b > .work-card:nth-child(3){ flex:0 0 408px; width:408px; }
.row-b > .work-card > .media{ height:520px; }
/* 行型三 C：单张通栏 1248，图高 560 */
.row-c > .work-card{ flex:1 1 auto; width:auto; min-width:0; }
.row-c > .work-card > .media{ height:560px; }
.work-card.is-hidden{ display:none; }
/* 影片封面装饰 */
.play-btn{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
display:flex; align-items:center; justify-content:center;
background:var(--solid); color:var(--on-solid); border-radius:50%;
box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 10px 34px rgba(124,92,255,.45);
pointer-events:none; transition:transform .3s;
}
.play-lg{ width:72px; height:72px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.play-xl{ width:88px; height:88px; box-shadow:0 8px 28px rgba(0,0,0,.18); }
.media:hover .play-btn{ transform:translate(-50%,-50%) scale(1.06); }
.duration-badge{
position:absolute; right:23px; bottom:17px;
padding:5px 10px; border-radius:var(--r);
background:var(--solid); color:var(--on-solid);
font-family:var(--mono); font-size:11px; line-height:1.2;
}
/* 图注块 */
.work-meta{ display:flex; flex-direction:column; gap:6px; }
.work-title{ font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.3; color:var(--ink); }
.work-info{ font-family:var(--mono); font-size:11px; letter-spacing:.4px; color:var(--grey); }
.more-row{
display:flex; align-items:center; gap:8px;
padding:8px var(--pad-page) 96px;
}
.more-text{ font-size:14px; font-weight:600; color:var(--ink); }
/* ============================================================
关于摄影师区 padding 96 gap72 bg 星云半透暗面
============================================================ */
.about{
display:flex; align-items:flex-start; gap:72px;
padding:96px var(--pad-page); background:var(--paper);
}
.about-left{ width:480px; flex:0 0 480px; display:flex; flex-direction:column; gap:14px; }
.about-portrait{ width:100%; height:600px; }
.portrait-caption{ font-family:var(--mono); font-size:11px; color:var(--grey); }
.about-right{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:22px; }
.about-title{ font-family:var(--serif); font-weight:900; font-size:40px; line-height:48px; color:var(--ink); }
.about-p{ font-size:15px; line-height:28px; color:var(--grey); }
.quote{ display:flex; gap:20px; }
.quote-rule{ width:2px; flex:0 0 2px; background:var(--brown); align-self:stretch; }
.quote-text{
flex:1 1 auto; font-family:var(--serif); font-size:22px;
line-height:38px; color:var(--ink);
}
.quote-sig{ font-family:var(--mono); font-size:11px; color:var(--grey); }
.mini-title{ font-size:13px; font-weight:600; color:var(--ink); }
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
display:inline-flex; align-items:center;
padding:6px 14px; border-radius:var(--r);
border:1px solid var(--line-2);
font-family:var(--mono); font-size:11px; line-height:1.2; color:var(--ink);
}
.brand-row{ display:flex; align-items:center; flex-wrap:wrap; gap:28px; }
.brand-item{ font-size:12px; color:var(--grey); line-height:1.2; }
.brand-item.mono{ font-family:var(--mono); letter-spacing:.8px; }
/* ============================================================
页脚 padding 80/96/40 gap48 bg #04060C
============================================================ */
.footer{
display:flex; flex-direction:column; gap:48px;
padding:80px var(--pad-page) 40px; background:var(--footer);
}
.footer-top{ display:flex; align-items:flex-end; justify-content:space-between; }
.footer-brand{ display:flex; flex-direction:column; gap:10px; }
.footer-mark{ font-family:var(--serif); font-weight:900; font-size:52px; line-height:60px; color:var(--star); }
.footer-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.8px; color:var(--mute); }
.footer-rule{ height:1px; width:100%; background:var(--dark-line); }
.footer-cols{ display:flex; gap:40px; }
.footer-col{ width:282px; flex:0 0 282px; display:flex; flex-direction:column; gap:14px; }
.footer-col-title{ font-family:var(--mono); font-size:11px; letter-spacing:1.2px; color:var(--grey); }
.footer-link{ font-size:14px; color:var(--on-dark); line-height:1.2; transition:opacity .2s; }
.footer-link:hover{ opacity:.7; }
.footer-link.mono{ font-family:var(--mono); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; }
.footer-copy{ font-family:var(--mono); font-size:11px; color:var(--grey); }
.footer-social{ display:flex; gap:20px; }
.footer-social-item{ font-size:11px; color:var(--on-dark); transition:opacity .2s; }
.footer-social-item:hover{ opacity:.7; }
.footer-social-item.mono{ font-family:var(--mono); letter-spacing:.8px; }
/* ============================================================
灯箱
============================================================ */
.lightbox{
position:fixed; inset:0; z-index:200;
background:rgba(3,5,10,.95);
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:20px; padding:48px;
opacity:0; visibility:hidden; transition:opacity .25s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lb-stage{ position:relative; }
.lb-img{
max-width:min(1100px, 78vw); max-height:74vh; width:auto;
object-fit:contain; border-radius:var(--r);
}
.lb-close{
position:absolute; top:28px; right:32px; display:inline-flex;
padding:8px; border-radius:var(--r); color:var(--star);
}
.lb-close:hover{ background:rgba(255,255,255,.1); }
.lb-player{ display:none; }
.lightbox.is-video .lb-player{ display:block; }
.lb-bar{ margin-top:18px; height:2px; width:100%; background:rgba(255,255,255,.22); border-radius:1px; overflow:hidden; }
.lb-bar-fill{ height:100%; width:0; background:var(--accent-2); }
.lb-time{ margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--grey); text-align:right; }
.lb-caption{ display:flex; align-items:baseline; gap:16px; }
.lb-title{ font-family:var(--serif); font-size:18px; color:var(--star); }
.lb-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.4px; color:var(--grey); }
/* ============================================================
提示 Toast
============================================================ */
.toast{
position:fixed; left:50%; bottom:40px; transform:translate(-50%,16px);
z-index:300; padding:12px 22px; border-radius:var(--r);
background:var(--solid); color:var(--on-solid);
font-size:13px; line-height:1.2;
opacity:0; visibility:hidden; transition:opacity .25s, transform .25s;
pointer-events:none;
}
.toast.is-open{ opacity:1; visibility:visible; transform:translate(-50%,0); }
/* ============================================================
后台 · 侧边栏 width240 padding 24/20 gap28
============================================================ */
.page-admin body, body.is-admin{ background:var(--paper); }
.admin-shell{ display:flex; align-items:stretch; background:var(--paper); min-height:100vh; }
.sidebar{
width:240px; flex:0 0 240px;
display:flex; flex-direction:column; gap:28px;
padding:24px var(--pad-bar);
background:var(--surface); border-right:1px solid var(--line);
}
.sb-brand{ display:flex; flex-direction:column; gap:6px; }
.sb-name{ font-family:var(--serif); font-weight:700; font-size:20px; line-height:1.2; color:var(--ink); }
.sb-sub{ font-family:var(--mono); font-size:10px; letter-spacing:1.2px; color:var(--mute); }
.sb-nav{ display:flex; flex-direction:column; gap:4px; }
.sb-item{
display:flex; align-items:center; gap:12px;
padding:10px 12px; border-radius:var(--r);
font-size:14px; color:var(--grey); line-height:1.2;
transition:background .2s,color .2s;
}
.sb-item:hover{ background:var(--hover); }
.sb-item.is-active{ background:var(--hover); color:var(--ink); font-weight:600; }
.sb-spacer{ flex:1 1 auto; }
.store-card{
display:flex; flex-direction:column; gap:10px;
padding:16px; border-radius:var(--r); background:var(--paper);
}
.store-title{ font-size:12px; font-weight:600; color:var(--ink); }
.store-bar{ height:6px; width:100%; border-radius:3px; background:var(--line); overflow:hidden; }
.store-bar-fill{ height:6px; width:118px; border-radius:3px; background:var(--accent); transition:width .3s; }
.store-text{ font-family:var(--mono); font-size:11px; color:var(--grey); }
/* ============================================================
后台 · 主区 padding 28/32/32 gap24
============================================================ */
.admin-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:24px; padding:28px var(--pad-side) 32px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; }
.tb-left{ display:flex; flex-direction:column; gap:6px; }
.tb-title{ font-family:var(--serif); font-weight:700; font-size:28px; line-height:1.2; color:var(--ink); }
.tb-sub{ font-family:var(--mono); font-size:11px; color:var(--grey); }
.tb-right{ display:flex; align-items:center; gap:12px; }
.search-box{
display:flex; align-items:center; gap:8px;
width:280px; padding:9px 14px; border-radius:var(--r);
background:var(--surface); border:1px solid var(--line);
color:var(--mute);
}
.search-box input{
flex:1 1 auto; min-width:0; border:none; outline:none; background:transparent;
font-family:var(--sans); font-size:13px; color:var(--ink);
}
.search-box input::placeholder{ color:var(--mute); }
.btn-up{ display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:var(--r); background:var(--solid); color:var(--on-solid); font-size:13px; font-weight:600; transition:opacity .2s; }
.btn-up:hover{ opacity:.85; }
/* 导入标签选择条（先选分类，再拖文件） */
.import-bar{
display:flex; flex-direction:column; gap:12px;
padding:16px 20px; border-radius:var(--r);
background:var(--surface); border:1px solid var(--line);
}
.import-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.import-title{ font-size:13px; font-weight:600; color:var(--ink); }
.import-hint{ font-size:12px; color:var(--grey); }
.import-tags{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tag-chip{
display:inline-flex; align-items:center;
padding:7px 14px; border-radius:var(--r);
border:1px solid var(--line); background:transparent;
font-size:12px; color:var(--ink); line-height:1.2;
transition:background .2s,color .2s,border-color .2s;
}
.tag-chip:hover{ border-color:var(--ink); }
.tag-chip.is-active{ background:var(--solid); color:var(--on-solid); border-color:transparent; font-weight:600; }
.tag-add{ color:var(--brown); border-color:var(--brown); }
.tag-add:hover{ background:var(--solid); color:var(--on-solid); border-color:transparent; }
/* 作品库：按分类查看 */
.cat-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:4px 0 2px; }
.cat-bar-label{ font-size:12px; color:var(--grey); }
.cat-bar-tags{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cat-bar-link{ font-size:12px; color:var(--brown); text-decoration:none; }
.cat-bar-link:hover{ text-decoration:underline; }
/* 拖拽上传区 */
.dropzone{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
height:180px; border-radius:var(--r);
background:var(--surface); border:1px dashed var(--line-2);
transition:background .2s,border-color .2s;
cursor:pointer;
}
.dropzone.is-over{ background:rgba(155,140,255,.10); border-color:var(--accent); border-style:solid; }
.dz-title{ font-size:16px; font-weight:600; color:var(--ink); }
.dz-sub{ font-size:12px; color:var(--grey); }
.btn-outline{ display:inline-flex; align-items:center; padding:9px 22px; border-radius:var(--r); border:1px solid var(--ink); font-size:13px; font-weight:600; color:var(--ink); transition:background .2s,color .2s; }
.btn-outline:hover{ background:var(--solid); color:var(--on-solid); }
/* 筛选工具栏 */
.toolbar{ display:flex; align-items:center; justify-content:space-between; }
.tool-tabs{ display:flex; align-items:center; gap:8px; }
.tool-chip{ display:inline-flex; align-items:center; padding:7px 16px; border-radius:var(--r); border:1px solid var(--line); font-size:12px; color:var(--ink); transition:background .2s,color .2s,border-color .2s; }
.tool-chip:hover{ border-color:var(--ink); }
.tool-chip.is-active{ background:var(--solid); color:var(--on-solid); border-color:transparent; font-weight:600; }
.sort-row{ display:flex; align-items:center; gap:14px; }
.sort-text{ font-size:12px; color:var(--grey); }
.view-btn{ display:inline-flex; padding:2px; border-radius:var(--r); }
.view-btn:hover{ background:var(--hover); }
/* 素材网格 + 编辑面板 */
.content-row{ display:flex; gap:24px; align-items:flex-start; }
.asset-grid{
flex:1 1 auto; min-width:0;
display:flex; flex-wrap:wrap; gap:16px; align-content:flex-start;
}
.asset-card{
width:240px; flex:0 0 240px;
display:flex; flex-direction:column;
border-radius:var(--r); background:var(--surface);
border:1px solid var(--line);
overflow:hidden; cursor:pointer;
transition:border-color .2s;
}
.asset-card:hover{ border-color:var(--line-2); }
.asset-card.is-selected{ border:2px solid var(--accent); }
.asset-thumb{ position:relative; width:100%; height:176px; background:var(--media-bg); overflow:hidden; }
.asset-thumb img{ width:100%; height:100%; object-fit:cover; }
.check-badge{
position:absolute; left:10px; top:10px;
width:22px; height:22px; border-radius:11px;
background:var(--solid); color:var(--on-solid); display:none;
align-items:center; justify-content:center;
}
.asset-card.is-selected .check-badge{ display:flex; }
.play-sm{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:44px; height:44px; border-radius:22px;
background:var(--solid); color:var(--on-solid);
display:flex; align-items:center; justify-content:center;
}
.dur-sm{ position:absolute; right:21px; bottom:12px; padding:3px 8px; border-radius:var(--r); background:var(--solid); color:var(--on-solid); font-family:var(--mono); font-size:10px; }
.asset-info{ display:flex; flex-direction:column; gap:5px; padding:12px; min-width:0; }
.asset-title{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.asset-meta{ font-family:var(--mono); font-size:10px; color:var(--grey); }
.asset-meta.is-draft{ color:var(--brown); }
.asset-card.is-hidden{ display:none; }
/* 编辑面板 width360 padding20 gap14 */
.edit-panel{
width:360px; flex:0 0 360px;
display:flex; flex-direction:column; gap:14px;
padding:20px; border-radius:var(--r);
background:var(--surface); border:1px solid var(--line);
}
.ep-head{ display:flex; align-items:center; justify-content:space-between; }
.ep-title{ font-family:var(--serif); font-weight:700; font-size:18px; line-height:1.2; color:var(--ink); }
.ep-close{ display:inline-flex; padding:2px; border-radius:var(--r); }
.ep-close:hover{ background:var(--hover); }
.ep-preview{ position:relative; width:100%; height:200px; border-radius:var(--r); overflow:hidden; background:var(--media-bg); }
.ep-preview img{ width:100%; height:100%; object-fit:cover; }
.ep-change{ font-size:12px; color:var(--brown); cursor:pointer; align-self:flex-start; }
.ep-change:hover{ text-decoration:underline; }
.field-label{ font-size:12px; font-weight:600; color:var(--ink); }
.field{
display:flex; align-items:center; gap:8px;
padding:10px 12px; border-radius:var(--r);
background:var(--surface); border:1px solid var(--line);
transition:border-color .2s;
}
.field:focus-within{ border-color:var(--accent); }
.field input{
flex:1 1 auto; min-width:0; border:none; outline:none; background:transparent;
font-family:var(--sans); font-size:13px; color:var(--ink); width:100%;
}
.field input.mono{ font-family:var(--mono); }
.field-area{ display:flex; padding:10px 12px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); transition:border-color .2s; }
.field-area:focus-within{ border-color:var(--ink); }
.field-area textarea{
flex:1 1 auto; border:none; outline:none; resize:none; background:transparent;
font-family:var(--sans); font-size:13px; line-height:22px; color:var(--ink);
min-height:88px;
}
.ep-row{ display:flex; gap:8px; flex-wrap:wrap; }
.ep-chip{ display:inline-flex; align-items:center; padding:6px 14px; border-radius:var(--r); border:1px solid var(--line-2); font-size:12px; color:var(--ink); transition:background .2s,color .2s,border-color .2s; }
.ep-chip:hover{ border-color:var(--ink); }
.ep-chip.is-active{ background:var(--solid); color:var(--on-solid); border-color:transparent; font-weight:600; }
.ep-tag{ display:inline-flex; align-items:center; padding:6px 12px; border-radius:var(--r); border:1px solid var(--line-2); font-size:12px; color:var(--grey); }
.ep-add{ display:inline-flex; align-items:center; padding:6px 12px; border-radius:var(--r); border:1px solid var(--line-2); font-size:12px; color:var(--brown); cursor:pointer; }
.ep-add input{ width:72px; border:none; outline:none; background:transparent; font-family:var(--sans); font-size:12px; color:var(--brown); }
.vis-row{ display:flex; align-items:center; justify-content:space-between; }
.vis-text{ font-size:13px; color:var(--ink); }
.switch{
width:40px; height:22px; padding:2px; border-radius:11px;
background:var(--ink); display:flex; align-items:center; justify-content:flex-end;
cursor:pointer; transition:background .2s,justify-content .2s;
}
.switch.is-off{ background:var(--line-2); justify-content:flex-start; }
.switch-dot{ width:18px; height:18px; border-radius:9px; background:var(--surface); }
.btn-block{ display:flex; align-items:center; justify-content:center; padding:12px; border-radius:var(--r); }
.btn-save{ background:var(--solid); color:var(--on-solid); font-size:14px; font-weight:600; transition:opacity .2s; }
.btn-save:hover{ opacity:.85; }
.btn-del{ border:1px solid var(--line); color:var(--grey); font-size:13px; padding:11px; transition:color .2s,border-color .2s; }
.btn-del:hover{ color:var(--ink); border-color:var(--ink); }
.ep-hint{ font-family:var(--mono); font-size:10px; color:var(--mute); }
.empty-hint{ font-size:13px; color:var(--grey); padding:24px 0; }
/* ============================================================
演示用页面切换（非设计稿内容，可在 HTML 中直接删除该元素）
============================================================ */
.page-switch{
position:fixed; right:24px; bottom:24px; z-index:150;
padding:10px 16px; border-radius:var(--r);
background:var(--surface); border:1px solid var(--line);
font-family:var(--mono); font-size:11px; letter-spacing:.4px; color:var(--ink);
box-shadow:0 4px 16px rgba(0,0,0,.06);
transition:border-color .2s;
}
.page-switch:hover{ border-color:var(--ink); }
/* ============================================================
后台 · 通用编辑构件（沿用同一套设计令牌）
============================================================ */
.field-block{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field-hint{ font-family:var(--mono); font-size:10px; color:var(--mute); line-height:1.5; }
.panel{
display:flex; flex-direction:column; gap:14px;
padding:20px; border-radius:var(--r);
background:var(--surface); border:1px solid var(--line);
}
.panel-desc{ font-size:12px; color:var(--grey); margin-top:-8px; }
.panel-body{ display:flex; flex-direction:column; gap:14px; }
.cols-stack{ display:flex; flex-direction:column; gap:24px; }
.list-editor{ display:flex; flex-direction:column; gap:8px; }
.list-item{ display:flex; align-items:center; gap:8px; }
.list-item .field{ flex:1 1 auto; }
.mini-del{
width:28px; height:28px; flex:0 0 28px;
display:inline-flex; align-items:center; justify-content:center;
border:1px solid var(--line); border-radius:var(--r);
color:var(--grey); transition:color .2s,border-color .2s;
}
.mini-del:hover{ color:var(--ink); border-color:var(--ink); }
.btn-add{
align-self:flex-start; display:inline-flex; align-items:center;
padding:8px 16px; border-radius:var(--r);
border:1px dashed var(--line-2); color:var(--brown);
font-size:12px; transition:border-color .2s,border-style .2s;
}
.btn-add:hover{ border-color:var(--brown); }
.btn-add input{ width:88px; border:none; outline:none; background:transparent; font-family:var(--sans); font-size:12px; color:var(--brown); }
.count-badge{
flex:0 0 auto; padding:5px 10px; border-radius:var(--r);
background:var(--paper); border:1px solid var(--line);
font-family:var(--mono); font-size:10px; color:var(--grey);
}
.tag-x{ margin-left:4px; color:var(--mute); cursor:pointer; }
.tag-x:hover{ color:var(--ink); }
.save-bar{ display:flex; align-items:center; gap:16px; }
.note{ font-size:12px; color:var(--grey); line-height:1.5; }
/* 预约列表 */
.table-row{
display:grid; grid-template-columns:170px 1fr 110px 100px 96px 28px;
align-items:center; gap:16px;
padding:14px 0; border-bottom:1px solid var(--line);
}
.table-row.is-head{ padding:8px 0; font-family:var(--mono); font-size:11px; letter-spacing:1.2px; color:var(--grey); }
.cell{ font-size:13px; color:var(--ink); min-width:0; }
.cell.mono{ font-family:var(--mono); color:var(--grey); }
.cell.strong{ font-weight:600; }
.status-select{
width:100%; padding:5px 8px; border-radius:var(--r);
border:1px solid var(--line-2); background:var(--surface);
font-family:var(--sans); font-size:12px; color:var(--ink);
outline:none;
}
.status-select:focus{ border-color:var(--ink); }
/* 页脚链接列编辑 */
.col-list{ display:flex; flex-direction:column; gap:16px; }
.col-item{
display:flex; flex-direction:column; gap:8px;
padding:14px; border-radius:var(--r);
background:var(--paper); border:1px solid var(--line);
}
.panel-body > .btn-solid, .panel-body > .save-bar, .save-bar > .btn-solid, .cols-stack > .save-bar{ align-self:flex-start; }
/* 后台左下角：避开右侧编辑面板 */
.is-admin .page-switch{ left:264px; right:auto; }
/* ============================================================
访问控制 · 密码门（前台弹窗与后台锁屏共用）
沿用同一套令牌：卡片圆角 2px、无阴影、发丝线分层
============================================================ */
.gate{
position:fixed; inset:0; z-index:200;
display:flex; align-items:center; justify-content:center;
background:rgba(4,6,12,.88);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
animation:gateFade .18s ease both;
}
.gate.is-closing{ animation:gateFade .18s ease reverse both; }
.gate.is-passing .gate-card{ transform:translateY(-6px); opacity:0; }
.gate-card{
width:420px; padding:36px;
background:var(--surface); border-radius:var(--r);
display:flex; flex-direction:column; gap:0;
animation:gateRise .22s cubic-bezier(.22,.61,.36,1) both;
transition:transform .2s ease, opacity .2s ease;
}
.gate-kicker{
font-family:var(--mono); font-size:10px; letter-spacing:1.4px;
color:var(--brown); margin-bottom:14px;
}
.gate-title{
font-family:var(--serif); font-weight:900; font-size:26px;
line-height:32px; color:var(--ink); margin-bottom:10px;
}
.gate-desc{
font-size:13px; line-height:22px; color:var(--grey);
margin-bottom:24px;
}
.gate-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.gate-label{ font-size:12px; font-weight:600; color:var(--ink); }
.gate-input-wrap{
display:flex; align-items:center; gap:8px;
height:46px; padding:0 12px;
border:1px solid var(--line); border-radius:var(--r);
background:var(--surface); transition:border-color .18s;
}
.gate-input-wrap:focus-within{ border-color:var(--ink); }
.gate-input{
flex:1 1 auto; min-width:0; height:44px;
border:none; outline:none; background:transparent;
font-family:var(--mono); font-size:14px; letter-spacing:1px; color:var(--ink);
}
.gate-input::placeholder{ font-family:var(--sans); letter-spacing:0; color:var(--mute); }
.gate-input:disabled{ color:var(--mute); }
.gate-eye{
flex:0 0 auto; display:inline-flex; padding:4px;
opacity:.75; transition:opacity .18s;
}
.gate-eye:hover{ opacity:1; }
.gate-remember{
display:flex; align-items:center; gap:8px;
margin:2px 0 20px;
font-size:12px; color:var(--grey); cursor:pointer; user-select:none;
}
.gate-remember input{ accent-color:var(--accent); width:14px; height:14px; margin:0; }
.gate-submit{
width:100%; padding:13px 0;
border-radius:var(--r); background:var(--solid); color:var(--on-solid);
font-family:var(--sans); font-size:14px; font-weight:600;
transition:opacity .18s;
}
.gate-submit:hover{ opacity:.86; }
.gate-submit:disabled{ opacity:.4; cursor:not-allowed; }
.gate-submit.is-busy{ opacity:.6; cursor:progress; }
.gate-alert{
height:0; overflow:hidden; margin-top:0;
font-family:var(--mono); font-size:11px; line-height:16px;
color:var(--brown); transition:height .18s, margin-top .18s;
}
.gate-alert.is-open{ height:16px; margin-top:12px; }
.gate-alert.is-error{ color:var(--brown); }
.gate-foot{
display:flex; align-items:center; justify-content:space-between;
margin-top:24px; padding-top:16px; border-top:1px solid var(--line);
}
.gate-back{
font-size:12px; color:var(--grey); transition:color .18s;
}
.gate-back:hover{ color:var(--ink); }
.gate-foot-note{ font-size:10px; letter-spacing:.8px; color:var(--mute); }
@keyframes gateFade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes gateRise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
/* 后台锁屏：遮住整个 shell，不渲染任何后台内容 */
body.is-locked{ min-height:100vh; background:var(--ink); }
body.is-locked .admin-shell{ display:none; }
body.is-locked .page-switch{ display:none; }
.gate.gate-locked{ background:var(--ink); }
/* 侧栏退出登录 */
.sb-item.sb-logout{ margin-top:8px; color:var(--grey); }
.sb-item.sb-logout:hover{ color:var(--ink); }
/* ============================================================
首页「分类索引」区块 卡片 297 × 4 + gap20 = 1248
============================================================ */
.collections{ display:flex; flex-direction:column; }
.coll-row{
display:flex; gap:20px; align-items:flex-start;
padding:36px var(--pad-page) 88px;
}
.coll-card{ flex:0 0 297px; width:297px; display:flex; flex-direction:column; gap:12px; }
.coll-card > .media{ width:100%; height:340px; }
.coll-en{ font-family:var(--mono); font-size:11px; letter-spacing:.6px; color:var(--grey); }
.coll-name{ font-family:var(--serif); font-weight:700; font-size:20px; line-height:1.2; color:var(--ink); }
.coll-count{ font-size:13px; color:var(--grey); }
.coll-enter{ font-size:13px; font-weight:600; color:var(--ink); transition:color .2s; }
.coll-card:hover .coll-enter{ color:var(--brown); }
.work-cat-link{ font-size:12px; font-weight:600; color:var(--brown); transition:opacity .2s; }
.work-cat-link:hover{ opacity:.7; }
/* ============================================================
分类合集页 category.html
============================================================ */
.cat-hero{ display:flex; gap:56px; align-items:flex-start; padding:56px var(--pad-page) 64px; }
.cat-hero-left{ flex:0 0 480px; width:480px; display:flex; flex-direction:column; gap:18px; }
.cat-back{ font-size:13px; font-weight:600; color:var(--grey); transition:color .2s; }
.cat-back:hover{ color:var(--ink); }
.cat-title{ font-family:var(--serif); font-weight:900; font-size:56px; line-height:64px; color:var(--ink); }
.cat-en{ font-family:var(--mono); font-size:13px; letter-spacing:.4px; color:var(--grey); }
.cat-desc{ font-size:15px; line-height:26px; color:var(--grey); }
.cat-stats{ display:flex; gap:36px; }
.cat-stat{ display:flex; flex-direction:column; gap:4px; }
.cat-stat-num{ font-family:var(--serif); font-weight:700; font-size:28px; line-height:1.1; color:var(--ink); }
.cat-stat-label{ font-size:11px; color:var(--grey); }
.cat-hero-right{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:14px; }
.cat-cover{ width:100%; height:420px; }
.cat-cap-row{ display:flex; justify-content:space-between; gap:16px; font-family:var(--mono); font-size:11px; color:var(--grey); }
.cat-switch{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cat-switch-row{ display:flex; align-items:center; gap:8px; padding:20px var(--pad-page); }
.cat-grid-note{
display:flex; align-items:center; justify-content:space-between;
padding:32px var(--pad-page) 20px;
font-family:var(--mono); font-size:11px; letter-spacing:.4px; color:var(--grey);
}
.cat-grid-note .sort{ color:var(--brown); }
.cat-row{ display:flex; gap:20px; align-items:flex-start; padding:0 var(--pad-page) 24px; }
.cat-card{ display:flex; flex-direction:column; gap:12px; }
.cat-note{ font-size:14px; line-height:24px; color:var(--grey); }
/* 行型 A：614 + 614 + gap20 = 1248 */
.cat-row-a > .cat-card{ flex:0 0 614px; width:614px; }
.cat-row-a > .cat-card > .media{ height:440px; }
/* 行型 B：402.67 × 3 + gap20 × 2 = 1248 */
.cat-row-b > .cat-card{ flex:0 0 402.67px; width:402.67px; }
.cat-row-b > .cat-card > .media{ height:300px; }
/* 行型 C：单张通栏 */
.cat-row-c > .cat-card{ flex:1 1 auto; width:auto; min-width:0; }
.cat-row-c > .cat-card > .media{ height:560px; }
.cat-empty{ padding:64px var(--pad-page); font-size:15px; line-height:26px; color:var(--grey); }
.cat-nav{
display:flex; align-items:center; justify-content:space-between;
padding:28px var(--pad-page); border-top:1px solid var(--line);
}
.cat-nav-side{ display:flex; flex-direction:column; gap:4px; }
.cat-nav-side.is-next{ align-items:flex-end; text-align:right; }
.cat-nav-label{ font-family:var(--mono); font-size:11px; color:var(--grey); }
.cat-nav-name{ font-family:var(--serif); font-weight:700; font-size:16px; color:var(--ink); transition:color .2s; }
.cat-nav-side:hover .cat-nav-name{ color:var(--brown); }
/* ============================================================
搜索：刊头抽屉 / 搜索结果页
============================================================ */
.icon-btn{ cursor:pointer; background:none; border:0; padding:0; }
.icon-btn svg{ transition:opacity .2s; }
.icon-btn:hover svg{ opacity:.6; }
.icon-btn.is-on svg circle,
.icon-btn.is-on svg path{ stroke:var(--brown); }
/* 抽屉：从刊头下方展开 */
.search-drawer{
position:absolute; top:100%; left:0; right:0; z-index:60;
background:var(--surface); border-bottom:1px solid var(--line);
max-height:0; opacity:0; overflow:hidden;
transition:max-height .26s ease, opacity .18s ease;
}
.search-drawer.is-open{
max-height:560px; opacity:1;
box-shadow:0 16px 28px rgba(0,0,0,.55);
}
.sd-tag-cat{ color:var(--brown); border-color:var(--line-2); }
.sd-inner{ padding:26px var(--pad-page) 30px; }
.sd-form{
display:flex; align-items:center; gap:12px;
border-bottom:1px solid var(--ink); padding-bottom:12px;
}
.sd-icon{ flex:0 0 auto; opacity:.5; }
.sd-input{
flex:1 1 auto; min-width:0; border:0; outline:none; background:transparent;
font-family:var(--sans); font-size:22px; line-height:1.4; color:var(--ink);
}
.sd-input::placeholder{ color:var(--mute); }
.sd-clear{
flex:0 0 auto; background:none; border:0; cursor:pointer;
font-size:12px; color:var(--grey); transition:color .2s;
}
.sd-clear:hover{ color:var(--ink); }
.sd-close{ flex:0 0 auto; background:none; border:0; cursor:pointer; display:inline-flex; opacity:.5; }
.sd-close:hover{ opacity:1; }
.sd-scope{
display:flex; align-items:center; gap:12px;
padding:14px 0 0; font-size:12px; color:var(--grey);
}
.sd-scope-sw{
background:none; border:0; padding:0; cursor:pointer;
font-size:12px; color:var(--brown); border-bottom:1px solid var(--brown);
}
.sd-suggest{ display:flex; flex-direction:column; gap:8px; padding-top:16px; }
.sd-hint{ font-size:12px; color:var(--grey); }
.sd-hot{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.sd-hot-label{
font-family:var(--mono); font-size:11px; letter-spacing:.4px;
color:var(--grey); margin-right:4px;
}
.sd-tag{
display:inline-flex; align-items:center;
padding:6px 14px; border-radius:var(--r);
border:1px solid var(--line); background:transparent;
font-family:var(--mono); font-size:11px; line-height:1.2; color:var(--ink);
transition:border-color .2s,color .2s;
}
.sd-tag:hover{ border-color:var(--ink); color:var(--brown); }
.sd-sug-title{
font-family:var(--mono); font-size:11px; letter-spacing:.4px;
color:var(--grey); padding-top:4px;
}
.sd-item{
display:flex; align-items:center; gap:14px;
padding:6px 8px 6px 0; border-radius:var(--r);
transition:background .18s;
}
.sd-item:hover{ background:var(--hover); }
.sd-thumb{ flex:0 0 56px; width:56px; height:40px; overflow:hidden; background:var(--paper); }
.sd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sd-item-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.sd-item-title{ font-size:14px; color:var(--ink); line-height:1.3; }
.sd-item-meta{ font-family:var(--mono); font-size:11px; color:var(--grey); }
.sd-more{ font-size:13px; font-weight:600; color:var(--brown); padding-top:4px; }
.sd-empty{ font-size:13px; color:var(--grey); }
mark.hl{ background:transparent; color:var(--brown); font-weight:600; }
/* 搜索结果页 */
.search-hero{ padding:56px var(--pad-page) 48px; }
.search-hero-inner{ display:flex; flex-direction:column; gap:14px; }
.search-title{
font-family:var(--serif); font-weight:900; font-size:56px; line-height:64px;
color:var(--ink); word-break:break-all;
}
.search-sub{ font-size:15px; line-height:26px; color:var(--grey); }
.search-form{
display:flex; align-items:center; gap:16px;
max-width:820px; margin-top:8px;
}
.sf-icon{ flex:0 0 auto; opacity:.5; }
.search-input{
flex:1 1 auto; min-width:0;
border:0; border-bottom:1px solid var(--line-2); padding:12px 0;
font-family:var(--sans); font-size:20px; color:var(--ink);
background:transparent; outline:none; transition:border-color .2s;
}
.search-input:focus{ border-color:var(--accent); }
.search-submit{ flex:0 0 auto; padding:12px 26px; }
.search-clear{
flex:0 0 auto; background:none; border:0; cursor:pointer;
font-size:13px; color:var(--grey); transition:color .2s;
}
.search-clear:hover{ color:var(--ink); }
.search-hot{ margin-top:4px; }
.search-empty{
display:flex; flex-direction:column; gap:14px;
padding:64px var(--pad-page);
}
.search-empty-title{ font-family:var(--serif); font-weight:700; font-size:24px; color:var(--ink); }
.search-empty-desc{ font-size:15px; line-height:26px; color:var(--grey); }
.search-hit-tags{ margin-top:2px; }
.chip.is-zero{ color:var(--mute); border-color:var(--line); }
/* ============================================================
后台 · 页面配图（上传 / 手动裁切）
============================================================ */
.img-slot{
display:flex; gap:24px; align-items:flex-start;
padding:20px; border:1px solid var(--line); background:var(--surface);
}
.is-preview{
flex:0 0 auto; position:relative; overflow:hidden;
background:var(--paper); border:1px solid var(--line); cursor:pointer;
transition:border-color .2s,background .2s;
}
.is-preview:hover{ border-color:var(--ink); }
.is-preview img{ width:100%; height:100%; object-fit:cover; }
.is-preview.is-over{ border-color:var(--brown); background:var(--hover); }
.is-preview.is-empty::after{
content:'点击上传'; position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
font-family:var(--mono); font-size:11px; color:var(--mute);
}
.is-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.is-title{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.4; }
.is-desc{ font-size:12px; color:var(--grey); line-height:1.6; }
.is-meta{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
font-family:var(--mono); font-size:11px; color:var(--grey);
}
.is-warn{ color:var(--brown); }
.is-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.is-actions .btn-outline{ padding:8px 16px; }
.img-tip{
font-size:12px; color:var(--grey); line-height:1.8; white-space:pre-line;
padding:14px 0 0;
}
/* 裁切 / 手动调整弹窗 */
.cropper-mask{
position:fixed; inset:0; z-index:200;
background:rgba(4,6,12,.68);
display:flex; align-items:center; justify-content:center;
}
.cropper{
width:760px; max-height:92vh; overflow:auto;
background:var(--surface); border-radius:var(--r);
display:flex; flex-direction:column;
}
.cp-head{
display:flex; align-items:center; justify-content:space-between;
padding:18px 24px; border-bottom:1px solid var(--line);
}
.cp-title{ font-family:var(--serif); font-weight:700; font-size:18px; color:var(--ink); }
.cp-close{ font-size:12px; color:var(--grey); }
.cp-close:hover{ color:var(--ink); }
.cp-body{
padding:24px; background:var(--paper);
display:flex; align-items:center; justify-content:center;
}
.cp-frame{
position:relative; overflow:hidden; background:var(--surface);
border:1px solid var(--line-2); cursor:grab; touch-action:none;
}
.cp-frame.is-drag{ cursor:grabbing; }
.cp-frame img{ position:absolute; max-width:none; user-select:none; -webkit-user-drag:none; }
.cp-grid{
position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .15s;
background-image:
linear-gradient(to right, rgba(255,255,255,.6) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.6) 1px, transparent 1px);
background-size:33.333% 33.333%;
}
.cp-frame.is-drag .cp-grid{ opacity:1; }
.cp-controls{ display:flex; flex-direction:column; gap:12px; padding:20px 24px 4px; }
.cp-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cp-label{ font-size:12px; font-weight:600; color:var(--ink); }
.cp-select{
border:1px solid var(--line-2); border-radius:var(--r); padding:7px 10px;
font-family:var(--sans); font-size:12px; color:var(--ink); background:var(--surface); outline:none;
}
.cp-slider{ flex:1 1 auto; min-width:180px; accent-color:var(--ink); }
.cp-zoom-val{ font-family:var(--mono); font-size:12px; color:var(--grey); width:48px; text-align:right; }
.cp-chip{
padding:6px 12px; border:1px solid var(--line-2); border-radius:var(--r);
font-size:12px; color:var(--grey); background:var(--surface); transition:border-color .2s,color .2s;
}
.cp-chip:hover{ border-color:var(--ink); color:var(--ink); }
.cp-chip.is-active{ border-color:var(--ink); color:var(--ink); font-weight:600; }
.cp-foot{
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:16px 24px 20px; border-top:1px solid var(--line); margin-top:16px;
}
.cp-info{ font-family:var(--mono); font-size:11px; color:var(--grey); line-height:1.6; }
.cp-info b{ color:var(--brown); font-weight:600; }
.cp-btns{ display:flex; gap:8px; flex:0 0 auto; }
.cp-btns .btn-solid{ padding:9px 22px; }
.cp-btns .btn-outline{ padding:9px 18px; }
/* ============================================================
V2 · 视觉与交互升级
① 多层背景（渐变 / 网格 / 光晕 / 噪点）
② 纵深（阴影层级 / 玻璃拟态 / 边框高光 / 前后景 / 视差）
③ 幕后花絮瀑布流（懒加载 / 悬停浮层 / 灯箱）
④ 统一微交互（渐显 / 悬停位移发光 / 按压 / 数字滚动）
全部降级支持 prefers-reduced-motion；不影响首屏渲染
============================================================ */
/* ---------- 统一动效令牌 ---------- */
:root{
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-spring: cubic-bezier(.34,1.4,.64,1);
--d1:.18s; --d2:.3s; --d3:.6s; --d4:.9s;
--sh-1: 0 1px 2px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.34);
--sh-2: 0 2px 10px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.46);
--sh-3: 0 10px 26px rgba(0,0,0,.58), 0 36px 84px rgba(0,0,0,.62);
--sh-glow: 0 12px 40px rgba(124,92,255,.42);
--sh-glow-2: 0 12px 40px rgba(79,214,222,.34);
--glass: rgba(7,10,20,.86);
--hi: rgba(255,255,255,.14);
}
/* ---------- 响应式基线：解除 1440 定宽 ---------- */
html{ background:var(--bg); }
body{ min-width:0; background:transparent; }
body.is-admin, .page-admin body{ background:var(--paper); min-width:1280px; }
body.is-admin::before, body.is-admin::after{ display:none !important; }
section[id], header[id], footer[id]{ scroll-margin-top:96px; }
/* ---------- ① 多层背景：星云影像 + 深空渐变 + 光晕 + 星野 + 网格 ---------- */
/* 底层：用户提供的星云影像（1536×960 → 208KB JPEG），压暗后作全站底纹 */
html::before{
content:''; position:fixed; inset:0; z-index:-4; pointer-events:none;
background:
radial-gradient(1360px 900px at 50% 44%, rgba(4,6,12,.04), rgba(4,6,12,.44) 82%),
radial-gradient(1040px 700px at 7% -6%, rgba(124,92,255,.46), transparent 62%),
radial-gradient(900px 620px at 97% -2%, rgba(79,214,222,.28), transparent 60%),
radial-gradient(1200px 780px at 50% 118%, rgba(96,68,214,.34), transparent 66%),
url("assets/bg-nebula.jpg") center top / cover no-repeat,
linear-gradient(180deg, #070A14 0%, #06080F 46%, #04060C 100%);
}
html:has(body.is-admin)::before{ display:none; }
/* 中层：星野（两档星点）+ 散景光斑，极轻呼吸 */
body::before{
content:''; position:fixed; inset:0; z-index:-3; pointer-events:none;
opacity:.95;
background-image:
radial-gradient(1.63px 1.63px at 250px 222px, rgba(255,255,255,0.592), transparent 100%),
radial-gradient(1.73px 1.73px at 56px 153px, rgba(255,255,255,0.906), transparent 100%),
radial-gradient(2.42px 2.42px at 149px 248px, rgba(155,140,255,0.786), transparent 100%),
radial-gradient(1.71px 1.71px at 249px 178px, rgba(155,140,255,0.879), transparent 100%),
radial-gradient(2.58px 2.58px at 42px 253px, rgba(255,255,255,0.837), transparent 100%),
radial-gradient(2.0px 2.0px at 234px 72px, rgba(255,255,255,0.938), transparent 100%),
radial-gradient(1.74px 1.74px at 229px 107px, rgba(255,255,255,0.807), transparent 100%),
radial-gradient(1.87px 1.87px at 208px 200px, rgba(155,140,255,0.598), transparent 100%),
radial-gradient(2.17px 2.17px at 162px 17px, rgba(255,255,255,0.841), transparent 100%),
radial-gradient(1.87px 1.87px at 280px 64px, rgba(155,140,255,0.788), transparent 100%),
radial-gradient(1.52px 1.52px at 207px 28px, rgba(255,255,255,0.606), transparent 100%),
radial-gradient(1.62px 1.62px at 510px 164px, rgba(255,255,255,0.693), transparent 100%),
radial-gradient(1.79px 1.79px at 46px 162px, rgba(155,140,255,0.427), transparent 100%),
radial-gradient(1.21px 1.21px at 229px 345px, rgba(155,140,255,0.554), transparent 100%),
radial-gradient(1.89px 1.89px at 359px 124px, rgba(255,255,255,0.647), transparent 100%),
radial-gradient(1.55px 1.55px at 453px 156px, rgba(155,140,255,0.608), transparent 100%),
radial-gradient(1.93px 1.93px at 333px 386px, rgba(255,255,255,0.622), transparent 100%),
radial-gradient(1.58px 1.58px at 472px 226px, rgba(255,255,255,0.548), transparent 100%),
radial-gradient(1.74px 1.74px at 100px 512px, rgba(79,214,222,0.326), transparent 100%),
radial-gradient(8.22px 8.22px at 80px 261px, rgba(155,140,255,0.072), transparent 100%),
radial-gradient(7.96px 7.96px at 470px 107px, rgba(155,140,255,0.059), transparent 100%),
radial-gradient(8.97px 8.97px at 272px 569px, rgba(79,214,222,0.092), transparent 100%),
radial-gradient(15.93px 15.93px at 194px 188px, rgba(79,214,222,0.093), transparent 100%),
radial-gradient(10.5px 10.5px at 49px 572px, rgba(79,214,222,0.087), transparent 100%),
radial-gradient(8.08px 8.08px at 397px 129px, rgba(255,255,255,0.095), transparent 100%);
background-size: 300px 300px, 520px 520px, 660px 660px;
animation: skyBreathe 16s ease-in-out infinite alternate;
}
@keyframes skyBreathe{ from{ opacity:.74; } to{ opacity:1; } }
/* 顶层：细网格 + 噪点 + 极光光晕（极轻，不抢内容） */
body::after{
content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
opacity:.5;
background-image:
radial-gradient(760px 520px at 78% 8%, rgba(79,214,222,.07), transparent 62%),
radial-gradient(620px 420px at 6% 62%, rgba(155,140,255,.08), transparent 60%),
linear-gradient(to right, rgba(155,140,255,.045) 1px, transparent 1px),
linear-gradient(to bottom, rgba(155,140,255,.045) 1px, transparent 1px),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, 88px 88px, 88px 88px, 200px 200px;
}
/* 分区明暗：星云主视觉 → 半透画廊 → 半透花絮 → 半透关于 → 深空页脚 */
.hero, .gallery, .collections, .strengths{ background:transparent; }
/* ---------- ② 玻璃拟态刊头 ---------- */
.masthead{
position:sticky; top:0; z-index:60;
background:linear-gradient(180deg, rgba(7,10,20,.86), rgba(7,10,20,.58));
-webkit-backdrop-filter:blur(16px) saturate(150%);
backdrop-filter:blur(16px) saturate(150%);
transition:padding var(--d2) var(--ease), background var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
}
.masthead.is-scrolled{
padding-top:18px; padding-bottom:18px;
background:rgba(7,10,20,.80);
box-shadow:0 1px 0 rgba(255,255,255,.07), 0 12px 34px rgba(0,0,0,.5);
}
.masthead::after{ /* 阅读进度线 */
content:''; position:absolute; left:0; bottom:0; height:2px;
width:calc(var(--progress, 0) * 100%);
background:linear-gradient(90deg, var(--accent), var(--accent-2));
opacity:.85; transition:width .1s linear;
}
.brand-cn{
background:linear-gradient(120deg, #F2F6FF 0%, #F2F6FF 42%, #9B8CFF 72%, #4FD6DE 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.nav-link{ position:relative; }
.nav-link::after{
content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px;
background:var(--ink); transform:scaleX(0); transform-origin:left center;
transition:transform var(--d2) var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after{ transform:scaleX(1); }
.icon-btn{
width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
border-radius:50%; transition:background var(--d2) var(--ease), transform var(--d2) var(--ease);
}
.icon-btn:hover{ background:rgba(255,255,255,.09); transform:scale(1.08); }
.icon-btn:active{ transform:scale(.96); }
/* ---------- ④ 按钮统一微交互 ---------- */
.btn-solid, .btn-white, .btn-up{
position:relative; overflow:hidden;
box-shadow:var(--sh-1);
transition:transform var(--d1) var(--ease), box-shadow var(--d2) var(--ease), opacity var(--d2) var(--ease);
}
.btn-solid::after, .btn-white::after{
content:''; position:absolute; top:0; left:-70%; width:45%; height:100%;
background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
transform:skewX(-20deg); opacity:0; pointer-events:none;
}
.btn-solid:hover, .btn-white:hover{ opacity:1; transform:translateY(-2px); box-shadow:var(--sh-2), var(--sh-glow); }
.btn-solid:hover::after, .btn-white:hover::after{ opacity:1; animation:sheen .85s var(--ease); }
.btn-solid.is-press, .btn-white.is-press, .btn-up.is-press{ transform:translateY(0) scale(.975); box-shadow:var(--sh-1); }
@keyframes sheen{ from{ left:-70%; } to{ left:120%; } }
.btn-ghost{ transition:border-color var(--d2) var(--ease), gap var(--d2) var(--ease); }
.btn-ghost svg{ transition:transform var(--d2) var(--ease); }
.btn-ghost:hover svg{ transform:translateX(5px); }
.btn-ghost.is-press{ transform:scale(.98); }
.btn-outline{ transition:background var(--d2) var(--ease), color var(--d2) var(--ease), transform var(--d1) var(--ease), box-shadow var(--d2) var(--ease); }
.btn-outline:hover{ background:var(--solid); color:var(--on-solid); transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn-outline.is-press{ transform:translateY(0) scale(.975); }
.chip, .tag-chip{ transition:transform var(--d1) var(--ease), background var(--d2) var(--ease), color var(--d2) var(--ease), border-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease); }
.chip:hover{ transform:translateY(-2px); box-shadow:var(--sh-1); }
.chip.is-press{ transform:translateY(0) scale(.96); }
.chip-link:hover{ transform:translateY(-2px); box-shadow:var(--sh-1), var(--sh-glow); }
.chip-link::after{ transition:transform var(--d2) var(--ease); }
.chip-link:hover::after{ transform:translateX(3px); }
/* ---------- ② 卡片纵深：阴影层级 + 边框高光 + 指针光斑 ---------- */
.work-card > .media, .coll-card > .media, .bts-media{
border-radius:var(--r);
box-shadow:var(--sh-1);
transition:box-shadow var(--d3) var(--ease), transform var(--d3) var(--ease);
}
.work-card > .media::before, .coll-card > .media::before, .bts-media::before{
content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
box-shadow:inset 0 1px 0 var(--hi), inset 0 0 0 1px rgba(255,255,255,.06);
}
.work-card > .media::after, .coll-card > .media::after, .bts-media::after{
content:''; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(155,140,255,.26), transparent 64%);
opacity:0; transition:opacity var(--d3) var(--ease);
}
.work-card:hover > .media, .coll-card:hover > .media{ transform:translateY(-6px); box-shadow:var(--sh-3); }
.work-card:hover > .media::after, .coll-card:hover > .media::after, .bts-media:hover::after{ opacity:1; }
.work-card:hover .work-title{ color:var(--brown); }
.work-title{ transition:color var(--d2) var(--ease); }
.coll-card:hover{ }
.coll-card{ transition:transform var(--d3) var(--ease); }
.coll-card:hover{ transform:translateY(-4px); }
.coll-card:hover .coll-name{ color:var(--brown); }
.coll-name{ transition:color var(--d2) var(--ease); }
.more-row{ transition:letter-spacing var(--d3) var(--ease), color var(--d2) var(--ease); }
.more-row:hover{ letter-spacing:.4px; }
.more-row svg{ transition:transform var(--d2) var(--ease); }
.more-row:hover svg{ transform:translateX(6px); }
.tag{ transition:transform var(--d1) var(--ease), border-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease); }
.tag:hover{ transform:translateY(-2px); border-color:var(--brown); box-shadow:var(--sh-1); }
.brand-item{ transition:color var(--d2) var(--ease), transform var(--d2) var(--ease); }
.brand-item:hover{ color:var(--ink); transform:translateY(-2px); }
/* 前后景分层：主视觉后的暖色光晕 + 抬升阴影 */
.hero-right{ position:relative; }
.hero-right::before{
content:''; position:absolute; z-index:-1; left:6%; top:14%; width:74%; height:58%;
background:radial-gradient(closest-side, rgba(124,92,255,.55), transparent 72%);
filter:blur(28px);
}
.hero-media{ box-shadow:0 34px 90px rgba(0,0,0,.6), 0 0 70px rgba(124,92,255,.16); border-radius:var(--r); }
.about-portrait{ box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(79,214,222,.12); border-radius:var(--r); }
.about{ background:linear-gradient(180deg, rgba(9,13,24,.34) 0%, rgba(6,9,17,.62) 100%); }
/* ---------- 滚动视差 ---------- */
[data-parallax]{ --py:0px; }
.hero-media[data-parallax] > img,
.about-portrait[data-parallax] > img{
transform:translate3d(0, var(--py), 0) scale(1.07);
transition:transform var(--d3) var(--ease-out);
}
.hero-media[data-parallax]:hover > img,
.about-portrait[data-parallax]:hover > img{ transform:translate3d(0, var(--py), 0) scale(1.11); }
/* ---------- ④ 渐显入场 ---------- */
.fx-ready .fx-reveal{
opacity:0; transform:translateY(20px);
transition:opacity var(--d4) var(--ease-out), transform var(--d4) var(--ease-out);
}
.fx-ready .fx-reveal.is-in{ opacity:1; transform:none; }
.stat .stat-num{ font-variant-numeric:tabular-nums; }
/* ---------- ③ 幕后花絮：瀑布流 ---------- */
.behind{
position:relative; display:flex; flex-direction:column;
padding-bottom:96px;
background:
radial-gradient(900px 520px at 80% 6%, rgba(124,92,255,.18), transparent 62%),
radial-gradient(700px 460px at 8% 96%, rgba(79,214,222,.10), transparent 62%),
linear-gradient(180deg, rgba(8,11,21,.34) 0%, rgba(6,9,17,.58) 100%);
}
.behind .section-head{ padding-top:72px; }
.bts-note{
font-family:var(--mono); font-size:11px; color:var(--grey);
white-space:nowrap; padding-bottom:6px;
}
.bts-grid{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
column-gap:20px; row-gap:0; grid-auto-rows:8px;
padding:36px var(--pad-page) 0;
}
.bts-item{ grid-row-end:span var(--span, 42); margin-bottom:20px; }
.bts-media{ position:relative; overflow:hidden; background:var(--media-bg); cursor:zoom-in; }
.bts-media img{
width:100%; height:100%; object-fit:cover;
opacity:0; transform:scale(1.08);
transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.bts-media img.is-loaded{ opacity:1; transform:scale(1); }
.bts-media:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); }
.bts-media:hover img{ transform:scale(1.07); }
.bts-tag{
position:absolute; z-index:3; top:12px; left:12px;
padding:5px 10px; border-radius:var(--r);
background:rgba(6,9,17,.66); border:1px solid rgba(255,255,255,.16);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
font-family:var(--mono); font-size:10px; letter-spacing:.6px; color:var(--star);
box-shadow:var(--sh-1);
}
.bts-over{
position:absolute; z-index:3; left:0; right:0; bottom:0;
padding:26px 18px 16px; color:var(--star); pointer-events:none;
background:linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.32) 45%, rgba(10,10,10,.82));
opacity:0; transform:translateY(14px);
transition:opacity var(--d2) var(--ease), transform var(--d3) var(--ease-out);
}
.bts-media:hover .bts-over{ opacity:1; transform:none; }
.bts-over-title{ font-family:var(--serif); font-weight:700; font-size:16px; line-height:1.4; }
.bts-over-desc{
margin-top:6px; font-size:12px; line-height:20px; color:rgba(255,255,255,.82);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bts-over-hint{
margin-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.6px;
color:var(--hi); opacity:.75;
}
.bts-cap{ padding-top:12px; display:flex; flex-direction:column; gap:4px; }
.bts-cap-title{ font-family:var(--serif); font-weight:600; font-size:16px; line-height:1.4; color:var(--ink); }
.bts-cap-meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.3px; color:var(--grey); }
/* ---------- ③ 灯箱：景深加强 ---------- */
.lightbox{
background:rgba(3,5,10,.95);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.lightbox.is-open .lb-stage{ animation:lbIn .34s var(--ease-out) both; }
.lightbox.is-open .lb-caption{ animation:lbUp .4s var(--ease-out) .08s both; }
.lb-img{ box-shadow:0 40px 120px rgba(0,0,0,.66); }
.lb-close{ border-radius:50%; transition:background var(--d2) var(--ease), transform var(--d2) var(--ease); }
.lb-close:hover{ background:rgba(255,255,255,.14); transform:rotate(90deg); }
@keyframes lbIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes lbUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
/* ---------- ④ 页脚微交互 ---------- */
.footer{ position:relative; overflow:hidden; }
.footer::before{
content:''; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(760px 420px at 14% -8%, rgba(124,92,255,.30), transparent 62%),
radial-gradient(660px 440px at 92% 110%, rgba(79,214,222,.16), transparent 60%);
}
.footer > *{ position:relative; z-index:1; }
.footer-mark{ text-shadow:0 1px 0 rgba(255,255,255,.12); }
.footer-link{ display:inline-block; transition:transform var(--d2) var(--ease), color var(--d2) var(--ease), opacity var(--d2) var(--ease); }
.footer-link:hover{ opacity:1; color:var(--accent-2); transform:translateX(4px); }
.footer-social-item{
padding:7px 14px; border:1px solid var(--dark-line); border-radius:var(--r);
transition:transform var(--d2) var(--ease), border-color var(--d2) var(--ease), background var(--d2) var(--ease), color var(--d2) var(--ease);
}
.footer-social-item:hover{
opacity:1; transform:translateY(-3px); border-color:rgba(155,140,255,.55);
background:rgba(155,140,255,.12); color:var(--accent-2);
}
.footer-cols{ flex-wrap:wrap; }
.page-switch{
transition:transform var(--d2) var(--ease), background var(--d2) var(--ease), border-color var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
}
.page-switch:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); background:var(--surface-2); }
.toast{ box-shadow:var(--sh-3); }
/* ---------- 响应式 ---------- */
@media (max-width:1440px){
:root{ --pad-page:64px; }
}
@media (max-width:1180px){
:root{ --pad-page:40px; }
.hero{ gap:40px; padding-top:56px; padding-bottom:56px; }
.hero-left{ width:420px; flex:0 0 420px; }
.hero-right{ padding-top:24px; }
.hero-media{ height:460px; }
.section-head{ gap:24px; padding-top:52px; }
.section-head-text{ width:480px; flex:0 0 480px; }
.section-title{ font-size:38px; line-height:46px; }
.gallery-row{ flex-wrap:wrap; }
.gallery-row.row-a > .work-card:nth-child(1),
.gallery-row.row-a > .work-card:nth-child(2),
.gallery-row.row-b > .work-card:nth-child(1),
.gallery-row.row-b > .work-card:nth-child(2),
.gallery-row.row-b > .work-card:nth-child(3),
.gallery-row.row-c > .work-card{ flex:1 1 340px; width:auto; min-width:0; }
.work-card > .media{ height:400px; }
.row-b > .work-card > .media{ height:440px; }
.row-c > .work-card > .media{ height:480px; }
.coll-row{ flex-wrap:wrap; }
.coll-card{ flex:1 1 260px; width:auto; }
.coll-card > .media{ height:320px; }
.bts-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.about{ gap:44px; padding-top:72px; padding-bottom:72px; }
.about-left{ width:380px; flex:0 0 380px; }
.about-portrait{ height:480px; }
.about-title{ font-size:34px; line-height:42px; }
.footer-mark{ font-size:44px; line-height:52px; }
.footer-col{ width:240px; flex:0 0 240px; }
}
@media (max-width:900px){
:root{ --pad-page:28px; }
.masthead{ flex-wrap:wrap; gap:14px 20px; padding-top:18px; padding-bottom:18px; }
.nav-links{ order:3; flex:1 1 100%; gap:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.nav-link{ font-size:13px; white-space:nowrap; }
.hero{ flex-direction:column; gap:32px; }
.hero-left{ width:100%; flex:0 0 auto; }
.hero-title{ font-size:38px; line-height:48px; }
.hero-media{ height:min(62vw, 420px); }
.stats-row{ gap:28px; flex-wrap:wrap; }
.section-head{ flex-direction:column; align-items:flex-start; gap:14px; padding-top:44px; }
.section-head-text{ width:100%; flex:0 0 auto; }
.section-title{ font-size:30px; line-height:38px; }
.filter-tabs{ flex-wrap:wrap; }
.gallery-row.row-a > .work-card:nth-child(1),
.gallery-row.row-a > .work-card:nth-child(2),
.gallery-row.row-b > .work-card:nth-child(1),
.gallery-row.row-b > .work-card:nth-child(2),
.gallery-row.row-b > .work-card:nth-child(3),
.gallery-row.row-c > .work-card{ flex:1 1 100%; }
.work-card > .media, .row-b > .work-card > .media, .row-c > .work-card > .media{ height:min(70vw, 460px); }
.about{ flex-direction:column; gap:32px; }
.about-left{ width:100%; flex:0 0 auto; }
.about-portrait{ height:min(84vw, 520px); }
.coll-card{ flex:1 1 100%; }
.coll-card > .media{ height:min(72vw, 400px); }
.bts-grid{ grid-template-columns:minmax(0,1fr); }
.behind .section-head{ padding-top:52px; }
.footer-top{ flex-direction:column; align-items:flex-start; gap:24px; }
.footer-cols{ gap:28px; }
.footer-col{ width:auto; flex:1 1 200px; }
.footer-bottom{ flex-direction:column; align-items:flex-start; gap:16px; }
.cat-hero{ flex-direction:column; gap:28px; }
.cat-hero-left{ width:100%; flex:0 0 auto; }
.page-switch{ right:16px; bottom:16px; font-size:11px; padding:8px 14px; }
}
@media (max-width:560px){
:root{ --pad-page:20px; }
.hero-title{ font-size:30px; line-height:40px; }
.masthead{ gap:12px 16px; }
.brand{ gap:8px; }
.brand-cn{ font-size:20px; }
.brand-en{ font-size:10px; letter-spacing:.5px; }
.nav-right{ gap:12px; }
.nav-cta{ padding:9px 14px; font-size:12px; }
.lightbox{ padding:24px; gap:14px; }
.lb-caption{ flex-direction:column; gap:6px; }
}
/* 触屏：没有 hover，浮层常显但只留标题 */
@media (hover:none){
.bts-over{ opacity:1; transform:none; padding:30px 14px 12px; }
.bts-over-desc, .bts-over-hint{ display:none; }
.work-card:hover > .media, .coll-card:hover > .media{ transform:none; box-shadow:var(--sh-1); }
}
/* ---------- 降级：prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*, *::before, *::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
transition-delay:0ms !important;
}
.fx-ready .fx-reveal{ opacity:1 !important; transform:none !important; }
[data-parallax]{ --py:0px !important; }
.hero-media[data-parallax] > img,
.about-portrait[data-parallax] > img{ transform:scale(1.02) !important; }
.bts-media img{ opacity:1 !important; transform:none !important; }
.masthead::after{ display:none; }
.btn-solid::after, .btn-white::after{ display:none; }
}
/* ============================================================
V3 · 星空主题收口（后台与细节）
============================================================ */
.sb-item.is-active{
background:linear-gradient(90deg, rgba(155,140,255,.20), rgba(155,140,255,.02));
color:var(--ink); box-shadow:inset 2px 0 0 var(--accent);
}
.sidebar{ background:linear-gradient(180deg, #0B0F1C 0%, #080B14 100%); border-right-color:rgba(255,255,255,.06); }
.topbar{ position:sticky; top:0; z-index:5; }
.search-box:focus-within{ border-color:var(--accent); }
.asset-card.is-selected{ box-shadow:0 0 0 1px var(--accent), 0 12px 34px rgba(124,92,255,.24); }
.gate-submit, .btn-save, .btn-solid, .btn-up{ box-shadow:var(--sh-1); }
.gate-submit:hover{ opacity:1; box-shadow:var(--sh-2), var(--sh-glow); }
::selection{ background:rgba(155,140,255,.34); color:#FFFFFF; }
.dropzone.is-over{ box-shadow:inset 0 0 0 1px rgba(155,140,255,.5), 0 0 40px rgba(124,92,255,.2); }
body.is-admin, .page-admin body{ background:#080B14; }
.search-drawer, .ep, .cp{ box-shadow:0 24px 60px rgba(0,0,0,.6); }
/* 滚动条（Chromium / Safari） */
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:#05070E; }
::-webkit-scrollbar-thumb{ background:#242C4A; border:3px solid #05070E; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#39436B; }
@media (prefers-reduced-motion: reduce){
body::before{ animation:none !important; opacity:.8 !important; }
}
/* ============================================================
V4 · 预览图总览 + 批量多选 + 作品外链
============================================================ */
/* ---------- 前台：作品卡的独立链接按钮 ---------- */
.work-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:2px; }
.work-link{
display:inline-flex; align-items:center; gap:5px;
padding-bottom:1px; border-bottom:1px solid rgba(79,214,222,.35);
font-size:12px; font-weight:600; color:var(--accent-2);
transition:color var(--d2) var(--ease), border-color var(--d2) var(--ease), transform var(--d2) var(--ease);
}
.work-link:hover{ color:var(--star); border-bottom-color:currentColor; transform:translateX(2px); }
.media.is-jump{ cursor:pointer; }
/* ---------- 前台：灯箱里的外链出口 ---------- */
.lb-link{
display:inline-flex; align-items:center; gap:6px;
padding:7px 13px; border-radius:var(--r);
background:var(--solid); color:var(--on-solid);
font-size:12px; font-weight:700; letter-spacing:.2px;
transition:box-shadow var(--d2) var(--ease), transform var(--d2) var(--ease);
}
.lb-link:hover{ box-shadow:var(--sh-glow); transform:translateY(-1px); }
.lb-link[hidden]{ display:none; }
/* ---------- 后台：作品库批量多选 ---------- */
.tool-hint{ font-family:var(--mono); font-size:10px; color:var(--mute); letter-spacing:.3px; }
.asset-col{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:14px; }
.bulk-bar{
display:flex; flex-direction:column; gap:12px;
padding:14px 16px; border-radius:var(--r);
background:linear-gradient(90deg, rgba(155,140,255,.14), rgba(155,140,255,.03));
border:1px solid rgba(155,140,255,.42);
animation:bulkIn .26s var(--ease-out) both;
}
@keyframes bulkIn{ from{ opacity:0; transform:translateY(-6px); } }
.bulk-count{ font-size:13px; font-weight:700; color:var(--star); }
.bulk-acts{ display:flex; flex-wrap:wrap; gap:8px; }
.bulk-btn{
padding:7px 12px; border-radius:var(--r);
background:var(--surface-2); border:1px solid var(--line-2);
font-size:12px; font-weight:600; color:var(--ink);
transition:background var(--d2) var(--ease), border-color var(--d2) var(--ease), color var(--d2) var(--ease);
}
.bulk-btn:hover{ background:var(--hover); border-color:var(--accent); }
.bulk-btn.is-primary{ background:var(--solid); color:var(--on-solid); border-color:transparent; }
.bulk-btn.is-primary:hover{ box-shadow:var(--sh-glow); }
.bulk-btn.is-danger{ color:#FF9AA6; border-color:rgba(255,154,166,.4); }
.bulk-btn.is-danger:hover{ background:rgba(255,154,166,.14); border-color:#FF9AA6; }
.bulk-cats{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.bulk-cats-label{ font-family:var(--mono); font-size:10px; color:var(--mute); letter-spacing:.4px; }
/* 勾选框：平时隐藏描边框，hover 浮出，选中即实心勾 */
.check-badge{
position:absolute; left:10px; top:10px;
width:22px; height:22px; border-radius:6px;
background:rgba(6,9,17,.66); border:1px solid rgba(255,255,255,.42);
color:transparent; cursor:pointer; z-index:2; padding:0;
display:flex; align-items:center; justify-content:center;
opacity:0; transition:opacity var(--d2) var(--ease), background var(--d2) var(--ease), border-color var(--d2) var(--ease);
}
.asset-card:hover .check-badge{ opacity:1; }
.check-badge:hover{ border-color:#FFFFFF; background:rgba(6,9,17,.85); }
.asset-card.is-checked .check-badge{
opacity:1; background:var(--accent); border-color:transparent; color:var(--on-solid);
}
.asset-card.is-checked{
border-color:var(--accent);
box-shadow:0 0 0 1px var(--accent), 0 12px 34px rgba(124,92,255,.22);
}
.asset-link-tag{
font-family:var(--mono); font-size:10px; color:var(--accent-2); letter-spacing:.3px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ep-sep{
margin-top:4px; padding-top:12px; border-top:1px solid var(--line);
font-size:12px; font-weight:700; color:var(--star); letter-spacing:.4px;
}
.field-hint.is-warn{ color:#FF9AA6; }
.ep-preview.is-clickable{ cursor:pointer; }
.ep-preview.is-clickable::after{
content:'点击更换'; position:absolute; left:0; right:0; bottom:0;
padding:8px; text-align:center; font-size:11px; font-weight:600;
background:linear-gradient(180deg, transparent, rgba(4,6,12,.86)); color:var(--star);
opacity:0; transition:opacity var(--d2) var(--ease);
}
.ep-preview.is-clickable:hover::after{ opacity:1; }
/* ---------- 后台：通用弹层（选作品 / 选分类） ---------- */
.picker-mask{
position:fixed; inset:0; z-index:60;
background:rgba(4,6,12,.72); backdrop-filter:blur(6px);
display:flex; align-items:center; justify-content:center; padding:32px;
animation:pickerIn .2s var(--ease-out) both;
}
@keyframes pickerIn{ from{ opacity:0; } }
.picker-box{
width:min(880px, 100%); max-height:80vh; overflow:auto;
display:flex; flex-direction:column; gap:14px;
padding:20px; border-radius:10px;
background:var(--surface); border:1px solid var(--line-2);
box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.picker-sub{ font-size:12px; line-height:1.7; color:var(--grey); }
.picker-body{ min-height:60px; }
.picker-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.picker-item{
width:150px; flex:0 0 150px; padding:0; overflow:hidden; text-align:left;
border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line);
transition:border-color var(--d2) var(--ease), transform var(--d2) var(--ease);
}
.picker-item img{ width:100%; height:100px; object-fit:cover; display:block; }
.picker-item:hover{ border-color:var(--accent); transform:translateY(-3px); }
.picker-name{ padding:8px 10px 0; font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.picker-line{ padding:3px 10px 10px; font-family:var(--mono); font-size:10px; color:var(--grey); }
.picker-cats{ display:flex; flex-wrap:wrap; gap:10px; }
/* ---------- 后台：预览图总览页 ---------- */
.pv-stats{ display:flex; flex-wrap:wrap; gap:12px; }
.pv-stat{
flex:0 0 auto; min-width:120px; padding:14px 18px; border-radius:var(--r);
background:var(--surface-2); border:1px solid var(--line);
}
.pv-stat.is-warn{ border-color:rgba(255,154,166,.5); }
.pv-stat-n{ font-family:var(--mono); font-size:26px; font-weight:700; color:var(--star); line-height:1.1; }
.pv-stat.is-warn .pv-stat-n{ color:#FF9AA6; }
.pv-stat-t{ margin-top:4px; font-size:11px; color:var(--grey); letter-spacing:.4px; }
.pv-grid{ display:flex; flex-wrap:wrap; gap:16px; }
.pv-card{
width:236px; flex:0 0 236px; display:flex; flex-direction:column;
border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line);
overflow:hidden; transition:border-color var(--d2) var(--ease);
}
.pv-card:hover{ border-color:var(--line-2); }
.pv-card.is-off{ opacity:.62; }
.pv-preview{
position:relative; width:100%; height:150px;
background:var(--media-bg); overflow:hidden; cursor:pointer;
border-bottom:1px solid var(--line);
}
.pv-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-preview.is-empty::after{
content:'尚未设置'; position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
font-family:var(--mono); font-size:11px; color:var(--mute);
}
.pv-preview:hover::before{
content:'点击替换'; position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:7px; text-align:center; font-size:11px; font-weight:600;
background:linear-gradient(180deg, transparent, rgba(4,6,12,.88)); color:var(--star);
}
.pv-preview.is-over{ box-shadow:inset 0 0 0 2px var(--accent); }
.pv-body{ display:flex; flex-direction:column; gap:7px; padding:12px; min-width:0; }
.pv-title{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-line{ display:flex; flex-wrap:wrap; gap:8px; font-family:var(--mono); font-size:10px; color:var(--grey); }
.pv-cat{ color:var(--accent); }
.pv-status.is-draft{ color:var(--accent); }
.pv-tags{ display:flex; flex-wrap:wrap; gap:6px; min-height:0; }
.pv-badge{
padding:3px 7px; border-radius:3px;
background:rgba(155,140,255,.16); border:1px solid rgba(155,140,255,.34);
font-family:var(--mono); font-size:9px; color:var(--star); letter-spacing:.3px;
}
.pv-badge.is-link{ background:rgba(79,214,222,.14); border-color:rgba(79,214,222,.36); color:var(--accent-2); }
.pv-badge.is-warn{ background:rgba(255,154,166,.14); border-color:rgba(255,154,166,.4); color:#FF9AA6; }
.pv-dims{ font-family:var(--mono); font-size:10px; color:var(--mute); letter-spacing:.3px; }
.pv-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.pv-acts .btn-outline, .pv-acts .btn-add{ padding:6px 10px; font-size:11px; }
/* ============================================================
V5 · 后台 —— 首页精选序列 / 换封面确认层
============================================================ */
.fav-list{ display:flex; flex-direction:column; gap:10px; }
.fav-item{
display:flex; align-items:center; gap:14px;
padding:12px 14px; border-radius:8px;
border:1px solid var(--line); background:rgba(155,140,255,.06);
}
.fav-item.is-auto{ background:transparent; border-style:dashed; opacity:.72; }
.fav-no{ flex:0 0 auto; font-size:12px; letter-spacing:.6px; color:var(--accent-2); }
.fav-thumb{
flex:0 0 72px; width:72px; height:54px; overflow:hidden;
border-radius:var(--r); background:var(--media-bg); cursor:zoom-in;
border:1px solid var(--line);
}
.fav-thumb img{ width:100%; height:100%; object-fit:cover; }
.fav-thumb:hover{ border-color:var(--accent); }
.fav-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.fav-title{
font-size:13px; font-weight:600; color:var(--ink); line-height:1.35;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fav-meta{
font-family:var(--mono); font-size:10px; letter-spacing:.3px; color:var(--grey);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fav-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.fav-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.fav-acts .btn-outline, .fav-acts .btn-add{ padding:6px 10px; font-size:11px; }
/* 换封面确认层：先把目标作品摆清楚，再选图 */
.rp-target{
width:100%; height:220px; border-radius:8px; overflow:hidden;
background:var(--media-bg); border:1px solid var(--line);
margin-bottom:10px;
}
.rp-target img{ width:100%; height:100%; object-fit:cover; }
.rp-cap{
font-family:var(--serif); font-weight:700; font-size:17px; line-height:1.4;
color:var(--ink); margin-bottom:4px;
}
.rp-line{
font-family:var(--mono); font-size:10.5px; letter-spacing:.4px;
color:var(--grey); margin-bottom:10px;
}
/* 作品卡右上角：首页精选快捷开关 */
.star-badge{
position:absolute; z-index:4; right:8px; top:8px;
width:26px; height:26px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:rgba(6,9,17,.62); border:1px solid var(--line-2);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
color:var(--mute);
opacity:0; transition:opacity var(--d2) var(--ease), color var(--d2) var(--ease), transform var(--d2) var(--ease);
}
.asset-card:hover .star-badge{ opacity:1; }
.star-badge.is-on{
opacity:1; color:var(--on-solid);
background:var(--solid); border-color:transparent;
}
.star-badge:hover{ transform:scale(1.08); }
@media (max-width:1180px){
.pv-card{ flex:1 1 220px; width:auto; }
}
/* ============================================================
V5 · 无限横向轨道 —— 精选作品（两排反向）/ 幕后花絮（单排）
轨道视口与刊头同宽（左右各 --pad-page），不会溢出页面。
卡片宽度由 JS 按「每屏可见张数」算出后写进 --card-w。
============================================================ */
.rail-wrap{
display:flex; flex-direction:column; gap:20px;
padding:36px var(--pad-page) 0;
}
.rail-wrap.is-empty{ padding-bottom:8px; }
.rail{
position:relative; overflow:hidden;
touch-action:pan-y; /* 移动端纵向仍可滚页面，横向交给指针拖拽 */
cursor:grab;
/* 两端渐隐，卡片进出更像一条连续的胶片 */
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}
.rail.is-dragging{ cursor:grabbing; }
.rail-track{ display:flex; gap:20px; will-change:transform; }
.rail-card{
flex:0 0 var(--card-w, 297px); width:var(--card-w, 297px);
min-width:0; /* flex 项默认 min-width:auto 会顶开算好的宽度 */
display:flex; flex-direction:column; gap:10px;
user-select:none;
}
.rail-card .media{
width:100%; aspect-ratio:16 / 9; height:auto;
border:1px solid rgba(255,255,255,.08);
transition:transform var(--d3) var(--ease), box-shadow var(--d3) var(--ease), border-color var(--d3) var(--ease);
}
.rail-card.is-portrait .media{ aspect-ratio:3 / 4; }
.rail-card:hover .media{
transform:translateY(-5px);
box-shadow:var(--sh-3), 0 0 40px rgba(124,92,255,.22);
border-color:rgba(155,140,255,.42);
}
.rail-card .media img{
opacity:0; transform:scale(1.06);
transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.rail-card .media img.is-loaded{ opacity:1; transform:scale(1); }
.rail-card:hover .media img{ transform:scale(1.07); }
.rail-meta{ display:flex; flex-direction:column; gap:4px; }
.rail-title{
font-family:var(--serif); font-weight:600; font-size:15px; line-height:1.35;
color:var(--ink);
display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.rail-info{
font-family:var(--mono); font-size:10px; letter-spacing:.3px; color:var(--grey);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rail-foot{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2px; }
/* 竖幅轨道的花絮卡不显示常驻图注，信息只走悬停浮层，避免字被挤扁 */
.rail-single .rail-card.is-portrait .rail-foot{ display:none; }
/* 单页 6 张 → 卡片比精选大一圈，浮层文字同步放大一档 */
.rail-single .bts-over{ padding:34px 20px 18px; }
.rail-single .bts-over-title{ font-size:17px; line-height:1.35; }
.rail-single .bts-over-desc{
-webkit-line-clamp:3; font-size:13px; line-height:21px; margin-top:8px;
}
.rail-single .bts-over-hint{ margin-top:12px; font-size:11px; }
.rail-single .bts-tag{ top:14px; left:14px; font-size:11px; padding:6px 11px; }
.rail-single .rail-card:hover .media{ transform:translateY(-7px); }
.rail-single .rail{ border-radius:2px; }
/* 窄屏卡片回到小尺寸，浮层字号跟着收，免得 3:4 里塞不下 */
@media (max-width:900px){
.rail-single .bts-over{ padding:26px 14px 12px; }
.rail-single .bts-over-title{ font-size:14px; }
.rail-single .bts-over-desc{ -webkit-line-clamp:2; font-size:11.5px; line-height:18px; }
.rail-single .bts-over-hint{ display:none; }
}
/* 视频角标在小卡片上收一档 */
.rail-card .play-sm2{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:44px; height:44px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--solid); color:var(--on-solid);
box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 8px 24px rgba(124,92,255,.4);
pointer-events:none; transition:transform var(--d2) var(--ease);
}
.rail-card:hover .play-sm2{ transform:translate(-50%,-50%) scale(1.08); }
.rail-card .duration-badge{ right:10px; bottom:10px; padding:3px 7px; font-size:10px; }
.rail-hint{
display:flex; align-items:center; gap:8px;
font-family:var(--mono); font-size:10px; letter-spacing:.4px; color:var(--mute);
}
/* 轨道提示行：说明可拖拽 / 悬停暂停 */
.rail-tip{
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:14px var(--pad-page) 0;
font-family:var(--mono); font-size:10px; letter-spacing:.4px; color:var(--mute);
}
.behind .rail-tip{ padding-bottom:96px; }
@media (max-width:900px){
.rail-tip{ flex-direction:column; align-items:flex-start; gap:6px; }
}
/* ============================================================
V5 · 我的优势 —— 4 个拟玻璃方块
三级文字：主题（serif 标题）/ 正文（灰阶说明）/ 个性标签（药丸）
============================================================ */
.strengths{ display:flex; flex-direction:column; }
.st-row{
display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
gap:20px; padding:36px var(--pad-page) 0;
}
.st-card{
position:relative; overflow:hidden; isolation:isolate;
display:flex; flex-direction:column; gap:14px;
padding:26px 24px 22px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background:
linear-gradient(152deg, rgba(155,140,255,.16) 0%, rgba(79,214,222,.07) 44%, rgba(6,8,15,.46) 100%);
-webkit-backdrop-filter:blur(20px) saturate(165%);
backdrop-filter:blur(20px) saturate(165%);
box-shadow:0 24px 60px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.16);
transition:transform var(--d3) var(--ease), box-shadow var(--d3) var(--ease), border-color var(--d3) var(--ease);
}
/* 玻璃斜切高光：模拟一道掠过表面的反光 */
.st-card::before{
content:''; position:absolute; z-index:-1; inset:auto auto -40% -30%;
width:180%; height:180%;
background:linear-gradient(104deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 34%, transparent 60%);
transform:rotate(-8deg);
pointer-events:none;
transition:opacity var(--d3) var(--ease), transform var(--d4) var(--ease);
opacity:.85;
}
.st-card:hover{
transform:translateY(-6px);
border-color:rgba(155,140,255,.46);
box-shadow:0 32px 74px rgba(0,0,0,.5), 0 0 48px rgba(124,92,255,.24), inset 0 1px 0 rgba(255,255,255,.22);
}
.st-card:hover::before{ opacity:1; transform:rotate(-8deg) translateX(4%); }
.st-head{ display:flex; align-items:baseline; gap:10px; }
.st-no{
font-size:11px; letter-spacing:.8px; color:var(--accent-2);
padding-top:3px; flex:0 0 auto;
}
.st-theme{
font-family:var(--serif); font-weight:700; font-size:21px; line-height:1.3;
color:var(--ink);
}
.st-body{ flex:1 1 auto; font-size:13.5px; line-height:25px; color:var(--grey); }
.st-tag{
align-self:flex-start;
padding:5px 12px; border-radius:999px;
background:rgba(155,140,255,.16);
border:1px solid rgba(155,140,255,.38);
font-family:var(--mono); font-size:10px; letter-spacing:.6px; color:var(--star);
}
/* 底部主题合集入口 */
.st-themes{
display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
padding:28px var(--pad-page) 88px;
}
.st-themes-label{
font-family:var(--mono); font-size:10px; letter-spacing:.6px;
color:var(--mute); text-transform:uppercase;
}
.st-theme-link{
padding:6px 14px; border-radius:999px;
border:1px solid var(--line); background:transparent;
font-size:12px; font-weight:600; color:var(--grey);
transition:color var(--d2) var(--ease), border-color var(--d2) var(--ease), background var(--d2) var(--ease);
}
.st-theme-link:hover{
color:var(--on-solid); background:var(--solid); border-color:transparent;
}
.st-themes-count{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--mute); }
@media (max-width:1180px){
.st-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
.st-row{ grid-template-columns:minmax(0,1fr); }
.st-themes-count{ margin-left:0; }
}
/* ============================================================
V6 — 作品外链的可点击性（跑马灯内）
------------------------------------------------------------
轨道卡片上的两个出口：卡片下方的外链按钮 + 分类合集跳转。
指针捕获已改成「拖动超过阈值才拿」，这里再补三件事：
1) 链接恢复 pointer 光标（.rail 整体是 grab）
2) 图片禁止原生拖拽，否则按住一拖会变成「拖图片」而不是滚轨道
3) jump 卡片给一枚角标，让「点了会跳走」这件事可预期
============================================================ */
.rail a,
.rail-card a{ cursor:pointer; }
.rail-card .media img{ -webkit-user-drag:none; user-select:none; }
.rail-card .media.is-jump{ cursor:pointer; }
.jump-badge{
position:absolute; right:8px; top:8px; z-index:2;
display:inline-flex; align-items:center; gap:4px;
padding:4px 9px; border-radius:999px;
border:1px solid rgba(255,255,255,.22);
background:var(--solid); color:var(--on-solid);
font-family:var(--mono); font-size:9px; font-weight:700;
letter-spacing:.5px; white-space:nowrap;
box-shadow:0 6px 18px rgba(0,0,0,.35);
pointer-events:none;
opacity:0; transition:opacity var(--d2) var(--ease);
}
.rail-card:hover .jump-badge{ opacity:1; }
/* 外链按钮：轨道里卡片窄，收一档，但保证是可点的实心块 */
.rail-foot .work-link{
padding:5px 11px; border-radius:999px;
background:var(--solid); color:var(--on-solid); border-color:transparent;
font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.5px;
}
.rail-foot .work-link:hover{ filter:brightness(1.08); }
/* ============================================================
V6 — 后台：操作历史（撤销 / 重做）
============================================================ */
.hist-group{ display:inline-flex; align-items:center; gap:6px; }
.hist-btn{
display:inline-flex; align-items:center; gap:6px;
padding:8px 12px; border-radius:2px;
border:1px solid var(--line); background:var(--surface-2);
color:var(--grey); font-size:12px; font-weight:600;
transition:color var(--d2) var(--ease), border-color var(--d2) var(--ease), background var(--d2) var(--ease);
}
.hist-btn:hover:not(:disabled){ color:var(--on-solid); background:var(--solid); border-color:transparent; }
.hist-btn:disabled{ opacity:.34; cursor:not-allowed; }
.hist-count{
font-family:var(--mono); font-size:10px; letter-spacing:.4px; color:var(--mute);
}
/* 带撤销按钮的 toast */
.toast.is-action{ display:flex; align-items:center; gap:14px; }
.toast-msg{ flex:1 1 auto; }
.toast-act{
flex:0 0 auto; padding:5px 12px; border-radius:999px;
border:1px solid rgba(255,255,255,.28);
background:transparent; color:var(--star);
font-size:11px; font-weight:700; letter-spacing:.5px;
transition:background var(--d2) var(--ease), color var(--d2) var(--ease);
}
.toast-act:hover{ background:var(--star); color:var(--on-solid); }
/* 侧栏角标：几个需要盯的数字直接摆在入口上 */
.sb-badge{
margin-left:auto; min-width:20px; padding:1px 6px; border-radius:999px;
background:var(--surface-2); border:1px solid var(--line);
font-family:var(--mono); font-size:10px; font-weight:700; color:var(--grey);
text-align:center;
}
.sb-badge.is-warn{
background:var(--solid); border-color:transparent; color:var(--on-solid);
}
.sb-item.is-active .sb-badge{ background:rgba(255,255,255,.14); color:var(--star); }
.sb-item.is-active .sb-badge.is-warn{ background:var(--solid); color:var(--on-solid); }
/* 后台工具条：搜索 + 快捷键提示，一行放完 */
.tb-shortcuts{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--mono); font-size:10px; letter-spacing:.4px; color:var(--mute);
}
.tb-shortcuts kbd{
padding:2px 6px; border-radius:3px;
border:1px solid var(--line-2); background:var(--surface-2);
font-family:var(--mono); font-size:10px; color:var(--grey);
}
@media (max-width:1100px){ .tb-shortcuts{ display:none; } }
/* 侧栏分组标题 */
.sb-group{
padding:12px 12px 4px;
font-family:var(--mono); font-size:9.5px; font-weight:700;
letter-spacing:1.4px; text-transform:uppercase; color:var(--mute);
}
.sb-nav > .sb-group:first-child{ padding-top:0; }
/* 批量操作条吸底：勾了一堆作品往下滚的时候，操作按钮不该消失 */
.bulk-bar{
position:sticky; top:0; z-index:4;
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
/* 外链徽章改成 后要保持原来的块级排布与去掉下划线 */
.asset-link-tag{
display:block; text-decoration:none;
transition:color var(--d2) var(--ease);
}
.asset-link-tag:hover{ color:var(--star); text-decoration:underline; }
.pv-badge.is-link{ text-decoration:none; display:inline-flex; align-items:center; }
.pv-badge.is-link:hover{ filter:brightness(1.15); }
/* ------------------------------------------------------------
后台易用性微调
------------------------------------------------------------ */
/* 两排分类标签紧挨着且长得一样，很容易点错：
上面一排是「动作区」（选了再导入）→ 做成带强调边的卡片；
下面一排是「筛选区」（只看不改动）→ 压弱成一条筛选条。 */
.import-bar{
border-color:rgba(155,140,255,.40);
background:linear-gradient(180deg, rgba(155,140,255,.07), rgba(155,140,255,0));
}
.import-head{ margin-bottom:2px; }
.import-title{ letter-spacing:.3px; }
.import-title::before{
content:''; display:inline-block; width:6px; height:6px; margin-right:8px;
border-radius:50%; background:var(--accent); vertical-align:1px;
}
.import-tags .tag-chip.is-active{
background:var(--solid); color:var(--on-solid); border-color:transparent; font-weight:700;
}
.cat-bar{
padding-top:10px; border-top:1px solid var(--line);
}
.cat-bar-label{
font-family:var(--mono); font-size:10px; letter-spacing:.6px;
text-transform:uppercase; color:var(--mute);
}
.cat-bar-tags .tag-chip{ font-family:var(--mono); font-size:11px; padding:5px 12px; }
.cat-bar-tags .tag-chip.is-active{
background:var(--surface-2); border-color:var(--accent); color:var(--star); font-weight:700;
}