:root {
  --paper:#f3efe8; --paper-soft:#faf8f3; --ink:#25221f; --muted:#766f66; --line:rgba(37,34,31,.15);
  --accent:#8a705a; --dark:#272725; --white:#fffdf9; --danger:#a04e42;
  /* 图片圆角：全站统一，只改这两个值就能整体调大调小（详见文件末尾） */
  --radius-img:10px; --radius-img-sm:6px;
  /* 字体栈：本地自托管思源（OFL 1.1，可商用）优先，
     若遇极生僻字自动回退系统中文字体，保证不出现缺字方框。
     合规：字体文件已部署在本站服务器 /static/fonts/，不再请求任何境外 CDN。 */
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",sans-serif;
  /* 后台「调整目录 → 外观」里可调：字号缩放（1 = 原始大小） */
  --scale-nav:1; --scale-heading:1; --scale-body:1; --scale-brand:1; --scale-hero-title:1; --scale-hero-text:1;
  --scale-contact-title:1; --scale-contact-text:1; --scale-contact-label:1; --scale-contact-value:1;
  --hero-title-color:#fffdf9; --hero-text-color:#fffdf9;
  --contact-title-color:#fffdf9; --contact-text-color:#fffdf9; --contact-label-color:#fffdf9; --contact-value-color:#fffdf9;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
img { max-width:100%; display:block; }
h1,h2,h3,p { margin-top:0; }
/* 2026-10-18：顶栏高度减半（原 89.8px → 目标约 45px）。
   原来是 padding 上下各 22px + 导航内容 45.8px。
   导航是「中文在上、英文在下」两行，内容高压不到 30px 以下（否则两行挤在一起），
   所以主要从 padding 砍：22px → 10px。再把链接自身内边距 6px→3px、行间距 4px→2px。 */
.site-header { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:10px clamp(20px,5vw,72px); color:var(--white); transition:background .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease; }
/* 2026-10-23（用户：「把导航栏，全站都是透明底」）：吸顶后也不铺底色，只把字换成深色 */
.site-header.solid { position:sticky; color:var(--ink); background:transparent; border-bottom:0; box-shadow:none; }
.brand { display:flex; align-items:baseline; gap:12px; }
.brand-cn { font-family:var(--serif); font-size:calc(20px * var(--scale-brand,1)); letter-spacing:.14em; }
.brand-en { font-size:calc(9px * var(--scale-brand,1)); opacity:.62; letter-spacing:.16em; text-transform:uppercase; }
/* 导航：中文在上、英文在下（字号比原来 12px 放大一些，但不至于喧宾夺主） */
.site-nav { display:flex; align-items:center; gap:clamp(13px,2.2vw,32px); font-size:calc(15px * var(--scale-nav,1)); letter-spacing:.09em; }
.header-right { display:flex; align-items:center; gap:clamp(18px,3vw,46px); }
/* 顶栏搜索框：圆角胶囊 */
.header-search { display:flex; align-items:center; gap:9px; padding:5px 15px; border:1px solid rgba(255,253,249,.34); border-radius:999px; background:rgba(255,253,249,.1); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:border-color .25s ease, background .25s ease; }
.header-search:hover,.header-search:focus-within { border-color:rgba(255,253,249,.7); background:rgba(255,253,249,.18); }
.header-search-icon { color:rgba(255,253,249,.78); font-size:15px; line-height:1; }
.header-search-input { width:clamp(80px,9vw,132px); padding:0; border:0; background:transparent; color:var(--white); font-family:inherit; font-size:12px; letter-spacing:.06em; outline:none; }
.header-search-input::placeholder { color:rgba(255,253,249,.58); }
.header-search-input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
/* 内页顶栏是浅色的，搜索框跟着换配色 */
.site-header.solid .header-search { border-color:var(--line); background:var(--white); }
.site-header.solid .header-search:hover,.site-header.solid .header-search:focus-within { border-color:var(--ink); background:var(--white); }
.site-header.solid .header-search-icon { color:var(--muted); }
.site-header.solid .header-search-input { color:var(--ink); }
.site-header.solid .header-search-input::placeholder { color:var(--muted); }
.site-nav a { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:3px 0; line-height:1.2; }
.nav-en { font-size:calc(9px * var(--scale-nav,1)); letter-spacing:.13em; text-transform:uppercase; opacity:.6; }
.site-nav a::after { content:""; position:absolute; right:0; bottom:0; left:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .3s ease; }
.site-nav a:hover::after,.site-nav a.active::after { transform:scaleX(1); transform-origin:left; }
.page-shell { overflow:hidden; }
/* 粘性页脚：内容比屏幕短时（比如只有一条笔记），页脚也沉在页面最底下。
   注意页面的结构是 body > #app > (header + main + footer)，
   所以 flex 链要一路传到 #app 里面的 main，只写 body 是不起作用的。 */
.site-page { display:flex; flex-direction:column; min-height:100vh; }
.site-page #app { display:flex; flex-direction:column; flex:1 0 auto; }
.site-page #app > .page-shell { flex:1 0 auto; }
.site-page #app > .site-footer { flex:none; }
.section { padding:clamp(70px,9vw,138px) clamp(20px,5vw,72px); }
.section-soft { background:var(--paper-soft); }
.section-dark { color:var(--white); background:var(--dark); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(30px,5vw,60px); padding-bottom:18px; border-bottom:1px solid var(--line); }
.section-head h2 { margin:0; font-family:var(--serif); font-size:calc(clamp(28px,3.6vw,48px) * var(--scale-heading,1)); font-weight:500; letter-spacing:.06em; }
.section-head span { color:var(--muted); font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.hero { position:relative; min-height:90vh; display:flex; align-items:flex-end; overflow:hidden; color:var(--white); background:#71685d; }
.hero-scene { position:absolute; inset:0; background:radial-gradient(ellipse at 76% 25%,rgba(255,246,218,.88),transparent 27%),repeating-linear-gradient(90deg,transparent 0 94px,rgba(255,255,255,.11) 94px 95px),linear-gradient(145deg,#37332e 0 24%,#766a5c 24% 44%,#b8a991 44% 58%,#665d52 58% 100%); }
.hero-scene::before { content:""; position:absolute; inset:18% 12% 15% 10%; border:1px solid rgba(255,255,255,.18); box-shadow:inset 44px 0 70px rgba(0,0,0,.08); }
.hero-scene::after { content:""; position:absolute; right:6%; bottom:-4%; width:min(48vw,760px); height:58%; background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.19)),repeating-linear-gradient(90deg,transparent 0 88px,rgba(39,35,31,.16) 88px 89px); transform:perspective(700px) rotateY(-8deg); opacity:.65; }
.hero-scene.has-image { inset:0; background-size:cover!important; background-position:center!important; }
.hero-scene.has-image::before { opacity:.25; }
.hero-scene.has-image::after { display:none; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(18,18,17,.67),rgba(18,18,17,.22) 55%,rgba(18,18,17,.04)); }
.hero-content { position:relative; z-index:2; width:min(880px,100%); padding:0 clamp(16px,var(--hero-pad-x,5vw),90px) clamp(40px,var(--hero-pad-bottom,8vw),130px); }
/* 首页大图文字的位置（后台「外观」里可调） */
.hero-valign-top { align-items:flex-start; }
.hero-valign-center { align-items:center; }
.hero-valign-bottom { align-items:flex-end; }
.hero-align-center .hero-content { margin-left:auto; margin-right:auto; text-align:center; }
.hero-align-center .hero-content p { margin-left:auto; margin-right:auto; }
.hero-align-center .eyebrow { justify-content:center; }
.hero-align-right .hero-content { margin-left:auto; text-align:right; }
.hero-align-right .hero-content p { margin-left:auto; }
.hero-align-right .eyebrow { justify-content:flex-end; }
.eyebrow { display:flex; align-items:center; gap:13px; margin-bottom:20px; color:inherit; font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.78; }
.eyebrow::before { content:""; width:42px; height:1px; background:currentColor; opacity:.55; }
.hero h1 { margin-bottom:22px; font-family:var(--serif); font-size:calc(clamp(40px,6.2vw,82px) * var(--scale-hero-title,1)); font-weight:500; line-height:1.2; letter-spacing:.05em; color:var(--hero-title-color,#fffdf9); }
.hero p { max-width:620px; margin:0; color:var(--hero-text-color,#fffdf9); opacity:.76; font-size:calc(14px * var(--scale-hero-text,1)); line-height:1.9; letter-spacing:.06em; }
/* 首页大图上的小标签（YANG HAO SPACE DESIGN）单独控制 */
.hero .eyebrow { color:var(--hero-text-color,#fffdf9); font-size:calc(10px * var(--scale-hero-text,1)); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 18px; color:var(--white); border:1px solid var(--dark); background:var(--dark); cursor:pointer; letter-spacing:.08em; transition:opacity .25s ease,transform .25s ease; }
.button:hover { opacity:.85; transform:translateY(-1px); }
.button.secondary { color:var(--ink); border-color:var(--line); background:transparent; }
.button.accent { border-color:var(--accent); background:var(--accent); }
.button.danger { border-color:var(--danger); background:var(--danger); }
.button.small { padding:8px 11px; font-size:11px; }
.work-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.6vw,38px); }
.work-card { grid-column:span 4; }
.work-card.featured { grid-column:span 6; }
.work-card.featured:first-child { grid-column:1 / -1; }
/* 首页「精选设计项目」：4 个，两行铺满（每行 2 个，各占一半）；
   不足 4 个时按实际数量排；只有 1 个时占满整行。
   封面用固定宽高比，卡片变宽时图片比例不变，不会被压扁。 */
.home-works .work-card,
.home-works .work-card.featured,
.home-works .work-card.featured:first-child { grid-column:span 6; }
.home-works.one .work-card,
.home-works.one .work-card.featured,
.home-works.one .work-card.featured:first-child { grid-column:1 / -1; }
.home-works .work-cover,
.home-works .work-card.featured .work-cover { min-height:0; aspect-ratio:16 / 9; }
.home-works.one .work-cover,
.home-works.one .work-card.featured .work-cover { aspect-ratio:2.4; }
/* 首页「施工进度」：2 个一排铺满整行；只有一个时占满整行。
   （「施工进度」页本身是 3 个一排，和设计项目页一致，不受这里影响） */
.home-progress .work-card { grid-column:span 6; }
.home-progress.one .work-card { grid-column:1 / -1; }
.home-progress .work-cover { min-height:0; aspect-ratio:16 / 9; }
.home-progress.one .work-cover { aspect-ratio:2.4; }
.work-cover { position:relative; min-height:0; overflow:hidden; background:linear-gradient(145deg,#3e3b36,#9b8d7b 55%,#d4c8b5); aspect-ratio:4 / 3; }   /* 固定宽高比：竖图不再撑高，卡片底边对齐 */
.work-card.featured .work-cover { min-height:0; aspect-ratio:16 / 9; }   /* 推荐卡片用更宽的比例 */
/* 列表页（设计项目页）的卡片一律等宽等比例，不受「重点展示」标记影响。
   app.js 里给这个网格加了 flat-grid 类，但之前只在窄屏（≤760px）写了配套规则，
   桌面端漏了 —— 于是 featured 项目是半宽 16:9、其余是三分之一宽 4:3，
   同一页 9 张封面大小不一、第一行还会空出 4 列。这里补齐桌面端。 */
.work-grid.flat-grid .work-card,
.work-grid.flat-grid .work-card.featured,
.work-grid.flat-grid .work-card.featured:first-child { grid-column:span 4; }
.work-grid.flat-grid .work-card .work-cover,
.work-grid.flat-grid .work-card.featured .work-cover { aspect-ratio:4 / 3; }
@media (max-width:1000px) {
  .work-grid.flat-grid .work-card,
  .work-grid.flat-grid .work-card.featured,
  .work-grid.flat-grid .work-card.featured:first-child { grid-column:span 6; }
}
.work-cover img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .8s ease; }
.work-card:hover .work-cover img { transform:scale(1.025); }
.work-cover::after { content:""; position:absolute; inset:11%; border:1px solid rgba(255,255,255,.18); pointer-events:none; }
.work-meta { padding-top:16px; }
.work-meta h3 { margin:0 0 6px; font-family:var(--serif); font-size:calc(21px * var(--scale-heading,1)); font-weight:500; letter-spacing:.05em; }
.work-meta p { margin:0; color:var(--muted); font-size:calc(11px * var(--scale-body,1)); line-height:1.7; }
.work-meta-time { display:block; margin-top:7px; color:var(--muted); font-size:11px; letter-spacing:.06em; }
/* 施工记录卡片现在复用 .work-card / .work-cover / .work-meta，这一组已弃用 */
.badge { display:inline-block; padding:6px 9px; color:#fff; border:1px solid rgba(255,255,255,.25); background:rgba(25,24,22,.25); font-size:9px; letter-spacing:.1em; }
/* 2026-10-17：加 white-space:nowrap。轮播里还没加载的图，外框宽度是 0，
   水印会被挤成三行；锁成一行就不会。 */
.watermark { position:absolute; z-index:3; right:16px; bottom:14px; color:rgba(255,255,255,.68); text-shadow:0 1px 6px rgba(0,0,0,.45); font-size:9px; letter-spacing:.06em; white-space:nowrap; }
.progress-bar { height:2px; margin-top:18px; background:var(--line); }
.progress-bar span { display:block; height:100%; background:var(--accent); }
.timeline { border-top:1px solid var(--line); }
.timeline-item { display:grid; grid-template-columns:120px minmax(180px,.8fr) minmax(220px,1.2fr) 24px; gap:28px; align-items:center; padding:26px 0; border-bottom:1px solid var(--line); }
.timeline-item time { color:var(--muted); font-size:10px; letter-spacing:.1em; }
.timeline-item h3 { margin:0; font-family:var(--serif); font-size:calc(18px * var(--scale-heading,1)); font-weight:500; letter-spacing:.04em; }
.timeline-item p { margin:0; color:var(--muted); font-size:calc(11px * var(--scale-body,1)); line-height:1.7; }
.timeline-item .arrow { color:var(--accent); }
/* 施工记录里的现场照片：列数由 JS 按张数给（cols-1 ~ cols-5），整条铺满行宽。
   1~2 张时把单张宽度卡在 430px，避免一张图占满整屏；3 张以上均分整行。
   照片用 3:2 扁图，一行不会又大又高。 */
.photo-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:12px; }
.photo-strip.cols-1 { grid-template-columns:minmax(0,430px); }
.photo-strip.cols-2 { grid-template-columns:repeat(2,minmax(0,430px)); }
.photo-strip.cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.photo-strip.cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.photo-strip img { aspect-ratio:3 / 2; width:100%; object-fit:cover; background:#b8ad9e; }
.progress-detail { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.progress-detail img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.empty { padding:40px; color:var(--muted); border:1px dashed var(--line); text-align:center; }
.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,8vw,120px); align-items:start; }
.contact-image { min-height:480px; background:radial-gradient(circle at 68% 28%,rgba(237,218,184,.48),transparent 30%),linear-gradient(145deg,#534c43,#9b8d78 58%,#3d3a35); }
.contact-copy h2 { max-width:650px; margin:20px 0 28px; font-family:var(--serif); font-size:calc(clamp(30px,4vw,54px) * var(--scale-contact-title,1)); font-weight:500; line-height:1.35; letter-spacing:.06em; color:var(--contact-title-color,#fffdf9); }
.contact-copy p { max-width:580px; color:var(--contact-text-color,#fffdf9); opacity:.68; font-size:calc(13px * var(--scale-contact-text,1)); line-height:2; }
/* 联系区的小标签（ABOUT & CONTACT）单独控制 */
.contact-copy .eyebrow { color:var(--contact-label-color,#fffdf9); font-size:calc(10px * var(--scale-contact-label,1)); }
.contact-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 38px; margin-top:40px; }
.contact-item { padding-top:14px; border-top:1px solid rgba(255,255,255,.17); }
.contact-item span { display:block; margin-bottom:8px; color:var(--contact-label-color,#fffdf9); opacity:.45; font-size:calc(9px * var(--scale-contact-label,1)); letter-spacing:.16em; text-transform:uppercase; }
.contact-item p { margin:0; color:var(--contact-value-color,#fffdf9); font-size:calc(12px * var(--scale-contact-value,1)); }
/* 浅色背景上的联系方式（项目详情页的「项目信息」）——默认那套是给深色区块用的，浅色底上必须换色 */
/* 摘要这类长文本格子：跨满两列，横线和正文都铺满整行 */
.contact-links .contact-item-wide { grid-column:1 / -1; }
.contact-links-light .contact-item { border-top-color:var(--line); }
.contact-links-light .contact-item span { color:var(--muted); opacity:1; }
.contact-links-light .contact-item p { color:var(--ink); }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px clamp(20px,5vw,72px); color:rgba(255,253,249,.42); background:var(--dark); font-size:10px; letter-spacing:.07em; }
.footer-links { display:flex; gap:20px; }
.footer-links a:hover { color:var(--white); }
/* 内页大标题：顶栏是实心（占位）的，不需要再额外留出顶栏高度 */
.page-title { padding:clamp(22px,2.6vw,42px) clamp(20px,5vw,72px) clamp(20px,2.4vw,38px); background:var(--paper-soft); }
.page-title h1 { margin:0 0 12px; font-family:var(--serif); font-size:calc(clamp(32px,4.6vw,60px) * var(--scale-heading,1)); font-weight:500; letter-spacing:.06em; }
.page-title p { max-width:660px; margin:0; color:var(--muted); font-size:calc(15px * var(--scale-body,1)); line-height:1.9; }
/* 「关于我们」整页深色底（2026-10-18 按用户要求，与首页「关于 & 联系」区块同色）。
   做法：main 上加 .page-shell-dark 兜住不满一屏时的浅色空隙，
   标题区沿用 .page-title 的结构但背景透明，内容区用现成的 .section-dark。
   注意这里只作用于带 .page-shell-dark 的页面，其它内页（笔记 / 进度 / 图库）不受影响。 */
.page-shell-dark { background:var(--dark); color:var(--white); }
.page-shell-dark .page-title { background:transparent; }
.page-shell-dark .page-title p { color:rgba(255,253,249,.62); }
.page-shell-dark .section-dark { background:transparent; }
.page-shell-dark .section-head { border-bottom-color:rgba(255,253,249,.16); }
.page-shell-dark .about-text { margin:0; max-width:620px; color:rgba(255,253,249,.68); line-height:2; }
/* 深色区和深色页脚连成一片，给页脚一条极淡的上边线做分界 */
.page-shell-dark + .site-footer { border-top:1px solid rgba(255,253,249,.1); }
.form-page { min-height:100vh; display:grid; place-items:center; padding:30px 20px; background:var(--paper-soft); }
.form-card { width:min(100%,520px); padding:clamp(28px,5vw,50px); border:1px solid var(--line); background:var(--white); }
.form-card h1 { margin-bottom:12px; font-family:var(--serif); font-size:36px; font-weight:500; }
.form-card > p { margin-bottom:30px; color:var(--muted); font-size:12px; line-height:1.8; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.form-grid .full { grid-column:1 / -1; }
.field { margin-bottom:18px; }
/* 输入框下面的说明文字：和上面的框拉开距离，避免挤在一起像被压扁 */
.field .input + .field-help,
.field .textarea + .field-help,
.field .select + .field-help { margin-top:10px; }
.field label { display:block; margin-bottom:8px; color:#5d574f; font-size:11px; letter-spacing:.05em; }
.input,.textarea,.select { width:100%; padding:12px; color:var(--ink); border:1px solid var(--line); border-radius:0; outline:none; background:#fffefa; }
.input:focus,.textarea:focus,.select:focus { border-color:var(--accent); }
.textarea { min-height:120px; resize:vertical; line-height:1.7; }
.check-row { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; }
.form-status { min-height:20px; margin-top:14px; color:var(--danger); font-size:12px; line-height:1.6; }
.form-status.success { color:#4f7259; }
.admin-shell { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; background:var(--paper-soft); }
.admin-sidebar { position:sticky; top:0; align-self:start; height:100vh; overflow:hidden; padding:28px 20px; color:var(--white); background:var(--dark); }
.admin-sidebar .brand { margin-bottom:44px; }
.admin-nav { display:grid; gap:7px; }
.admin-nav a,.admin-nav button { padding:11px 12px; color:rgba(255,253,249,.62); border:0; background:transparent; text-align:left; cursor:pointer; letter-spacing:.06em; }
.admin-nav a:hover,.admin-nav a.active { color:var(--white); background:rgba(255,255,255,.08); }
.admin-main { padding:clamp(24px,4vw,52px); }
.admin-main [hidden] { display:none !important; }
.admin-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; }
.admin-header h1 { margin:0; font-family:var(--serif); font-size:34px; font-weight:500; }
.admin-header p { margin:8px 0 0; color:var(--muted); font-size:12px; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-bottom:28px; }
.stat { padding:20px; border:1px solid var(--line); background:var(--white); }
.stat span { display:block; margin-bottom:9px; color:var(--muted); font-size:10px; letter-spacing:.1em; }
.stat strong { font-family:var(--serif); font-size:30px; font-weight:500; }
.stat em { display:block; margin-top:7px; color:var(--muted); font-size:11px; font-style:normal; line-height:1.6; }
.stat-warn { border-left:3px solid #c99a3c; background:#fffaf0; }
.stat-warn strong { color:#8d6415; }
.stat-warn em { color:#8d6415; }
.stat-ok { border-left:3px solid #5c9a72; }
.stat-ok strong { color:#3f7353; }
.issue-line { color:var(--muted); font-size:11px; line-height:1.7; }
.issue-line + .issue-line { margin-top:5px; padding-top:5px; border-top:1px dashed var(--line); }
/* 阶段比例输入框 */
.percent-field { display:flex; align-items:center; gap:8px; }
.percent-field .input { width:96px; text-align:center; }
.percent-field span { color:var(--muted); font-size:12px; }
/* 外观：取色器 + 字号滑块 */
.color-field { display:flex; align-items:center; gap:12px; }
.color-field input[type=color] { flex:none; width:56px; height:38px; padding:2px; border:1px solid var(--line); background:var(--white); cursor:pointer; }
.color-hex { color:var(--muted); font-family:ui-monospace,Consolas,monospace; font-size:12px; letter-spacing:.06em; }
.range-input { width:100%; max-width:420px; accent-color:var(--accent); cursor:pointer; }
.range-value { color:var(--accent); font-family:ui-monospace,Consolas,monospace; font-size:13px; }
/* 外观面板：可折叠分组 */
.theme-group { margin-bottom:12px; border:1px solid var(--line); background:var(--white); }
.theme-group > summary { padding:14px 18px; cursor:pointer; font-family:var(--serif); font-size:16px; letter-spacing:.05em; list-style:none; display:flex; align-items:center; gap:10px; }
.theme-group > summary::-webkit-details-marker { display:none; }
.theme-group > summary::before { content:"＋"; color:var(--muted); font-size:13px; }
.theme-group[open] > summary::before { content:"－"; }
.theme-group[open] > summary { border-bottom:1px solid var(--line); }
.theme-group > .form-grid { padding:20px 18px 6px; }
/* 「文字细节」：一行里放滑块 + 取色器 */
.slot-row { display:flex; align-items:center; gap:12px; }
.slot-row .slot-range { flex:1; min-width:80px; max-width:none; }
.slot-color { flex:none; width:44px; height:32px; padding:2px; border:1px solid var(--line); background:var(--white); cursor:pointer; }
/* 「文字细节」按页面分组：组标题做成整行的实线分隔条，一眼能看出边界
   （以前是 11px 灰色小字 + 虚线，29 个滑块挤成一坨，根本分不出组） */
.slot-group-head { grid-column:1 / -1; margin:26px 0 2px !important; padding:13px 0 10px; border-top:2px solid var(--ink); color:var(--ink); font-family:var(--serif); font-size:16px; letter-spacing:.05em; }
.slot-group-head:first-child { margin-top:0 !important; padding-top:2px; border-top:0; }

/* ============================================================
   「全站文案」面板：左填字 + 右侧实时预览（2026-10-18）
   ------------------------------------------------------------
   用户要求「把预览就放在右边」。所以：
   - 桌面端两栏，右侧预览 sticky，滚左边表单时预览一直挂在眼前
   - 窄屏（≤1100px）自动退回单栏，预览挪到表单上方
   ============================================================ */
/* 2026-10-18：预览宽度按用户要求改为「左右各一半」。
   原来预览固定 340px，只占 30%，里面 40 条文案有 3 条被迫换行、挤成一团。
   改成 1fr 1fr 后文案能完整一行显示。
   断点同步提高：两栏各半时每栏要 ≥340px 才不挤，
   后台左侧还有 240px 侧栏，所以窗口要 ≥1080px 才够。 */
.st-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
.st-left { min-width:0; }
.st-right {
  position:sticky; top:16px;
  border:1px solid var(--line); background:var(--paper); border-radius:10px; padding:16px;
  max-height:calc(100vh - 40px); overflow:auto;
}
/* 预览内部还要能滚（30 个文案块可能比容器高），
   滚动条细一点，不然会盖住文字 */
.st-right::-webkit-scrollbar, .st-preview::-webkit-scrollbar { width:7px; }
.st-right::-webkit-scrollbar-thumb, .st-preview::-webkit-scrollbar-thumb {
  background:rgba(37,34,31,.18); border-radius:4px;
}
/* 分区标题（「文字」/「外观…」两个大区块之间的分隔）
   ——2026-10-18 把外观并进文案面板后加的，两块内容性质不同
   （文字走 txt_ 词表、外观走 theme 接口），要一眼看出分界。 */
/* 2026-10-18：原来这里有 .st-sec-head（12px 灰字 + 2px 黑下边线），
   用来把「文字」和「外观」两块隔开。用户反馈这样看着还是两块、
   要求「柔和到一起」，所以去掉隔断，16 个组一路排下来。
   保留 .st-sec-head 的规则是为了别处万一还要用，这里不再输出这个元素。 */

/* 外观并进左栏后，控件要从两列改单列 ——
   左栏只有一半宽（两栏各半），色块并排、滑块+百分号并排会互相挤压。
   只改 .st-left 里的 form-grid，别影响「网站设置」那边满宽的表单。 */
.st-left .form-grid { grid-template-columns:minmax(0,1fr); }
.st-left .form-grid .full { grid-column:auto; }

.st-preview-tabs { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.st-preview-tabs button {
  font:inherit; font-size:12px; padding:4px 11px; cursor:pointer;
  border:1px solid var(--line); border-radius:20px;
  background:var(--white); color:var(--muted);
}
.st-preview-tabs button:hover { border-color:var(--accent); color:var(--ink); }
.st-preview-tabs button.on { background:var(--ink); border-color:var(--ink); color:var(--paper-2); }
.st-frame-wrap {
  background:var(--white); border:1px solid var(--line);
  border-radius:8px; overflow:auto;
  /* 高度由 fitPreviewFrame() 按 iframe 真实内容高度算好后写进 inline style */
}
.st-frame {
  display:block; width:1440px; height:2400px; border:0;
  transform-origin:top left;
  background:var(--paper);   /* 加载瞬间不白晃眼 */
}
.st-frame-wrap::-webkit-scrollbar { width:8px; height:8px; }
.st-frame-wrap::-webkit-scrollbar-thumb { background:rgba(37,34,31,.2); border-radius:4px; }

.st-preview-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:12px; }
.st-preview-head b { font-size:14px; }
.st-preview-head .muted-note { font-size:11px; }
.st-preview { background:var(--white); border:1px solid var(--line); border-radius:8px; padding:16px 18px; min-height:160px; }
/* 「前台位置」小标题做成实心条，和下面文案分层 ——
   预览里 30 个文案块平铺会看不出谁属于哪一块。 */
.st-part { margin-bottom:16px; padding-left:11px; border-left:2px solid var(--line); }
.st-part:last-child { margin-bottom:0; }
.st-part-label {
  font-size:11px; letter-spacing:.06em;
  color:var(--ink); margin-bottom:5px; font-weight:500;
}
.st-text {
  font-size:14px; line-height:1.7; color:var(--ink);
  word-break:break-word;
  /* 文案之间用淡竖线分隔，同一块里好几条时一眼能分开 */
  padding:2px 0 2px 10px; position:relative;
}
.st-text::before {
  content:""; position:absolute; left:0; top:12px;
  width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.5;
}
.st-text + .st-text { margin-top:1px; }
/* 两栏各半 → 每栏至少要 340px 才不挤。
   后台左侧侧栏 240px（窄屏 190px）+ 面板内边距 48px + 栏间距 24px，
   所以窗口 ≥1080px 才放得下两栏。 */
@media (max-width:1079px) {
  .st-layout { grid-template-columns:1fr; }
  .st-right { position:static; max-height:none; order:-1; }
}
/* 每条可调文字的标签比普通表单标签大一点、深一点，方便扫读 */
.slot-field label { font-size:12px; color:var(--ink); }
.panel { margin-bottom:24px; padding:24px; border:1px solid var(--line); background:var(--white); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.panel-head h2 { margin:0; font-family:var(--serif); font-size:22px; font-weight:500; }
.panel-head p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.table { width:100%; border-collapse:collapse; font-size:12px; }
.table th,.table td { padding:12px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.table th { color:var(--muted); font-weight:400; font-size:10px; letter-spacing:.08em; }
.table tr:last-child td { border-bottom:0; }
.tag { display:inline-block; padding:4px 7px; color:var(--muted); border:1px solid var(--line); font-size:9px; }
.tag.public { color:#4f7259; border-color:rgba(79,114,89,.35); }
.toast { position:fixed; z-index:70; right:20px; bottom:20px; max-width:360px; padding:13px 16px; color:var(--white); background:rgba(39,39,37,.94); font-size:12px; line-height:1.6; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .25s ease,transform .25s ease; }
.toast.show { opacity:1; transform:translateY(0); }
/* 手机上把提示抬高一点、拉宽，避免被浏览器底栏挡住 */
@media (max-width:760px) { .toast { right:12px; left:12px; bottom:78px; max-width:none; font-size:13px; } }
.empty-photo { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.72); font-size:10px; letter-spacing:.12em; }
.panel p { color:var(--muted); font-size:12px; line-height:1.9; }
.field-help { margin:7px 0 10px; color:var(--muted); font-size:10px; line-height:1.6; }
.image-preview { width:100%; height:210px; margin:10px 0; object-fit:cover; background:#e8e1d7; border:1px solid var(--line); }
.empty-image { display:grid; place-items:center; color:var(--muted); font-size:11px; }
.detail-title { font-family:var(--serif); font-size:19px; letter-spacing:.05em; }
.story-sequence { padding-top:clamp(70px,9vw,132px); }
.story-block { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,96px); align-items:center; padding:clamp(28px,4vw,62px) 0; border-bottom:1px solid var(--line); }
.story-block:first-of-type { border-top:1px solid var(--line); }
.story-block.reverse .story-text { order:2; }
.story-block.reverse .story-photo { order:1; }
.story-text { max-width:520px; }
.story-number { display:block; margin-bottom:14px; color:var(--accent); font-family:var(--serif); font-size:14px; letter-spacing:.16em; }
.story-text h3 { margin-bottom:18px; font-family:var(--serif); font-size:clamp(27px,3.4vw,44px); font-weight:500; letter-spacing:.06em; }
.story-text p { margin:0; color:var(--muted); font-size:13px; line-height:2.05; }
.story-photo { position:relative; min-height:min(52vw,620px); margin:0; overflow:hidden; background:#b8ad9e; }
.story-photo img { width:100%; height:100%; min-height:inherit; object-fit:cover; }
.slide-deck-section { background:#e8e1d7; }
.slide-deck { display:grid; gap:clamp(18px,3vw,38px); max-width:1440px; margin:0 auto; }
.slide-page { position:relative; margin:0; overflow:hidden; }
.slide-page figcaption { position:absolute; right:14px; bottom:12px; padding:5px 8px; color:rgba(255,255,255,.76); background:rgba(25,24,22,.35); backdrop-filter:blur(8px); font-size:9px; letter-spacing:.12em; }
/* 2026-10-18：施工记录行 = 时间 ｜ 标题 ｜ 现场说明 ｜ →（照片仍在记录详情页里看）。
   说明这一列必须留着：同一个项目的几条记录往往同属一个阶段（比如都是「拆改」），
   只留时间和标题的话，列表里每行长得一模一样，根本分不清哪条是哪条。 */
.progress-record { align-items:center; grid-template-columns:120px minmax(0,320px) minmax(0,1fr) 24px; gap:24px; padding:22px 0; }
.progress-record:hover h3 { color:var(--accent); }
/* 说明文字：桌面单行、超出省略（悬停有 title 提示），不把行撑高 */
.progress-record .record-brief { margin:0; color:var(--muted); font-size:calc(11px * var(--scale-body,1)); line-height:1.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 手机上标题会折行，默认中文随处可断，会把「拆改」拆成「拆 / 改」。
   keep-all 让它在「·」和「｜」这些位置断，读起来正常。 */
.progress-record h3 { word-break:keep-all; overflow-wrap:break-word; }
.progress-record .photo-strip { grid-column:1 / -1; margin-top:4px; }
.record-detail-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:32px; }
.record-detail-meta > div { padding-top:14px; border-top:1px solid var(--line); }
.record-detail-meta span { display:block; margin-bottom:7px; color:var(--muted); font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.record-detail-meta strong { font-family:var(--serif); font-size:20px; font-weight:500; }
.record-note { max-width:820px; margin:0 0 40px; color:var(--muted); font-size:14px; line-height:2; }
.progress-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2.4vw,32px); }
.progress-photo-grid figure { position:relative; margin:0; overflow:hidden; background:#d8d0c4; }
.progress-photo-grid img { width:100%; height:auto; min-height:320px; object-fit:cover; display:block; }
.progress-photo-grid figcaption { position:absolute; right:12px; bottom:12px; padding:5px 8px; color:rgba(255,255,255,.78); background:rgba(25,24,22,.38); backdrop-filter:blur(8px); font-size:9px; letter-spacing:.1em; }
.section-more { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; color:var(--muted); border:1px solid var(--line); background:rgba(255,255,255,.35); font-size:11px; letter-spacing:.1em; white-space:nowrap; transition:color .25s ease,border-color .25s ease,background .25s ease; }
.section-more:hover { color:var(--ink); border-color:rgba(37,34,31,.34); background:rgba(255,255,255,.7); }
@media (max-width:1180px) {
  .site-nav { gap:clamp(11px,1.9vw,24px); font-size:14px; letter-spacing:.07em; }
  .header-right { gap:clamp(14px,2.4vw,30px); }
}
@media (max-width:900px) {
  .header-search { padding:7px 13px; gap:7px; }
  .header-search-input { width:72px; font-size:11px; }
  .header-right { gap:16px; }
  .site-nav { gap:11px; font-size:13px; }
}
@media (max-width:620px) {
  /* 窄屏顶栏放不下搜索框，改到作品页里 */
  .header-search { display:none; }
  .works-search { display:flex; }
}
@media (max-width:540px) {
  /* 再窄就把英文收起来，只留中文 */
  .nav-en { display:none; }
  .site-nav { gap:10px; font-size:12px; }
}
@media (max-width:1000px) {
  .work-card,.work-card.featured { grid-column:span 6; }
  .work-card.featured:first-child { grid-column:1 / -1; }
  /* 首页精选：小屏也保持两个一排，不被上面的规则打回整行 */
  .home-works .work-card,
  .home-works .work-card.featured,
  .home-works .work-card.featured:first-child { grid-column:span 6; }
  .admin-shell { grid-template-columns:190px minmax(0,1fr); }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .site-header { align-items:flex-start; padding-top:10px; }
  .brand-en { display:none; }
  .site-nav { gap:10px; font-size:12px; letter-spacing:.05em; }
  .nav-en { font-size:8px; letter-spacing:.08em; }
  .work-grid,.contact-grid,.form-grid { grid-template-columns:1fr; }
  .story-block { grid-template-columns:1fr; gap:24px; }
  .story-block.reverse .story-text,.story-block.reverse .story-photo { order:initial; }
  .story-photo { min-height:64vw; }
  .work-card,.work-card.featured,.work-card.featured:first-child { grid-column:1 / -1; }
  .work-cover { min-height:68vw; }
  /* 首页精选：手机上占满整行，封面用回原来的宽高比 */
  .home-works .work-card,
  .home-works .work-card.featured,
  .home-works .work-card.featured:first-child,
  .home-works.one .work-card,
  .home-works.one .work-card.featured,
  .home-works.one .work-card.featured:first-child { grid-column:1 / -1; }
  .home-works .work-cover,
  .home-works .work-card.featured .work-cover,
  .home-works.one .work-cover,
  .home-works.one .work-card.featured .work-cover { min-height:68vw; aspect-ratio:auto; }
  /* 首页施工进度：手机上同样占满整行、宽高比还原 */
  .home-progress .work-card,
  .home-progress.one .work-card { grid-column:1 / -1; }
  .home-progress .work-cover,
  .home-progress.one .work-cover { min-height:68vw; aspect-ratio:auto; }
  .timeline-item { grid-template-columns:84px 1fr 20px; gap:12px; padding:20px 0; }
  .timeline-item p { grid-column:2 / 3; }
  /* 手机上行窄，说明另起一行、最多两行，箭头仍然跨两行贴右边 */
  .progress-record .record-brief { grid-column:2 / 3; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  /* 手机上列数太多会看不清：最多 3 列，1~2 张也放开宽度限制 */
  .progress-record .photo-strip { grid-column:1 / -1; }
  .photo-strip.cols-1 { grid-template-columns:minmax(0,1fr); }
  .photo-strip.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .photo-strip.cols-4, .photo-strip.cols-5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .timeline-item .arrow { grid-column:3 / 4; grid-row:1 / 3; }
  .contact-links { grid-template-columns:1fr; }
  .site-footer { align-items:flex-start; flex-direction:column; }
  .admin-shell { display:block; }
  .admin-sidebar { position:relative; top:auto; height:auto; overflow:visible; padding:18px; }
  .admin-sidebar .brand { margin-bottom:20px; }
  .admin-nav { display:flex; overflow-x:auto; }
  .admin-nav a,.admin-nav button { white-space:nowrap; }
  .admin-main { padding:22px 16px; }
  .admin-header { align-items:flex-start; flex-direction:column; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .panel { padding:18px; }
  .panel-head { align-items:flex-start; flex-direction:column; }
  .table { display:block; overflow-x:auto; white-space:nowrap; }
}
@media (max-width:540px) {
  .site-header { display:block; }
  .brand-cn { display:block; margin-bottom:16px; }
  .site-nav { justify-content:space-between; gap:5px; }
  .hero h1 { font-size:38px; }
  .section { padding-top:68px; padding-bottom:76px; }
  .section-head { display:block; }
  .section-head span { display:block; margin-top:10px; }
  .progress-detail { grid-template-columns:1fr; }
  .record-detail-meta { grid-template-columns:1fr; gap:10px; }
  .progress-photo-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }

/* ============ 工作室照片：中间大图 + 左右小图切换 ============ */
.contact-grid.has-photos { grid-template-columns:1.35fr 1fr; align-items:center; }
/* 内容限宽并居中（备用：给需要收窄的页面加 .section-center 即可） */
.section-center { max-width:1320px; margin-left:auto; margin-right:auto; }
/* 大标题和它下面的内容本来底色相同，中间那两层留白会叠成一大块空白，收一收 */
.page-title + .section { padding-top:clamp(14px,1.8vw,28px); }
/* 关于页的内容块：垂直居中（高度收小，避免把内容往下推） */
.about-body { display:flex; align-items:center; min-height:clamp(300px,36vh,440px); }
.about-body > * { width:100%; }
.photo-carousel { display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,3fr) minmax(0,.55fr); gap:10px; align-items:center; }
.photo-carousel.single { grid-template-columns:1fr; }
.carousel-stage { position:relative; overflow:hidden; background:transparent; cursor:pointer; }
.carousel-slide { display:none; margin:0; }
.carousel-slide.is-active { display:block; }
.carousel-slide img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.carousel-side { padding:0; border:0; background:none; cursor:pointer; overflow:hidden; opacity:.5; transition:opacity .35s ease, transform .35s ease; }
.carousel-side img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }
.carousel-side:hover { opacity:1; transform:scale(1.03); }
.carousel-count { position:absolute; right:14px; bottom:14px; padding:4px 11px; border-radius:999px; background:rgba(0,0,0,.45); color:#fff; font-size:11px; letter-spacing:.14em; }

/* ============ 需整改项目（前台） ============ */
.issue-badge { display:inline-block; margin-left:10px; padding:2px 9px; border-radius:999px; background:rgba(201,154,60,.16); color:#8d6415; font-size:10px; letter-spacing:.06em; vertical-align:middle; }
.issue-block { margin-top:clamp(34px,5vw,64px); padding-top:28px; border-top:1px solid var(--line); }
.issue-block-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:20px; }
.issue-block-head h2 { margin:0; font-family:var(--serif); font-size:clamp(20px,2.4vw,30px); font-weight:500; letter-spacing:.06em; }
.issue-block-head span { color:var(--muted); font-size:11px; letter-spacing:.1em; }
.issue-item { margin-bottom:14px; padding:20px 22px; background:var(--white); border:1px solid var(--line); border-left:3px solid var(--line); }
.issue-item.pending { border-left-color:#c99a3c; }
.issue-item.fixed { border-left-color:#5c9a72; }
.issue-head { display:flex; align-items:flex-start; gap:14px; }
.issue-no { flex:none; padding-top:3px; font-family:var(--serif); font-size:12px; color:var(--muted); }
.issue-head p { flex:1; margin:0; line-height:1.8; }
.issue-status { flex:none; padding:3px 11px; border-radius:999px; font-size:11px; letter-spacing:.06em; }
.issue-item.pending .issue-status { background:rgba(201,154,60,.16); color:#8d6415; }
.issue-item.fixed .issue-status { background:rgba(92,154,114,.16); color:#3f7353; }
.issue-result { margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); }
.issue-result-head { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.issue-result p { margin:12px 0 0; line-height:1.9; }
.issue-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:14px; }
.issue-photos img { width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line); }
.issue-wait { margin:14px 0 0; color:var(--muted); font-size:12px; }

/* ============ 后台：整改项编辑器 ============ */
.issue-editor { display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
.issue-row { display:flex; flex-direction:column; gap:12px; padding:16px; background:var(--paper-soft); border:1px solid var(--line); border-left:3px solid #c99a3c; }
.issue-row-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.issue-row-title { font-size:12px; letter-spacing:.1em; color:var(--muted); }
.issue-row-title b { font-family:var(--serif); font-size:15px; color:var(--ink); }
.issue-row-state { padding:3px 11px; border-radius:999px; font-size:11px; letter-spacing:.06em; }
.issue-row-state.pending { background:rgba(201,154,60,.16); color:#8d6415; }
.issue-row-state.fixed { background:rgba(92,154,114,.16); color:#3f7353; }
.issue-field { display:flex; flex-direction:column; gap:6px; }
.issue-field > span:first-child { font-size:12px; color:var(--muted); letter-spacing:.06em; }
.issue-field .field-help { margin:0; }
.issue-row .issue-remove { align-self:flex-start; }
.issue-existing { display:flex; flex-wrap:wrap; gap:12px; }
.issue-photo { display:flex; flex-direction:column; gap:6px; }
.issue-photo img { width:104px; height:78px; object-fit:cover; border:1px solid var(--line); }

/* ============ 后台：关于页照片预览 ============ */
.about-preview { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; }
.about-thumb { display:flex; flex-direction:column; gap:6px; }
.about-thumb img { width:150px; height:106px; object-fit:cover; border:1px solid var(--line); }

/* ============ 后台：待整改标签 / 行内操作 ============ */
.tag.warn { background:rgba(201,154,60,.16); color:#8d6415; }
.row-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.muted-note { color:var(--muted); font-size:11px; }
.existing-photos:not(:empty) { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.pending-panel { border-left:3px solid #c99a3c; }

/* ============ 帮成员重置密码后显示的新密码 ============ */
.reset-panel { border-left:3px solid #5c9a72; background:#f6fbf7; }
.reset-value { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 20px; background:var(--white); border:1px dashed rgba(92,154,114,.6); }
.reset-value code { flex:1; min-width:200px; font-family:ui-monospace,Consolas,monospace; font-size:19px; letter-spacing:.14em; color:#2f5a41; word-break:break-all; }

/* 搜索/筛选时：标题区去掉，结果顶上来 */
.section-tight { padding-top:clamp(26px,3.5vw,46px); }
/* 搜索结果的卡片平铺：不再有「推荐项目」独占一整行，按数量均匀铺开。
   2026-10-18：筛选后只剩 1~2 个时也照旧占三分之一宽。
   原来 .cols-1 会把它拉满整行（grid-column:1 / -1 + 封面 min-height:44vw），
   一张封面被撑成 1296×972 的巨幅，和列表页 407×305 的卡片完全不是一回事，
   用户看到的就是「一张图横跨三列」。现在不论筛出几个，卡片尺寸都和列表页一致。 */
@media (min-width:1001px) {
  .work-grid.is-filtered .work-card,
  .work-grid.is-filtered .work-card.featured,
  .work-grid.is-filtered .work-card.featured:first-child { grid-column:span 4; }
}
/* ============ 搜索 / 标签 / 分页（前台） ============ */
/* 2026-10-19：搜索框高度整体减半（用户要求「本站所有搜索框尺寸高度减半」）。
   原来容器上下 8px + 输入框上下 14px，总高约 55px；现在约 27px。 */
.site-search { display:flex; align-items:center; gap:9px; padding:3px 8px 3px 12px; border:1px solid var(--line); background:var(--white); border-radius:999px; }
/* 框是胶囊，里面的「搜索」按钮也跟着圆，别方角戳出来 */
.site-search .button { border-radius:999px; }
.site-search .search-icon { color:var(--muted); font-size:12px; line-height:1; }
.site-search .search-input { flex:1; min-width:0; padding:3px 0; border:0; background:transparent; color:var(--ink); font-size:11.5px; line-height:1.4; font-family:inherit; outline:none; }
.site-search .search-input::placeholder { color:var(--muted); }
/* 搜索框里的按钮跟着缩，否则按钮自己就把框撑回原高度（works 页带「搜索」按钮、后台是 small 按钮） */
.site-search .button { padding:3px 11px; font-size:11px; }
.site-search .button.small { padding:2px 9px; }
.works-toolbar { display:flex; flex-direction:column; gap:18px; margin-bottom:30px; }
.works-toolbar .site-search { max-width:640px; }
/* 宽屏用顶栏的搜索框，窄屏顶栏放不下时在这里补一个 */
.works-search { display:none; }
.filter-row { display:flex; flex-wrap:wrap; gap:9px; }
.filter-chip { padding:7px 15px; border:1px solid var(--line); background:var(--white); color:var(--muted); font-size:12px; font-family:inherit; cursor:pointer; transition:.2s; }
.filter-chip:hover { border-color:var(--ink); color:var(--ink); }
.filter-chip.active { border-color:var(--ink); background:var(--ink); color:var(--white); }
.filter-summary { margin:0; color:var(--muted); font-size:12px; }
.filter-summary b { color:var(--ink); }
.link-btn { margin-left:10px; padding:0; border:0; background:none; color:var(--muted); font-size:12px; font-family:inherit; text-decoration:underline; cursor:pointer; }
.pager { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:44px; }
.page-btn { padding:9px 20px; border:1px solid var(--line); background:var(--white); color:var(--ink); font-size:12px; font-family:inherit; cursor:pointer; transition:.2s; }
.page-btn:hover:not(:disabled) { border-color:var(--ink); }
.page-btn:disabled, .page-btn.is-disabled { opacity:.35; cursor:default; }
.pager-info { color:var(--muted); font-size:12px; letter-spacing:.06em; }
.tag-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.hero-content .tag-row { margin-top:20px; }
.tag-chip { padding:4px 11px; border:1px solid var(--line); color:var(--muted); font-size:11px; letter-spacing:.04em; }
.hero-content .tag-chip { border-color:rgba(255,253,249,.4); color:rgba(255,253,249,.85); }
/* 调整目录里的图片清理 */
.unused-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; }
.unused-item { margin:0; border:1px solid var(--line); background:var(--white); }
.unused-item img { display:block; width:100%; height:78px; object-fit:cover; }
.unused-item figcaption { padding:5px 6px; color:var(--muted); font-size:10px; text-align:center; }

/* ============ 施工进度条 ============ */
.progress { display:flex; align-items:center; gap:10px; min-width:120px; }
.progress-track { flex:1; height:6px; border-radius:99px; background:rgba(37,34,31,.12); overflow:hidden; }
.progress-fill { display:block; height:100%; border-radius:99px; background:var(--accent); transition:width .45s ease; }
.progress.is-done .progress-fill { background:#5c9a72; }
.progress-num { flex:none; min-width:48px; text-align:right; color:var(--muted); font-size:11px; letter-spacing:.04em; }
.progress.is-done .progress-num { color:#3f7353; }
.progress-lg { margin-bottom:30px; }
.progress-lg .progress-track { height:10px; }
.progress-lg .progress-num { font-size:15px; min-width:64px; }
.work-meta .progress { margin-top:12px; }
.section-dark .progress-track { background:rgba(255,253,249,.22); }
.section-dark .progress-num { color:rgba(255,253,249,.78); }

/* ============ 设计笔记（前台） ============ */
.note-row { cursor:pointer; }
.note-meta { display:flex; flex-direction:column; gap:4px; }
.note-author { color:var(--muted); font-size:11px; letter-spacing:.04em; }
.note-detail { max-width:860px; }
.note-detail-body { white-space:pre-wrap; line-height:2; font-size:15px; color:var(--ink); }
.note-detail-photos { display:flex; flex-direction:column; gap:20px; margin-top:44px; }
.note-detail-photos figure { margin:0; }
.note-detail-photos img { display:block; width:100%; border:1px solid var(--line); background:var(--paper-soft); }
.note-detail-photos figcaption { margin-top:9px; color:var(--muted); font-size:10px; letter-spacing:.16em; }
.back-link { display:inline-block; margin-top:48px; color:var(--muted); font-size:12px; letter-spacing:.1em; transition:color .25s ease; }
.back-link:hover { color:var(--accent); }
@media (max-width:760px) {
  .note-detail-photos { gap:14px; margin-top:30px; }
}
.select { min-width:0; }

@media (max-width:900px) {
  .contact-grid.has-photos { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:760px) {
  .photo-carousel { gap:7px; }
  .carousel-count { right:9px; bottom:9px; padding:3px 8px; font-size:10px; }
  /* 有水印的区块，计数在左下角（见上面 .contact-grid / 详情页的规则），
     窄屏也要跟着让到左边，不能被上面的 right:9px 拽回右下角压住水印。 */
  .contact-grid .carousel-count,
  .slide-deck-section .carousel-count,
  .story-sequence .carousel-count {
    right:auto;
    left:9px;
  }
  .issue-block-head { flex-direction:column; gap:6px; }
  .issue-photos { grid-template-columns:repeat(2,1fr); }
  .issue-item { padding:16px; }
}
@media (max-width:540px) {
  .photo-carousel { grid-template-columns:minmax(0,.75fr) minmax(0,3fr) minmax(0,.75fr); gap:6px; }
}

@media (max-width:760px) {
  .work-grid.flat-grid .work-card,
  .work-grid.flat-grid .work-card.featured,
  .work-grid.flat-grid .work-card.featured:first-child { grid-column:1 / -1; }
  .work-grid.flat-grid .work-card .work-cover,
  .work-grid.flat-grid .work-card.featured .work-cover { min-height:68vw; }
}

.slide-deck .slide-page {
  /* 关键：按内容宽度收缩并水平居中，图片多窄容器就多窄 */
  justify-self:center;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  background:transparent;
  box-shadow:none;
}
.slide-deck .slide-page img,
.site-page .slide-page img {
  width:auto;
  max-width:100%;
  height:auto;
  max-height:76vh;
  object-fit:contain;
  display:block;
  margin:0 auto;
  border-radius:2px;
  box-shadow:0 18px 55px rgba(38,33,28,.1);
}
.slide-page figcaption {
  right:14px;
  bottom:12px;
}
@media (max-width:900px) {
  .slide-deck .slide-page img,
  .site-page .slide-page img { max-height:92vh; }
}
@media (max-width:540px) {
  .slide-deck .slide-page img,
  .site-page .slide-page img { max-height:96vh; }
}

   首屏文字可读性（2026-10-17 追加）
   顶部导航与 hero 标题压在图片上，图片亮的地方白字会糊掉。
   这里加两层保险：
     a) header 下方一条自上而下的深色渐变（透明 → 深色）
     b) 文字本身加极淡投影
   不改变现有配色，只提升对比度。
   ============================================================ */
.site-header::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:220%;
  background:linear-gradient(180deg,rgba(20,19,17,.58) 0%,rgba(20,19,17,.34) 45%,rgba(20,19,17,0) 100%);
  pointer-events:none;
  z-index:-1;
}
.site-header.solid::before { display:none; }
.site-header .brand-cn,
.site-header .brand-en,
.site-header .site-nav a,
.site-header .header-search {
  text-shadow:0 1px 3px rgba(18,17,15,.42);
}
.site-header .header-search {
  background:rgba(28,26,23,.34);
  border-color:rgba(255,253,249,.42);
}
.site-header .header-search-input { color:var(--white); }
.site-header .header-search-input::placeholder { color:rgba(255,253,249,.72); }
.site-header .header-search-icon { color:rgba(255,253,249,.82); }
/* hero 文案同样加投影，并在底部压一层渐变，保证描述文字可读 */
.hero-content h1,
.hero-content p,
.hero-content .eyebrow {
  text-shadow:0 2px 14px rgba(18,17,15,.55),0 1px 3px rgba(18,17,15,.4);
}
.hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:46%;
  background:linear-gradient(0deg,rgba(18,18,17,.5) 0%,rgba(18,18,17,.18) 55%,rgba(18,18,17,0) 100%);
  pointer-events:none;
  z-index:1;
}
.hero-content { position:relative; z-index:2; }

/* ============================================================
   项目详情页「项目展示」轮播适配（2026-10-17）
   复用 photoCarousel 组件（与首页工作室照片同一套），
   左右两侧是上一张/下一张按钮，中间一张大图。
   ============================================================ */

.locked-note p { margin:0 0 1em; }
.locked-note p:last-child { margin-bottom:0; }
.locked-note .button { margin-top:8px; }

.password-eye:hover { color:var(--ink); background:rgba(0,0,0,.04); }
.password-eye:focus-visible { outline:1px solid var(--ink); outline-offset:1px; }
.password-eye.is-on { color:var(--ink); }
.password-eye span { display:block; line-height:0; }

.assign-head {
  margin-bottom:8px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.assign-list {
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:168px;
  overflow-y:auto;
}
.assign-item {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12px;
  line-height:1.5;
  cursor:pointer;
}
.assign-item input { margin-top:2px; flex:0 0 auto; cursor:pointer; }
.assign-item span { word-break:break-all; }

.insp-search { flex:1 1 280px; max-width:460px; }
.insp-count { color:var(--muted); font-size:12px; letter-spacing:.06em; }
.insp-filters {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:clamp(20px,3vw,32px);
}
.insp-filter-row { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.insp-filter-label {
  flex:0 0 auto;
  padding-top:6px;
  color:var(--muted);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.insp-chips { display:flex; flex-wrap:wrap; gap:8px; }
.filter-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  font-size:12px;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.filter-chip:hover { border-color:var(--ink); }
.filter-chip.active { background:var(--ink); border-color:var(--ink); color:var(--white); }
.chip-num { opacity:.55; font-size:10px; }
.insp-reset {
  align-self:flex-start;
  padding:6px 12px;
  border:1px dashed var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
}
.insp-reset:hover { color:var(--ink); border-color:var(--ink); }
/* 瀑布流（2026-10-19 改版）
   ------------------------------------------------------------
   原来是 multi-column + columns:4 240px。看着没问题，但 multi-column 是「全量平衡」布局：
   每追加一批图，浏览器会把所有卡片重新分配到各列，用户滚到底点「加载更多」时，
   上面的图片会整体跳一下。图越多跳得越明显。
   现在改成「JS 分栏 + 每列一个 flex 竖排容器」——已有卡片的位置固定不动，
   新卡片只往对应列里追加，滚动加载不会抖。
   分几列由 app.js 的 inspColumnCount() 按容器宽度算（<640px 走 2 列），
   所以这里不需要再写响应式断点。 */
.insp-grid {
  display:flex;
  gap:clamp(12px,1.8vw,22px);
  align-items:flex-start;
}
.insp-col {
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:clamp(12px,1.8vw,22px);
}
/* 2026-10-19 改版：卡片只留图，名字/标签收进悬停浮层。
   原来图片下面压一条白色文字栏，图片是「上两角圆、下两角直」，
   看着像方图。现在去掉白底和文字栏，图片四角都圆，
   鼠标移上去才从底部浮出一条半透明渐变，名字和标签还能点。 */
.insp-card {
  display:block;
  position:relative;
  margin:0;
  background:transparent;
  border-radius:var(--radius-img);
  overflow:hidden;
}
.insp-card img { width:100%; height:auto; display:block; border-radius:var(--radius-img); }
.insp-card figcaption {
  position:absolute;
  left:0; right:0; bottom:0;
  padding:40px 14px 12px;
  background:linear-gradient(to top,rgba(20,17,15,.74) 0%,rgba(20,17,15,.42) 55%,rgba(20,17,15,0) 100%);
  color:#fff;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .26s ease,transform .26s ease;
  pointer-events:none;      /* 空白处点击穿透到图片，照样能开大图 */
}
.insp-card:hover figcaption,
.insp-card:focus-within figcaption { opacity:1; transform:translateY(0); }
.insp-card .insp-name { display:block; margin:0 0 6px; color:#fff; font-size:14px; }
.insp-card .insp-source,
.insp-card .insp-note { color:rgba(255,255,255,.78); }
/* 浮层要盖住右下角的水印（水印是 z-index:3），悬停时让水印淡出，避免两行字叠在一起 */
.insp-card figcaption { z-index:4; }
.insp-card:hover .watermark,
.insp-card:focus-within .watermark { opacity:0; }
/* 浮层里的小胶囊要反过来配色，否则浅色胶囊在深色渐变上看不清 */
.insp-card .insp-tag {
  background:rgba(255,255,255,.16);
  color:#fff;
  pointer-events:none;      /* 浮层没出来时标签不可点，否则会挡住图片底部的「点开大图」 */
  backdrop-filter:blur(2px);
}
/* 只有浮层真的浮出来了，标签才接点击 */
.insp-card:hover .insp-tag,
.insp-card:focus-within .insp-tag { pointer-events:auto; }
.insp-card .insp-tag:hover { background:#fff; color:#25221f; }
.insp-card .insp-tag.is-on { background:var(--accent); color:#fff; }
/* 触屏没有悬停：手指点一下就是开大图，浮层不给它添乱 */
@media (hover:none) {
  .insp-card figcaption { display:none; }
}
/* 「加载更多」：滚到附近会自动加载，按钮是给不想等的人的兜底 */
.insp-more { padding:clamp(16px,3vw,28px) 0 4px; text-align:center; }
.insp-more-btn {
  padding:10px 22px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  cursor:pointer;
}
.insp-more-btn:hover { color:var(--ink); border-color:var(--ink); }
.insp-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
/* 标签现在可点（点一下按该标签筛选），做成圆角小胶囊，和上面的筛选条一致 */
.insp-tags em,
.insp-tag {
  padding:3px 9px;
  border:0;
  border-radius:999px;
  background:var(--paper-soft);
  color:var(--ink);
  font-family:inherit;
  font-size:10px;
  font-style:normal;
  letter-spacing:.08em;
  line-height:1.6;
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.insp-tag:hover { background:var(--ink); color:var(--white); }
.insp-tag.is-on { background:var(--accent); color:var(--white); }
.insp-source { display:block; color:var(--muted); font-size:11px; line-height:1.6; }
.insp-note { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.7; }
.insp-legal {
  margin-top:clamp(28px,4vw,48px);
  padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11.5px;
  line-height:1.9;
}
@media (max-width:620px) {
  /* 分几列由 JS 按容器宽度算（这里会得到 2 列），不再需要断点覆盖 */
  .insp-search { max-width:none; }
}

   项目信息区 —— 方案 C：CSS Grid（2026-10-17 最终定稿）
   ------------------------------------------------------------
   为什么用 grid：
     table 布局把摘要当成第五个单元格（除非移出容器），
     flex 会压缩标签导致竖排，grid 两者都不会。
   grid 特性：
     - 每个格子独立成列，不会互相压缩
     - 摘要显式占满整行（grid-column:1/-1）
     - 宽度由容器决定，整块真正居中

   桌面：四个字段并排一行，摘要在下面独占一行，同宽居中
   手机：两列，摘要整行
   ============================================================ */
   项目信息区 —— 最终方案：竖排清单（2026-10-17）
   ------------------------------------------------------------
   要求（参照给的样板）：
     项目名称：北京湾里诺岚酒店项目
     地点：北京通州万里（北京通州区靛璃东路66号2号楼）
     项目面积：39000㎡
     设计时间：2022年10月
     完工时间：2025年12月

   做法：普通文档流，一个字段一行，标签在左内容在右。
   不用 flex / table / grid —— 这三种都会让子元素产生额外布局行为，
   反而出现竖排、并排、宽度对不齐的问题。
   ============================================================ */


.spec-summary p { margin:0 0 .9em; }
.spec-summary p:last-child { margin-bottom:0; }
@media (max-width:700px) {
  .spec-cols { flex-wrap:wrap; justify-content:center; width:100%; }
  .spec-summary { width:100%; }
}

/* 后台：施工管理员的「项目指派」多选（2026-10-17） */
.assign-box {
  margin-top:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(255,255,255,.5);
  max-width:340px;
}
.assign-head {
  margin-bottom:8px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.assign-list {
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:168px;
  overflow-y:auto;
}
.assign-item {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12px;
  line-height:1.5;
  cursor:pointer;
}
.assign-item input { margin-top:2px; flex:0 0 auto; cursor:pointer; }
.assign-item span { word-break:break-all; }

/* ============================================================
   项目信息区 —— 左右分栏（2026-10-17 最终方案）
   ------------------------------------------------------------
   左侧：四个字段并排一行（项目类型/ 设计面积 / 项目地点 / 完工年份）
   右侧：竖排清单 + 摘要正文
   两块并排，整体居中；窄屏自动上下堆叠。
   ============================================================ */

/* ============================================================
   项目信息区 —— 竖排清单（2026-07 最终方案）
   目标格式：
     项目类型：  平层·家居空间
     设计面积：  168M²
     项目地点：  中国·东莞
     完工年份：  2026
   摘要接在四个字段下面，同一容器内。纯文档流。
   ============================================================ */
.spec-wrap { max-width:760px; margin:0 auto; padding:0; }
/* 2026-10-18：.spec-item 由 block 改为 flex。
   原来标签 9px / line-height 2.1 = 18.9px，值 13px / line-height 2.1 = 27.3px，
   两个行盒高度不同，vertical-align:top 对齐的是行盒顶端而非文字基线，
   于是 9px 的标签基线比 13px 的值高约 2px，看上去「值比标签往下错开」。
   改成 flex + align-items:baseline 让两者按文字基线对齐，与字号无关。 */
.spec-item { display:flex; align-items:baseline; margin:0; padding:5px 0; }
.spec-key {
  display:inline-block;
  width:88px;
  flex:0 0 88px;
  color:var(--muted);
  font-size:calc(9px * var(--scale-small,1));
  line-height:2.1;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.spec-text {
  display:block;
  flex:1 1 auto;
  min-width:0;
  color:var(--ink);
  font-size:calc(13px * var(--scale-body,1));
  line-height:2.1;
  word-break:break-word;
}
.spec-summary {
  display:block;
  margin:22px 0 0;
  color:var(--ink);
  font-size:calc(13px * var(--scale-body,1));
  line-height:2.1;
}
.spec-summary p { margin:0 0 .9em; }
.spec-summary p:last-child { margin-bottom:0; }
/* 2026-10-18：.spec-key 改用 flex:0 0 88px 固定宽，窄屏时这个断点要同时放开 flex-basis，
   只写 width:auto 不生效（flex-basis 优先于 width）。 */
@media (max-width:620px) { .spec-key { flex:0 0 auto; width:auto; margin-right:12px; } }

/* ============================================================
   项目详情页「项目展示」轮播（2026-10-17 改版）
   主图填满整个展示区；两侧改为窄条预览，不再挤占主图宽度。
   ============================================================ */
.section .photo-carousel {
  max-width:100%;
  margin:0;
}
/* 主图：填满宽度，高度交给 aspect-ratio，一屏放得下 */
/* 2026-10-17：轮播的舞台底板一律透明（原为 --paper-soft 近白色）。
   照片按原比例显示后，竖图受 max-height 限制会比舞台窄，两侧留出的那一条
   就是舞台底色 —— 近白色的板子在米色/深色区块里都很扎眼，改成透明后
   直接露出区块自己的底色。全局 .carousel-stage 的暗色底也一起去掉了。 */
.section .carousel-stage {
  width:100%;
  background:transparent;
}
.section .carousel-slide { margin:0; text-align:center; }
/* 2026-10-17：照片外面包一层 .slide-frame，让水印贴住照片本身。
   img 从 width:100% 改成按原始比例自适应（不超过舞台宽/高），渲染尺寸和原来的
   object-fit:contain 一致，但外框刚好包住照片 —— 水印才会落在照片右下角，
   而不是飘在竖图两侧的留白上。 */
.section .carousel-stage img {
  display:block;
  width:auto;                 /* 按原始比例，不再强行拉满 */
  max-width:100%;
  height:auto;
  max-height:78vh;
  aspect-ratio:auto;          /* 必须写！全局 .carousel-slide img 有 aspect-ratio:4/3，会把竖图裁成横图 */
  object-fit:fill;            /* 元素框已经等于照片本身，不需要再裁切 */
  margin:0 auto;
}
.slide-frame {
  position:relative;
  display:inline-block;
  max-width:100%;

  vertical-align:top;
}
/* 2026-10-20：全站水印统一在右下角。
   之前这两处（首页「关于&联系」+ 关于页工作室照片）用 .wm-top 把水印挪到右上角，
   原因是那批老图右下角本身烙着「杨浩空间设计 · 电话号码待确认」，浮层水印会叠在字上。
   照片重新上传后不再烙字（admin.js 的 addWatermark 默认已是 false），
   于是 .wm-top 这套规则整个删掉，全站只剩右下角一种水印位置。 */
/* 详情页有水印了，右下角要让给水印，把计数挪到左下角（只在详情页两个区块生效） */
.slide-deck-section .carousel-count,
.story-sequence .carousel-count {
  right:auto;
  left:14px;
}
/* 首页「关于&联系」和关于页这两处同样有水印，计数也让到左下角，
   否则「01 / 04」会和水印压在同一个右下角。 */
.contact-grid .carousel-count {
  right:auto;
  left:14px;
}
/* 两侧预览：改成窄条 + hover 变高亮，不再是宽幅竖图 */
.section .carousel-side {
  flex:0 0 64px;
  align-self:center;
  height:120px;
  padding:0;
  border:1px solid var(--line);
  /* 2026-10-17：原为 var(--white) 白底。白底会从 1px 边框底下透出来，
     在深色的「关于&联系」区块里就成了一圈浅色相框；改成透明后边框只剩
     那 15% 的墨色，深色区里几乎看不见，浅色区里仍是细细一条。 */
  background:transparent;
  opacity:.62;
  transition:opacity .25s ease, transform .25s ease, border-color .25s ease;
}
.section .carousel-side img {
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;          /* 覆盖全局的 3/4 */
  object-fit:cover;
}
.section .carousel-side:hover {
  opacity:1;
  border-color:var(--ink);
  transform:scale(1.04);
}
@media (max-width:900px) {
  .section .carousel-stage img { max-height:84vh; }
  .section .carousel-side { flex:0 0 48px; height:84px; }
}
@media (max-width:540px) {
  .section .carousel-stage img { max-height:88vh; }
  .section .carousel-side { flex:0 0 40px; height:68px; }
}

/* ============================================================
   项目详情页「项目展示」手机端（2026-10-17）
   手机屏窄，两侧预览条各占 56px，把主图挤到只剩 58% 屏宽。
   改为：隐藏两侧预览条 → 主图铺满（左右各再收 12px 留白，占屏宽 96%），
   翻页改用覆盖在图片左右中部的两个圆形箭头（点右=下一张，点左=上一张）。
   只作用于详情页两个展示区，首页「关于&联系」的轮播保持原样。
   ============================================================ */
.carousel-arrow { display:none; }
.section .carousel-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:38px;
  height:38px;
  padding:0;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:rgba(25,24,22,.42);
  color:#fff;
  font-family:var(--sans);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, transform .2s ease;
}
.section .carousel-arrow.prev { left:10px; }
.section .carousel-arrow.next { right:10px; }
.section .carousel-arrow:active {
  background:rgba(25,24,22,.72);
  transform:translateY(-50%) scale(.94);
}
@media (max-width:760px) {
  .slide-deck-section .photo-carousel,
  .story-sequence .photo-carousel {
    grid-template-columns:1fr;
    max-width:none;              /* 上面 .section .photo-carousel 有 max-width:100%，会挡住负边距 */
    margin-left:-12px;
    margin-right:-12px;
  }
  .slide-deck-section .carousel-side,
  .story-sequence .carousel-side { display:none; }
  .slide-deck-section .carousel-arrow,
  .story-sequence .carousel-arrow { display:flex; }
}

/* ============================================================
   笔记配图 —— CSS Grid 方案（2026-10-18 最终）
   ------------------------------------------------------------
   为什么改回 grid：flex 方案下计算宽度全部正确（255px×4 + gap
   刚好等于容器宽 1080），但浏览器仍把每项换到新行 —— flex 的换行
   判定在这个「宽度刚好等于容器」的场景下不可靠。
   grid 由容器直接分配列宽，不存在这个问题。

   通用防缺角：
     · grid-template-columns 用 repeat(var(--insp-per), 1fr)，
       1fr 会自动填满容器并留出 gap，宽度自动算好
     · 末行不满时，grid 项目默认左对齐 —— 用 justify-items:center
       让每个格子内居中；末行整体仍靠左。
       要真正居中末行，需要 JS 给末行项目加 grid-column 跨度，
       这里用更简单的办法：容器 text-align 无关，改用
       「末行项目自适应宽度 + justify-content:center」的 flex 兜底
       已验证不可靠，故采用 grid + 末行居中的 JS 补齐。
   ============================================================ */
.note-detail { width:100%; max-width:min(100%, 1080px); margin:0 auto; }
.note-detail-body { white-space:pre-wrap; line-height:1.95; font-size:15.5px; color:var(--ink); }
.note-detail-photos {
  --insp-per:4;
  --insp-gap:clamp(14px,1.8vw,24px);
  display:grid !important;
  grid-template-columns:repeat(var(--insp-per, 4), minmax(0, 1fr));
  gap:var(--insp-gap);
  margin-top:44px;
  max-width:1080px;
}
.note-detail-photos figure {
  margin:0;
  min-width:0;
  overflow:hidden;
}
.note-detail-photos img {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain;
  border:1px solid var(--line);
  background:var(--paper-soft);
}
.note-detail-photos figcaption { margin-top:9px; color:var(--muted); font-size:10px; letter-spacing:.16em; }
/* 末行居中：把末行的格子合并居中。
   JS 会给末行项目加 .last-row 类，这里用 grid-column 让它们均分整行。 */
.note-detail-photos figure.last-row {
  grid-column:auto;
}
@media (max-width:640px) {
  .note-detail-photos { --insp-per:2; }
}

/* ============================================================
   图片圆角（2026-10-19 全站统一）
   ------------------------------------------------------------
   规则分三层，避免出现「容器是直角、图片是圆角」这种错位：

   ① 所有图片元素默认圆角 —— 兜住散图（现场照片、施工记录、
      笔记配图、整改照片、图库卡片、后台预览…）。
   ② 裁切容器一起圆角 —— 封面 / 轮播 / 照片格本身是
      overflow:hidden，图片被它裁，只圆图片没有用，容器也得圆。
   ③ 已被②裁切的容器，里面的图片设回直角 —— 两层圆角叠在一起
      半径对不齐，会在四角露出一圈底色。
   ④ 贴顶的卡片（图库）只圆上两角，下两角留给白底文字区。

   例外：首页 / 项目详情顶部的通栏大图（.hero / .hero-scene）
   是整屏出血的背景图，保持直角；一圆角就像页面缺了一块。

   想整体调大调小：只改 :root 里的 --radius-img / --radius-img-sm。
   ============================================================ */

/* ① 默认：所有图片圆角 */
img { border-radius:var(--radius-img); }

/* ② 裁切容器跟着圆 */
.work-cover,
.carousel-stage,
.carousel-side,
.progress-photo-grid figure,
.story-photo,
.insp-card,
.note-detail-photos figure { border-radius:var(--radius-img); }

/* 轮播图外面那层 .slide-frame 是「刚好包住照片」的框。
   竖图比舞台窄，照片贴在框里居中，只圆舞台的话照片自己还是直角，
   所以这一层要单独圆，并裁掉里面的图。 */
.slide-frame { border-radius:var(--radius-img); overflow:hidden; }

/* ============================================================
   2026-10-24：项目详情页「项目展示」里那一格全景
   · .pano-inline 铺满照片那一块（圆角跟照片一致）
   · .pano-fs 右上角「全屏观看」按钮
   计数 / 水印要压在全景画面上，所以这两层单独抬 z-index
   ============================================================ */
.pano-slide .slide-frame { position:relative; }
.pano-inline { position:absolute; inset:0; z-index:2; overflow:hidden;
  border-radius:var(--radius-img); background:#17130f; }
.pano-slide .carousel-count,
.pano-slide .watermark { z-index:4; }
.pano-fs { position:absolute; right:12px; top:12px; z-index:5; width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
  border:1px solid rgba(255,255,255,.45); border-radius:999px;
  background:rgba(20,17,15,.44); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; cursor:pointer; transition:background .2s ease, transform .2s ease; }
.pano-fs:hover { background:rgba(20,17,15,.68); transform:scale(1.06); }
.pano-fs svg { width:18px; height:18px; display:block; }
@media (max-width:760px) {
  .pano-fs { width:34px; height:34px; right:9px; top:9px; }
  .pano-fs svg { width:15px; height:15px; }
}
/* 服务端渲染那一版（爬虫 / 首屏）：图集里的全景页挂着「360° 点击全屏观看」 */
.slide-pano { position:relative; display:block; }
.slide-pano-badge { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:10px 18px; border-radius:999px; background:rgba(20,17,15,.5); color:#fff;
  font-size:12.5px; letter-spacing:.06em; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* ③ 容器已经裁出圆角，图片内部回到直角 */
.work-cover img,
.carousel-stage img,
.carousel-side img,
.progress-photo-grid img,
.story-photo img,
.slide-frame img { border-radius:0; }

/* ④ 图库卡片：卡片里只有图，四角都圆（原来是贴顶只圆上两角） */
.insp-card img { border-radius:var(--radius-img); }

/* 作品封面里那圈细线内框，跟着圆一点，直角压着圆角很别扭 */
.work-cover::after { border-radius:calc(var(--radius-img) - 2px); }

/* 关于页大图轮播原来是 2px，并入本次统一半径 */
.slide-deck .slide-page img,
.site-page .slide-page img { border-radius:var(--radius-img); }

/* 小尺寸缩略图：10px 在 78px 高的图上太圆，单独降到 6px */
.about-thumb img,
.issue-photo img,
.unused-item img,
.pick-preview-item img,
.pick-preview-noimg { border-radius:var(--radius-img-sm); }

/* ============================================================
   全景漫游（2026-10-19）
   前台 /panorama.html：按作品分组的场景卡片 + 全屏 Pannellum 查看层
   ============================================================ */
.pano-group { margin-bottom:46px; }
.pano-group:last-child { margin-bottom:0; }
.pano-group-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.pano-group-head h2 { margin:0; font-size:19px; font-weight:600; letter-spacing:.02em; }
.pano-group-head h2 a { color:inherit; text-decoration:none; }
.pano-group-head h2 a:hover { color:var(--accent); }
.pano-group-head > span { color:var(--muted); font-size:12px; }

.pano-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px; }
.pano-card { display:flex; flex-direction:column; gap:10px; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.pano-cover { position:relative; display:block; aspect-ratio:8 / 5; overflow:hidden; border-radius:var(--radius-img); background:#e9e5df; }
.pano-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
.pano-card:hover .pano-cover img { transform:scale(1.04); }
.pano-badge { position:absolute; top:10px; left:10px; padding:3px 9px; border-radius:999px; background:rgba(20,17,15,.62); color:#fff; font-size:10.5px; letter-spacing:.08em; backdrop-filter:blur(4px); }
.pano-meta { display:flex; flex-direction:column; gap:3px; padding:0 2px; }
.pano-meta b { font-size:14px; font-weight:600; }
.pano-meta span { color:var(--muted); font-size:12px; }

/* 全屏查看层 */
.pano-lock { overflow:hidden; }
.pano-viewer { position:fixed; inset:0; z-index:2000; display:flex; flex-direction:column; background:#14110f; }
.pano-viewer[hidden] { display:none; }
.pano-stage { flex:1; min-height:0; }
.pano-close { position:absolute; top:18px; right:20px; z-index:3; width:42px; height:42px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.pano-close:hover { background:rgba(255,255,255,.28); }
/* 2026-10-22（用户批注「去掉」+「把设计说明放这个位」）：
   原来这里有个 .pano-caption 作品名胶囊（「中信森林湖文小姐雅居 · 客厅3（场景 1/10）」）。
   场景条里已经有场景名，这行重复；用户要求去掉，把「设计说明」整体下移占它这个位置。
   → 标题元素已从 app.js 模板里删除；说明胶囊/正文的位置见下面 .pano-desc-toggle / .pano-desc。 */
.pano-loading, .pano-error { display:flex; align-items:center; justify-content:center; height:100%; color:#fff; font-size:14px; }
.pano-error { color:#ffb4a8; }

@media (max-width:640px) {
  .pano-grid { grid-template-columns:repeat(auto-fill, minmax(46%, 1fr)); gap:12px; }
}

/* ============================================================
   2026-10-19 全景后台：分组卡片 + 双列作品卡
   ============================================================ */
/* 简化版全景编辑器 */
.pano-editor { display:grid; grid-template-columns:minmax(0,1.6fr) 340px; gap:18px; align-items:start; }
@media (max-width: 980px) { .pano-editor { grid-template-columns:1fr; } }
.pano-editor-stage { position:relative; height:460px; border-radius:14px; overflow:hidden; background:#14110f; }
@media (max-width: 980px) { .pano-editor-stage { height:300px; } }
.pano-editor-panel { border:1px solid var(--line); border-radius:14px; background:#fffdf9; padding:16px; }
.pano-editor-panel .field { margin-bottom:14px; }
.pano-editor-actions { display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 10px; }

.admin-section-title { font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.04em; margin:6px 0 10px; }
.pano-admin-groups { display:flex; gap:12px; overflow-x:auto; padding:0 0 20px; }
.pano-admin-group { flex:0 0 230px; display:flex; gap:10px; align-items:center; padding:10px; border:1px solid var(--line);
  border-radius:12px; background:#fffdf9; cursor:pointer; text-align:left; font:inherit; color:inherit; transition:border-color .15s, box-shadow .15s; }
.pano-admin-group:hover { border-color:var(--accent); }
.pano-admin-group.is-active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(138,112,90,.16); }
.pano-admin-group img { width:66px; height:42px; object-fit:cover; border-radius:7px; background:#e9e5df; flex:0 0 auto; }
.pano-admin-group-ph { width:66px; height:42px; border-radius:7px; background:#e9e5df; display:flex; align-items:center;
  justify-content:center; font-size:11px; color:var(--muted); flex:0 0 auto; }
.pano-admin-group b { display:block; font-size:14px; font-weight:600; margin-bottom:2px; }
.pano-admin-group span span { font-size:12px; color:var(--muted); }
.pano-admin-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 16px; }
/* 2026-10-22：作品卡挤成一团（用户反馈）。
   原来是死写两列、断点 900px —— 窗口 1000px 左右时主区只剩 700px，
   还硬分两列，每列 344px，卡片里塞不下「场景按钮 + 交付开关 + 密码框」。
   改成 minmax 自适应：宽度够就两列，不够自动回落一列，不用再维护断点数字。 */
.pano-admin-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(460px, 1fr)); gap:16px; }
.pano-admin-card { display:flex; gap:14px; padding:12px; border:1px solid var(--line); border-radius:14px; background:#fffdf9; }
/* 窄到卡片只能上下排时（平板竖屏 / 手机），缩略图铺满一行 */
@media (max-width: 760px) {
  .pano-admin-grid { grid-template-columns:1fr; }
  .pano-admin-card { flex-direction:column; gap:10px; }
  .pano-admin-thumb { flex:0 0 auto; width:100%; align-self:stretch; }
}

/* 2026-10-21：后台作品卡上的「交付状态 + 访问密码」 */
.pano-publish { margin:10px 0 4px; padding:9px 11px; border:1px dashed var(--line);
  border-radius:9px; background:#fbf8f3; }
.pano-publish.is-public { border-style:solid; border-color:#c2e0cf; background:#f2f8f4; }
.pano-publish-line { display:flex; align-items:center; gap:8px; font-size:12.5px; cursor:pointer; color:#6b5a45; }
.pano-publish-line input { accent-color:#8a705a; }
.pano-publish.is-public .pano-publish-line span { color:#2e7d5b; font-weight:600; }
.pano-publish-pass { display:flex; gap:6px; margin-top:7px; }
.pano-publish-pass .input { flex:1; min-width:0; font-size:12.5px; letter-spacing:.12em; }

/* ============================================================
   2026-10-21：后台「预览」改成站内全屏 iframe（用户要求：编辑界面不许弹新窗口）
   ============================================================ */
.pano-preview-layer { position:fixed; inset:0; z-index:5000; display:flex; flex-direction:column;
  padding:14px; background:rgba(20,17,15,.9); }
.pano-preview-layer[hidden] { display:none !important; }
.pano-preview-bar { display:flex; align-items:center; gap:12px; padding:0 4px 10px; color:#fff; }
.pano-preview-bar b { font-size:14px; letter-spacing:.04em; }
.pano-preview-note { font-size:12px; color:rgba(255,255,255,.5); }
.pano-preview-bar .button { margin-left:auto; background:rgba(255,255,255,.16) !important;
  color:#fff !important; border:1px solid rgba(255,255,255,.55) !important; }
.pano-preview-bar .button:hover { background:rgba(255,255,255,.28) !important; }
.pano-preview-frame { flex:1; width:100%; border:0; border-radius:10px; background:#111; }
body.pano-preview-lock { overflow:hidden; }

/* ============================================================
   2026-10-22：这里原来有一条 .pano-viewer .pnlm-zoom-controls { display:none }
   —— 那是「访客只能转、不能缩放」那一版的产物，缩放按钮被藏掉了。
   用户随后批注「无法放大缩小视角了」，手动缩放要还回来，
   所以这条规则已删除，+/- 按钮恢复显示（缩放区间由后台「视距范围」决定，现 80–120）。
   不要再加回来：藏掉按钮不会真正禁止缩放，只会让访客点了没反应。
   ============================================================ */
.pano-admin-thumb { position:relative; flex:0 0 190px; align-self:flex-start; aspect-ratio:8 / 5; border-radius:10px; overflow:hidden; background:#e9e5df; }
.pano-admin-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pano-admin-play { position:absolute; left:8px; bottom:8px; padding:4px 10px; border:0; border-radius:999px;
  background:rgba(20,17,15,.66); color:#fff; font-size:12px; cursor:pointer; }
.pano-admin-play:hover { background:rgba(20,17,15,.85); }
.pano-admin-body { flex:1; min-width:0; display:flex; flex-direction:column; }
.pano-admin-body h3 { margin:0 0 4px; font-size:16px; }
.pano-admin-body .meta { margin:0 0 2px; font-size:12.5px; color:var(--muted); }
.pano-admin-actions { margin-top:auto; padding-top:10px; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

/* 分片上传进度条 */
.pano-progress { margin:12px 0 0; height:8px; border-radius:999px; background:#efe8dd; overflow:hidden; }
.pano-progress-bar { height:100%; width:0; border-radius:999px; background:var(--accent); transition:width .18s ease; }

/* 场景内多视角切换条 */
/* 2026-10-19：视角条改成悬浮在画面之上，背景用渐变让全景透出来 */
.pano-nodes { position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; gap:10px;
  padding:14px 16px 16px; overflow-x:auto;
  background:linear-gradient(to top, rgba(20,17,15,.72), rgba(20,17,15,0)); }
.pano-node { flex:0 0 96px; display:flex; flex-direction:column; gap:4px; padding:4px; border:2px solid transparent;
  border-radius:8px; background:transparent; color:#e8e2d8; font:inherit; font-size:11px; cursor:pointer; text-align:left; }
.pano-node img { width:88px; height:50px; object-fit:cover; border-radius:5px; display:block; }
.pano-node span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pano-node.is-active { border-color:var(--accent); }
/* 2026-10-22（手机截图批注「把后面的都折叠…要点一下才展开」）：
   窄屏下场景条只留「当前这一张」，其余折起来，点「全部 N 个场景」才展开；
   桌上 10 张排得开，不折。 */
.pano-nodes-toggle { display:none; flex:0 0 auto; align-self:center; margin:0 0 0 2px;
  padding:8px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.34);
  background:rgba(20,17,15,.5); color:rgba(255,253,249,.96);
  font-family:inherit; font-size:12px; line-height:1; letter-spacing:.04em;
  cursor:pointer; white-space:nowrap; }
.pano-nodes-toggle:hover { background:rgba(20,17,15,.74); }
.pano-nodes-toggle:focus-visible { outline:2px solid rgba(255,255,255,.75); outline-offset:2px; }
@media (max-width: 900px) {
  /* 2026-10-22：这里原来有一条 `.pano-viewer .pnlm-controls-container { display:none }`
     —— 是"手机上把 +/−/全屏 隐藏掉"那一版。用户后来批注「这个功能，手机上先要保留」，
     所以撤掉，手机上恢复显示缩放按钮（滚轮/双指当然也照常可用）。
     别再删掉：隐藏之后单手缩放就没有可见入口了。 */

  .pano-nodes-toggle { display:inline-flex; align-items:center; align-self:flex-end; margin-bottom:1px;
    padding:5px 12px; font-size:11.5px; }
  .pano-nodes.is-collapsed .pano-node { display:none; }
  .pano-nodes.is-collapsed .pano-node.is-active { display:flex; }
  /* 折起来的时候把条本身也压矮、并往下贴（用户：「放下去」「平齐左边图底线，把高度再压缩一点」）：
     条高 85px → 78px，缩略图底边距视口底 10px → 3px；胶囊由"垂直居中"改成"贴缩略图底边"，高 28 → 22 */
  .pano-nodes.is-collapsed { padding:9px 12px 3px; gap:8px; }
  .pano-nodes.is-collapsed .pano-node { flex:0 0 72px; padding:3px; font-size:10px; }
  .pano-nodes.is-collapsed .pano-node img { width:66px; height:37px; }

  /* 2026-10-22（用户：「去掉」作品名、「把设计说明放这个位」）：
     作品名胶囊删掉后，「设计说明」整体下移到它原来的位置。
     具体的 bottom 值放在文件后半段（基础规则之后）的 @media 里 ——
     否则会被后面的基础规则按同优先级盖掉（踩过一次）。 */
}
.pano-badge-count { left:auto; right:10px; }

/* ============================================================
   2026-10-21：未交付作品的「密码门」
   卡片照常显示（客户得知道有这个作品），但画面压暗 + 一条锁提示；
   点开弹密码框。真正的拦截在服务端（未解锁时根本不下发原图）。
   ============================================================ */
.pano-badge-lock { left:auto; right:10px; background:rgba(178,60,44,.92) !important; }
/* 2026-10-23（用户：「亮度不变，不要变暗」）：未交付卡的压暗层整个去掉 —— 只留模糊。
   原来这条 ::after 会盖一层 rgba(20,17,15,.30 → .62) 的渐变，卡片比别的作品暗一截。
   去掉之后这里不再有覆盖层，走回 .work-cover::after 那条通用规则（只画一圈 11% 内缩的细边），
   所以未交付卡现在和普通作品卡一样亮。 */
/* 2026-10-23（用户：「模糊值搞大，亮度不变」）：未交付作品的封面加模糊，
   只糊这一张缩略图，压暗渐变原样保留。
   scale(1.08) 必须跟着写 —— 模糊后图像四边会变软、透出下面的底色，
   放大一点把软边推到相框外；hover 那条 scale(1.025) 也要按住，
   否则鼠标一移上去就缩回 1.025，四边又露出白边。 */
.pano-work-card.is-locked .work-cover img { filter: blur(40px); transform: scale(1.08); }
.pano-work-card.is-locked:hover .work-cover img { transform: scale(1.08); }
.pano-lock-veil { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  pointer-events:none; }
.pano-lock-veil b { color:#fff; font-size:13px; font-weight:600; letter-spacing:.06em;
  background:rgba(20,17,15,.72); border:1px solid rgba(255,255,255,.42); border-radius:999px;
  padding:8px 16px; backdrop-filter:blur(4px); }
.pano-pass { position:fixed; inset:0; z-index:4000; background:rgba(20,17,15,.62);
  display:flex; align-items:center; justify-content:center; padding:22px;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.pano-pass[hidden] { display:none !important; }
.pano-pass-box { width:min(380px, 100%); background:#fffdf9; border-radius:16px; padding:24px 24px 20px;
  box-shadow:0 20px 60px rgba(0,0,0,.32); }
.pano-pass-box h3 { margin:0 0 8px; font-size:17px; letter-spacing:.02em; }
.pano-pass-lead { margin:0 0 14px; font-size:13px; color:#8a7f72; line-height:1.7; }
.pano-pass-box .input { width:100%; letter-spacing:.14em; font-size:15px; text-align:center; }
.pano-pass-err { margin:8px 0 0; font-size:12.5px; color:#c0392b; line-height:1.6; }
.pano-pass-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }

/* 2026-10-22：静态图热点的看图弹层（前台）—— 点热点弹出一张图，尺寸不限 */
.pano-hotimg { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column;
  background:rgba(14,12,10,.94); }
.pano-hotimg[hidden] { display:none; }
.pano-hotimg-bar { flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:12px 18px; color:#fffdf9; }
.pano-hotimg-title { font-size:14px; letter-spacing:.03em; }
.pano-hotimg-hint { margin-left:auto; font-size:11.5px; color:rgba(255,253,249,.6); }
.pano-hotimg-close { border:1px solid rgba(255,255,255,.55); background:transparent; color:#fffdf9;
  padding:6px 16px; border-radius:999px; font:inherit; font-size:13px; cursor:pointer; }
.pano-hotimg-close:hover { background:rgba(255,255,255,.16); }
.pano-hotimg-stage { flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  padding:0 18px 22px; overflow:auto; }
.pano-hotimg-img { display:block; max-width:100%; max-height:100%; object-fit:contain;
  border-radius:4px; cursor:zoom-in; }
/* 点一下切到 1:1 原始尺寸，可以滚动看细节 */
.pano-hotimg-img.is-actual { max-width:none; max-height:none; cursor:zoom-out; }
@media (max-width: 900px) {
  .pano-hotimg-hint { display:none; }
  .pano-hotimg-bar { padding:10px 14px; }
  .pano-hotimg-stage { padding:0 10px 14px; }
}

/* 全景热点（点击跳转） */
.pano-hotspot { background:rgba(20,17,15,.72) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.55) !important; border-radius:999px !important;
  padding:7px 14px !important; font-size:13px !important; letter-spacing:.02em;
  box-shadow:0 2px 10px rgba(0,0,0,.35); }
.pano-hotspot:hover { background:rgba(138,112,90,.92) !important; }
.pano-hot-list { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.pano-hot-item { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:#fffdf9; font-size:12.5px; }

/* 热点样式：圆点 / 箭头 */
.pano-hotspot.is-dot { width:16px !important; height:16px !important; padding:0 !important;
  border-radius:50% !important; background:rgba(255,255,255,.92) !important;
  border:3px solid rgba(20,17,15,.72) !important; box-shadow:0 0 0 7px rgba(255,255,255,.22) !important; }
.pano-hotspot.is-dot:hover { background:#fff !important; box-shadow:0 0 0 9px rgba(255,255,255,.3) !important; }
.pano-hotspot.is-arrow { background:rgba(138,112,90,.92) !important; }
.pano-hot-item em { font-style:normal; color:var(--muted); font-size:11px; margin-left:4px; }
.pano-hot-actions { display:flex; gap:6px; flex:0 0 auto; }

/* 热点编辑弹窗 */
.hot-mask { position:fixed; inset:0; z-index:3000; background:rgba(20,17,15,.55);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.hot-dialog { width:min(420px, 100%); background:#fffdf9; border-radius:14px; padding:20px 22px;
  box-shadow:0 18px 50px rgba(0,0,0,.28); }
.hot-dialog h3 { margin:0 0 14px; font-size:17px; }
.hot-dialog .field { margin-bottom:12px; }
.hot-dialog-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.hot-dialog-actions .button { flex:0 0 auto; }

/* 全景热点面板 */
.hot-panel { border:1px solid var(--line); border-radius:12px; background:#fffdf9; padding:12px 14px; margin-bottom:14px; }
.hot-panel-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.hot-panel-head b { font-size:15px; }
.hot-count { font-size:12px; color:var(--muted); background:#efe8dd; border-radius:999px; padding:1px 9px; }
.hot-panel-head .button { margin-left:auto; }
.hot-add { display:flex; flex-direction:column; gap:8px; padding:10px; margin-bottom:10px;
  border:1px dashed var(--line); border-radius:10px; background:#fbf8f3; }
.hot-filter { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:12px; color:var(--muted); }
.hot-filter .select { flex:1; max-width:220px; }
.hot-list { display:flex; flex-direction:column; gap:6px; }
.hot-row { display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line);
  border-radius:9px; background:#fff; font-size:12.5px; }
.hot-ico { flex:0 0 22px; height:22px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; background:#efe8dd; color:var(--accent); font-size:12px; }
.hot-name { font-weight:600; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hot-target { flex:1; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hot-style { color:var(--muted); font-size:11px; }
.hot-acts { display:flex; gap:5px; flex:0 0 auto; }
.hot-acts .button { padding:3px 8px; font-size:11.5px; }

/* 热点样式：小手 */
.pano-hotspot.is-hand { width:34px !important; height:34px !important; padding:0 !important;
  border-radius:50% !important; background:rgba(20,17,15,.62) !important;
  border:1px solid rgba(255,255,255,.6) !important; display:flex !important;
  align-items:center !important; justify-content:center !important;
  box-shadow:0 2px 10px rgba(0,0,0,.35); }
.pano-hotspot.is-hand::before { content:'👆'; font-size:17px; line-height:1; }
.pano-hotspot.is-hand:hover { background:rgba(138,112,90,.92) !important; }

/* ============================================================
   2026-10-19 查看器过渡与铺底
   ============================================================ */
.pano-viewer { opacity: 0; transition: opacity .32s ease; }
.pano-viewer.is-open { opacity: 1; }
.pano-stage { position: relative; transform: scale(1.03); transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.pano-viewer.is-open .pano-stage { transform: scale(1); }

/* 加载铺底：卡片图模糊放大，全景就绪后淡出 */
.pano-poster { position: absolute; inset: -20px; z-index: 0; background-size: cover; background-position: center;
  filter: blur(14px) saturate(1.05) brightness(.85); transform: scale(1.04);
  transition: opacity .5s ease; }
.pano-poster.is-gone { opacity: 0; }
/* 2026-10-19：不能给 pannellum 内部 div 改 position —— 它靠绝对定位叠层，改了会把 canvas 挤到视口外。 */
.pano-poster { z-index: 0; }

/* 控件入场：关闭/视角条依次浮现
   （2026-10-22：原来的「按住拖动环顾四周 · 滚轮或双指缩放」提示条已按用户要求删除；
     作品名 .pano-caption 也按用户要求删除） */
.pano-close, .pano-nodes { opacity: 0; transform: translateY(8px); }
.pano-viewer.is-open .pano-close { opacity: 1; transform: translateY(0); transition: opacity .45s ease .12s, transform .45s cubic-bezier(.22,.61,.36,1) .12s; }
.pano-viewer.is-open .pano-nodes { opacity: 1; transform: translateY(0); transition: opacity .45s ease .2s, transform .45s cubic-bezier(.22,.61,.36,1) .2s; }

/* 关闭按钮轻微放大 */
.pano-close { transition: background .2s ease, transform .2s ease; }
.pano-close:hover { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .pano-viewer, .pano-stage, .pano-close, .pano-nodes, .pano-poster { transition: none !important; }
}

/* 热点图标选择器 */
.hot-icon-picker { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-top:6px; }
.hot-icon-btn { height:34px; border:1px solid var(--line); border-radius:8px; background:#fff;
  font-size:15px; cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.hot-icon-btn:hover { border-color:var(--accent); }
.hot-icon-btn.is-active { border-color:var(--accent); background:#f3ece3; box-shadow:0 0 0 2px rgba(138,112,90,.18); }

/* 图标型热点：圆形底 + 图标 */
.pano-hotspot.is-icon { width:var(--hs-size, 38px) !important; height:var(--hs-size, 38px) !important; padding:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border-radius:50% !important; background:rgba(20,17,15,.52) !important;
  border:0 !important; color:#fff !important;
  font-size:var(--hs-font, 17px) !important; line-height:1 !important;
  box-shadow:0 2px 12px rgba(0,0,0,.38); }
.pano-hotspot.is-icon:hover { background:rgba(138,112,90,.95) !important; }

/* 图标大小滑杆 */
.hot-size-row { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12.5px; color:var(--muted); }
.hot-size-row input[type="range"] { flex:1; }
.hot-size-row b { color:var(--accent); min-width:24px; text-align:right; }

/* 2026-10-22（用户：「热点里面要可以添加静态图片，尺寸不限制」）：
   热点现在分两种 —— 跳场景 / 点开看图片。下面是这两种表单用的样式。 */
.hot-kind { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 4px; font-size:12.5px; color:var(--ink); }
.hot-kind label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.hot-kind input { margin:0; }
.hot-img-box { margin:0; padding:10px; border:1px dashed rgba(37,34,31,.22); border-radius:8px; background:rgba(37,34,31,.02); }
.hot-img-box .input[type="file"] { padding:6px; }
.hot-img-box[hidden] { display:none; }
.hot-img-now { display:flex; align-items:center; gap:10px; margin:0 0 8px; }
.hot-img-now img { width:110px; height:72px; object-fit:cover; border-radius:6px; border:1px solid var(--line); background:#efe9df; }
.hot-img-now[hidden] { display:none; }

/* 图标型热点里的 SVG */
/* 图标型热点里的 SVG：必须给像素尺寸，百分比会相对 span（高度 auto）塌成 0 */
.pano-hotspot.is-icon > span { display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important; height:100% !important; }
.pano-hotspot.is-icon svg { width:var(--hs-svg, 22px) !important; height:var(--hs-svg, 22px) !important; display:block !important; }
.pano-hotspot.is-icon:empty::before { content:''; }
.hot-icon-btn svg { width:20px; height:20px; }
.hot-icon-btn { font-size:12px; }

/* 图标热点内容（直接注入 div，不经过 pannellum 的 tooltip span） */
.pano-hotspot .pano-icon-inner { display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important; height:100% !important; }
.pano-hotspot svg { width:var(--hs-svg, 22px) !important; height:var(--hs-svg, 22px) !important; display:block !important; }

/* 2026-10-19：热点带名称（图标 + 文字胶囊） */
.pano-hotspot.has-label { width:auto !important; height:var(--hs-h, 36px) !important;
  padding:0 14px 0 10px !important; border-radius:999px !important;
  display:flex !important; align-items:center !important; gap:7px !important; }
.pano-hotspot.has-label .pano-icon-inner { width:auto !important; height:auto !important; flex:0 0 auto; }
.pano-hotspot .pano-icon-label { font-size:var(--hs-text, 13px); color:#fff; white-space:nowrap;
  letter-spacing:.02em; text-shadow:0 1px 4px rgba(0,0,0,.45); }

/* 2026-10-19：主视角卡片里的「其他场景」链接 */
.pano-admin-sub { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0 2px; }
.pano-admin-sub .muted-note { font-size:12px; color:#8a7f72; }
.pano-admin-sub .button { padding:2px 9px; font-size:12px; }
.pano-admin-count { position:absolute; left:10px; top:10px; background:rgba(20,17,15,.72); color:#fff;
  font-size:11px; padding:2px 8px; border-radius:999px; }

/* 2026-10-19：热点行两行布局（名字+目标 / 按钮） */
.hot-row { display:grid !important; grid-template-columns:24px 1fr; gap:4px 8px; align-items:center; }
.hot-row .hot-ico { grid-row:1; }
.hot-main { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.hot-main b { font-weight:600; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hot-main em { font-style:normal; font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hot-acts { grid-column:1 / -1; display:flex; gap:5px; justify-content:flex-end; }

/* 2026-10-19：背景音乐开关（查看器右上角，关闭按钮左边） */
.pano-music-btn { position:absolute; top:18px; right:74px; z-index:4; width:42px; height:42px; border:0;
  border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:18px; line-height:1; cursor:pointer;
  transition:background .2s ease, transform .2s ease; }
.pano-music-btn:hover { background:rgba(255,255,255,.28); transform:scale(1.05); }
.pano-music-btn.is-muted { opacity:.72; }
/* 后台音频预览 */
.pano-music-preview { width:100%; margin-top:6px; height:34px; }

/* 自动播放被拦时的提示动画 */
.pano-music-btn.needs-tap { animation:panoTap 1.6s ease-in-out infinite; }
@keyframes panoTap { 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.35); } 50%{ box-shadow:0 0 0 8px rgba(255,255,255,0); } }

/* 2026-10-19：球面开场 —— 整屏鱼眼球面交叉淡化到正常视角 */
.pano-planet-wrap { position:absolute; inset:0; z-index:5; overflow:hidden; background:transparent; pointer-events:none; }
.pano-planet { width:100%; height:100%; object-fit:cover; transform-origin:50% 52%; }
.pano-planet-wrap.is-go .pano-planet { animation:panoSphereOut 2.6s cubic-bezier(.33,.02,.25,1) forwards; }
@keyframes panoSphereOut {
  0%   { transform:scale(1.00) rotate(-6deg); opacity:0; filter:blur(10px); }
  8%   { transform:scale(1.02) rotate(-5.4deg); opacity:1; filter:blur(0); }
  45%  { transform:scale(1.55) rotate(-3deg); opacity:1; filter:blur(0); }
  75%  { transform:scale(2.6) rotate(-1deg); opacity:.7; filter:blur(2px); }
  100% { transform:scale(4.2) rotate(0deg); opacity:0; filter:blur(10px); }
}

/* 2026-10-19：球面开场期间，全景与控件先隐藏，淡出时再揭开 */
.pano-viewer.is-intro .pano-stage { opacity:0; }
.pano-viewer .pano-stage { transition:opacity .9s ease; }
.pano-viewer.is-intro .pano-nodes,
.pano-viewer.is-intro .pano-close,
.pano-viewer.is-intro .pano-music-btn { opacity:0 !important; transition:opacity .6s ease; }

/* 2026-10-19：小行星→透视 的 WebGL 过渡画布 */
.pano-morph-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:6; display:block; }

/* ============================================================
 * 2026-10-20：场景编辑（照建E 的「场景编辑」：左分组 / 右卡片网格 / 拖拽排序）
 * ============================================================ */
.pse-body { display:flex; gap:18px; align-items:flex-start; }
@media (max-width: 820px) { .pse-body { flex-direction:column; } .pse-side { width:100%; flex:1 1 auto; } }
.pse-side { width:196px; flex:0 0 196px; display:flex; flex-direction:column; gap:4px; }
.pse-tab-row { display:flex; align-items:center; gap:2px; }
.pse-tab { flex:1 1 auto; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 11px; border:1px solid transparent; border-radius:9px; background:transparent;
  font:inherit; font-size:13px; color:var(--ink); text-align:left; cursor:pointer; }
.pse-tab span { color:var(--muted); font-size:12px; }
.pse-tab:hover { background:rgba(37,34,31,.05); }
.pse-tab.is-active { background:#fffdf9; border-color:var(--line); font-weight:600; }
.pse-tab-ops { display:flex; gap:2px; opacity:.45; }
.pse-tab-row:hover .pse-tab-ops { opacity:1; }
.pse-tab-ops button { border:0; background:transparent; cursor:pointer; font-size:12px; color:var(--muted); padding:2px 4px; border-radius:5px; }
.pse-tab-ops button:hover { background:rgba(37,34,31,.08); color:var(--ink); }
/* 2026-10-22：内置「隐藏」分组右侧的说明标签（不可改名/删除） */
.pse-lock { font-size:10px; letter-spacing:.04em; color:#b4453a; background:rgba(180,69,58,.1);
  padding:2px 6px; border-radius:999px; white-space:nowrap; }
.pse-tab-row:hover .pse-lock { opacity:1; }

.pse-main { flex:1 1 auto; min-width:0; }
.pse-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
.pse-new { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:236px; border:1px dashed var(--line); border-radius:12px; background:rgba(255,253,249,.5);
  color:var(--muted); font:inherit; font-size:13px; cursor:pointer; }
.pse-new b { font-size:26px; font-weight:300; line-height:1; }
.pse-new:hover { border-color:var(--accent); color:var(--ink); }
.pse-card { display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--line);
  border-radius:12px; background:#fffdf9; cursor:grab; }
.pse-card:active { cursor:grabbing; }
.pse-card.is-drag { opacity:.45; }
.pse-thumb { position:relative; border-radius:9px; overflow:hidden; background:#e9e5df; aspect-ratio:3 / 2; }
.pse-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pse-ops { position:absolute; inset:auto 0 0 0; display:flex; gap:6px; padding:6px;
  background:linear-gradient(to top, rgba(20,18,16,.72), rgba(20,18,16,0)); opacity:0; transition:opacity .18s ease; }
.pse-card:hover .pse-ops { opacity:1; }
.pse-ops button { border:0; border-radius:6px; padding:4px 9px; font:inherit; font-size:12px;
  background:rgba(255,253,249,.92); color:var(--ink); cursor:pointer; }
.pse-ops button:hover { background:#fff; }
.pse-proj { position:absolute; left:6px; top:6px; padding:2px 7px; border-radius:999px;
  background:rgba(20,18,16,.62); color:#fff; font-size:11px; letter-spacing:.02em; }
.pse-field { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }

/* 2026-10-22：静态图库（热点「点开看图片」用）—— 尺寸比例都不限，object-fit:contain 才不裁图 */
.pano-static-list { padding:0 0 18px; }
.pano-static-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.pano-static-item { margin:0; display:flex; flex-direction:column; gap:6px; padding:8px;
  border:1px solid var(--line); border-radius:10px; background:#fffdf9; }
.pano-static-item img { width:100%; height:112px; object-fit:contain; background:#f1ede7;
  border-radius:7px; display:block; }
.pano-static-item figcaption { font-size:11.5px; color:var(--muted); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-all; }
.pano-static-item .button { align-self:flex-start; padding:3px 10px; font-size:11.5px; }
.pse-field span { flex:0 0 auto; }
.pse-field .input, .pse-field .select { flex:1 1 auto; min-width:0; padding:5px 7px; font-size:12.5px; }
.pse-row { display:flex; gap:8px; }
.pse-row .pse-field { flex:1 1 0; }
.pse-foot { display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:12px;
  border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); }
.pse-foot b { color:var(--ink); }
.pse-foot .muted-note { margin-left:auto; }
/* 排序字段窄、分组字段宽，避免分组名被截断 */
.pse-row .pse-field:first-child { flex:0 0 84px; }
.pse-row .pse-field:last-child { flex:1 1 auto; min-width:0; }
.pse-card .pse-row .select { width:100%; }
/* 卡片略宽 + 排序/分组 标签放上方，避免分组名被截断 */
.pse-grid { grid-template-columns:repeat(auto-fill, minmax(212px, 1fr)); }
.pse-row .pse-field { flex-direction:column; align-items:stretch; gap:3px; }
.pse-row .pse-field span { font-size:11px; }
.pse-row .pse-field:first-child { flex:0 0 74px; }

/* ============================================================
 * 2026-10-20：场景切换动效（后台「场景动效」选的那 12 种）
 * 上层盖一张目标场景的预览图，按效果动进来；播放器加载完就撤掉
 * ============================================================ */
.pano-switch { position:absolute; inset:0; z-index:5; overflow:hidden; background:#14110f; pointer-events:none; }
.pano-switch img { width:100%; height:100%; object-fit:cover; display:block; will-change:transform, opacity; }
.pano-switch.is-done { display:none; }

/* 默认 / 简单交叉淡化 */
.pano-switch--fade { opacity:0; transition:opacity .34s ease; }
.pano-switch--fade.is-go { opacity:1; }
.pano-switch--cross { opacity:0; transition:opacity .62s ease; }
.pano-switch--cross.is-go { opacity:1; }

/* 缩放混合 */
.pano-switch--zoom { opacity:0; transition:opacity .5s ease; }
.pano-switch--zoom img { transform:scale(1.14); transition:transform .62s cubic-bezier(.22,.61,.36,1); }
.pano-switch--zoom.is-go { opacity:1; }
.pano-switch--zoom.is-go img { transform:scale(1); }

/* 黑色渐隐 / 白色闪光 */
.pano-switch--black { background:#0b0a09; }
.pano-switch--black img { opacity:0; transition:opacity .5s ease .06s; }
.pano-switch--black.is-go img { opacity:1; }
.pano-switch--white { background:#fffdf9; }
.pano-switch--white img { opacity:0; transition:opacity .46s ease .06s; }
.pano-switch--white.is-go img { opacity:1; }

/* 从右到左 / 从上到下 / 对角滑动 */
.pano-switch--slideRight { transform:translateX(100%); transition:transform .62s cubic-bezier(.22,.61,.36,1); }
.pano-switch--slideRight.is-go { transform:translateX(0); }
.pano-switch--slideDown { transform:translateY(-100%); transition:transform .62s cubic-bezier(.22,.61,.36,1); }
.pano-switch--slideDown.is-go { transform:translateY(0); }
.pano-switch--diagonal { transform:translate(100%, -100%); transition:transform .62s cubic-bezier(.22,.61,.36,1); }
.pano-switch--diagonal.is-go { transform:translate(0, 0); }

/* 圆形展开 / 纵向展开 / 横向展开 / 椭圆缩放 */
.pano-switch--circle { clip-path:circle(0% at 50% 50%); transition:clip-path .66s cubic-bezier(.4,0,.2,1); }
.pano-switch--circle.is-go { clip-path:circle(75% at 50% 50%); }
.pano-switch--vertical { clip-path:inset(50% 0 50% 0); transition:clip-path .62s cubic-bezier(.4,0,.2,1); }
.pano-switch--vertical.is-go { clip-path:inset(0 0 0 0); }
.pano-switch--horizontal { clip-path:inset(0 50% 0 50%); transition:clip-path .62s cubic-bezier(.4,0,.2,1); }
.pano-switch--horizontal.is-go { clip-path:inset(0 0 0 0); }
.pano-switch--ellipse { clip-path:ellipse(0% 0% at 50% 50%); transition:clip-path .66s cubic-bezier(.4,0,.2,1); }
.pano-switch--ellipse.is-go { clip-path:ellipse(75% 75% at 50% 50%); }

/* 2026-10-20：场景动效（单选列表）+ 视角范围（数字对） */
.pano-trans-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 16px; max-width:620px; }
@media (max-width: 700px) { .pano-trans-list { grid-template-columns:1fr; } }
.pano-trans-item { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px;
  font-size:13px; color:var(--ink); cursor:pointer; }
.pano-trans-item:hover { background:rgba(37,34,31,.05); }
.pano-trans-item input { accent-color:var(--accent); }
.pano-range-field { margin-bottom:12px; max-width:420px; }
.pano-range-field > label { display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px; }
.pano-range-inputs { display:flex; align-items:center; gap:8px; }
.pano-range-inputs .input { flex:1 1 0; min-width:0; }
.pano-range-inputs span { color:var(--muted); }

/* 2026-10-24：视角范围的双滑块（照建E 那种：一条轨道两个圆点）
   隐藏 input 里才是真值，保存逻辑不变。 */
.pano-dual-field { margin:0 0 14px; max-width:430px; }
.pano-dual-head { font-size:11.5px; color:var(--muted); letter-spacing:.04em; margin-bottom:9px; }
.pano-dual { position:relative; height:20px; margin:0 9px; touch-action:none; }
.pano-dual-track { position:absolute; left:-9px; right:-9px; top:50%; height:4px; transform:translateY(-50%);
  background:#e7e1d8; border-radius:999px; }
.pano-dual-fill { position:absolute; top:0; bottom:0; background:var(--accent); border-radius:999px; }
.pano-dual-handle { position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  background:#fffdf9; border:2px solid var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.2);
  cursor:grab; touch-action:none; }
.pano-dual-handle:active { cursor:grabbing; transform:scale(1.08); }
.pano-dual-handle:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* 拖动时跟着手指走的数值气泡（照建E 那个样子） */
.pano-dual-tip { position:absolute; bottom:20px; transform:translateX(-50%);
  padding:3px 9px; border-radius:6px; background:#26221e; color:#fffdf9;
  font-size:11.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  pointer-events:none; z-index:3; box-shadow:0 2px 8px rgba(0,0,0,.28); }
.pano-dual-tip[hidden] { display:none !important; }
.pano-dual-tip::after { content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:4px solid transparent; border-top-color:#26221e; }
.pano-dual-ends { display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--muted); }
.pano-dual-ends b { color:var(--ink); font-weight:600; font-size:12px; }

/* 2026-10-24：视角设置面板里的「更多设置」折叠块 */
.pano-simple-more { margin:14px 0 4px; border-top:1px dashed rgba(0,0,0,.12); padding-top:10px; }
.pano-simple-more > summary { cursor:pointer; font-size:12px; color:var(--muted); letter-spacing:.04em; }
.pano-simple-more > summary:hover { color:var(--ink); }
.pano-simple-more[open] > summary { margin-bottom:10px; }
.pano-ed-subhead { margin:18px 0 10px; padding-top:12px; border-top:1px dashed rgba(0,0,0,.12);
  font-size:12px; letter-spacing:.08em; color:var(--muted); }

/* 2026-10-20：场景编辑 —— 批量管理 / 拖进分组 */
.pse-tab { position:relative; }
.pse-tab[draggable="true"], .pse-side .pse-tab { transition:background .15s ease, box-shadow .15s ease; }
.pse-side .pse-tab:hover { box-shadow:inset 0 0 0 1px var(--line); }
.pse-batchbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; background:#fffdf9; font-size:12.5px; }
.pse-batchbar b { color:var(--ink); }
.pse-card.is-batch { cursor:pointer; }
.pse-card.is-picked { box-shadow:0 0 0 2px var(--accent); }
.pse-pick { position:absolute; right:8px; top:8px; width:20px; height:20px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9); background:rgba(20,18,16,.45); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; }
.pse-card.is-picked .pse-pick { background:var(--accent); border-color:var(--accent); }

/* 2026-10-20：编辑器能力范围条（只保留 6 项） */
.pano-scope { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 18px; padding:10px 14px;
  border:1px solid var(--line); border-radius:12px; background:#fffdf9; }
.pano-scope-lead { font-size:12px; color:var(--muted); letter-spacing:.04em; margin-right:2px; }
.pano-scope-item { border:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; font-size:12.5px;
  padding:5px 11px; border-radius:999px; cursor:pointer; }
.pano-scope-item:hover { border-color:var(--accent); color:var(--accent); }

/* ============================================================
 * 2026-10-20：全景编辑器新版排版（左舞台 + 右工具条 + 抽屉）
 * ============================================================ */
.pano-ed { position:relative; height:calc(100vh - 96px); min-height:560px; border-radius:16px;
  overflow:hidden; background:#14110f; isolation:isolate; }
.pano-ed-stage { position:absolute; inset:0; background:#14110f; }
.pano-ed-stage .pnlm-container { border-radius:0; }

/* 右侧工具条 */
.pano-ed-rail { position:absolute; right:14px; top:50%; transform:translateY(-50%); z-index:6;
  display:flex; flex-direction:column; gap:2px; padding:8px 6px; border-radius:16px;
  background:rgba(20,17,15,.66); backdrop-filter:blur(10px); box-shadow:0 8px 28px rgba(0,0,0,.35); }
.pano-ed-tool { display:flex; flex-direction:column; align-items:center; gap:3px; width:56px; padding:9px 4px;
  border:0; border-radius:11px; background:transparent; color:rgba(255,253,249,.72); font:inherit; font-size:11px;
  cursor:pointer; transition:background .15s ease, color .15s ease; }
.pano-ed-tool i { font-style:normal; font-size:15px; line-height:1; }
.pano-ed-tool:hover { background:rgba(255,253,249,.12); color:#fff; }
.pano-ed-tool.is-active { background:#fffdf9; color:#25221f; }

/* 抽屉 */
.pano-ed-drawer { position:absolute; right:82px; top:16px; bottom:92px; width:392px; max-width:calc(100% - 110px);
  z-index:7; display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
  background:#fffdf9; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.pano-ed-drawer[hidden] { display:none; }
.pano-ed-drawer-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--line); }
.pano-ed-drawer-head b { font-size:14px; letter-spacing:.03em; }
.pano-ed-drawer-head button { border:0; background:transparent; font-size:20px; line-height:1; color:var(--muted); cursor:pointer; }
.pano-ed-drawer-body { flex:1 1 auto; overflow-y:auto; padding:16px; }
.pano-ed-drawer-body .field:last-child { margin-bottom:0; }
.pano-ed-drawer-foot { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 16px;
  border-top:1px solid var(--line); background:#faf8f3; }
/* 2026-10-22：抽屉底部那行「哪些即时生效 / 哪些要点保存」的说明 —— 独占一行，关闭按钮在下一行右对齐 */
.pano-ed-foot-hint { flex:1 1 100%; font-size:11.5px; line-height:1.65; color:#8a7f72; }
.pano-ed-foot-hint b { color:#6b5a45; font-weight:600; }
.pano-ed-drawer-foot .button { margin-left:auto; }

/* 底部场景选择条 */
.pano-ed-scenebar { position:absolute; left:14px; bottom:14px; right:200px; z-index:6; display:flex; align-items:center; gap:10px; }
.pano-ed-scenebar-lead { flex:0 0 auto; font-size:11px; letter-spacing:.08em; color:rgba(255,253,249,.6); }
.pano-ed-scenebar-list { display:flex; gap:8px; overflow-x:auto; padding:4px; scrollbar-width:thin; }
/* 2026-10-22（用户：「这个做黑色太深，做浅灰色半透明」）：
   卡片底色原来是 #1c1917（近黑），名称那一条压在上面很沉。
   改成浅灰半透明 + 背景模糊；文字跟着换成深色，不然浅底上白字看不清。
   选中态原来用白色描边，浅底上会看不见，改成用强调色描边 + 淡淡外发光。 */
.pano-ed-thumb { position:relative; flex:0 0 auto; width:92px; padding:0; border:1px solid rgba(255,253,249,.34);
  border-radius:9px; overflow:hidden; background:rgba(255,253,249,.4);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer; }
.pano-ed-thumb img { display:block; width:100%; height:56px; object-fit:cover; opacity:.72; }
.pano-ed-thumb span { display:block; padding:3px 5px; font-size:10.5px; color:#2a2622;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pano-ed-thumb:hover { border-color:rgba(255,253,249,.75); }
.pano-ed-thumb.is-active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,253,249,.55); }
.pano-ed-thumb.is-active img { opacity:1; }
.pano-ed-thumb.is-active span { font-weight:600; }

/* 右下动作 */
.pano-ed-actions { position:absolute; right:14px; bottom:14px; z-index:6; display:flex; gap:8px; }
.pano-ed-actions .button { background:rgba(255,253,249,.92); border-color:transparent; }
.pano-ed-actions .button.accent { background:#8a705a; color:#fff; }

@media (max-width: 900px) {
  .pano-ed { height:calc(100vh - 96px); border-radius:0; }
  .pano-ed-rail { right:8px; top:auto; bottom:86px; transform:none; flex-direction:row; padding:6px; }
  .pano-ed-tool { width:auto; padding:7px 10px; font-size:10.5px; }
  .pano-ed-drawer { right:8px; left:8px; width:auto; max-width:none; top:8px; bottom:150px; }
  .pano-ed-scenebar { right:14px; bottom:52px; }
  .pano-ed-actions { bottom:10px; right:10px; }
}
/* 抽屉打开时，底部场景条让位，不要被压住 */
.pano-ed:has(.pano-ed-drawer:not([hidden])) .pano-ed-scenebar { right: 492px; }
@media (max-width: 900px) { .pano-ed:has(.pano-ed-drawer:not([hidden])) .pano-ed-scenebar { right: 14px; bottom: 206px; } }

/* 2026-10-20：开场图角标 */
.pse-open { position:absolute; right:8px; bottom:8px; padding:2px 8px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:10.5px; letter-spacing:.04em; }
/* 2026-10-22：这张卡在「🔒 隐藏」分组里 —— 直接标在缩略图上，
   不用去翻"分组"下拉才知道。挪到别的分组后角标自然消失。 */
.pse-hide { position:absolute; right:8px; top:6px; padding:2px 8px; border-radius:999px;
  background:rgba(180,69,58,.92); color:#fff; font-size:10.5px; letter-spacing:.04em; white-space:nowrap; }

/* 2026-10-20：场景编辑弹窗（编辑器内） */
.pse-modal { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; }
.pse-modal[hidden] { display:none; }
.pse-modal-mask { position:absolute; inset:0; background:rgba(12,11,10,.55); backdrop-filter:blur(2px); }
.pse-modal-win { position:relative; width:min(1120px, calc(100% - 48px)); max-height:calc(100% - 40px);
  display:flex; flex-direction:column; background:#fffdf9; border-radius:16px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.45); }
.pse-modal-head { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.pse-modal-head b { font-size:15px; letter-spacing:.03em; }
.pse-modal-head .muted-note { font-size:12px; }
.pse-modal-head button { margin-left:auto; border:0; background:transparent; font-size:22px; line-height:1;
  color:var(--muted); cursor:pointer; }
.pse-modal-body { flex:1 1 auto; overflow-y:auto; padding:16px 18px 20px; }
.pse-modal-body .pse { border:0; padding:0; }
.pse-modal-body .panel-head { padding-top:0; }
@media (max-width: 900px) {
  .pse-modal-win { width:calc(100% - 16px); max-height:calc(100% - 16px); border-radius:12px; }
  .pse-modal-body { padding:12px; }
}

/* 2026-10-20：作品卡为空的占位 */
.pano-admin-thumb.is-empty { display:flex; align-items:center; justify-content:center; background:#f0ece5; }
.pano-admin-empty { font-size:12px; color:var(--muted); letter-spacing:.04em; }

/* 2026-10-20：全景作品列表 —— 所有作品卡同格横排 */
.pano-group-head--loose { display:flex; align-items:baseline; gap:12px; margin:0 0 16px; }
.pano-group-head--loose h2 { font-family:var(--serif); font-size:20px; font-weight:400; color:var(--ink); margin:0; }
.pano-group-head--loose span { font-size:12px; color:var(--muted); }

/* 2026-10-20：全景作品列表用设计项目页的卡片，封面稍高一点、圆角一致 */
.pano-work-grid .pano-work-card { cursor:pointer; }
.pano-work-grid .work-cover { aspect-ratio:4 / 3; border-radius:2px; }
.pano-work-grid .work-meta h3 { margin:0 0 4px; }
.pano-work-grid .work-meta p { color:var(--muted); font-size:12.5px; }

/* 2026-10-20：全景作品卡 —— 圆角 + 水印（与设计项目页一致） */
.pano-work-grid .work-card { border-radius:14px; overflow:hidden; }
.pano-work-grid .work-cover { border-radius:14px; }
.pano-work-grid .work-meta { padding:14px 2px 0; }

/* 2026-10-20：全景查看器里的设计说明（来自作品信息）
   2026-10-22 用户批注「这个设计说明不全，底色改成透明」，两处一起改：
   ① 底色：原来 rgba(20,17,15,.42) 深色底 + blur(6px) 糊住画面 → 全部去掉，纯透明
   ② 截断：原来 max-height:66px + overflow:hidden + 底部渐隐，
      221 字的设计说明只能看到 3 行 → 取消高度限制，整段显示
   底色没了以后靠三层文字阴影兜可读性（墙面有深有浅，白字必须有暗描边）

   2026-10-22（第二次批注，手机截图）：「把设计说明折叠起来…要点开才能显示出来」——
   手机上 221 字占了 40% 屏高，把全景全糊住了。改成：
     · 默认收起，只留一个小胶囊「设计说明 ▾」放在场景条上方；
     · 点一下展开全文，再点「收起说明 ▴」收回去；
     · 窄屏（≤900px）默认收起，宽屏默认展开（桌上那三行不碍事，是之前要的原文）。
   2026-10-22（第三次批注，桌面截图）：「去掉」作品名、「把设计说明放这个位」——
   作品名胶囊已删除，说明整块下移到它原来的位置（桌面：胶囊 115、正文 150，场景条高 112）。 */
.pano-desc { position:absolute; z-index:5; left:24px; bottom:150px; max-width:min(520px, 56%); margin:0;
  padding:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  font-size:12.5px; line-height:1.7; color:rgba(255,253,249,.96);
  text-shadow:0 1px 2px rgba(0,0,0,.92), 0 2px 8px rgba(0,0,0,.7), 0 0 20px rgba(0,0,0,.55);
  pointer-events:none; }
.pano-desc-toggle { position:absolute; z-index:5; left:24px; bottom:115px;
  display:inline-flex; align-items:center; gap:6px; margin:0; padding:7px 13px;
  border:1px solid rgba(255,255,255,.32); border-radius:999px;
  background:rgba(20,17,15,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:rgba(255,253,249,.96); font-family:inherit; font-size:12.5px; line-height:1;
  letter-spacing:.04em; cursor:pointer; text-shadow:none;
  transition:background .2s ease, border-color .2s ease; }
.pano-desc-toggle:hover { background:rgba(20,17,15,.68); border-color:rgba(255,255,255,.5); }
.pano-desc-toggle:focus-visible { outline:2px solid rgba(255,255,255,.75); outline-offset:2px; }
.pano-desc-caret { font-size:10px; opacity:.85; }
.pano-viewer.is-intro .pano-desc-toggle { opacity:0 !important; transition:opacity .5s ease; }
@media (max-width: 900px) {
  .pano-desc { left:14px; max-width:calc(100% - 28px); font-size:12px; bottom:118px; }
  .pano-desc-toggle { left:14px; font-size:12px; padding:6px 12px; bottom:86px; }
  /* 场景条展开时（高 112）整块跟着上抬，折叠时（高 78）贴在它上面 */
  .pano-nodes:not(.is-collapsed) ~ .pano-desc-toggle { bottom:120px; }
  .pano-nodes:not(.is-collapsed) ~ .pano-desc { bottom:152px; }
}

/* 2026-10-20：页脚备案号（工信部要求，链接到备案系统） */
.site-footer .footer-links .icp { font-size:11px; letter-spacing:.02em; color:inherit; opacity:.72; }
.site-footer .footer-links .icp:hover { opacity:1; text-decoration:underline; }

/* ============================================================
   2026-10-22：编辑器里看静态图
   用户：「点击后直接在这里显示图片」—— 就在舞台这块区域里显示，
   不跳场景、不弹新窗口。图层挂在 #panoEditStage 里，
   z-index 5 低于右侧工具栏 (6) 和抽屉 (7)，看图的同时候工具条还能点。
   ============================================================ */
.pano-ed-hotimg { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  padding:18px 96px 108px 22px; background:rgba(20,17,15,.88); }
.pano-ed-hotimg[hidden] { display:none !important; }
.pano-ed-hotimg-head { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.pano-ed-hotimg-title { font-size:13px; letter-spacing:.06em; color:rgba(255,253,249,.92); }
.pano-ed-hotimg-close { margin-left:auto; width:30px; height:30px; border:0; border-radius:50%;
  background:rgba(255,253,249,.16); color:#fffdf9; font-size:18px; line-height:1; cursor:pointer; }
.pano-ed-hotimg-close:hover { background:rgba(255,253,249,.3); }
.pano-ed-hotimg-scroll { flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  overflow:auto; margin-top:10px; }
.pano-ed-hotimg-img { max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in;
  border-radius:4px; box-shadow:0 18px 50px rgba(0,0,0,.45); }
.pano-ed-hotimg-img.is-actual { max-width:none; max-height:none; cursor:zoom-out; }
.pano-ed-hotimg-tip { flex:0 0 auto; margin:10px 0 0; font-size:11px; letter-spacing:.05em; color:rgba(255,253,249,.55); }
@media (max-width: 900px) {
  .pano-ed-hotimg { padding:12px 14px 150px; }
  .pano-ed-hotimg-tip { font-size:10px; }
}

/* ============================================================
   2026-10-22：场景编辑弹窗里的「静态图」区块
   用户：「本项目的静态图，要排在全景图后面」——
   全景卡片网格之后单独一块，只列当前作品的静态图（比例尺寸不限）。
   ============================================================ */
.pse-static { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.pse-static-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.pse-static-head b { font-size:13.5px; letter-spacing:.04em; }
.pse-static-head .muted-note { font-size:11.5px; }
.pse-static .pano-static-grid { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 900px) {
  .pse-static { margin-top:16px; padding-top:12px; }
  .pse-static .pano-static-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
}

/* 2026-10-22（用户：「他这种透明度 感觉」+「后面的全景还在旋转」）：
   看静态图的时候，背景改成半透明 + 轻微模糊 —— 能看见后面的空间，但不抢主体；
   自动旋转同时会被暂停（见 admin.js openEdHotImage / closeEdHotImage）。 */
.pano-ed-hotimg { background:rgba(18,15,13,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.pano-ed-hotimg-img { box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,253,249,.12); }

/* 2026-10-22（用户：「第一次添加图片不显示预览，要添加后修改就会显示预览，不合理」）：
   新增热点里选好图（上传或从图库挑）立刻出缩略图，不用先保存再编辑一次。 */
.hot-img-prev { margin:8px 0 0; padding:6px; border:1px solid var(--line); border-radius:8px; background:#faf7f2; }
.hot-img-prev[hidden] { display:none !important; }
.hot-img-prev img { display:block; width:100%; max-height:160px; object-fit:contain; border-radius:5px; }

/* 2026-10-22：全屏时看图弹层挂到全屏元素里（见 app.js panoHotImgHost），
   这里只保证它是整层铺满、在最上面。 */
.pano-hotimg { z-index:6000; }

/* 2026-10-22：热点图片预览 —— 居中、留一点米色底，竖图也不会被裁成一条 */
.hot-img-prev { display:flex; align-items:center; justify-content:center; min-height:96px; background:#f3efe9; }
.hot-img-prev img { width:auto; max-width:100%; max-height:150px; object-fit:contain; }

/* 2026-10-22（用户：「这个背景遮盖颜色还要再透明一半」）：
   前台看图遮罩从 0.94 降到 0.48 + 轻微模糊 —— 后面的全景看得清，图片依然是主体。 */
.pano-hotimg { background:rgba(14,12,10,.48); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* 2026-10-22（用户：「全景图里这个图标要显示名字」）：
   图标热点以前是固定 38px 的圆，名称被挤成 0 宽 → 只剩一个圆点。
   有名称时改成「胶囊」：左边图标、右边名字，宽度自适应。 */
.pano-hotspot.is-icon.has-label {
  width:auto !important; height:auto !important; min-height:var(--hs-size, 38px) !important;
  padding:4px 14px 4px 8px !important; gap:6px !important;
  border-radius:999px !important;
  display:inline-flex !important; align-items:center !important; justify-content:flex-start !important;
}
.pano-hotspot.is-icon.has-label .pano-icon-inner {
  width:var(--hs-svg, 22px) !important; height:var(--hs-svg, 22px) !important;
  flex:0 0 auto !important;
}
.pano-hotspot.is-icon.has-label .pano-icon-label {
  display:inline-block !important; width:auto !important; white-space:nowrap !important;
  font-size:var(--hs-text, 13px) !important; line-height:1.2 !important; color:#fff !important;
}

/* 2026-10-22：查看器左上角的浏览量（建E 那种 👁 683） */
.pano-views { position:absolute; left:18px; top:16px; z-index:12; display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px; background:rgba(20,17,15,.5); backdrop-filter:blur(6px);
  color:rgba(255,253,249,.86); font-size:12px; letter-spacing:.04em; pointer-events:none; }
.pano-views[hidden] { display:none !important; }
.pano-views b { font-weight:600; font-size:12.5px; }
@media (max-width: 900px) { .pano-views { left:12px; top:12px; font-size:11px; padding:3px 9px; } }

/* 2026-10-22 修正（用户：「热点在乱飘」）：
   上一版把图标热点整个盒子改成「胶囊」（width:auto + padding），
   而 pannellum 是拿热点 div 的盒子中心当锚点算屏幕坐标的 ——
   盒子宽度随名字长短变化，锚点就偏；镜头一转眼，偏的方向跟着变，看起来就是"乱飘"。
   现在**盒子恢复成原来的 38×38 圆**（下面几条把上一版的改动作废），
   名字用绝对定位贴在圆的右边，不参与盒子计算。 */
.pano-hotspot.is-icon.has-label {
  width: var(--hs-size, 38px) !important;
  height: var(--hs-size, 38px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.pano-hotspot.is-icon.has-label .pano-icon-inner {
  width: 100% !important;
  height: 100% !important;
  flex: 0 0 auto !important;
}
.pano-hotspot.is-icon.has-label .pano-icon-label {
  position: absolute !important;
  left: calc(100% + 6px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-block !important;
  width: auto !important;
  white-space: nowrap !important;
  font-size: var(--hs-text, 13px) !important;
  line-height: 1.2 !important;
  color: #fff !important;
  background: rgba(20, 17, 15, .62) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* 2026-10-22（用户：「把 360 图标去掉」「浏览量移过去，把黑色背景去掉，就显示一个白色眼睛和数字」）：
   卡片左上角只留浏览量：白字 + 阴影，无底色。 */
.pano-views-badge { position:absolute; left:12px; top:10px; z-index:3; display:inline-flex; align-items:center; gap:5px;
  color:#fff; font-size:12.5px; letter-spacing:.04em; line-height:1; pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.5); }
@media (max-width: 900px) { .pano-views-badge { left:9px; top:8px; font-size:11.5px; } }

/* 2026-10-22：浏览量角标 = 白色细线眼睛 + 数字（无底色，压在图片上靠阴影保证可读） */
.pano-views-badge svg { width:14px; height:14px; display:block; flex:0 0 auto; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.pano-views-badge b { font-weight:500; font-size:12.5px; letter-spacing:.02em; }
@media (max-width: 900px) { .pano-views-badge svg { width:12px; height:12px; } .pano-views-badge b { font-size:11.5px; } }

/* 2026-10-22 修正（用户：「所有热点都有这个问题」）：
   名字那块被撑成 44px 高的深色方块（继承了 `.pano-hotspot` 的 line-height 36px + padding），
   看起来像贴在圆点旁边的一个黑框。
   改成：**不要底色**，纯白字 + 柔和阴影，字号 13px、行高 1.15，高度自适应。
   —— 和列表卡片上的浏览量一样，白字压图，靠阴影保证可读。 */
.pano-hotspot.is-icon.has-label .pano-icon-label {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1.15 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .55) !important;
}

/* 2026-10-22（用户：「他这个透明挺好的，把我们的黑色底去掉」）：
   图标热点不再垫深色圆底 —— 只留图标本身，靠 drop-shadow 保证浅色画面上也看得见；
   悬停时给一点点浅色提示，点中仍然有反馈。 */
.pano-hotspot.is-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.pano-hotspot.is-icon .pano-icon-inner,
.pano-hotspot.is-icon svg {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .65)) drop-shadow(0 0 2px rgba(0, 0, 0, .45));
}
.pano-hotspot.is-icon:hover { background: rgba(255, 253, 249, .16) !important; }

/* 2026-10-22 兜底（用户：「怎么还有一点黑底」）：
   把图标热点**自身和它所有子元素**的背景/边框/阴影一律清掉 ——
   防止 pannellum 自带的 .pnlm-hotspot / .pnlm-hotspot-base 规则或旧样式残留出一点底。
   （只作用于 .is-icon；文字型热点「.is-label」的底色不动。） */
.pano-hotspot.is-icon,
.pano-hotspot.is-icon span,
.pano-hotspot.is-icon * {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2026-10-23：背景音乐「音乐库」列表（每首可删） */
.pano-music-lib { margin-top:10px; border-top:1px solid var(--line,#e6e0d8); padding-top:8px; }
.pano-music-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px dashed rgba(0,0,0,.06); font-size:12.5px; }
.pano-music-row:last-child { border-bottom:0; }
.pano-music-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pano-music-used { font-size:10.5px; font-weight:500; color:#8a705a; background:rgba(138,112,90,.12); padding:1px 6px; border-radius:999px; margin-left:4px; }
.pano-music-size { flex:0 0 auto; color:var(--muted,#8a857e); font-size:11.5px; }
.pano-music-del { flex:0 0 auto; border:1px solid rgba(0,0,0,.12); background:transparent; color:#8a4b3a;
  font-size:11.5px; padding:2px 8px; border-radius:6px; cursor:pointer; }
.pano-music-del:hover { background:rgba(138,75,58,.08); border-color:rgba(138,75,58,.35); }

/* 2026-10-23（用户：「加一个背景音乐」）：作品卡上的背景音乐区块（仅管理员可见） */
.pano-music-box { margin:10px 0 2px; padding:10px 12px; border:1px dashed rgba(138,112,90,.45);
  border-radius:10px; background:rgba(138,112,90,.04); }
.pano-music-head { display:flex; align-items:center; gap:8px; font-size:12.5px; margin-bottom:8px; }
.pano-music-title { font-weight:600; color:var(--accent,#8a705a); letter-spacing:.02em; }
.pano-music-cur { color:var(--muted,#8a857e); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pano-music-cur.is-empty { color:#b3aca3; }
.pano-music-ctl { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pano-music-ctl .select { flex:1 1 180px; min-width:150px; }
.pano-music-box .pano-music-preview { width:100%; height:34px; margin-top:8px; }

/* 2026-10-23：后台「背景音乐」页 */
.music-upload-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 4px; }
.music-upload-row input[type=file] { flex:1 1 260px; min-width:200px; }
.admin-table td.num { white-space:nowrap; color:var(--muted,#8a857e); }
.admin-table audio { vertical-align:middle; }

/* 2026-10-23：作品卡上的「地点 / 年份 / 面积」输入行 */
.pano-meta-row { display:flex; gap:8px; margin:8px 0 2px; flex-wrap:wrap; }
.pano-meta-field { display:flex; align-items:center; gap:6px; flex:1 1 120px; min-width:110px; }
.pano-meta-field > span { flex:0 0 auto; font-size:11.5px; color:var(--muted,#8a857e); }
.pano-meta-field .input { flex:1 1 auto; min-width:0; padding:4px 8px; font-size:12.5px; height:30px; }
.pano-meta-hint { margin:0 0 6px !important; font-size:11px !important; }

/* 2026-10-23（用户：「把这个移过去，这个面板小一点，好看一点」）：
   作品卡左栏 = 缩略图 + 「未交付 · 前台需密码」面板；面板做紧凑。 */
.pano-admin-left { flex:0 0 190px; display:flex; flex-direction:column; gap:10px; align-self:flex-start; }
.pano-admin-left .pano-admin-thumb { flex:0 0 auto; width:100%; align-self:stretch; }
.pano-admin-left .pano-publish { margin:0; padding:8px 9px; border-radius:9px; }
.pano-admin-left .pano-publish-line { font-size:11.5px; gap:6px; }
.pano-admin-left .pano-publish-pass { margin-top:6px; gap:5px; }
.pano-admin-left .pano-publish-pass .input { padding:3px 7px; font-size:11.5px; letter-spacing:.06em; height:26px; }
.pano-admin-left .pano-publish-pass .button { padding:3px 8px; font-size:11.5px; }
@media (max-width: 760px) {
  .pano-admin-left { flex:0 0 auto; width:100%; }
}

/* 2026-10-23：作品卡左栏底部两个按钮（＋上传全景图 / 编辑）竖排铺满 */
.pano-admin-left .pano-admin-actions { margin-top:0; padding-top:0; flex-direction:column; align-items:stretch; gap:6px; }
.pano-admin-left .pano-admin-actions .button { width:100%; justify-content:center; font-size:12px; padding:5px 8px; }

/* 2026-10-23：iOS 陀螺仪授权提示 */
.pano-ori-tip { position:fixed; left:50%; bottom:22%; transform:translateX(-50%); z-index:9999;
  max-width:min(86vw, 420px); padding:12px 16px; border-radius:12px; white-space:pre-line;
  background:rgba(20,17,15,.88); color:#fffdf9; font-size:13px; line-height:1.65; text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.35); }
.pano-ori-tip[hidden] { display:none; }


/* ============================================================
   2026-10-23：顶栏全站背景音乐播放器
   用户第一版要求：「要用户点击播放才放歌，默认不放」；
   第二版要求（选定方案 A）：「做成三个按钮：上一首 / 暂停 / 下一首」——裸图标，不加底板。
   颜色、投影全部继承顶栏那套（大字页面白、浅色页面深），所以这里不写死颜色。
   ============================================================ */
.site-music { display:inline-flex; align-items:center; gap:2px; padding:0; border:0; background:none;
  color:inherit; font:inherit; }
.site-music-btn { display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; border:0; border-radius:50%; background:transparent;
  color:inherit; cursor:pointer; opacity:.82;
  transition:opacity .16s ease, transform .16s ease, background .16s ease; }
.site-music-btn svg { display:block; filter:drop-shadow(0 1px 2px rgba(12,11,10,.5)); }
.site-music-btn:hover { opacity:1; transform:scale(1.08); background:rgba(255,253,249,.14); }
.site-music-btn:active { transform:scale(.96); }
.site-music-btn:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
/* 播放中：中间那颗（暂停键）保持高亮，前后的略淡 */
.site-music.is-playing [data-act="toggle"] { opacity:1; }
.site-music.is-playing [data-act="prev"],
.site-music.is-playing [data-act="next"] { opacity:.66; }
@media (max-width:760px) {
  .site-music { gap:0; }
  .site-music-btn { width:26px; height:26px; }
}


/* ============================================================
   2026-10-23（用户：「把导航这个背景色改成透明」→「后面所有项目的导航栏都是一样的，同首页一样」）：
   **全站顶栏统一成"无底色 + 浮在页面上"**，不再有米白条。分两种：
     · 有大图的页面（首页、作品详情）—— 白字 + 顶部一层淡深色渐变 + 深底浅字的搜索框；
     · 没有大图的页面（作品列表/笔记/关于/施工/全景/灵感）—— 深色字 + 浅底搜索框。
   往下滚动时两者都会变成 .solid（米白实底 + 深色字），保证压在内容上仍然看得清。
   ============================================================ */
.site-header:not(.solid) {
  color: var(--ink);
  /* 2026-10-23（用户：「我的导航底色是透明的，为啥有两个颜色？」）：
     顶栏原本是 transparent，露出来的是 body 的 #f3efe8；而它正下方的 .page-title 是柔白 #faf8f3，
     差 7 个色阶 —— 顶上就多出一条"两种颜色"的横线。这里让顶栏直接用柔白（和下面那块同色），
     看起来仍然是透明的，但没有那条缝。大图页 / 深色页在下面各有覆盖。 */
  background: var(--paper-soft);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}
.site-header:not(.solid)::before { display: none; }
/* 无大图页面：字和搜索框沿用内页配色，只是头顶那条底没了 */
.site-header:not(.solid) .brand-cn,
.site-header:not(.solid) .brand-en,
.site-header:not(.solid) .site-nav a,
.site-header:not(.solid) .site-music { text-shadow: none; }
.site-header:not(.solid) .header-search {
  background: var(--white);
  border-color: var(--line);
}
.site-header:not(.solid) .header-search:hover,
.site-header:not(.solid) .header-search:focus-within {
  background: var(--white);
  border-color: var(--ink);
}
.site-header:not(.solid) .header-search-input { color: var(--ink); }
.site-header:not(.solid) .header-search-input::placeholder { color: var(--muted); }
.site-header:not(.solid) .header-search-icon { color: var(--muted); }
.site-header:not(.solid) .site-music.is-playing { color: var(--accent); }

/* 有大图的页面（首页 / 作品详情）：白字 + 只在最顶上压一层淡渐变 */
body:has(.hero) .site-header:not(.solid),
body.has-hero .site-header:not(.solid) {
  color: #fffdf9;
  background: transparent;   /* 用户要求：全站透明底，渐变也不加 */
}
body:has(.hero) .site-header:not(.solid) .brand-cn,
body:has(.hero) .site-header:not(.solid) .brand-en,
body:has(.hero) .site-header:not(.solid) .site-nav a,
body:has(.hero) .site-header:not(.solid) .site-music,
body.has-hero .site-header:not(.solid) .brand-cn,
body.has-hero .site-header:not(.solid) .brand-en,
body.has-hero .site-header:not(.solid) .site-nav a,
body.has-hero .site-header:not(.solid) .site-music {
  text-shadow: 0 1px 2px rgba(12,11,10,.72), 0 2px 10px rgba(12,11,10,.5), 0 0 24px rgba(12,11,10,.28);
}
body:has(.hero) .site-header:not(.solid) .brand-en,
body.has-hero .site-header:not(.solid) .brand-en { opacity: .7; }
body:has(.hero) .site-header:not(.solid) .header-search,
body.has-hero .site-header:not(.solid) .header-search {
  background: rgba(28,26,23,.34);
  border-color: rgba(255,253,249,.42);
}
body:has(.hero) .site-header:not(.solid) .header-search:hover,
body:has(.hero) .site-header:not(.solid) .header-search:focus-within,
body.has-hero .site-header:not(.solid) .header-search:hover,
body.has-hero .site-header:not(.solid) .header-search:focus-within {
  background: rgba(28,26,23,.5);
  border-color: rgba(255,253,249,.7);
}
body:has(.hero) .site-header:not(.solid) .header-search-input,
body.has-hero .site-header:not(.solid) .header-search-input { color: #fffdf9; }
body:has(.hero) .site-header:not(.solid) .header-search-input::placeholder,
body.has-hero .site-header:not(.solid) .header-search-input::placeholder { color: rgba(255,253,249,.72); }
body:has(.hero) .site-header:not(.solid) .header-search-icon,
body.has-hero .site-header:not(.solid) .header-search-icon { color: rgba(255,253,249,.82); }
body:has(.hero) .site-header:not(.solid) .site-music.is-playing,
body.has-hero .site-header:not(.solid) .site-music.is-playing { color: #fffdf9; }


/* ============================================================
   2026-10-23（用户：「把导航这个背景色改成透明」）：
   只把顶栏底色去掉还不够 —— 首页大图原本是从顶栏**下面**开始的，
   所以那一截露出来的是页面底色（浅灰），看着像一条白条。
   这里把带大图的页面整体上移一个顶栏的高度，让大图真正铺到屏幕最顶上，
   透明顶栏就"浮在图上"了。
   --site-header-h 由 app.js 量出真实高度写入（默认值给 SSR 首屏兜底）。
   ============================================================ */
:root { --site-header-h: 57px; }
@media (max-width: 760px) { :root { --site-header-h: 86px; } }
/* ⚠️ 负边距必须加在 .page-shell 上，不能加在 .hero 上：
   .page-shell 有 overflow:hidden，加在 .hero 上的话上移的那 57px 会被裁掉，
   顶栏那一截露出来的还是页面底色（踩过一次）。 */
body:has(.hero) .page-shell,
body.has-hero .page-shell { margin-top: calc(-1 * var(--site-header-h)); }


/* ============================================================
   2026-10-23（用户：「把导航栏，全站都是透明底」）：
   顶栏彻底不要底色，**吸顶之后也是透明** —— 于是深色字会直接压在作品图上，
   光靠字本身在深色照片上看不清。这里给深色字加一圈很淡的"白色描边光"，
   不加任何底板，依然是透明；白字那一套则反过来加暗色投影。
   ============================================================ */
.site-header:not(.solid) .brand-cn,
.site-header:not(.solid) .brand-en,
.site-header:not(.solid) .site-nav a,
.site-header:not(.solid) .site-music,
.site-header.solid .brand-cn,
.site-header.solid .brand-en,
.site-header.solid .site-nav a,
.site-header.solid .site-music {
  text-shadow: 0 0 5px rgba(250,247,242,.95), 0 0 12px rgba(250,247,242,.8), 0 1px 2px rgba(250,247,242,.9);
}
/* 有大图的页面在顶上用白字，改成暗投影（覆盖上面那条） */
body:has(.hero) .site-header:not(.solid) .brand-cn,
body:has(.hero) .site-header:not(.solid) .brand-en,
body:has(.hero) .site-header:not(.solid) .site-nav a,
body:has(.hero) .site-header:not(.solid) .site-music,
body.has-hero .site-header:not(.solid) .brand-cn,
body.has-hero .site-header:not(.solid) .brand-en,
body.has-hero .site-header:not(.solid) .site-nav a,
body.has-hero .site-header:not(.solid) .site-music {
  text-shadow: 0 1px 2px rgba(12,11,10,.72), 0 2px 10px rgba(12,11,10,.5), 0 0 24px rgba(12,11,10,.28);
}


/* 2026-10-23（用户：「做成这样，可以修改名字」）：作品卡上那行「名称」空格占满一整行 */
.pano-meta-row + .pano-meta-row { margin-top: 6px; }
.pano-meta-name { flex: 1 1 100%; }
.pano-meta-name input { width: 100%; }


/* ============================================================
   2026-10-23：深色页面（关于 / .page-shell-dark）的顶栏也跟着深。
   不然顶栏露 body 的浅色，页面主体却是深色 41,41,38 —— 顶上又是一条亮带。
   ============================================================ */
body:has(.page-shell-dark) .site-header,
body:has(.page-shell-dark) .site-header.solid {
  color: #fffdf9;
  background: var(--dark);
  border-bottom: 0;
  box-shadow: none;
}
body:has(.page-shell-dark) .site-header .brand-en { opacity: .7; }
body:has(.page-shell-dark) .site-header .brand-cn,
body:has(.page-shell-dark) .site-header .brand-en,
body:has(.page-shell-dark) .site-header .site-nav a,
body:has(.page-shell-dark) .site-header .site-music {
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
body:has(.page-shell-dark) .site-header .header-search {
  background: rgba(255,253,249,.1);
  border-color: rgba(255,253,249,.4);
}
body:has(.page-shell-dark) .site-header .header-search:hover,
body:has(.page-shell-dark) .site-header .header-search:focus-within {
  background: rgba(255,253,249,.16);
  border-color: rgba(255,253,249,.7);
}
body:has(.page-shell-dark) .site-header .header-search-input { color: #fffdf9; }
body:has(.page-shell-dark) .site-header .header-search-input::placeholder { color: rgba(255,253,249,.7); }
body:has(.page-shell-dark) .site-header .header-search-icon { color: rgba(255,253,249,.8); }
body:has(.page-shell-dark) .site-header .site-music.is-playing { color: #fffdf9; }