/* ============================================================
   琉光逸彩 · 站点样式　V2「显影盘」
   ------------------------------------------------------------
   语言：暗房 / 银盐
     底色取自银盐相纸在安全灯下的暖炭，而非纯黑；
     全页唯一色相来自暗房安全灯琥珀 --amber；
     作品以「显影」的方式浮现。

   ⚠️ 兼容约定（改视觉时不得违反）：
     assets/cloud.js 与 admin.html 会动态生成 / 依赖下列类名，
     它们是与 JS 的契约，重做外观时只能改样式、不能删类：
       .grid .cell .cap .filters .skeleton .empty-note
       .lb .lb .info .nav-btn .prev .next .x
       .cat-wall .cat-tile .cat-name .noimg
       .admin-shell .card .field .btn .row .tabs .msg .hint
       .drop .thumb-list .thumb-item .badge .bar .modal
     V1 的旧变量名（--ink / --paper / --soft / --line / --muted）
     在本版「反相复用」——即深色底上的对应取值，使沿用旧变量的
     组件自动适配深色，无需逐条改写。
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root{
  /* 本版原始语言 */
  --char:#17140f;          /* 相纸暗（暖炭） */
  --char-2:#201a12;        /* 相纸暗·浅一档 */
  --bath:#3a3026;          /* 显影液 */
  --amber:#c8811f;         /* 安全灯琥珀 —— 全页唯一色相 */
  --amber-dim:#8a5c1c;
  --silver:#d9d3c7;        /* 米银正文 */
  --dim:#7a7265;
  --ghost:#565046;
  --rule:rgba(217,211,199,.13);

  /* V1 变量名 · 反相复用（供旧组件自动适配） */
  --ink:#e6e0d5;
  --ink-2:#a89f90;
  --muted:#7a7265;
  --paper:#1c1710;
  --soft:#241d15;
  --line:rgba(217,211,199,.13);
  --red:#d4574f;

  --serif:"Songti SC","SimSun","Noto Serif SC","Source Han Serif SC",Georgia,serif;
  --sans:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --maxw:1320px;
  --pad:34px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--char);color:var(--silver);
  font-family:var(--sans);font-size:15px;line-height:1.8;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
::selection{background:rgba(200,129,31,.28)}

/* ---------- 占位符（待补文案） ---------- */
.ph{
  color:#d9a355;background:rgba(200,129,31,.09);
  border-bottom:1px dashed rgba(200,129,31,.45);padding:0 4px;border-radius:3px;
  font-size:.94em;
}

/* ---------- 容器 ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
@media(max-width:760px){.wrap{padding:0 18px}}

/* ============================================================
   页头 —— 只留四方印，无文字
   ============================================================ */
.hd{
  position:sticky;top:0;z-index:60;background:rgba(23,20,15,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);
}
.hd-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);min-height:84px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;line-height:1}
.brand .mark,.brand .seal{width:52px;height:52px;flex:none;display:block;opacity:.94;
  transition:opacity .3s ease}
.brand:hover .mark,.brand:hover .seal,
.brand:focus-visible .mark,.brand:focus-visible .seal{opacity:1}
/* V1 残留的中英文品牌块：本版不再使用，隐藏以防万一 */
.brand .bt{display:none}
.nav{display:flex;gap:30px;align-items:center}
.nav a{
  font-family:var(--serif);font-size:14px;letter-spacing:.1em;color:var(--dim);
  padding:5px 0;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.nav a:hover{color:var(--silver)}
.nav a.on{color:var(--silver);border-bottom-color:var(--amber)}
/* 后台管理：与常规导航间加一道细分隔 */
.nav a.admin{position:relative}
.nav a.admin::before{
  content:"";position:absolute;left:-15px;top:50%;transform:translateY(-50%);
  width:1px;height:13px;background:var(--rule);
}
.nav a.admin:hover{color:var(--amber)}

/* ============================================================
   首页 · 首屏：显影
   ============================================================ */
.hero{
  position:relative;min-height:calc(100svh - 84px);display:flex;
  align-items:flex-end;overflow:hidden;background:#0d0b08;
}
.hero .frame{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 68% 28%, #6d5433 0%, #2c2418 46%, #100d09 100%),
    linear-gradient(200deg,#191308 0%,#0d0b08 100%);
  filter:grayscale(.55) contrast(1.12) brightness(.72);
  animation:develop 2.6s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes develop{
  0%  {filter:grayscale(1) blur(22px) brightness(.28) contrast(.7);opacity:.35}
  55% {filter:grayscale(.8) blur(5px) brightness(.58) contrast(1)}
  100%{filter:grayscale(.55) blur(0) brightness(.72) contrast(1.12);opacity:1}
}
/* 相纸中央的暗角 */
.hero .vign{position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 40%,transparent 38%,rgba(10,8,5,.78) 100%)}
/* 安全灯：右侧一抹琥珀光晕 */
.hero .lamp{
  position:absolute;right:-8%;top:-14%;width:56vw;height:56vw;max-width:760px;
  background:radial-gradient(closest-side,rgba(200,129,31,.24),transparent 72%);
  pointer-events:none;mix-blend-mode:screen;
}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad) 78px}
.kicker{font-family:var(--serif);font-size:13px;letter-spacing:.42em;color:var(--amber);
  margin:0 0 22px}
.hero h1,.hero-in h1{
  font-family:var(--serif);font-size:clamp(44px,8.4vw,104px);font-weight:600;
  letter-spacing:.1em;margin:0 0 20px;line-height:1.06;color:#f2ede3;
}
.hero .lead{max-width:44ch;font-size:16px;color:rgba(217,211,199,.82);margin:0}
.hero .meta{margin-top:34px;display:flex;gap:38px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:18px;max-width:560px}
.hero .meta div{font-size:12.5px;color:var(--dim);letter-spacing:.06em}
.hero .meta b{display:block;font-family:var(--serif);font-size:19px;color:var(--silver);
  letter-spacing:.04em;margin-bottom:3px}

/* ============================================================
   首页 · 胶片齿孔条
   ============================================================ */
.film{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--char-2);overflow-x:auto;scrollbar-width:none}
.film::-webkit-scrollbar{display:none}
.film-in{display:flex;width:100%;max-width:var(--maxw);margin:0 auto}
.frame-sl{
  flex:1 1 0;min-width:0;padding:34px 38px 32px;border-right:1px solid var(--rule);
  position:relative;transition:background .3s;
}
.frame-sl:hover{background:rgba(200,129,31,.05)}
.frame-sl:last-child{border-right:none}
/* 齿孔：胶片上下两排小方孔 */
.frame-sl::before,.frame-sl::after{
  content:"";position:absolute;left:0;right:0;height:7px;
  background-image:repeating-linear-gradient(90deg,var(--ghost) 0 7px,transparent 7px 18px);
  opacity:.5;
}
.frame-sl::before{top:9px}
.frame-sl::after{bottom:9px}
.frame-sl .no{font-size:10px;letter-spacing:.26em;color:var(--amber-dim);margin-bottom:18px}
.frame-sl .nm{font-family:var(--serif);font-size:24px;letter-spacing:.18em;margin-bottom:6px}
.frame-sl .sub{font-size:11px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.frame-sl .sp{font-size:11px;color:var(--ghost);letter-spacing:.1em;margin-top:10px}

/* ============================================================
   区块通用
   ============================================================ */
.sec{max-width:var(--maxw);margin:0 auto;padding:96px var(--pad)}
.sec.tight{padding:64px var(--pad)}
.sec-h{display:flex;align-items:baseline;gap:20px;margin-bottom:40px;flex-wrap:wrap;
  justify-content:flex-start}
.sec-h h2{font-family:var(--serif);font-size:clamp(24px,3vw,34px);font-weight:600;
  letter-spacing:.14em;margin:0;color:var(--silver)}
.sec-h p{font-size:13px;color:var(--dim);letter-spacing:.06em;margin:0}
.sec-h .hint{font-size:13px;color:var(--dim);letter-spacing:.06em;margin:0}
.sec-note{color:var(--ink-2);font-size:14.5px;max-width:720px;margin:0 0 8px}
#spaces,#cats{scroll-margin-top:90px}

/* ============================================================
   两个空间：底片卡
   ============================================================ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* 原型 A 结构：.neg > .pic + .gr + .cap */
.neg{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--char-2);
  border:1px solid var(--rule);display:flex;align-items:flex-end}
.neg .pic{position:absolute;inset:0;transition:transform 1s cubic-bezier(.22,.61,.36,1);
  filter:grayscale(.42) contrast(1.08)}
.neg:hover .pic{transform:scale(1.05)}
.neg .pic-still{background:
  radial-gradient(70% 60% at 40% 34%,#8d7d63 0%,#4a4032 52%,#221c13 100%)}
.neg .pic-motion{background:
  radial-gradient(60% 52% at 62% 40%,#a8763a 0%,#5c3f21 50%,#241a0f 100%),
  linear-gradient(120deg,#3a2a18,#171009)}
.neg .gr{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 34%,rgba(12,10,7,.9) 100%)}
.neg .cap{position:relative;z-index:2;padding:30px 28px;width:100%}
.neg .cap .cn{font-family:var(--serif);font-size:26px;letter-spacing:.16em;display:block;
  margin-bottom:6px;color:var(--silver)}
.neg .cap .en{font-size:11px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase}
.neg .cap .tag{display:inline-block;margin-top:14px;font-size:12.5px;letter-spacing:.08em;
  color:var(--amber);border-bottom:1px solid var(--amber-dim);padding-bottom:2px}
/* V1 结构兼容：.duo a > img + .mask（云端取图时使用） */
.duo a{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;
  background:var(--char-2);border:1px solid var(--rule)}
.duo img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.duo a:hover img{transform:scale(1.035)}
.duo .mask{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(12,10,7,.88) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:30px;color:var(--silver)}
.duo .mask .t{font-family:var(--serif);font-size:24px;letter-spacing:.16em;font-weight:600}
.duo .mask .s{font-size:11px;letter-spacing:.2em;opacity:.8;margin-top:6px;text-transform:uppercase;color:var(--dim)}
.duo .noimg{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);
  font-size:12.5px;letter-spacing:.1em}

/* ============================================================
   关于
   ============================================================ */
.about{border-top:1px solid var(--rule);background:var(--char-2)}
.about-in{max-width:var(--maxw);margin:0 auto;padding:88px var(--pad);
  display:grid;grid-template-columns:220px 1fr;gap:56px}
.about-in .lbl{font-family:var(--serif);font-size:15px;letter-spacing:.2em;color:var(--dim)}
.about-in p{margin:0 0 20px;max-width:62ch;font-size:16px;line-height:1.95;color:var(--silver)}
.about-in p:last-child{margin-bottom:0}
.about-in .quote{font-family:var(--serif);font-size:19px;color:var(--amber);
  border-left:2px solid var(--amber-dim);padding-left:22px;margin-top:8px}

/* ============================================================
   筛选（cloud.js mountGallery 依赖）
   ============================================================ */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px;
  border-bottom:1px solid var(--rule);padding-bottom:18px}
.filters button{
  font-family:var(--serif);font-size:13.5px;letter-spacing:.1em;color:var(--dim);
  background:none;border:1px solid var(--rule);border-radius:999px;
  padding:7px 18px;cursor:pointer;transition:.2s;
}
.filters button:hover{color:var(--silver);border-color:var(--bath);background:rgba(200,129,31,.06)}
.filters button.on{color:var(--char);background:var(--amber);border-color:var(--amber)}

/* ============================================================
   画廊 · 瀑布流（cloud.js 写 grid-row-end）
   ============================================================ */
.grid{
  --row-h:6px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  grid-auto-rows:var(--row-h);gap:12px;grid-auto-flow:dense;
}
.cell{
  position:relative;overflow:hidden;background:var(--char-2);cursor:zoom-in;
  border:1px solid var(--rule);padding:0;grid-row-end:span 40;height:100%;
}
.cell img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.28) contrast(1.04);opacity:.94;
  transition:opacity .5s,transform .8s cubic-bezier(.2,.7,.3,1),filter .5s}
.cell:hover img{transform:scale(1.03);filter:grayscale(0) contrast(1.02);opacity:1}
.cell .cap{
  position:absolute;left:0;right:0;bottom:0;padding:36px 16px 14px;
  background:linear-gradient(180deg,rgba(12,10,7,0) 0%,rgba(12,10,7,.86) 100%);
  color:var(--silver);opacity:0;transition:opacity .3s;text-align:left;
}
.cell:hover .cap{opacity:1}
.cell .cap b{display:block;font-size:13.5px;font-weight:600;letter-spacing:.06em;
  font-family:var(--serif)}
.cell .cap span{font-size:11.5px;opacity:.82;letter-spacing:.1em;color:var(--dim)}
.skeleton{
  aspect-ratio:4/3;
  background:linear-gradient(100deg,#241d15 30%,#2f271b 50%,#241d15 70%);
  background-size:200% 100%;animation:sk 1.3s infinite;
}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty-note{
  padding:72px 0;text-align:center;color:var(--dim);font-size:13.5px;letter-spacing:.08em;
  border:1px dashed var(--rule);
}

/* ============================================================
   首页子分类方块墙（cloud.js mountCategoryWall 依赖，保留兼容）
   ============================================================ */
.cat-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cat-tile{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:var(--char-2);border:1px solid var(--rule)}
.cat-tile img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.3) contrast(1.05);transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .5s}
.cat-tile:hover img{transform:scale(1.04);filter:grayscale(0)}
.cat-tile .cat-name{
  position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;
  background:linear-gradient(180deg,rgba(12,10,7,0) 0%,rgba(12,10,7,.88) 100%);
  color:var(--silver);font-family:var(--serif);font-size:15px;letter-spacing:.2em;
}
.cat-tile .noimg{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--dim);font-size:13px;letter-spacing:.16em}

/* ============================================================
   灯箱（cloud.js 动态创建，样式必须全局可用）
   ============================================================ */
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,8,5,.96);
  display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:86vh;object-fit:contain;
  box-shadow:0 24px 80px rgba(0,0,0,.7)}
.lb .info{position:absolute;left:0;right:0;bottom:0;padding:26px 34px;color:var(--silver);
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.lb .info b{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.08em}
.lb .info span{display:block;font-size:12.5px;opacity:.72;margin-top:4px;color:var(--dim)}
.lb .x{position:absolute;top:22px;right:26px;background:none;border:0;color:var(--silver);
  font-size:26px;cursor:pointer;opacity:.65;line-height:1;transition:opacity .2s}
.lb .x:hover{opacity:1}
.lb .nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;
  color:var(--silver);font-size:30px;cursor:pointer;opacity:.42;padding:20px;transition:opacity .2s}
.lb .nav-btn:hover{opacity:1}
.lb .prev{left:8px}
.lb .next{right:8px}

/* ============================================================
   内容页 · 板块题词（经文）
   ============================================================ */
.epigraph{margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--rule);
  font-family:var(--serif);max-width:760px}
.epigraph p{margin:0;font-size:18px;letter-spacing:.05em;line-height:1.85;color:var(--silver)}
.epigraph p.en{margin:10px 0 0;font-size:13px;letter-spacing:0;line-height:1.85;
  color:var(--dim);font-style:italic}
.epigraph cite{display:block;margin-top:14px;font-family:var(--sans);font-style:normal;
  font-size:11.5px;letter-spacing:.12em;color:var(--ghost)}

/* ============================================================
   文字页 · 长文
   ============================================================ */
.prose{max-width:780px}
.prose h3{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.12em;
  margin:44px 0 14px;padding-left:15px;border-left:2px solid var(--amber);color:var(--silver)}
.prose p{margin:15px 0;color:var(--ink-2);font-size:15px;line-height:1.95}
.prose p b{color:var(--silver);font-weight:600}
.prose .meta-row{display:flex;flex-wrap:wrap;gap:36px;margin:32px 0;padding:24px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.prose .meta-row div{font-size:13.5px;color:var(--dim)}
.prose .meta-row b{display:block;color:var(--silver);font-size:14.5px;font-weight:600;
  letter-spacing:.04em;margin-top:4px}

/* ============================================================
   页脚
   ============================================================ */
.ft{border-top:1px solid var(--rule);background:var(--char)}
.ft-in{max-width:var(--maxw);margin:0 auto;padding:48px var(--pad);
  display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-end}
.ft .wm,.ft .wordmark{font-family:var(--serif);font-size:16px;letter-spacing:.2em;
  color:var(--silver);margin-bottom:14px}
.ft a.quiet{color:var(--dim);border-bottom:1px solid var(--rule)}
.ft a.quiet:hover{color:var(--silver)}
.ft .sm{font-size:12.5px;color:var(--dim);letter-spacing:.06em;line-height:2;margin-top:0}

/* 页脚信息栏：版权 / ICP备案 · 公安联网备案（两行制） */
.ft .legal{margin-top:0;font-size:12px;color:var(--dim);letter-spacing:.04em;line-height:1.95}
.ft .legal p{margin:0}
.ft .legal .reg{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px}
.ft .legal a{color:var(--dim);border-bottom:1px solid transparent;transition:color .2s}
.ft .legal a:hover{color:var(--silver)}
.ft .legal a.gongan{display:inline-flex;align-items:center;gap:5px}
.ft .legal img{height:14px;width:auto;flex:none;display:inline-block;vertical-align:-2px;
  opacity:.92;transition:opacity .25s}
.ft .legal a.gongan:hover img{opacity:1}

/* ============================================================
   后台
   ============================================================ */
.admin-shell{max-width:1000px;margin:0 auto;padding:52px var(--pad) 84px}
.card{border:1px solid var(--rule);border-radius:12px;padding:30px;
  background:var(--paper)}
.card + .card{margin-top:20px}
.card h3{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.12em;
  margin:0 0 8px;color:var(--silver)}
.card .sub{font-size:13px;color:var(--dim);margin:0 0 22px;line-height:1.8}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;letter-spacing:.1em;color:var(--dim);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:14px;color:var(--silver);
  padding:12px 14px;border:1px solid var(--rule);border-radius:8px;
  background:rgba(217,211,199,.04);transition:border-color .2s,background .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ghost)}
.field textarea{resize:vertical;min-height:78px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--amber);background:rgba(200,129,31,.06);
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.field select option{background:var(--char-2);color:var(--silver)}

.btn{
  font-family:inherit;font-size:13.5px;letter-spacing:.08em;cursor:pointer;
  padding:12px 24px;border-radius:8px;border:1px solid var(--amber);
  background:var(--amber);color:#17140f;font-weight:600;transition:.2s;
}
.btn:hover{background:#d8912a;border-color:#d8912a}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:none;color:var(--silver);border-color:var(--rule);font-weight:400}
.btn.ghost:hover{background:rgba(217,211,199,.06);border-color:var(--bath)}
.btn.danger{background:none;color:var(--red);border-color:rgba(212,87,79,.36);font-weight:400}
.btn.danger:hover{background:rgba(212,87,79,.1)}
.btn.sm{padding:8px 15px;font-size:12.5px;border-radius:7px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--rule)}
.tabs button{
  font-family:inherit;font-size:13.5px;background:none;border:0;
  border-bottom:2px solid transparent;color:var(--dim);
  padding:11px 16px;cursor:pointer;letter-spacing:.08em;transition:.2s;
}
.tabs button:hover{color:var(--silver)}
.tabs button.on{color:var(--silver);border-bottom-color:var(--amber)}
.msg{margin-top:16px;font-size:13.5px;padding:12px 15px;border-radius:8px;display:none}
.msg.show{display:block}
.msg.err{background:rgba(212,87,79,.1);color:#e07d76;border:1px solid rgba(212,87,79,.3)}
.msg.ok{background:rgba(200,129,31,.1);color:#d9a355;border:1px solid rgba(200,129,31,.3)}
.hint{font-size:12.5px;color:var(--dim);line-height:1.8}
.hint code{background:rgba(217,211,199,.07);padding:1px 6px;border-radius:4px;
  font-size:12px;color:var(--silver)}
.drop{
  border:1.5px dashed var(--rule);border-radius:10px;padding:34px;text-align:center;
  color:var(--dim);font-size:13.5px;cursor:pointer;transition:.2s;
  background:rgba(217,211,199,.02);
}
.drop:hover,.drop.over{border-color:var(--amber);color:var(--silver);background:rgba(200,129,31,.06)}
.thumb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:14px;margin-top:22px}
.thumb-item{border:1px solid var(--rule);border-radius:10px;overflow:hidden;
  background:rgba(217,211,199,.02)}
.thumb-item .im{aspect-ratio:4/3;overflow:hidden;background:var(--char-2)}
.thumb-item .im img{width:100%;height:100%;object-fit:cover}
.thumb-item .bd{padding:11px 12px}
.thumb-item .bd .t{font-size:12.5px;font-weight:600;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--silver)}
.thumb-item .bd .m{font-size:11.5px;color:var(--dim);margin-top:3px}
.thumb-item .ops{display:flex;gap:6px;padding:0 12px 12px}
.badge{display:inline-block;font-size:11px;letter-spacing:.08em;padding:3px 9px;
  border-radius:999px;background:rgba(217,211,199,.06);color:var(--ink-2);
  border:1px solid var(--rule)}
.badge.red{background:rgba(200,129,31,.12);color:#d9a355;border-color:rgba(200,129,31,.32)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:22px}
.bar .who{font-size:13px;color:var(--dim)}
.bar .who b{color:var(--silver);font-weight:600}

/* 后台弹窗（原在 admin.html 内联，本版统一到主表） */
.modal{position:fixed;inset:0;z-index:220;background:rgba(10,8,5,.72);
  display:none;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(3px)}
.modal.open{display:flex}
.modal .card{width:min(460px,92vw);max-height:88vh;overflow:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.6)}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:900px){
  .duo{grid-template-columns:1fr}
  .about-in{grid-template-columns:1fr;gap:24px}
  .film-in{flex-direction:column}
  .frame-sl{border-right:none;border-bottom:1px solid var(--rule)}
  .frame-sl:last-child{border-bottom:none}
}
@media(max-width:700px){
  .sec{padding:66px 20px}
  .sec.tight{padding:50px 20px}
  .cat-wall{grid-template-columns:repeat(2,1fr);gap:10px}
  .hd-in{height:auto;min-height:64px;flex-wrap:wrap;padding:10px 18px;row-gap:6px;gap:12px}
  .nav{width:100%;flex-wrap:nowrap;justify-content:flex-start;gap:20px;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0 2px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:13px;letter-spacing:.04em;white-space:nowrap}
  .nav a.admin::before{left:-10px;height:11px}
}
@media(max-width:640px){
  :root{--pad:20px}
  .hd-in{min-height:60px;padding:10px 18px;gap:8px}
  .brand .mark,.brand .seal{width:40px;height:40px}
  .hero{min-height:78svh}
  .hero-in{padding-bottom:54px}
  .frame-sl{padding:28px 22px 26px}
  .ft-in{padding:38px var(--pad)}
}
@media(prefers-reduced-motion:reduce){
  .hero .frame{animation:none;filter:grayscale(.5) brightness(.7) contrast(1.1)}
  .neg .pic,.cell img,.duo img{transition:none}
  .skeleton{animation:none}
  html{scroll-behavior:auto}
}