/* ===== 猫总系统 · 样式 ===== */
:root{
  --bg:#FBF6EE; --card:#fff; --ink:#2C2826; --sub:#8C8178;
  --brand:#F2A65A; --brand-d:#E08A3C; --accent:#C0392B;
  --line:#EFE6D8; --gold:#D9A520;
  --shadow:0 6px 20px rgba(180,140,90,.12);
  --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:#E8DFD0; color:var(--ink); line-height:1.5;
  display:flex; justify-content:center;
}
img{display:block;width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* 手机外框 */
#phone{
  width:100%; max-width:440px; min-height:100vh; background:var(--bg);
  position:relative; overflow:hidden; box-shadow:0 0 40px rgba(0,0,0,.15);
  display:flex; flex-direction:column;
}

/* 顶栏 */
.topbar{
  position:sticky; top:0; z-index:30; backdrop-filter:blur(10px);
  background:rgba(251,246,238,.86); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; padding:14px 16px;
}
.topbar .logo{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--brand);box-shadow:var(--shadow)}
.topbar h1{font-size:17px;font-weight:800;letter-spacing:.5px}
.topbar .sub{font-size:11px;color:var(--sub);font-weight:500}
.topbar .me{margin-left:auto;width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:var(--shadow)}

/* 视图区 */
#view{flex:1;overflow-y:auto;padding-bottom:78px}
.page{padding:14px 16px;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 通用标题 */
.sec-h{display:flex;align-items:baseline;gap:8px;margin:22px 4px 12px}
.sec-h:first-child{margin-top:6px}
.sec-h h2{font-size:18px;font-weight:800}
.sec-h .more{margin-left:auto;font-size:12px;color:var(--brand-d);font-weight:600}
.sec-h .tip{font-size:11px;color:var(--sub)}

/* 首页 hero */
.hero{
  background:linear-gradient(135deg,#FCE9CF,#F7D7AE);
  border-radius:22px;padding:18px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow);position:relative;overflow:hidden
}
.hero .ava{width:88px;height:88px;border-radius:20px;overflow:hidden;flex:0 0 auto;background:#fff;box-shadow:var(--shadow)}
.hero h2{font-size:20px;font-weight:900}
.hero .role{font-size:12px;color:var(--brand-d);font-weight:700;margin:2px 0 6px}
.hero p{font-size:12px;color:#6b5d4f}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{font-size:11px;background:rgba(255,255,255,.7);color:var(--brand-d);padding:3px 9px;border-radius:20px;font-weight:600}

/* 快捷入口 */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.quick button{background:var(--card);border-radius:16px;padding:12px 4px;text-align:center;box-shadow:var(--shadow)}
.quick .ico{font-size:22px;display:block;margin-bottom:4px}
.quick .lbl{font-size:11px;font-weight:600}

/* 投票卡 */
.poll{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.poll h3{font-size:16px;font-weight:800}
.poll .desc{font-size:12px;color:var(--sub);margin:4px 0 12px}
.poll-opt{margin-bottom:10px;cursor:pointer}
.poll-opt .bar{position:relative;height:38px;border-radius:12px;background:#F3ECE0;overflow:hidden;display:flex;align-items:center}
.poll-opt .fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#F7D7AE,#F2A65A);transition:width .5s ease}
.poll-opt .ptxt{position:relative;display:flex;width:100%;align-items:center;gap:8px;padding:0 12px;font-size:13px;font-weight:600}
.poll-opt .pimg{width:26px;height:26px;border-radius:8px;overflow:hidden;background:#fff;flex:0 0 auto}
.poll-opt .pct{margin-left:auto;font-size:12px;font-weight:800;color:var(--brand-d)}
.poll-opt.voted .ptxt::after{content:"✓";color:var(--brand-d);font-weight:900;margin-left:4px}
.poll .deadline{font-size:11px;color:var(--sub);text-align:center;margin-top:6px}

/* 横滑画展 */
.hscroll{display:flex;gap:12px;overflow-x:auto;padding:2px 4px 6px;scroll-snap-type:x mandatory}
.hscroll::-webkit-scrollbar{display:none}
.art-card{flex:0 0 auto;width:160px;scroll-snap-align:start;background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.art-card .thumb{width:160px;height:160px;background:#eee}
.art-card .meta{padding:10px}
.art-card .meta h4{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art-card .meta .row{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--sub);margin-top:4px}

/* 画展网格 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gcard{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.gcard .thumb{width:100%;aspect-ratio:1;background:#eee}
.gcard .meta{padding:10px}
.gcard h4{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard .yr{font-size:11px;color:var(--sub);margin-top:2px}
.gcard .stat{display:flex;gap:10px;font-size:11px;color:var(--sub);margin-top:6px}

/* 动画 / 短片 */
.vcard{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:12px}
.vcard .thumb{aspect-ratio:16/10;background:#222}
.vcard .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vcard .play span{width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;backdrop-filter:blur(4px)}
.vcard .bar{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff}
.vcard .bar h4{font-size:14px;font-weight:700}
.vcard .bar .info{font-size:11px;opacity:.85;margin-top:2px}

/* 表情包 */
.emoji-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.emoji{background:var(--card);border-radius:14px;padding:8px;text-align:center;box-shadow:var(--shadow)}
.emoji .e{width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#FBF3E7}
.emoji .n{font-size:11px;font-weight:600;margin-top:6px}

/* 商城 */
.cats{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px}
.cats::-webkit-scrollbar{display:none}
.cats button{flex:0 0 auto;font-size:13px;font-weight:600;padding:7px 16px;border-radius:20px;background:var(--card);color:var(--sub);box-shadow:var(--shadow)}
.cats button.on{background:var(--brand);color:#fff}
.pcard{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.pcard .thumb{width:100%;aspect-ratio:1;background:#eee;position:relative}
.pcard .ptag{position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;color:#fff;background:var(--accent);padding:2px 8px;border-radius:10px}
.pcard .meta{padding:10px}
.pcard h4{font-size:13px;font-weight:600;line-height:1.35;height:36px;overflow:hidden}
.pcard .prow{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.pcard .price{color:var(--accent);font-weight:800;font-size:16px}
.pcard .price small{font-size:11px}
.pcard .orig{font-size:11px;color:var(--sub);text-decoration:line-through}
.pcard .sales{font-size:11px;color:var(--sub);margin-top:2px}
.pcard .buy{display:block;width:100%;background:var(--brand);color:#fff;font-weight:700;font-size:13px;padding:9px;border-radius:0}
.pcard .buy:active{background:var(--brand-d)}

/* 社区 */
.post{background:var(--card);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);margin-bottom:12px}
.post .head{display:flex;align-items:center;gap:10px}
.post .pava{width:40px;height:40px;border-radius:50%;overflow:hidden;background:#FBF3E7;flex:0 0 auto}
.post .pname{font-size:14px;font-weight:700}
.post .ptime{font-size:11px;color:var(--sub)}
.post .ptext{font-size:14px;margin:10px 0;color:#4a423b}
.post .pimg{border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#eee}
.post .acts{display:flex;gap:18px;margin-top:12px;font-size:13px;color:var(--sub);font-weight:600}
.post .acts button{display:flex;align-items:center;gap:5px}
.post .acts .on{color:var(--accent)}
.post .acts .tip.on{color:var(--gold)}

/* 详情弹层 */
.sheet{position:fixed;inset:0;z-index:60;display:none}
.sheet.open{display:block}
.sheet .mask{position:absolute;inset:0;background:rgba(0,0,0,.5);animation:fade .2s}
.sheet .panel{position:absolute;left:0;right:0;bottom:0;max-width:440px;margin:0 auto;background:var(--bg);
  border-radius:22px 22px 0 0;max-height:88%;overflow-y:auto;animation:up .3s ease;padding-bottom:24px}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet .big{width:100%;aspect-ratio:1;background:#000}
.sheet .body{padding:18px}
.sheet .body h2{font-size:21px;font-weight:900}
.sheet .body .m{font-size:12px;color:var(--sub);margin:6px 0 14px}
.sheet .body .story{background:var(--card);border-radius:14px;padding:14px;font-size:14px;color:#5a4f45;box-shadow:var(--shadow)}
.sheet .body .story::before{content:"“";font-size:30px;color:var(--brand);line-height:0;vertical-align:-8px;margin-right:2px}
.sheet .close{position:absolute;top:10px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:18px}
.actbar{display:flex;gap:12px;margin-top:18px}
.actbar button{flex:1;padding:13px;border-radius:14px;font-weight:800;font-size:14px}
.actbar .like{background:#fff;color:var(--accent);box-shadow:var(--shadow)}
.actbar .like.on{background:var(--accent);color:#fff}
.actbar .vote{background:var(--brand);color:#fff}
.actbar .vote.on{background:var(--brand-d)}

/* 个人页 */
.profile-top{background:linear-gradient(135deg,#FCE9CF,#F7D7AE);border-radius:22px;padding:18px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow)}
.profile-top .ava{width:64px;height:64px;border-radius:50%;overflow:hidden;background:#fff;border:3px solid #fff}
.profile-top h2{font-size:18px;font-weight:900}
.profile-top .lv{font-size:12px;color:var(--brand-d);font-weight:700;margin-top:2px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat-box{background:var(--card);border-radius:16px;padding:14px;text-align:center;box-shadow:var(--shadow)}
.stat-box b{font-size:20px;font-weight:900;display:block;color:var(--brand-d)}
.stat-box span{font-size:11px;color:var(--sub)}
.menu{background:var(--card);border-radius:16px;margin-top:14px;box-shadow:var(--shadow);overflow:hidden}
.menu .item{display:flex;align-items:center;gap:12px;padding:15px 16px;font-size:14px;border-bottom:1px solid var(--line)}
.menu .item:last-child{border-bottom:none}
.menu .item .ico{font-size:18px}
.menu .item .arr{margin-left:auto;color:var(--sub)}

/* 底部导航 */
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:440px;margin:0 auto;z-index:40;
  display:flex;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--sub);font-size:10px;font-weight:600}
.tabbar button .ti{font-size:21px;line-height:1.1}
.tabbar button.on{color:var(--brand-d)}

/* 通用 */
.empty{text-align:center;color:var(--sub);padding:40px;font-size:13px}
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:rgba(44,40,38,.92);color:#fff;
  padding:10px 18px;border-radius:22px;font-size:13px;z-index:90;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1}
.badge{font-size:10px;background:var(--accent);color:#fff;border-radius:10px;padding:1px 6px;font-weight:700}

/* ════════════════════════════════════════════════════════════
   自适配（响应式外壳）+ 真实画展（瀑布墙 · 图片自匹配）
   ════════════════════════════════════════════════════════════ */
:root{ --shell:460px; }
@media (min-width:760px){ :root{ --shell:840px; } }
@media (min-width:1180px){ :root{ --shell:1060px; } }

/* 外壳随屏幕自适配加宽（手机满屏 / 平板桌面渐进展开） */
#phone{ max-width:var(--shell); }
.tabbar{ max-width:var(--shell); }
.sheet .panel{ max-width:var(--shell); }

/* 首页横滑卡：真实照片以 cover 自动裁切适配方形缩略图 */
.art-card .thumb{ position:relative; }
.art-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.art-card .star{ position:absolute; top:7px; left:7px; font-size:11px; color:#7c5e2a;
  background:rgba(255,247,225,.92); border:1px solid rgba(201,168,101,.55); border-radius:9px; padding:1px 6px; font-weight:800; }

/* 画展页头 */
.gallery-page{ padding-top:8px; }
.ghead{ text-align:center; padding:6px 6px 18px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.gh-kicker{ font-size:11px; letter-spacing:.16em; color:var(--brand-d); text-transform:uppercase; }
.gh-title{ font-size:clamp(24px,6vw,34px); font-weight:900; margin:7px 0 3px; letter-spacing:.04em; }
.gh-sub{ font-size:12px; color:var(--sub); letter-spacing:.05em; }
.gh-stats{ display:flex; gap:12px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.gh-stats span{ font-size:12px; font-weight:700; color:var(--brand-d); background:#fff;
  padding:6px 14px; border-radius:20px; box-shadow:var(--shadow); }

/* 瀑布墙：CSS columns 自适配列数；每张照片按真实比例完整呈现（图片自匹配，无裁切变形） */
.wall{ column-count:2; column-gap:12px; }
@media (min-width:480px){ .wall{ column-count:3; } }
@media (min-width:760px){ .wall{ column-count:4; } }
@media (min-width:1180px){ .wall{ column-count:5; } }
.wcard{ display:block; width:100%; text-align:left; break-inside:avoid; margin:0 0 12px;
  background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease; }
.wcard:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(180,140,90,.2); }
.wcard:active{ transform:scale(.985); }
.wimg{ display:block; position:relative; width:100%; background:#efe6d8; overflow:hidden; }
.wimg img{ width:100%; height:100%; object-fit:cover; display:block; }
.wbadge{ position:absolute; top:8px; left:8px; font-size:10px; font-weight:800; color:#7c5e2a;
  background:rgba(255,247,225,.92); border:1px solid rgba(201,168,101,.55); padding:2px 8px; border-radius:10px; }
.wmeta{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 11px; }
.wt{ font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wstat{ font-size:11px; color:var(--sub); flex:0 0 auto; }

/* 作品详情：大图按真实比例自匹配（contain，绝不裁切变形） */
.sheet .ex-big{ width:100%; max-height:74vh; background:#0a0805; display:flex; align-items:center; justify-content:center; }
.sheet .ex-big img{ width:100%; height:auto; max-height:74vh; object-fit:contain; display:block; }
.ex-no{ font-size:11px; letter-spacing:.16em; color:var(--brand-d); text-transform:uppercase; font-weight:700; }
.ex-tt{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.ex-tt h2{ font-size:22px; font-weight:900; }
.ex-star{ font-size:11px; font-weight:800; color:#7c5e2a; background:#f7eccf;
  border:1px solid rgba(201,168,101,.55); padding:2px 9px; border-radius:11px; white-space:nowrap; }
.ex-en{ font-size:13px; letter-spacing:.07em; color:var(--brand-d); font-weight:600; margin-top:4px; text-transform:uppercase; }
.ex-cap{ font-size:16px; font-weight:800; color:#4a423b; margin:13px 0 10px; line-height:1.5; }
.actbar .fav{ background:#fff; color:var(--ink); box-shadow:var(--shadow); }
.ex-nav{ display:flex; gap:10px; margin-top:16px; }
.ex-nav button{ flex:1; min-width:0; padding:11px 12px; border-radius:12px; background:#fff; color:var(--ink);
  box-shadow:var(--shadow); font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ex-nav button:last-child{ text-align:right; }

/* 桌面端：弹层不贴底、居中浮起，更像“看画” */
@media (min-width:760px){
  .sheet .panel{ bottom:auto; top:50%; transform:translateY(-50%); border-radius:20px; max-height:92vh; }
  @keyframes up{ from{ transform:translate(0,-46%); opacity:0 } to{ transform:translateY(-50%); opacity:1 } }
}