/* ============================================================
   电城奇石博物馆 · 移动端优先样式
   ============================================================ */

:root{
  --bg:#14110f;
  --bg-2:#1b1714;
  --bg-3:#241e19;
  --card:#211c18;
  --line:rgba(200,169,106,.16);
  --line-2:rgba(200,169,106,.30);
  --gold:#c8a96a;
  --gold-2:#e0c48c;
  --gold-dim:#8d7648;
  --ink:#f3ede5;
  --muted:#9c9288;
  --red:#b0402a;
  --top-h:52px;
  --tab-h:56px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none!important;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.75;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(200,169,106,.10), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(176,64,42,.07), transparent 60%);
}
img{display:block;max-width:100%;}
button{font-family:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
input{font-family:inherit;}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.02em;}
a{color:var(--gold);}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:calc(var(--top-h) + var(--safe-t));
  padding-top:var(--safe-t);
  display:flex;align-items:center;gap:4px;
  background:rgba(20,17,15,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar__back,.topbar__spacer{width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.topbar__spacer{pointer-events:none;}
.topbar__back{color:var(--gold-2);}
.topbar__title{
  flex:1;text-align:center;font-family:var(--serif);font-size:16px;
  letter-spacing:.14em;color:var(--gold-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------------- 布局 ---------------- */
.app{
  position:relative;z-index:1;
  padding:calc(var(--top-h) + var(--safe-t) + 4px) 0 calc(var(--tab-h) + var(--safe-b) + 26px);
  max-width:720px;margin:0 auto;
}
.view{padding:0 16px;}

/* ---------------- 序厅 ---------------- */
.hero{text-align:center;padding:30px 8px 20px;}
.hero__seal{
  width:58px;height:58px;margin:0 auto 16px;border:1.5px solid var(--gold-dim);
  border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:30px;color:var(--gold);
  background:linear-gradient(160deg,rgba(200,169,106,.12),transparent);
  box-shadow:0 0 0 4px rgba(200,169,106,.05), inset 0 0 22px rgba(200,169,106,.08);
}
.hero__name{
  margin:0;font-size:27px;letter-spacing:.20em;text-indent:.20em;
  color:#f6f0e6;text-shadow:0 2px 20px rgba(200,169,106,.22);
}
.hero__en{
  margin-top:7px;font-size:9.5px;letter-spacing:.30em;text-transform:uppercase;
  color:var(--gold-dim);
}
.hero__line{
  width:64px;height:1px;margin:16px auto 14px;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
}
.hero__sub{margin:0;font-size:13px;color:var(--muted);letter-spacing:.10em;}

.stats{display:flex;gap:8px;margin:6px 0 26px;}
.stat{
  flex:1;text-align:center;padding:13px 4px;border-radius:8px;
  background:linear-gradient(180deg,var(--bg-3),var(--card));
  border:1px solid var(--line);
}
.stat b{display:block;font-family:var(--serif);font-size:21px;color:var(--gold-2);line-height:1.3;}
.stat span{font-size:11px;color:var(--muted);letter-spacing:.08em;}

.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:26px 0 13px;padding-bottom:9px;border-bottom:1px solid var(--line);
}
.sec-head h2{margin:0;font-size:16.5px;letter-spacing:.14em;color:#f0e8dc;}
.sec-head h2::before{content:"◆";font-size:8px;color:var(--gold);margin-right:7px;vertical-align:2px;}
.sec-head__more{font-size:12px;color:var(--gold);letter-spacing:.04em;}

/* 横滑卡片 */
.hscroll{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.hscroll::-webkit-scrollbar{display:none;}
.hcard{
  flex:0 0 63%;max-width:280px;scroll-snap-align:start;
  border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:var(--card);position:relative;
}
.hcard__img{position:relative;aspect-ratio:1/1;background:#0d0b0a;overflow:hidden;}
.hcard__img img{width:100%;height:100%;object-fit:cover;}
.hcard__badge{
  position:absolute;top:8px;left:8px;font-size:10px;letter-spacing:.10em;
  padding:2px 8px;border-radius:3px;background:rgba(176,64,42,.88);color:#fff;
}
.hcard__info{padding:10px 11px 12px;}
.hcard__name{font-family:var(--serif);font-size:15px;letter-spacing:.08em;color:#f4efe7;}
.hcard__sub{font-size:11px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 门类 */
.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.catcard{
  text-align:left;padding:14px 13px;border-radius:9px;
  background:linear-gradient(150deg,var(--bg-3),var(--card));
  border:1px solid var(--line);
}
.catcard b{display:block;font-family:var(--serif);font-size:15px;letter-spacing:.10em;color:var(--gold-2);}
.catcard span{display:block;font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5;}
.catcard em{display:block;font-style:normal;font-size:10.5px;color:var(--gold-dim);margin-top:7px;}

/* 引言 */
.quote{
  position:relative;margin:28px 0 0;padding:22px 18px 18px;
  border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(165deg,rgba(200,169,106,.055),transparent 70%);
}
.quote__mark{position:absolute;top:2px;left:12px;font-family:var(--serif);font-size:44px;color:var(--gold-dim);opacity:.5;line-height:1;}
.quote p{margin:6px 0 10px;font-family:var(--serif);font-size:13.5px;line-height:2;color:#ddd4c6;text-indent:1em;}
.quote__by{text-align:right;font-size:11.5px;color:var(--gold-dim);letter-spacing:.08em;}

/* ---------------- 展厅 ---------------- */
.searchbar{
  display:flex;align-items:center;gap:8px;margin:4px 0 12px;
  padding:0 12px;height:42px;border-radius:21px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--muted);
}
.searchbar input{
  flex:1;background:none;border:0;outline:none;color:var(--ink);
  font-size:14px;height:100%;
}
.searchbar input::placeholder{color:#6d655c;}
.searchbar button{color:var(--muted);font-size:20px;line-height:1;padding:0 2px;}

.chips{display:flex;gap:7px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto;padding:6px 13px;border-radius:15px;font-size:12.5px;
  border:1px solid var(--line);color:var(--muted);background:var(--bg-2);
  white-space:nowrap;transition:.18s;
}
.chip.is-on{background:linear-gradient(160deg,var(--gold),var(--gold-dim));color:#1a1511;border-color:transparent;font-weight:600;}

.sortbar{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11.5px;color:var(--muted);margin-bottom:12px;
}
.sorts{display:flex;gap:5px;}
.sorts button{
  font-size:11.5px;padding:3px 10px;border-radius:11px;
  border:1px solid var(--line);color:var(--muted);
}
.sorts button.is-on{color:var(--gold);border-color:var(--line-2);background:rgba(200,169,106,.08);}

/* 网格 */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.card{
  border-radius:9px;overflow:hidden;background:var(--card);
  border:1px solid var(--line);text-align:left;position:relative;
}
.card__img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#0d0b0a;}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:active .card__img img{transform:scale(1.05);}
.card__no{
  position:absolute;top:0;left:0;font-size:9.5px;letter-spacing:.06em;
  padding:2px 7px;background:rgba(16,13,11,.72);color:var(--gold-2);
  border-bottom-right-radius:6px;backdrop-filter:blur(4px);
}
.card__multi{
  position:absolute;bottom:6px;right:6px;font-size:9.5px;
  padding:1.5px 6px;border-radius:9px;background:rgba(16,13,11,.72);
  color:var(--gold-2);backdrop-filter:blur(4px);
}
.card__star{
  position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;
  background:rgba(176,64,42,.9);color:#fff;font-size:10px;
  display:flex;align-items:center;justify-content:center;
}
.card__info{padding:9px 10px 11px;}
.card__name{font-family:var(--serif);font-size:14.5px;letter-spacing:.06em;color:#f2ece3;line-height:1.4;}
.card__meta{font-size:10.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.btn-more{
  display:block;width:100%;margin:16px 0 4px;padding:11px;
  border:1px solid var(--line);border-radius:8px;
  color:var(--gold);font-size:13px;letter-spacing:.06em;background:var(--bg-2);
}
.empty{text-align:center;padding:52px 0;color:var(--muted);font-size:13.5px;line-height:2.2;}
.empty span{font-size:11.5px;color:#6d655c;}
.loadmore{margin-top:4px;}

/* ---------------- 详情 ---------------- */
.detail{padding-bottom:12px;}
.swiper{position:relative;margin:0 -16px 0;background:#0c0a09;}
.swiper__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.swiper__track::-webkit-scrollbar{display:none;}
.swiper__item{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;background:#0c0a09;}
.swiper__item img{width:100%;max-height:62vh;object-fit:contain;}
.swiper__zoom{
  position:absolute;bottom:10px;right:14px;font-size:11px;color:#e8dfd2;
  padding:4px 11px;border-radius:14px;background:rgba(16,13,11,.66);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);
  display:flex;align-items:center;gap:5px;
}
.swiper__dots{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;
}
.swiper__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35);}
.swiper__dots i.on{background:var(--gold);width:14px;border-radius:3px;}

.d-head{padding:17px 0 15px;border-bottom:1px solid var(--line);}
.d-no{font-size:11px;letter-spacing:.20em;color:var(--gold-dim);}
.d-name{font-family:var(--serif);font-size:26px;letter-spacing:.14em;margin:6px 0 4px;color:#f8f3ea;line-height:1.3;}
.d-sub{font-size:12.5px;color:var(--muted);letter-spacing:.06em;}
.d-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.tag{
  font-size:10.5px;letter-spacing:.06em;padding:3px 9px;border-radius:3px;
  border:1px solid var(--line);color:var(--gold);background:rgba(200,169,106,.05);
}
.tag--red{border-color:rgba(176,64,42,.5);color:#e07a5f;background:rgba(176,64,42,.10);}
.d-rate{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:11.5px;color:var(--muted);}
.d-rate i{font-style:normal;color:var(--gold);font-size:12px;letter-spacing:.12em;}
.d-rate i.off{color:#4a423a;}

.block{padding:17px 0 15px;border-bottom:1px solid var(--line);}
.block__h{
  display:flex;align-items:center;gap:8px;margin-bottom:9px;
  font-family:var(--serif);font-size:14.5px;letter-spacing:.12em;color:var(--gold-2);
}
.block__h::before{content:"";width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,var(--gold),var(--gold-dim));}
.block p{margin:0;font-size:14px;line-height:2.05;color:#ddd5c9;text-align:justify;}
.block p + p{margin-top:9px;}

/* 估价卡样式已随价格功能一并移除 */
/* 材质与规格表（.spec）样式已随该板块一并移除 */

.navrow{display:flex;gap:11px;margin-top:20px;}
.navrow button{
  flex:1;padding:13px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg-2);text-align:left;overflow:hidden;
}
.navrow button:last-child{text-align:right;}
.navrow span{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.10em;}
.navrow b{display:block;font-family:var(--serif);font-size:13.5px;color:var(--gold-2);font-weight:500;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.navrow button:disabled{opacity:.32;}

/* ---------------- 关于 ---------------- */
.art{padding:6px 0 0;}
.art h2{
  font-size:16px;letter-spacing:.14em;margin:26px 0 11px;padding-bottom:8px;
  border-bottom:1px solid var(--line);color:#f0e8dc;
}
.art h2:first-child{margin-top:10px;}
.art p{margin:0 0 11px;font-size:13.5px;line-height:2.05;color:#d6cec2;text-align:justify;}
.art ul,.art ol{margin:0 0 12px;padding-left:19px;}
.art li{font-size:13.5px;line-height:2;color:#d6cec2;margin-bottom:5px;}
.art b{color:var(--gold-2);font-weight:600;}
.warn{
  padding:12px 13px;border-radius:8px;margin:0 0 13px;
  background:rgba(176,64,42,.11);border:1px solid rgba(176,64,42,.38);
}
.warn p{margin:0;font-size:13px;line-height:1.9;color:#e8cfc6;}
.warn b{color:#e89a80;}
.foot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);text-align:center;font-size:12px;color:var(--muted);line-height:2.1;letter-spacing:.06em;}
.foot__small{font-size:10.5px;color:#6d655c;}

/* ---------------- 底部导航 ---------------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:calc(var(--tab-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:flex;
  background:rgba(20,17,15,.90);
  backdrop-filter:saturate(1.6) blur(16px);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-top:1px solid var(--line);
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:#6d655c;transition:color .18s;
}
.tab span{font-size:10px;letter-spacing:.10em;}
.tab.is-on{color:var(--gold-2);}
.tab.is-on svg{filter:drop-shadow(0 0 7px rgba(200,169,106,.5));}

/* ---------------- 全屏看图 ---------------- */
.lightbox{
  position:fixed;inset:0;z-index:200;background:#070605;
  display:flex;flex-direction:column;
  overscroll-behavior:contain;
}
.lightbox__close{
  position:absolute;top:calc(10px + var(--safe-t));right:12px;z-index:3;
  width:38px;height:38px;border-radius:50%;font-size:24px;line-height:1;
  color:#e8dfd2;background:rgba(255,255,255,.09);backdrop-filter:blur(6px);
}
.lightbox__stage{
  flex:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;position:relative;
}
.lightbox__stage img{
  max-width:100%;max-height:100%;object-fit:contain;
  transform-origin:center center;will-change:transform;
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.lightbox__stage img.dragging{transition:none;}
.lightbox__dots{
  display:flex;justify-content:center;gap:6px;
  padding:10px 0 calc(14px + var(--safe-b));
}
.lightbox__dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28);}
.lightbox__dots i.on{background:var(--gold);width:16px;border-radius:3px;}
.lightbox__hint{
  position:absolute;bottom:calc(52px + var(--safe-b));left:0;right:0;text-align:center;
  font-size:11px;color:#8b8377;letter-spacing:.08em;pointer-events:none;
  transition:opacity .5s;
}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--safe-b) + 22px);
  transform:translateX(-50%);z-index:300;
  padding:9px 18px;border-radius:19px;font-size:12.5px;
  background:rgba(40,34,29,.94);border:1px solid var(--line-2);
  color:var(--gold-2);white-space:nowrap;
  backdrop-filter:blur(8px);
  animation:toastIn .24s ease;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

/* ---------------- 动画 ---------------- */
.view:not([hidden]){animation:fade .26s ease;}
@keyframes fade{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

/* ---------------- 大屏 ---------------- */
@media (min-width:600px){
  .grid{grid-template-columns:1fr 1fr 1fr;}
  .catgrid{grid-template-columns:1fr 1fr 1fr;}
  .hcard{flex:0 0 40%;}
  .hero__name{font-size:32px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}