/* ============================================================
   modules.css — 四个模块 + 公共组件（评论/灯箱/弹层）
   依赖 index.html 里的 CSS 变量
   ============================================================ */

/* ---------- 视图场景 ---------- */
#view{overflow-y:auto;align-items:stretch}
#view .vwrap{
  width:100%;max-width:1120px;margin:0 auto;
  padding:0 22px 60px;min-height:100%;
  display:flex;flex-direction:column;
}
.vbar{
  position:sticky;top:0;z-index:12;
  display:flex;align-items:center;gap:14px;
  padding:18px 2px 14px;margin-bottom:6px;
  background:linear-gradient(var(--paper) 72%,rgba(255,251,246,0));
}
.vback{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 14px 0 10px;border-radius:17px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  font-family:inherit;font-size:12.5px;letter-spacing:.08em;cursor:pointer;
  box-shadow:0 6px 14px -10px rgba(120,90,80,.6);
  transition:.2s;
}
.vback:hover{color:var(--brand-d);border-color:var(--brand-l);transform:translateX(-2px)}
.vback svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vtitle{
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  font-size:19px;letter-spacing:.06em;
}
.vtitle i{font-style:normal;color:var(--ink-3);font-size:11px;letter-spacing:.22em;margin-left:9px}
.vsub{font-size:11.5px;color:var(--ink-3);letter-spacing:.06em;margin-left:auto}
.vact{
  flex:none;margin-left:auto;height:34px;padding:0 15px;border-radius:17px;border:none;
  background:var(--brand);color:#fff;font-family:inherit;font-size:12.5px;letter-spacing:.08em;
  cursor:pointer;box-shadow:0 8px 18px -10px var(--brand-d);transition:.2s;
}
.vact:hover{background:var(--brand-d);transform:translateY(-1px)}
.vact.ghost{background:var(--card);color:var(--ink-2);border:1px solid var(--line);box-shadow:none}
.vact.ghost:hover{color:var(--brand-d);border-color:var(--brand-l);background:#fff}
.vbody{flex:1;min-height:0}

/* 空状态 */
.empty{
  text-align:center;padding:64px 20px;color:var(--ink-3);
  font-size:13px;letter-spacing:.06em;line-height:2;
}
.empty b{display:block;font-size:15px;color:var(--ink-2);font-weight:400;margin-bottom:6px}
.empty svg{width:52px;height:52px;margin:0 auto 14px;display:block;opacity:.5}
.loading{text-align:center;padding:60px;color:var(--ink-3);font-size:12.5px;letter-spacing:.16em}

/* 空状态 */
.ve{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px 30px;min-height:calc(100vh - 300px);text-align:center;
}
.ve-ico{width:72px;height:72px;margin-bottom:18px;opacity:.42}
.ve-ico *{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ve-t{font-size:15px;color:var(--ink-2);letter-spacing:.05em}
.ve-s{margin-top:9px;font-size:11.5px;color:var(--ink-3);letter-spacing:.04em;line-height:1.9}
.ve-btn{
  margin-top:22px;height:34px;padding:0 22px;border-radius:17px;border:none;
  background:var(--brand);color:#fff;font-family:inherit;font-size:12.5px;letter-spacing:.08em;
  cursor:pointer;box-shadow:0 12px 24px -14px var(--brand-d);transition:.2s;
}
.ve-btn:hover{background:var(--brand-d);transform:translateY(-1px)}

/* 照片墙空板 */
.cork-empty{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:44px 24px 40px;max-width:540px;margin:0 auto;
}
.cork-empty .pl.add{width:188px;height:232px;transform:rotate(-2deg);flex:none}
.cork-empty .pl.add:hover{transform:rotate(0) scale(1.02)}
.cork-tip{color:#FFF4E4;font-size:12.5px;letter-spacing:.06em;opacity:.92;text-shadow:0 1px 4px rgba(20,10,2,.6)}

/* ============================================================
   照片墙 —— 昏暗画室整页氛围，右上一盏暖光打下来
   （body[data-view="photo"] 由 app.js 进出模块时维护）
   ============================================================ */
body[data-view="photo"]{
  background:
    /* 右上主光源的光晕 */
    radial-gradient(ellipse 54% 48% at 84% -7%, rgba(255,214,150,.46), rgba(255,196,116,.13) 42%, transparent 68%),
    /* 墙面上的光池 */
    radial-gradient(ellipse 72% 32% at 48% 12%, rgba(255,226,180,.16), transparent 74%),
    /* 四周暗角，把视线收到板子上 */
    radial-gradient(ellipse 118% 96% at 62% 24%, transparent 40%, rgba(0,0,0,.58) 100%),
    /* 左暗右亮 */
    linear-gradient(100deg, rgba(6,4,2,.96) 0%, rgba(7,4,2,.84) 34%, rgba(10,6,3,.58) 62%, rgba(16,10,4,.34) 84%, rgba(30,20,9,.22) 100%),
    #120C06;
}
body[data-view="photo"]::before,
body[data-view="photo"]::after{opacity:0}
/* 墙上的小涂鸦别抢戏，压暗 */
body[data-view="photo"] .deco{opacity:.34}
body[data-view="photo"] .vbar{
  background:linear-gradient(rgba(18,12,6,.96) 74%, rgba(18,12,6,0));
}
body[data-view="photo"] .vback{
  background:rgba(34,23,12,.82);color:#E2D5BC;border-color:rgba(226,213,188,.16);
  box-shadow:0 6px 16px -10px rgba(0,0,0,.9);
}
body[data-view="photo"] .vtitle{color:#F0E3C8}
body[data-view="photo"] .vtitle i{color:#9B8C6F}
body[data-view="photo"] .vsub{color:#8A7C60}

/* 素木板：均匀暖木色 + 木纹，不参与打光 */
.cork{
  position:relative;border-radius:18px;padding:30px 24px 34px;
  background:
    repeating-linear-gradient(97deg,rgba(48,26,9,.26) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(9deg,rgba(48,26,9,.16) 0 1px,transparent 1px 4px),
    #6E4A28;
  box-shadow:inset 0 0 0 1px rgba(36,19,6,.5),
             0 30px 64px -32px rgba(0,0,0,.92);
}
.cork::after{
  content:"";position:absolute;inset:9px;border-radius:12px;pointer-events:none;
  border:1px solid rgba(255,246,230,.14);
}
.pgrid{
  display:grid;gap:26px 22px;
  grid-template-columns:repeat(auto-fill,minmax(172px,1fr));
}
.pl{
  position:relative;background:#E9E4DA;padding:9px 9px 34px;border-radius:3px;
  transform:rotate(var(--r,0deg));
  box-shadow:-8px 12px 24px -12px rgba(28,14,4,.66),-2px 3px 6px -3px rgba(28,14,4,.42);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s;
  cursor:pointer;
}
.pl:hover{
  transform:rotate(0deg) scale(1.035) translateY(-3px);
  box-shadow:-10px 16px 32px -12px rgba(28,14,4,.74),4px -4px 12px -4px rgba(255,214,150,.24);
  z-index:4;
}
.pl img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;background:#3A2A18;
  border-radius:1px;filter:brightness(.93) contrast(1.04)}
.pl:hover img{filter:brightness(1.12) contrast(1.03)}
.pl .plc{
  position:absolute;left:11px;right:11px;bottom:9px;
  font-family:"Palatino Linotype",Georgia,serif;
  font-size:11px;letter-spacing:.03em;color:#7E6E5E;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl .plc i{font-style:normal;float:right;color:#A89887;font-size:9px;letter-spacing:.08em}
.pl.enter{animation:pinIn .62s cubic-bezier(.18,.9,.3,1.2) both}
@keyframes pinIn{
  0%{opacity:0;transform:rotate(var(--r,0deg)) scale(1.55) translateY(-34px)}
  62%{opacity:1;transform:rotate(calc(var(--r,0deg) * .5)) scale(.97) translateY(2px)}
  100%{opacity:1;transform:rotate(var(--r,0deg)) scale(1) translateY(0)}
}

/* 图钉 */
.needle{
  position:absolute;top:-11px;left:50%;margin-left:-1px;width:2px;height:15px;
  background:linear-gradient(#B9AFA8,#7C7169);border-radius:1px;z-index:2;
}
.needle::before{
  content:"";position:absolute;top:-9px;left:50%;width:15px;height:15px;margin-left:-7.5px;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),transparent 46%),
    var(--pc,var(--brand));
  box-shadow:0 4px 5px -2px rgba(60,35,15,.55),inset -2px -2px 4px rgba(0,0,0,.18);
  z-index:3;
}
.pl:hover .needle::before{box-shadow:0 5px 7px -2px rgba(60,35,15,.6),inset -2px -2px 4px rgba(0,0,0,.18)}

/* 上传卡 */
.pl.add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;aspect-ratio:auto;height:100%;min-height:178px;
  background:rgba(255,250,242,.14);
  border:1.8px dashed rgba(255,248,236,.6);box-shadow:none;border-radius:5px;
  color:#FFF8EC;cursor:pointer;text-shadow:0 1px 3px rgba(20,10,2,.6);
}
.pl.add:hover{background:rgba(255,250,242,.30);transform:rotate(0) scale(1.02)}
.pl.add svg{width:26px;height:26px;stroke:#FFF6E6;stroke-width:1.7;fill:none;stroke-linecap:round}
.pl.add span{font-size:11.5px;letter-spacing:.16em}
.pl.add small{font-size:9.5px;letter-spacing:.1em;opacity:.72}

/* 上传进度条 */
.upl{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:70;
  width:min(320px,86vw);padding:13px 16px;border-radius:14px;background:var(--card);
  box-shadow:0 22px 44px -22px rgba(90,60,40,.6);display:none;
}
.upl.on{display:block}
.upl b{font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--ink-2)}
.upl u{float:right;text-decoration:none;font-size:12px;color:var(--brand-d)}
.upl .bar{margin-top:9px;height:5px;border-radius:3px;background:var(--paper-2);overflow:hidden}
.upl .bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--brand-d));transition:width .25s}

/* ============================================================
   歌单 —— 卡带墙
   ============================================================ */
.sgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(154px,1fr))}
.sgrid{align-items:stretch}
.song{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border-radius:13px;padding:10px 10px 11px;
  border:1px solid var(--line);box-shadow:0 12px 24px -18px rgba(120,90,80,.8);
  transition:.24s;cursor:pointer;
}
.song:hover{transform:translateY(-4px);box-shadow:0 20px 34px -18px rgba(120,90,80,.85)}
.song .cov{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;
  background:var(--paper-2);
}
.song .cov img{width:100%;height:100%;object-fit:cover;display:block}
.song .cov .spk{
  position:absolute;left:0;right:0;bottom:0;height:13px;
  background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:space-between;padding:0 6px;
}
.song .cov .spk s{width:4px;height:4px;border-radius:50%;background:var(--ink-3);display:block}
.song .nm{
  margin-top:9px;font-size:12.5px;color:var(--ink);letter-spacing:.02em;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.song .ar{font-size:10px;color:var(--ink-3);letter-spacing:.04em;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song .by{
  position:absolute;top:13px;right:13px;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;font-size:9.5px;color:#fff;letter-spacing:0;
  box-shadow:0 2px 5px rgba(0,0,0,.22);
}
.song .cw{margin-top:auto;padding-top:7px;border-top:1px dashed var(--line);
  font-size:9.5px;color:var(--ink-3);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song .cw.none{color:#C4B8AE}
.song.add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  height:100%;border:1.6px dashed #E0D3C7;box-shadow:none;
  background:rgba(255,255,255,.62);color:var(--ink-2);
}
.song.add:hover{background:var(--card);color:var(--brand-d);border-color:var(--brand-l)}
.song.add svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
.song.add span{font-size:11.5px;letter-spacing:.16em}

/* 搜索面板 */
.searchbox{position:relative}
.sres{
  margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);max-height:330px;overflow-y:auto;display:none;
}
.sres.on{display:block}
.sres .ri{
  display:flex;gap:11px;align-items:center;padding:9px 12px;cursor:pointer;transition:.16s;
  border-bottom:1px solid rgba(62,58,56,.05);
}
.sres .ri:last-child{border-bottom:none}
.sres .ri:hover{background:var(--brand-xl)}
.sres .ri img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:none;background:var(--paper-2)}
.sres .ri .rt{min-width:0}
.sres .ri b{display:block;font-weight:400;font-size:12.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sres .ri i{font-style:normal;font-size:10.5px;color:var(--ink-3)}

/* ============================================================
   饭搭子
   ============================================================ */
.ffeed{display:flex;flex-direction:column;gap:14px;max-width:680px;width:100%;margin:0 auto}
.food{
  display:flex;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:14px 16px 11px;box-shadow:0 14px 28px -24px rgba(120,90,80,.9);
  transition:.22s;
}
.food:hover{box-shadow:0 20px 34px -24px rgba(120,90,80,.95)}
.av{
  flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;color:#fff;letter-spacing:0;
}
.av.h{background:var(--brand)}
.av.s{background:var(--accent);color:#4A7590}
.food-bd{flex:1;min-width:0}
.food-hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.food-hd b{font-weight:400;font-size:13px;color:var(--ink)}
.food-hd b i{font-style:normal;font-size:10.5px;color:var(--ink-3);margin-left:5px}
.food-hd .t{margin-left:auto;font-size:10px;color:var(--ink-3);letter-spacing:.06em}
.food-dish{margin-top:7px;font-size:15px;letter-spacing:.02em;color:var(--ink)}
.food-dish .pl2{font-size:10px;color:var(--ink-3);margin-left:8px;letter-spacing:.06em}
.food-note{margin-top:6px;font-size:12px;color:var(--ink-2);line-height:1.7;letter-spacing:.02em}
.food-ft{display:flex;align-items:center;gap:12px;margin-top:11px;padding-top:9px;border-top:1px dashed var(--line)}
/* 通用小按钮：饭搭子 / 足迹票根 / 愿望单共用 */
.cbtn{
  display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:11px;color:var(--ink-3);letter-spacing:.06em;padding:0;
  flex:none;white-space:nowrap;
}
.cbtn:hover{color:var(--brand-d)}
.cbtn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;flex:none}
.cbtn.del{color:var(--ink-3)}
.cbtn.del:hover{color:var(--brand-d)}
.food-ft .del{margin-left:auto;font-size:10.5px;opacity:0;transition:.2s}
.food-ft .del{margin-left:auto;font-size:10.5px;opacity:0;transition:.2s}
.food:hover .food-ft .del{opacity:1}

/* 星星 */
.stars{display:inline-flex;gap:2px;align-items:center;vertical-align:middle}
.stars svg{display:block;overflow:visible}
.food .stars{margin-top:1px}
.stars svg path{stroke:none}
.stars svg .gh,.rate svg .gh{fill:#EBE0D6}
.stars svg .on,.rate svg .on{fill:var(--sc,#F58C8C)}
.slabel{
  display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.1em;
  padding:2px 7px;border-radius:8px;background:var(--sl-bg,#F4EDE6);color:var(--sc,#9A8B7E);
  vertical-align:1px;
}
/* 打分控件 */
.rate{display:inline-flex;align-items:center;gap:2px;cursor:pointer;user-select:none}
.rate svg{display:block}
.rate:hover svg .gh{fill:#E0D0C0}

/* ============================================================
   全部评论
   ============================================================ */
.acbar{
  max-width:760px;width:100%;margin-left:auto;margin-right:auto;
  display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:11px 12px 11px 15px;box-shadow:0 12px 26px -24px rgba(120,90,80,.9);
  margin-bottom:20px;
}
.acbar input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;
  font-size:13px;color:var(--ink);letter-spacing:.03em;
}
.acbar input::placeholder{color:var(--ink-3)}
.acbar .go{
  flex:none;height:30px;padding:0 15px;border-radius:15px;border:none;background:var(--brand);
  color:#fff;font-family:inherit;font-size:12px;letter-spacing:.08em;cursor:pointer;
}
.acbar .go:hover{background:var(--brand-d)}
.aclist{display:flex;flex-direction:column;max-width:760px;width:100%;margin:0 auto}
.ac{
  display:flex;gap:12px;padding:14px 4px;border-bottom:1px dashed var(--line);
}
.ac:last-child{border-bottom:none}
.ac-bd{flex:1;min-width:0}
.ac-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ac-top .nm{font-size:12.5px;color:var(--ink)}
.ac-top .badge{
  font-size:9.5px;letter-spacing:.08em;padding:2px 7px;border-radius:7px;
  background:var(--accent-l);color:#5B87A5;
}
.ac-top .badge.photo{background:var(--brand-xl);color:var(--brand-d)}
.ac-top .badge.song{background:#E7EEF9;color:#5D7FA8}
.ac-top .badge.food{background:#FBEFD8;color:#A8813C}
.ac-top .badge.stand{background:#F1EDE9;color:var(--ink-2)}
.ac-top .tm{margin-left:auto;font-size:10px;color:var(--ink-3);letter-spacing:.05em;flex:none}
.ac-tx{margin-top:5px;font-size:13px;line-height:1.72;color:var(--ink);word-break:break-word}
.ac-sub{
  margin-top:7px;font-size:11px;color:var(--ink-3);letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:440px;
  padding:5px 9px 5px 6px;border-radius:9px;
  background:rgba(255,255,255,.75);border:1px solid rgba(62,58,56,.06);
}
.ac-sub .th{
  width:26px;height:26px;border-radius:5px;object-fit:cover;flex:none;background:var(--paper-2);
}
.ac-sub .ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-sub button{
  margin-left:auto;flex:none;background:none;border:none;font-family:inherit;cursor:pointer;
  font-size:10.5px;color:var(--brand-d);letter-spacing:.04em;padding:0 0 0 6px;
}
.ac-sub button:hover{color:var(--brand-d)}

/* ============================================================
   评论弹层
   ============================================================ */
.sheet{position:fixed;inset:0;z-index:64;display:none}
.sheet.on{display:block}
.sheet .mask{position:absolute;inset:0;background:rgba(56,50,46,.44);backdrop-filter:blur(2.5px);
  animation:fadeIn .22s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet .pn{
  position:absolute;top:0;right:0;bottom:0;width:min(452px,100%);
  background:var(--paper);display:flex;flex-direction:column;border-left:1px solid var(--line);
  box-shadow:-20px 0 60px -30px rgba(60,40,30,.5);
  animation:slideIn .3s cubic-bezier(.2,.85,.3,1) both;
}
@keyframes slideIn{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
.sheet .pn-hd{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:17px 18px 13px;border-bottom:1px solid var(--line);
}
.sheet .pn-hd b{font-weight:400;font-size:13.5px;letter-spacing:.05em}
.sheet .pn-hd b i{font-style:normal;color:var(--ink-3);margin-left:7px;font-size:12px}
.sheet .pn-hd .x{
  margin-left:auto;width:29px;height:29px;border-radius:50%;border:none;background:var(--card);
  color:var(--ink-2);font-size:16px;line-height:1;cursor:pointer;box-shadow:0 4px 10px -6px rgba(120,90,80,.8);
}
.sheet .pn-hd .x:hover{color:var(--brand-d)}
.cmt-list{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 20px}
.cmt{display:flex;gap:10px;margin-bottom:15px}
.cmt .av{width:29px;height:29px;font-size:10.5px}
.cmt-bd{flex:1;min-width:0}
.cmt-hd{display:flex;align-items:baseline;gap:7px}
.cmt-hd b{font-weight:400;font-size:12px;color:var(--ink)}
.cmt-hd .tm{font-size:9.5px;color:var(--ink-3);letter-spacing:.05em}
.cmt-hd .ed{font-size:9.5px;color:var(--ink-3)}
.cmt-hd .ops{margin-left:auto;display:flex;gap:2px;opacity:0;transition:.18s}
.cmt:hover .cmt-hd .ops{opacity:1}
.cmt-hd .ops button{
  background:none;border:none;cursor:pointer;padding:2px 4px;color:var(--ink-3);line-height:0;
}
.cmt-hd .ops button:hover{color:var(--brand-d)}
.cmt-hd .ops svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cmt-tx{margin-top:3px;font-size:12.5px;line-height:1.7;color:var(--ink);word-break:break-word;white-space:pre-wrap}
.cmt-tx .at{color:#5B87A5}
.cmt-rp{
  display:inline-block;margin-top:5px;background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;
}
.cmt-rp:hover{color:var(--brand-d)}
.cmt-kids{margin-top:9px;padding-left:11px;border-left:2px solid var(--line)}
.cmt-kids .cmt{margin-bottom:12px}
.cmt-kids .cmt:last-child{margin-bottom:0}
.cmt-empty{text-align:center;padding:40px 10px;font-size:12px;color:var(--ink-3);letter-spacing:.08em;line-height:1.9}
.pn-ft{flex:none;border-top:1px solid var(--line);padding:11px 14px 14px;background:var(--paper)}
.reply-tip{
  display:none;align-items:center;gap:7px;margin-bottom:8px;padding:5px 9px;border-radius:9px;
  background:var(--accent-l);font-size:10.5px;color:#5B87A5;letter-spacing:.04em;
}
.reply-tip.on{display:flex}
.reply-tip button{margin-left:auto;background:none;border:none;color:#5B87A5;cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.frow{display:flex;gap:8px;align-items:flex-end}
.frow textarea{
  flex:1;min-height:38px;max-height:110px;resize:none;border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;font-family:inherit;font-size:12.5px;line-height:1.5;color:var(--ink);
  background:var(--card);outline:none;transition:.2s;
}
.frow textarea:focus{border-color:var(--brand-l);box-shadow:0 0 0 3px var(--brand-xl)}
.frow .send{
  flex:none;height:38px;padding:0 17px;border-radius:12px;border:none;background:var(--brand);
  color:#fff;font-family:inherit;font-size:12.5px;letter-spacing:.08em;cursor:pointer;
  transition:.2s;
}
.frow .send:hover{background:var(--brand-d)}
.frow .send:disabled{opacity:.5;cursor:default}

/* ============================================================
   灯箱 / 通用弹窗
   ============================================================ */
.lb{position:fixed;inset:0;z-index:68;display:none}
.lb.on{display:flex;align-items:center;justify-content:center;padding:34px 24px}
.lb .mask{position:absolute;inset:0;background:rgba(38,32,28,.82);animation:fadeIn .2s both}
.lb .box{
  position:relative;max-width:min(880px,100%);max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:popIn .3s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes popIn{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.lb img{max-width:100%;max-height:calc(100vh - 190px);object-fit:contain;display:block;
  border-radius:5px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.lb .cap{color:rgba(255,255,255,.9);font-size:12.5px;letter-spacing:.06em;text-align:center;line-height:1.8}
.lb .cap small{display:block;color:rgba(255,255,255,.5);font-size:10.5px;letter-spacing:.14em;margin-top:3px}
.lb .tools{display:flex;gap:10px}
.lb .tools button{
  height:32px;padding:0 15px;border-radius:16px;border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.1);color:#fff;font-family:inherit;font-size:11.5px;
  letter-spacing:.08em;cursor:pointer;transition:.2s;
}
.lb .tools button:hover{background:rgba(255,255,255,.22)}
.lb .x{
  position:absolute;top:-14px;right:-14px;width:34px;height:34px;border-radius:50%;
  border:none;background:var(--card);color:var(--ink);font-size:17px;cursor:pointer;line-height:1;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.6);
}

.mdl{position:fixed;inset:0;z-index:76;display:none}
.mdl.on{display:flex;align-items:center;justify-content:center;padding:26px}
.mdl .mask{position:absolute;inset:0;background:rgba(62,58,56,.36);backdrop-filter:blur(2px);animation:fadeIn .2s both}
.mdl .box{
  position:relative;background:var(--paper);border-radius:18px;padding:22px 22px 18px;
  width:min(420px,100%);box-shadow:0 30px 70px -28px rgba(60,40,30,.6);
  animation:popIn .26s cubic-bezier(.2,.9,.3,1.1) both;
  max-height:calc(100vh - 60px);overflow-y:auto;
}
.mdl h3{font-weight:400;font-size:15px;letter-spacing:.05em;margin-bottom:4px}
.mdl p{font-size:12px;color:var(--ink-2);line-height:1.8;letter-spacing:.02em}
.mdl .fld{margin-top:14px}
.mdl .fld label{display:block;font-size:10.5px;color:var(--ink-3);letter-spacing:.12em;margin-bottom:5px}
.mdl .fld input,.mdl .fld textarea{
  width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 12px;
  font-family:inherit;font-size:13px;color:var(--ink);background:var(--card);outline:none;transition:.2s;
}
.mdl .fld textarea{resize:vertical;min-height:64px;line-height:1.6}
.mdl .fld input:focus,.mdl .fld textarea:focus{border-color:var(--brand-l);box-shadow:0 0 0 3px var(--brand-xl)}
.mdl .row{display:flex;gap:9px;margin-top:18px;justify-content:flex-end}
.mdl .row button{
  height:34px;padding:0 17px;border-radius:17px;font-family:inherit;font-size:12.5px;
  letter-spacing:.06em;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink-2);
}
.mdl .row button.pri{background:var(--brand);color:#fff;border-color:var(--brand)}
.mdl .row button.pri:hover{background:var(--brand-d)}
.mdl .row button:hover{color:var(--brand-d)}
.mdl .row button.pri:hover{color:#fff}

/* ============================================================
   六格导航（覆盖原两列）
   ============================================================ */
.nav{grid-template-columns:repeat(3,1fr);gap:10px}
.nav a{padding:13px 8px;gap:8px;flex-direction:column;align-items:center;text-align:center}
.nav .ico{width:24px;height:24px}
.nav .tx{align-items:center;gap:1px}
.nav .t{font-size:12.5px;letter-spacing:.02em}
.nav .s{font-size:8.5px;letter-spacing:.1em}
.nav .cnt{
  position:absolute;top:7px;right:8px;min-width:15px;height:15px;padding:0 4px;
  border-radius:8px;background:var(--brand);color:#fff;font-size:9px;line-height:15px;
  letter-spacing:0;
}
.nav a{position:relative}

/* 顶栏用户菜单 */
.ume{
  position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
}
.ume .dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.umep{
  position:absolute;right:0;top:calc(100% + 9px);min-width:132px;background:var(--card);border-radius:12px;
  box-shadow:0 20px 40px -22px rgba(90,60,40,.7);border:1px solid var(--line);
  padding:5px;display:none;z-index:30;
}
.umep.on{display:block}
.umep button{
  display:block;width:100%;text-align:left;background:none;border:none;font-family:inherit;
  font-size:12px;color:var(--ink-2);padding:8px 10px;border-radius:8px;cursor:pointer;letter-spacing:.04em;
}
.umep button:hover{background:var(--brand-xl);color:var(--brand-d)}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:899px){
  #view .vwrap{padding:0 16px 46px}
  .vbar{padding:14px 0 11px}
  .vtitle{font-size:17px}
  .vsub{display:none}
  .cork{padding:24px 15px 26px;border-radius:15px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:22px 14px}
  .pl{padding:7px 7px 30px}
  .sgrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:13px}
  .nav{grid-template-columns:repeat(3,1fr);gap:8px}
  .nav a{padding:12px 5px;gap:6px;border-radius:13px}
  .nav .t{font-size:11.5px}
  .nav .s{display:none}
  .nav .ico{width:22px;height:22px}
  .sheet .pn{
    top:auto;left:0;right:0;width:100%;height:84vh;border-radius:20px 20px 0 0;
    animation:slideUp .3s cubic-bezier(.2,.85,.3,1) both;
  }
  @keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
  .lb.on{padding:16px 12px}
  .lb img{max-height:calc(100vh - 210px)}
  .food{padding:13px 13px 11px}
  .ac-top .badge{font-size:9px}
  .mdl .box{padding:19px 18px 15px}
}
@media (max-width:430px){
  .pgrid{grid-template-columns:repeat(2,1fr);gap:20px 12px}
  .sgrid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   足迹票根（飞机票样式）
   ============================================================ */
.plist{display:flex;flex-direction:column;gap:16px;max-width:560px;margin:0 auto}
.stub{
  display:flex;background:var(--card);border:1px solid var(--line);
  border-radius:14px;position:relative;overflow:visible;
  box-shadow:0 16px 30px -20px rgba(90,60,50,.45);
}
.stub-l{
  flex:none;width:170px;padding:15px 14px 13px;
  display:flex;flex-direction:column;justify-content:center;
  border-right:1.6px dashed var(--ink-3);position:relative;
  background:linear-gradient(150deg,var(--brand-xl),transparent 70%);
}
.stub-l::before,.stub-l::after{
  content:"";position:absolute;right:-9.5px;width:17px;height:17px;border-radius:50%;
  background:var(--paper);
}
.stub-l::before{top:-9.5px}
.stub-l::after{bottom:-9.5px}
.stub-ap b{
  font-family:var(--hand);font-size:17px;font-weight:400;color:var(--ink);
  line-height:1.35;display:block;overflow-wrap:anywhere;
}
.stub-ap i{
  font-style:normal;font-size:8px;letter-spacing:.26em;color:var(--ink-3);
  display:block;margin-top:7px;
}
.stub-date{
  margin-top:11px;font-size:10.5px;color:var(--ink-2);letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
.stub-r{flex:1;min-width:0;padding:14px 16px}
.stub-who{font-size:10px;color:var(--ink-3);letter-spacing:.1em;margin-bottom:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stub-note{font-size:13px;color:var(--ink);line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stub-ft{margin-top:10px;display:flex;gap:8px}
.stub-ft .cbtn,.wish-act .cbtn{flex:none;white-space:nowrap}

/* ============================================================
   愿望单
   ============================================================ */
.wfeed{display:flex;flex-direction:column;gap:14px;max-width:560px;margin:0 auto}
.wish{
  display:flex;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px;position:relative;
}
.wish.done{padding-right:74px}
.wish.done{opacity:.72}
.wcheck{
  flex:none;width:24px;height:24px;border-radius:50%;margin-top:2px;
  border:1.6px solid var(--ink-3);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .25s,border-color .25s,transform .2s;
}
.wcheck:hover{transform:scale(1.12)}
.wcheck svg{width:12px;height:12px;display:none}
.wish.done .wcheck{background:var(--brand);border-color:var(--brand)}
.wish.done .wcheck svg{display:block}
.wish-bd{flex:1;min-width:0}
.wish-hd{display:flex;align-items:baseline;gap:10px}
.wish-hd b{font-size:14.5px;font-weight:400;color:var(--ink)}
.wish.done .wish-hd b{text-decoration:line-through;color:var(--ink-2)}
.wish-hd .t{margin-left:auto;font-size:10px;color:var(--ink-3);flex:none}
.wish-note{margin-top:5px;font-size:12px;color:var(--ink-2);line-height:1.7}
.wish-ft{margin-top:9px;display:flex;align-items:center;gap:8px}
.wish-by{font-size:10.5px;color:var(--ink-3);letter-spacing:.05em}
.wish-act{margin-left:auto;display:flex;gap:8px}
.wstamp{
  position:absolute;right:-7px;top:50%;transform:translateY(-50%) rotate(-8deg);
  border:1.5px solid var(--brand-d);color:var(--brand-d);background:var(--card);
  border-radius:6px;padding:2px 8px 3px;
  font-size:10px;letter-spacing:.16em;
  font-family:var(--hand);pointer-events:none;z-index:2;
  animation:popIn .3s cubic-bezier(.2,.9,.3,1.15) both;
}
.wstamp i{font-style:normal;display:block;font-size:7px;letter-spacing:.32em;text-align:center}

@media (max-width:640px){
  .stub{flex-direction:column}
  .stub-l{width:auto;border-right:none;border-bottom:2px dashed var(--line);
    flex-direction:row;align-items:center;gap:12px;padding:13px 15px}
  .stub-l::before,.stub-l::after{display:none}
  .stub-ap b{font-size:17px}
  .stub-ap i{margin-top:3px}
  .stub-date{margin-top:0;margin-left:auto}
}