/* 情侣小屋 · 样式表 */
:root{
  --accent: #a8495f;
  --accent-ink: #ffffff;
  --bg1: #faf8f9;
  --bg2: #f2f0f5;
  --card: #ffffff;
  --glass: #ffffff;   /* 半透明叠层用的白（暗色皮肤覆盖成深色） */
  --text: #221d26;
  --muted: #8a8291;
  --line: #e9e3ea;
  --line-soft: #f5f1f5;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(28,20,32,.035), 0 12px 30px -18px rgba(28,20,32,.20);
  --shadow-lg: 0 2px 6px rgba(28,20,32,.05), 0 28px 60px -24px rgba(28,20,32,.28);
  --ease: cubic-bezier(.22,.68,.32,1);
  --ok: #2f8f68;
  --warn: #bd7826;
  --danger: #c2453f;
}

/* ---------- 暗色皮肤：主题是「·暗」时 html 挂 .dark ---------- */
html.dark{
  --accent-ink:#ffffff;
  --bg1:#15151b;
  --bg2:#1c1c25;
  --card:#23232e;
  --glass:#2c2c38;
  --text:#e9e7f0;
  --muted:#9b98aa;
  --line:#353442;
  --line-soft:#2a2a34;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 30px -18px rgba(0,0,0,.65);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4), 0 28px 60px -24px rgba(0,0,0,.75);
  color-scheme:dark;
}
html.dark body{
  background:linear-gradient(172deg,var(--bg1) 0%,var(--bg2) 62%,color-mix(in srgb,var(--bg2) 76%,var(--accent)) 100%);
}
html.dark .toast{background:#3b3b4a;color:#fff}
html.dark .toast.err{background:#8c3a36}
html.dark .photo img,html.dark .thumb{background:#2a2a35}
html.dark .drop{border-color:var(--line);color:var(--muted)}
html.dark .empty{color:var(--muted)}
html.dark .lightbox{background:rgba(0,0,0,.92)}


*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","MiSans",
              "Source Han Sans SC","Noto Sans CJK SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-kerning:normal;letter-spacing:.1px;
  color:var(--text);
  background:linear-gradient(172deg,var(--bg1) 0%,var(--bg2) 62%,color-mix(in srgb,var(--bg2) 82%,var(--accent)) 100%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.7;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58vw 44vw at 4% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%),
    radial-gradient(50vw 38vw at 106% 2%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    radial-gradient(70vw 40vw at 50% 112%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 74%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 20px 64px}

/* ---------- 顶部导航 ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--glass) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  max-width:1120px;margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.brand .dot{
  width:26px;height:26px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--glass)));
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent);
}
/* 站点 logo：一颗爱心 */
.brand .brand-heart{
  width:26px;height:26px;flex:0 0 auto;overflow:visible;
  filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--accent) 38%,transparent));
  transition:transform .25s;
}
.brand:hover .brand-heart{transform:scale(1.08)}
.brand .name{font-size:15.5px}
.brand .sub{font-size:11px;color:var(--muted);font-weight:400;letter-spacing:0}
.nav-links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  padding:7px 13px;border-radius:11px;font-size:14px;color:var(--muted);
  white-space:nowrap;transition:.18s;
}
.nav-links a:hover{background:var(--line-soft);color:var(--text)}
.nav-links a.active{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);font-weight:600;
}
/* 导航右侧「我」的小名牌 */
.nav-links a.me-chip{
  display:flex;align-items:center;gap:6px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent);font-weight:650;
}
.nav-links a.me-chip:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.nav-links a.me-chip .me-dot{
  width:19px;height:19px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;
}
/* 只能看不能改的区块（对方的信息 / 心动值 / 心情） */
.read-only{position:relative}
.read-only input, .read-only select, .read-only textarea{
  background:var(--line-soft);color:var(--muted);cursor:not-allowed;
}
.read-only input[type=range]{opacity:.6}
.read-only .label, .read-only .group-title{opacity:.72}
input:disabled, select:disabled, textarea:disabled{
  background:var(--line-soft);color:var(--muted);cursor:not-allowed;
  -webkit-text-fill-color:var(--muted);opacity:1;
}

/* ---------- 分页（个人信息：一人一页） ---------- */
.seg{
  display:flex;gap:6px;padding:5px;border-radius:15px;
  background:var(--line-soft);border:1px solid color-mix(in srgb,var(--accent) 8%,var(--line));
}
.seg-btn{
  flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border:none;border-radius:999px;background:none;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--muted);transition:background .16s,color .16s,box-shadow .16s;
  white-space:nowrap;overflow:hidden;
}
.seg-btn:hover{color:var(--text)}
.seg-btn.active{
  background:var(--card);color:var(--text);
  box-shadow:0 2px 10px rgba(28,20,32,.16);
}
.seg-btn.active .seg-num{color:var(--accent)}
.seg-num{
  font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.3px;
  padding:1px 7px;border-radius:99px;background:var(--line-soft);
}
.seg-btn.active .seg-num{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.seg-sub{
  font-size:10.5px;font-weight:500;color:var(--muted);
  padding:1px 7px;border-radius:99px;border:1px solid var(--line);
}
.bar-row{display:flex;align-items:center;gap:14px;margin-top:14px}
.bar-row .bar{flex:1;min-width:0}
.tab-panel.hidden{display:none}
.ro-value{
  min-height:41px;display:flex;align-items:center;
  padding:9px 12px;border-radius:11px;font-size:14.5px;line-height:1.5;
  background:var(--line-soft);color:var(--text);white-space:pre-wrap;word-break:break-word;
}
.ro-value.empty{color:#bdb3bf}

/* ---------- 通用卡片 ---------- */
.card{
  background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 6%,var(--line));
  border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;margin:16px 0;
}
.card.tight{padding:16px}
.card-head{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.card-head h2,.card-head h3{margin:0;font-size:16px;letter-spacing:.4px}
.card-head .sub{font-size:12.5px;color:var(--muted);margin-left:auto}
.section-title{
  font-size:13px;letter-spacing:2.5px;color:var(--muted);margin:30px 0 6px;
  text-transform:uppercase;font-weight:600;
}

/* ---------- 主页 hero ---------- */
.hero{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:30px 28px;border-radius:22px;margin-top:20px;
  background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--accent) 4%,var(--card)));
  border:1px solid color-mix(in srgb,var(--accent) 8%,var(--line));box-shadow:var(--shadow-lg);
}
.couple{display:flex;align-items:center;gap:14px}
.person{text-align:center}
.avatar{
  width:78px;height:78px;border-radius:50%;overflow:hidden;margin:0 auto 8px;
  border:3px solid var(--card);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 12%,var(--line)),0 10px 26px -14px rgba(28,20,32,.45);
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 22%,var(--glass)),var(--glass));
  display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--accent);
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.small{width:46px;height:46px;font-size:16px;border-width:2px}
.person .pname{font-size:13.5px;color:var(--muted)}
.heart{font-size:22px;color:var(--accent);opacity:.65}
.hero-count{flex:1;min-width:230px;text-align:center}
.hero-count .label{font-size:12.5px;color:var(--muted);letter-spacing:2px}
.hero-count .big{
  font-size:clamp(40px,8vw,62px);font-weight:800;line-height:1.06;
  color:var(--accent);letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
}
.hero-count .big small{font-size:17px;font-weight:600;margin-left:6px;letter-spacing:0}
.hero-count .sub{font-size:12.5px;color:var(--muted);margin-top:8px}
/* 主页 hero：头像居中，天数在下方 */
.hero.hero-center{flex-direction:column;justify-content:center;gap:16px;padding:30px 28px 34px}
.hero.hero-center .couple{justify-content:center;gap:18px}
.hero.hero-center .hero-count{flex:0 1 auto;min-width:0;width:100%}

/* ---------- 概览小卡 ---------- */
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.mini{
  background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 6%,var(--line));
  border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);
}
.mini .k{font-size:12px;color:var(--muted)}
.mini .v{font-size:20px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.mini .v small{font-size:12px;font-weight:500;color:var(--muted);margin-left:3px}

/* ---------- 纪念日 ---------- */
.anniv-list{display:grid;gap:12px}
.anniv{
  display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;
  background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 6%,var(--line));
  box-shadow:var(--shadow);
}
.anniv.is-today{border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  background:linear-gradient(135deg,var(--glass),color-mix(in srgb,var(--accent) 8%,var(--glass)))}
.anniv .icon{font-size:22px;width:34px;text-align:center;flex:0 0 auto}
.anniv .body{flex:1;min-width:0}
.anniv .t{font-weight:650;font-size:15px}
.anniv .d{font-size:12.5px;color:var(--muted);margin-top:2px}
.anniv .count{text-align:right;flex:0 0 auto}
.anniv .count .n{font-size:22px;font-weight:800;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1.2}
.anniv .count .u{font-size:11.5px;color:var(--muted)}
.anniv .count.muted .n{color:var(--muted)}
.anniv.past{opacity:.62}

/* ---------- 相册 ---------- */
.photo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;
}
/* 相册页：网盘式密集方图网格（小间距、纯图铺满；说明只在灯箱里看，桌面悬停时才浮出来） */
.photo-grid.large{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px 6px;align-items:start}
.photo-grid.large .photo{
  aspect-ratio:1/1;overflow:hidden;border:none;border-radius:10px;
  background:var(--line-soft);box-shadow:none;
}
.photo-grid.large .photo img{
  width:100%;height:100%;aspect-ratio:1/1;border-radius:10px;background:var(--line-soft);
}
.photo-grid.large .photo:hover img{transform:scale(1.06)}
.photo-grid.large .photo .cap{
  font-size:11px;padding:16px 8px 6px;opacity:0;transition:opacity .18s;
}
.photo-grid.large .photo:hover .cap{opacity:1}
.photo-grid.large .photo .cap .dim{margin-left:5px}
.photo-grid.large .photo.picked{outline:none}
.photo-grid.large .photo.picked img{outline:3px solid var(--accent);outline-offset:-3px}
.photo-grid.large .photo .pick{top:5px;left:5px;width:20px;height:20px;border-radius:7px}
.photo-grid.large .photo.picked .pick::after{font-size:12px;line-height:18px}
.photo{
  position:relative;border-radius:14px;overflow:hidden;background:var(--line-soft);
  aspect-ratio:1/1;box-shadow:var(--shadow);border:1px solid var(--line);
  margin:0;   /* figure 默认 margin:1em 40px 会把格子缩掉 80px（两侧 40px 的空白＝假间距） */
}
.photo img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:.35s}
.photo:hover img{transform:scale(1.045)}
.photo .cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px 10px 8px;color:#fff;font-size:12px;
  background:linear-gradient(transparent,rgba(0,0,0,.62));white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
.photo .check{
  position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:7px;
  background:rgba(255,255,255,.85);border:1px solid var(--card);opacity:0;transition:.18s;cursor:pointer;
}
.photo:hover .check,.photo.sel .check{opacity:1}
.photo.sel{outline:3px solid var(--accent);outline-offset:-3px}
.photo.sel .check{background:var(--accent);border-color:var(--accent)}
.photo.sel .check::after{content:"✓";color:#fff;font-size:14px;line-height:20px;display:block;text-align:center}

.drop{
  border:2px dashed var(--line);border-radius:var(--radius);padding:26px;text-align:center;
  color:var(--muted);background:var(--card);transition:.2s;cursor:pointer;
}
.drop:hover,.drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--glass));color:var(--accent)}
.drop .big{font-size:15px;color:var(--text);font-weight:600;margin-bottom:4px}
.drop .hint{font-size:12.5px}

/* 灯箱 */
.lightbox{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(28,20,26,.86);backdrop-filter:blur(6px);padding:24px;
}
.lightbox.on{display:flex}
.lightbox img{max-width:92vw;max-height:74vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-panel{
  position:absolute;bottom:0;left:0;right:0;
  padding:16px 20px calc(22px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(transparent,rgba(20,14,18,.85) 40%);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:#fff;
}
/* 看图时把底部三键导航收掉：灯箱正好占着屏幕底部，导航栏压上来会盖住「保存 / 删除这张」 */
body.lb-open .tabbar{display:none}
.lb-panel input[type=text],.lb-panel input[type=date]{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;
  border-radius:10px;padding:9px 12px;
}
.lb-panel input::placeholder{color:rgba(255,255,255,.55)}
/* 灯箱里的四个控件都是 <button>，不清掉 UA 默认样式就会顶着浏览器那个浅灰小方块 —— 一律做成圆形按钮 */
.lb-close{
  position:absolute;top:18px;right:20px;width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;
  cursor:pointer;opacity:.9;transition:background .18s,opacity .18s;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.lb-close:hover{opacity:1;background:rgba(255,255,255,.28)}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.14);
  color:#fff;font-size:24px;line-height:1;cursor:pointer;user-select:none;opacity:.85;
  transition:background .18s,opacity .18s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.lb-nav:hover{opacity:1;background:rgba(255,255,255,.28)}
.lb-nav.prev{left:10px}
.lb-nav.next{right:10px}
/* 灯箱底部两个按钮做成胶囊形（比全站 .btn 的 9px 圆角更圆） */
/* 灯箱底部两个按钮：全站 .btn 已是胶囊形，这里只把内边距放宽一点更饱满 */
.lb-panel .btn.sm{padding:7px 16px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 8%,var(--line));
  background:var(--card);color:var(--text);cursor:pointer;font-size:13.5px;
  white-space:nowrap;transition:all .2s var(--ease);
}
.btn:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));color:var(--accent);
  box-shadow:0 4px 14px -8px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn:active{transform:scale(.975)}
.btn.primary{
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 84%,var(--glass)));
  border-color:transparent;color:var(--accent-ink);font-weight:600;letter-spacing:.3px;
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 70%,transparent);
}
.btn.primary:hover{filter:brightness(1.07);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,var(--line))}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 8%,var(--glass));color:var(--danger)}
.btn.sm{padding:7px 13px;font-size:12.5px;border-radius:999px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- 表单 ---------- */
.field{display:flex;flex-direction:column;gap:5px}
.field .label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.field .label .auto{
  font-size:11px;color:var(--accent);cursor:pointer;border-bottom:1px dashed currentColor;
}
input[type=text],input[type=password],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%;padding:10px 13px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--card);transition:border-color .18s,box-shadow .18s,background .18s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:color-mix(in srgb,var(--accent) 62%,var(--line));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 11%,transparent);
}
textarea{resize:vertical;min-height:66px;line-height:1.6}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}

.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.fields .field.wide{grid-column:1/-1}
.group{margin:22px 0}
.group-title{
  font-size:13px;font-weight:700;letter-spacing:1.6px;color:var(--accent);
  margin:0 0 12px;display:flex;align-items:center;gap:9px;
}
.group-title::after{content:"";flex:1;height:1px;background:var(--line);}

.person-block{margin-top:8px}
.person-head{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.person-head h2{margin:0;font-size:18px;letter-spacing:.5px}

/* ---------- 状态 / 提示 ---------- */
.status{
  font-size:12.5px;color:var(--muted);padding:6px 11px;border-radius:9px;
  background:var(--line-soft);transition:.2s;white-space:nowrap;
}
.status.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.status.err{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.status.busy{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}

.toast{
  position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,20px);z-index:200;
  background:#2c2228;color:#fff;padding:11px 20px;border-radius:12px;font-size:13.5px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:.28s;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--danger)}

.bar{
  height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden;
}
.bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 45%,var(--glass)));
  transition:width .4s}
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;
  font-size:11.5px;background:var(--line-soft);color:var(--muted);
}
.pill.accent{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:600}
.pill.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.empty{
  text-align:center;padding:44px 20px;color:var(--muted);font-size:13.5px;
  border:2px dashed var(--line);border-radius:var(--radius);background:var(--card);
}
.note{font-size:12px;color:var(--muted)}

/* ---------- 后台 ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 4px}
.tabs button{
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  cursor:pointer;font-size:13.5px;color:var(--muted);transition:.18s;
}
.tabs button:hover{color:var(--text)}
.tabs button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.panel{display:none}
.panel.on{display:block}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.theme-pick{display:flex;gap:10px;flex-wrap:wrap}
.theme-pick label{
  display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--line);cursor:pointer;font-size:13px;background:var(--card);
}
.theme-pick input{width:auto}
.swatch{width:15px;height:15px;border-radius:5px}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th,.table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line-soft)}
.table th{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.6px}
.table tbody tr:hover{background:var(--line-soft)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}

/* 页脚：2026-10-03 重做（删掉「永远在一起」、留白收紧、走精致路线）
   现在就一条两端淡出的细线 + 一行小字备案号，干净、不抢内容 */
footer{
  position:relative;margin-top:22px;padding:15px 0 0;text-align:center;color:var(--muted);
  border-top:0;font-size:12.5px;
}
footer::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(300px,74%);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 22%,var(--line) 78%,transparent);
}
footer .heart{color:var(--accent)}
footer .foot-line{font-size:12.5px;letter-spacing:.05em;opacity:.85}
/* 备案号（页脚 / 登录页底部）：小字号 + 拉开字距 + 一颗迷你爱心，点击去工信部 */
footer .foot-beian,.auth-beian a{
  display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:10px;
  font-size:11px;letter-spacing:.12em;color:var(--muted);opacity:.72;
  text-decoration:none;transition:opacity .22s var(--ease),color .22s var(--ease)}
footer .foot-beian svg,.auth-beian svg{width:10px;height:10px;flex:none;fill:currentColor;opacity:.8;
  transition:opacity .22s var(--ease)}
footer .foot-beian:hover,footer .foot-beian:focus-visible,
.auth-beian a:hover,.auth-beian a:focus-visible{opacity:1;color:var(--accent)}
footer .foot-beian:hover svg,.auth-beian a:hover svg{opacity:1}
.auth-beian{margin:6px 0 0;font-size:11px;text-align:center}

@media (max-width:640px){
  .wrap{padding:0 14px 48px}
  .nav-inner{padding:9px 14px;gap:10px}
  .brand .sub{display:none}
  .nav-links a{padding:6px 10px;font-size:13px}
  .card{padding:17px;border-radius:18px}
  .hero{padding:24px 18px;gap:18px;border-radius:20px}
  .hero-count .big{font-size:46px}
  .fields{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px}
  .photo-grid.large{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px 5px}
  .photo-grid.large .photo .cap{display:none}   /* 手机上就是纯图铺满，说明进灯箱看 */
  .anniv{padding:13px 14px;gap:12px}
  .table{font-size:12.5px}
  .table th,.table td{padding:8px 6px}
}

@media print{
  .nav,.btn,.tabs,footer,.appbar,.tabbar{display:none!important}
  body{padding-bottom:0}
  body{background:#fff}
  .card{box-shadow:none;border-color:#ddd}
}

/* ============================================================
   v2 补充：主页 / 记录 / 相册 / 纪念日 / 后台 / 登录
   ============================================================ */
.hero.compact{padding:22px 24px;justify-content:center}
.hero.compact .hero-count .big{font-size:clamp(34px,7vw,52px)}

.card h3{font-size:14.5px;margin:0 0 12px;letter-spacing:.5px}
.card h3:not(:first-child){margin-top:24px}
.row-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
code{background:var(--line-soft);padding:2px 6px;border-radius:6px;font-size:12.5px}

.anniv .ops{display:flex;gap:6px;flex:0 0 auto}
.anniv.is-past,.anniv.past{opacity:.62}

/* 后台 tabs */
.tabs .tab{
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  cursor:pointer;font-size:13.5px;color:var(--muted);transition:.18s;
}
.tabs .tab:hover{color:var(--text)}
.tabs .tab.active,.tabs button.on{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;
}
.panel.active{display:block}

/* 主题选择 */
.theme-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:13px;transition:.18s;
}
.theme-chip:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.theme-chip.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}

/* 头像管理 */
.avatar.big{width:98px;height:98px;font-size:28px}
.avatar-row{display:flex;gap:28px;flex-wrap:wrap}
.avatar-box{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.avatar-box .pname{font-size:13.5px;color:var(--muted)}

/* 相册选择态：默认谁都不显示，长按进「选择模式」才出来（手机上根本没有 hover，以前那套
   「悬停才显形」等于永远看不见；平时不占地方也是用户明确要的）*/
.photo-grid.small{grid-template-columns:repeat(auto-fill,minmax(122px,1fr))}
.photo .pick{
  position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:9px;
  background:var(--card);border:1.5px solid rgba(0,0,0,.22);
  box-shadow:0 2px 7px rgba(0,0,0,.28);
  opacity:0;transform:scale(.7);transition:.16s;cursor:pointer;pointer-events:none;
}
body.selecting .photo .pick{opacity:1;transform:none;pointer-events:auto}
.photo.pressing img{transform:scale(.95)}
.photo.picked{outline:3px solid var(--accent);outline-offset:-3px}
.photo.picked .pick{background:var(--accent);border-color:var(--accent)}
.photo.picked .pick::after{
  content:"✓";color:#fff;font-size:15px;line-height:23px;display:block;text-align:center;font-weight:700;
}
/* 长按的默认动作（浏览器「保存图片」菜单 / 拖动图片）让位给我们的长按 */
.photo img{-webkit-touch-callout:none;user-select:none;-webkit-user-drag:none}

/* 选择模式的操作条：原来吸在底部、被三键导航挤着，2026-10-02 移到顶部（吸在顶栏下面） */
.selbar{
  position:sticky;z-index:70;
  top:calc(var(--ab-h,0px) + 6px);
  display:none;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 10px;padding:9px 12px;border-radius:13px;
  background:color-mix(in srgb,var(--card) 97%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  box-shadow:0 10px 24px -8px rgba(28,20,32,.35);
}
.selbar.on{display:flex}
.selbar .sb-info{font-size:13.5px;color:var(--muted)}
.selbar .sb-info b{color:var(--accent);font-size:15px}
.selbar .sb-end{margin-left:auto;display:flex;gap:8px}
.btn.danger.solid{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}
.btn.danger.solid:hover{filter:brightness(1.06);color:#fff}
.btn.danger.solid[disabled]{opacity:.5}
.dim{opacity:.72;margin-left:6px;font-size:11px}

/* 上传区（网盘式细条，不占地方；加号收成小圆钮） */
.upload-card{
  cursor:default;padding:9px 12px;margin:10px 0;border-radius:12px;border-style:dashed;
  border-color:color-mix(in srgb,var(--accent) 24%,var(--line));
  background:color-mix(in srgb,var(--accent) 4%,var(--glass));box-shadow:none;
}
.upload-card.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--glass))}
.up-inner{display:flex;align-items:center;gap:9px}
.up-icon{
  width:23px;height:23px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:600;line-height:1;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--glass));
}
.up-text{
  flex:1;min-width:0;font-size:12.5px;color:var(--muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}

/* 灯箱内层 */
.lb-inner{position:relative;width:100%;height:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:center}
.lb-stage{display:flex;align-items:center;justify-content:center}

/* ---------- 登录 / 创建账号 ---------- */
.auth-body{
  display:flex;align-items:center;justify-content:center;min-height:100vh;padding:28px 18px;
}
.auth-box{
  position:relative;z-index:1;width:100%;max-width:384px;
  background:color-mix(in srgb,var(--glass) 93%,transparent);
  border:1px solid var(--line);border-radius:24px;
  padding:34px 26px 24px;text-align:center;
  box-shadow:0 24px 60px rgba(28,20,32,.18),0 2px 10px rgba(28,20,32,.06);
  animation:authIn .42s cubic-bezier(.22,.68,.32,1) both;
}
@keyframes authIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.auth-logo{
  width:56px;height:56px;border-radius:19px;margin:0 auto 15px;display:flex;align-items:center;
  justify-content:center;font-size:24px;line-height:1;color:#fff;
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--glass)));
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 34%,transparent);
}
.auth-box h1{font-size:19px;font-weight:700;line-height:1.35;margin:0 0 7px;letter-spacing:.2px}
.auth-sub{margin:0 0 22px;font-size:12.5px;color:var(--muted);line-height:1.6}

.auth-fields{display:grid;gap:12px;margin-bottom:18px}
.auth-field{
  display:flex;align-items:center;gap:10px;height:50px;padding:0 15px;
  background:color-mix(in srgb,var(--accent) 5%,var(--glass));
  border:1px solid color-mix(in srgb,var(--accent) 10%,var(--line));
  border-radius:14px;transition:border-color .16s,background .16s,box-shadow .16s;
}
.auth-field:focus-within{
  background:var(--card);border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}
.auth-field .auth-ico{flex:0 0 auto;display:flex;color:var(--muted);transition:color .16s}
.auth-field:focus-within .auth-ico{color:var(--accent)}
.auth-field .auth-ico svg{width:17px;height:17px;fill:currentColor;display:block}
/* 手机号/密码/下拉在框内一律同宽同高，去掉各自默认样式 */
.auth-box .auth-field input,
.auth-box .auth-field select{
  flex:1 1 auto;min-width:0;width:100%;height:100%;margin:0;padding:0;
  border:none;background:none;border-radius:0;box-shadow:none;
  font-size:15.5px;text-align:left;letter-spacing:.4px;
}
.auth-box .auth-field input:focus{box-shadow:none;border:none;outline:none}
.auth-box .auth-field input::placeholder{color:#b7adba;letter-spacing:.4px;font-size:14.5px}
.auth-box .auth-field select{appearance:auto;cursor:pointer;padding-right:2px}

.auth-submit{
  width:100%;height:50px;border:none;border-radius:999px;cursor:pointer;
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 76%,var(--glass)));
  color:var(--accent-ink);font-weight:600;font-size:15.5px;letter-spacing:1px;
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 28%,transparent);
  transition:transform .14s,box-shadow .16s,filter .16s;
}
.auth-submit:hover{filter:brightness(1.05);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 34%,transparent)}
.auth-submit:active{transform:translateY(1px)}

.auth-err{margin-top:12px;font-size:12.5px;color:var(--danger);line-height:1.5}
.auth-err:not(:empty){padding:9px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--danger) 9%,transparent)}
.auth-hint{margin:15px 0 0;font-size:11.8px;color:var(--muted);line-height:1.6}
.auth-who{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.auth-who span{
  font-size:12px;color:var(--muted);padding:4px 10px;border-radius:99px;
  background:var(--line-soft);
}
@media (max-width:400px){
  .auth-box{padding:28px 20px 22px;border-radius:20px}
  .auth-box h1{font-size:17.5px}
}

@media (max-width:640px){
  .anniv .ops{flex-direction:column;gap:4px}
  .up-inner{gap:8px}
  .upload-card{padding:8px 10px;border-radius:11px;margin:8px 0}
  .up-icon{width:21px;height:21px;font-size:12px;border-radius:50%}
  .up-text{font-size:12px;gap:6px}
  .up-text .note{font-size:10.5px}
  .avatar-row{gap:18px}
}


/* ---- 日记 ---- */
.diary-list{display:grid;gap:12px}
.diary{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:15px 17px;box-shadow:var(--shadow);
}
.diary .diary-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.diary .diary-head strong{font-size:15px;letter-spacing:.2px}
.diary-mood{font-size:15px}
.diary-content{
  margin-top:8px;font-size:13.8px;line-height:1.75;color:var(--text);
  white-space:pre-wrap;word-break:break-word;
}
.diary .diary-ops{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.diary .diary-ops .btn{margin-left:auto}
.diary .diary-ops .btn + .btn{margin-left:0}
.diary-content.clamp{max-height:96px;overflow:hidden;mask-image:linear-gradient(#000 62%,transparent)}

/* ---- 基本信息表 ---- */
.basic-table td.k{color:var(--muted);font-size:12.5px;width:34%}
.basic-table td.blank{color:#c6c9d2}
.basic-table tbody tr:last-child td{border-bottom:none}
.basic-table tbody tr.group-row td{
  background:color-mix(in srgb,var(--accent) 5%,var(--glass));
  color:var(--accent);font-size:12px;font-weight:600;letter-spacing:1.2px;
  padding:6px 12px;border-bottom:1px solid var(--line);
}
.basic-table tbody tr.group-row td:first-child{border-top-left-radius:9px}
.basic-table tbody tr.group-row td:last-child{border-top-right-radius:9px}

/* ---- 卡片头右侧链接 ---- */
.card-head .sub a{color:var(--muted);padding:2px 7px;border-radius:7px}
.card-head .sub a:hover{color:var(--accent);background:var(--line-soft)}
.card-head .sub a.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-weight:600}

/* ============================================================
   心动值 / 心情打卡 / 心愿清单 / 悄悄话
   ============================================================ */
.big-index{color:var(--accent);font-size:17px;margin:0 2px}

/* 双人数值面板 */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.board-col{padding:18px}
.bc-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bc-name{font-weight:700;font-size:15px}
.bc-index{margin-left:auto;text-align:right;line-height:1.15}
.bc-index b{font-size:24px;color:var(--accent);font-variant-numeric:tabular-nums}
.bc-index small{display:block;font-size:11px;color:var(--muted)}
.bc-tip{margin-top:12px;font-size:11.5px}

.meter{margin-bottom:12px}
.m-top{display:flex;align-items:baseline;gap:8px;font-size:13px;margin-bottom:5px}
.m-label{color:var(--text)}
.m-val{margin-left:auto;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.meter.bad .m-val{color:#d2555a}
.m-bar{height:9px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.m-bar i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,var(--glass)),var(--accent));
  transition:width .22s ease;
}
.meter.bad .m-bar i{background:linear-gradient(90deg,#f0a3a6,#d2555a)}

/* 滑块 */
.meter input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:18px;margin:4px 0 0;
  background:transparent;cursor:pointer;
}
.meter input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:99px;background:color-mix(in srgb,var(--accent) 22%,var(--line-soft));
}
.meter input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7px;
  border-radius:50%;background:var(--accent);border:3px solid #fff;
  box-shadow:0 1px 6px rgba(0,0,0,.22);
}
.meter.bad input[type=range]::-webkit-slider-thumb{background:#d2555a}
.meter input[type=range]::-moz-range-track{
  height:4px;border-radius:99px;background:color-mix(in srgb,var(--accent) 22%,var(--line-soft));
}
.meter input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid #fff;
}



/* 悄悄话 */
.note-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.note-form input[type=text]{flex:1;min-width:180px}
.note-list{display:grid;gap:8px}
.note-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);
}
.ni-text{flex:1;min-width:0;font-size:13.5px;word-break:break-word}
.ni-time{font-size:11.5px;color:var(--muted);white-space:nowrap}
.ni-del{
  border:none;background:transparent;color:var(--muted);font-size:18px;line-height:1;
  cursor:pointer;padding:0 4px;
}
.ni-del:hover{color:#d2555a}

/* 心愿清单 */
.wish-form{display:flex;gap:8px;flex-wrap:wrap}
.wish-form input[type=text]{flex:1;min-width:180px}
.wish-progress{
  height:9px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-top:16px;
}
.wish-progress i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,var(--glass)),var(--accent));
  transition:width .3s;
}
.wish-list{display:grid;gap:8px;margin-top:16px}
.wish-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;
  border:1px solid var(--line);background:var(--card);
}
.wish-item.done{opacity:.62;background:var(--line-soft)}
.wish-check{
  width:24px;height:24px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--line);
  background:var(--card);cursor:pointer;color:#fff;font-size:14px;line-height:1;transition:.18s;
}
.wish-check:hover{border-color:var(--accent)}
.wish-item.done .wish-check{background:var(--accent);border-color:var(--accent)}
.wi-body{flex:1;min-width:0}
.wi-title{font-size:14.5px;font-weight:600;word-break:break-word}
.wish-item.done .wi-title{text-decoration:line-through}
.wi-del{
  border:none;background:transparent;color:var(--muted);font-size:19px;line-height:1;
  cursor:pointer;padding:0 4px;
}
.wi-del:hover{color:#d2555a}

/* 首页心愿清单卡 */
.wish-card{margin-top:22px;scroll-margin-top:80px}
.wish-card .card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}

/* 首页心动卡 */
.heart-card{background:linear-gradient(135deg,var(--glass),color-mix(in srgb,var(--accent) 6%,var(--glass)))}
.hc-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.hc-person{display:flex;align-items:center;gap:12px}
.hc-info{flex:1;min-width:0}
.hc-name{font-weight:650;font-size:14px}
.hc-index{text-align:right;line-height:1.1}
.hc-index b{font-size:22px;color:var(--accent);font-variant-numeric:tabular-nums}
.hc-index small{display:block;font-size:10.5px;color:var(--muted)}

@media (max-width:640px){
}

/* ---------- 手机状态页（电量 / 位置 / 步数 / 常用 App） ---------- */
.dev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.dev-card{padding:16px 18px}
.dev-card.me{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 30%,transparent)}
.dev-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.dev-name{font-weight:600}
.dev-pill{margin-left:auto;font-size:12px;padding:3px 9px;border-radius:999px;
  background:var(--line-soft);color:var(--muted);white-space:nowrap}
.dev-pill.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.dev-batt{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.dev-bar{flex:1;height:9px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.dev-bar i{display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .4s ease}
.dev-bar i.low{background:var(--danger)}
.dev-batt-num{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dev-list{margin:0;display:grid;gap:7px;font-size:13.5px}
.dev-list>div{display:flex;gap:10px}
.dev-list dt{flex:0 0 64px;margin:0;color:var(--muted)}
.dev-list dd{margin:0;flex:1;word-break:break-word}
.dev-usage{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.dev-usage-row{display:flex;gap:10px;font-size:13.5px;padding:3px 0}
.dev-usage-row b{margin-left:auto;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.dev-usage-row .bar{flex:0 0 52px;align-self:center;height:5px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.dev-usage-row .bar i{display:block;height:100%;background:var(--accent);border-radius:999px;opacity:.75}

/* ---------- 迷你地图（高德瓦片，无 key） ---------- */
.mini-map{position:relative;overflow:hidden;border-radius:14px;background:#e9edf0;
  box-shadow:inset 0 0 0 1px var(--line)}
.mini-map img{position:absolute;width:256px;height:256px;max-width:none;user-select:none;-webkit-user-drag:none}
.mini-map .mm-pin{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.28);z-index:3}
.mini-map .mm-pin::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent) 55%,transparent);animation:mm-pulse 2.4s ease-out infinite}
@keyframes mm-pulse{0%{transform:scale(.55);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
.mini-map .mm-acc{position:absolute;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);z-index:2;pointer-events:none}
.mini-map .mm-attr{position:absolute;right:4px;bottom:2px;z-index:4;font-size:10px;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.55);pointer-events:none}
.mini-map.mm-fail{display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--muted)}

/* 地点名称（逆地理） */
.place-line { display:flex; gap:6px; align-items:baseline; margin:0 0 8px; font-size:15px; line-height:1.4 }
.place-line .pin { flex:none }
.place-sub { display:block; margin:0 0 10px; color:var(--muted); font-size:12.5px }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--muted) }
.btn.ghost:hover { color:var(--accent); border-color:var(--accent) }

/* 禁止捏合缩放（App 里不许缩放；老 WebView 不认 user-scalable=no 时的兜底） */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ==========================================================================
   App 外壳：顶部标题栏 + 三键底部导航（对话 / 首页 / 我的）
   ========================================================================== */
.appbar{
  position:sticky;top:0;z-index:45;
  padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb,var(--glass) 74%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 5%,var(--line-soft));
}
.appbar-inner{
  max-width:1120px;margin:0 auto;padding:8px 14px;
  display:flex;align-items:center;gap:8px;
}
.ab-left{flex:0 0 40px;display:flex;align-items:center}
.ab-heart{width:30px;height:30px;display:block}
.ab-heart svg{
  width:30px;height:30px;overflow:visible;
  filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--accent) 38%,transparent));
  transition:transform .25s;
}
.ab-heart:hover svg{transform:scale(1.08)}
.ab-back{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;transition:.18s;
}
.ab-back:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--glass))}
.ab-back svg{width:20px;height:20px;color:var(--accent)}
.ab-title{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.3}
.ab-t1{font-size:15px;font-weight:700;letter-spacing:.3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-t2{font-size:11px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-right{flex:0 0 40px;display:flex;justify-content:flex-end}
.ab-ava{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 62%,var(--glass)));
  color:#fff;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 32%,transparent);
}

body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
/* 2026-10-03：底部留白收紧（原来 28px，加上页脚自身 44+44 太多；body 那 78px 已经给底部导航留够了） */
.wrap{padding-bottom:6px}
.appbar + .wrap{padding-top:4px}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--glass) 84%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-top:1px solid color-mix(in srgb,var(--accent) 6%,var(--line-soft));
  box-shadow:0 -10px 34px -18px rgba(28,20,32,.30);
}
.tabbar-inner{
  max-width:560px;margin:0 auto;padding:5px 8px 6px;
  display:flex;align-items:flex-end;justify-content:space-around;
}
.tabbar .tab{
  flex:1;position:relative;padding:6px 0 3px;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11.5px;color:var(--muted);transition:color .18s,background .18s;
}
.tabbar .tab svg{width:24px;height:24px;display:block}
.tabbar .tab.on{color:var(--accent);font-weight:650}
.tabbar .tab:active{background:var(--line-soft)}
.tabbar .tab-main .tab-orb{
  width:46px;height:46px;border-radius:50%;margin-top:-17px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 20%,transparent);
  transition:background .2s,transform .2s;
}
.tabbar .tab-main .tab-orb svg{width:24px;height:24px;color:var(--muted)}
.tabbar .tab-main.on .tab-orb{
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 58%,var(--glass)));
  border-color:transparent;transform:scale(1.04);
}
.tabbar .tab-main.on .tab-orb svg{color:#fff}
@media (min-width:760px){
  .tabbar{
    left:50%;right:auto;transform:translateX(-50%);width:560px;
    border:1px solid var(--line-soft);border-bottom:0;border-radius:22px 22px 0 0;
  }
}

/* ---------- 对话（动态流） ---------- */
.chat-head{text-align:center;padding:18px 18px 16px}
.ch-couple{display:flex;align-items:center;justify-content:center;gap:12px}
.ch-ava{
  width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:color-mix(in srgb,var(--accent) 12%,var(--glass));color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;
  border:2px solid var(--card);box-shadow:0 6px 18px rgba(28,20,32,.18);
}
.ch-ava img{width:100%;height:100%;object-fit:cover}
.ch-heart{color:var(--accent);font-size:17px;animation:chPulse 1.8s ease-in-out infinite}
@keyframes chPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.ch-tip{font-size:12.5px;color:var(--muted);margin-top:10px}

.quick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 0}
.quick{
  background:var(--card);border:1px solid var(--line);border-radius:15px;
  padding:11px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:12px;color:var(--muted);box-shadow:var(--shadow);transition:.18s;
}
.quick:hover{transform:translateY(-2px);color:var(--accent)}
.q-ic{font-size:19px;line-height:1}

.note-send{display:flex;gap:8px;align-items:center;padding:12px;margin:12px 0}
.note-send input{
  flex:1;min-width:0;height:42px;border-radius:13px;font-size:14px;
  border:1px solid var(--line);background:var(--line-soft);padding:0 13px;transition:.18s;
}
.note-send input:focus{
  outline:none;border-color:var(--accent);background:var(--card);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}

.feed{margin-top:4px}
.feed-day{display:flex;align-items:center;gap:10px;margin:18px 2px 9px;font-size:12px;color:var(--muted)}
.feed-day::after{content:"";flex:1;height:1px;background:var(--line)}
.feed-day span{
  background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent);
  padding:2px 11px;border-radius:99px;font-weight:600;white-space:nowrap;
}
.fi{display:flex;gap:9px;align-items:flex-start;margin-bottom:11px}
.fi-ava{
  width:36px;height:36px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:color-mix(in srgb,var(--accent) 14%,var(--glass));color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;
  border:2px solid var(--card);box-shadow:0 3px 10px rgba(28,20,32,.16);
}
.fi-ava img{width:100%;height:100%;object-fit:cover}
.fi-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fi-top{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.fi-top b{color:var(--text);font-size:12.5px;font-weight:650}
.fi-top i{font-style:normal}
.fi-bubble{
  display:block;background:var(--card);border:1px solid var(--line);
  border-radius:15px;padding:10px 12px;box-shadow:var(--shadow);transition:.18s;
}
.fi:hover .fi-bubble{border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}
.fi-bubble.kind-note{
  background:color-mix(in srgb,var(--accent) 8%,var(--glass));
  border-color:color-mix(in srgb,var(--accent) 20%,var(--line));
}
.fi-txt{display:block;font-size:14px;word-break:break-word}
.fi-desc{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.fi-quote{display:block;font-size:14px;font-style:italic;word-break:break-word}
.fi-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:7px;max-width:280px}
.fi-photos img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px}
.fi-more{
  display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  border-radius:9px;background:var(--line-soft);color:var(--muted);font-size:12.5px;
}
.empty-card{text-align:center;color:var(--muted);font-size:13.5px}

/* ---------- 我的 ---------- */
.me-hero{display:flex;align-items:center;gap:18px;padding:20px 18px}
.me-ava-box{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px}
.me-id{flex:1;min-width:0}
.me-name{font-size:19px;font-weight:700;letter-spacing:.3px}
.me-phone{font-size:12.5px;color:var(--muted);margin-top:2px}
.me-stats{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--muted)}
.me-stats b{color:var(--accent);font-size:14.5px;margin-right:3px}
.me-group{margin-top:16px}
.me-group-t{font-size:12.5px;color:var(--muted);margin:0 4px 7px}
.me-list{padding:4px 0;overflow:hidden}
.mi{display:flex;align-items:center;gap:11px;padding:12px 16px;font-size:14.5px;
    border-bottom:1px solid var(--line-soft)}
.mi:last-child{border-bottom:0}
a.mi{transition:background .16s}
a.mi:active{background:var(--line-soft)}
.mi-ic{flex:0 0 auto;width:22px;text-align:center;font-size:16px;line-height:1}
.mi-t{flex:1;min-width:0}
.mi-v{
  color:var(--muted);font-size:12.5px;text-align:right;max-width:46%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mi-go{font-size:20px;line-height:1;color:var(--line)}
a.mi .mi-go{color:color-mix(in srgb,var(--accent) 42%,var(--line))}
.mi-input{
  flex:1;min-width:0;height:37px;border-radius:11px;font-size:14px;
  border:1px solid var(--line);background:var(--line-soft);padding:0 11px;transition:.18s;
}
.mi-input:focus{
  outline:none;border-color:var(--accent);background:var(--card);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}
.row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.row-head h3{margin:0;font-size:16px;letter-spacing:.4px}
.block-btn{display:flex;justify-content:center;width:100%;margin:22px 0 6px;padding:12px}
.theme-chip .sw{width:13px;height:13px;border-radius:50%;display:inline-block;flex:0 0 auto}

/* 小标题右侧的「全部 →」 */
.section-title.with-link{display:flex;align-items:center;justify-content:space-between;gap:10px}
.section-title.with-link a{
  font-size:12px;letter-spacing:0;text-transform:none;color:var(--accent);font-weight:600;
}

/* ---------- 「我的」页：折叠分类（2026-10-01） ---------- */
.fold{display:block}
.fold-h{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:13px 15px;border-radius:16px;background:var(--card);
  border:1px solid color-mix(in srgb,var(--accent) 10%,var(--line));
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  -webkit-tap-highlight-color:transparent;user-select:none;transition:background .16s;
}
.fold-h::-webkit-details-marker{display:none}
.fold-h::marker{content:''}
.fold-h:active{background:var(--line-soft)}
.fold-ic{flex:0 0 auto;width:24px;text-align:center;font-size:16px;line-height:1}
.fold-t{font-size:14.5px;font-weight:600;color:var(--text);letter-spacing:.2px}
.fold-v{
  margin-left:auto;font-size:12px;color:var(--muted);max-width:50%;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fold-go{
  flex:0 0 auto;font-size:19px;line-height:1;transform:rotate(90deg);
  color:color-mix(in srgb,var(--accent) 40%,var(--line));transition:transform .18s ease;
}
.fold[open] .fold-h{background:var(--line-soft)}
.fold[open] .fold-go{transform:rotate(-90deg)}
.fold > .card{margin:8px 0 0}
.fold > .card.me-list{padding:4px 0}


/* ==========================================================================
   质感细节（2026-10-01 视觉升级）
   ========================================================================== */
*{-webkit-tap-highlight-color:transparent}
::selection{background:color-mix(in srgb,var(--accent) 20%,transparent)}

/* 标题与数字：更利落的字距 + 等宽数字 */
h1,h2,h3,.ab-t1,.me-name,.brand .name{letter-spacing:.2px;font-feature-settings:"palt" 1}
.me-stats b,.stat b,.mi-v b,strong b,.num{font-variant-numeric:tabular-nums}

/* 细滚动条（桌面） */
@media (min-width:760px){
  *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 22%,transparent) transparent}
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--accent) 20%,transparent);border-radius:99px;
    border:2px solid transparent;background-clip:content-box;
  }
  ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 34%,transparent);background-clip:content-box}
  ::-webkit-scrollbar-track{background:transparent}
}

/* 键盘/按钮焦点环，统一成柔和的一圈 */
:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}

/* 卡片内的分组标题线更淡 */
.group-title::after{background:linear-gradient(90deg,var(--line),transparent)}

/* 分隔线更细更淡 */
.mi{border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent)}

/* 我的页折叠头：白卡片 + 细边，展开时轻微下沉 */
.fold-h{
  background:var(--card);
  border-color:color-mix(in srgb,var(--accent) 7%,var(--line));
  box-shadow:0 1px 2px rgba(28,20,32,.03),0 10px 24px -20px rgba(28,20,32,.35);
}
.fold[open] .fold-h{background:color-mix(in srgb,var(--accent) 4%,var(--card))}

/* 顶部分类小标题：字距更高级 */
.section-title{letter-spacing:2.2px;font-weight:600;color:color-mix(in srgb,var(--muted) 88%,var(--accent))}

/* 头像/爱心：极轻描边，避免灰底上发灰 */
.avatar{border:1px solid color-mix(in srgb,var(--accent) 10%,var(--line))}

/* ==========================================================================
   心愿列表
   ========================================================================== */
.wi-ops{display:flex;align-items:center;gap:6px;flex:0 0 auto}

/* ==========================================================================
   日记评论
   ========================================================================== */
.dc-wrap{margin-top:10px;border-top:1px dashed var(--line);padding-top:9px}
.dc-head{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.dc-count{font-weight:600}
.dc-toggle{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:999px;
  font-size:12px;padding:3px 11px;cursor:pointer;transition:.18s}
.dc-toggle:hover{border-color:var(--accent);color:var(--accent)}
.dc-list{margin-top:9px;display:grid;gap:7px}
.dc-item{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.dc-who{font-weight:600;flex:0 0 auto;color:var(--accent)}
.dc-text{flex:1;min-width:0;word-break:break-word}
.dc-ago{font-size:11px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.dc-del{border:0;background:none;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:0 2px}
.dc-del:hover{color:var(--danger)}
.dc-send{display:flex;gap:8px;margin-top:9px}
.dc-send input{flex:1;min-width:0}

/* ---------- 动态流：卡片下面的评论（说点什么） ---------- */
.fc-dc{margin-top:6px;padding-top:8px;border-top:1px dashed var(--line-soft)}
.fc-dc-list{display:block}
.fc-dc-item{display:flex;align-items:baseline;gap:6px;padding:5px 2px;font-size:13px;line-height:1.5}
.fc-dc-item + .fc-dc-item{border-top:1px solid var(--line-soft)}
.fc-dc-who{color:var(--accent);font-weight:600;flex:0 0 auto}
.fc-dc-text{flex:1 1 auto;min-width:0;color:var(--text);word-break:break-word}
.fc-dc-ago{color:var(--muted);font-size:11.5px;flex:0 0 auto}
.fc-dc-del{border:0;background:transparent;color:var(--muted);font-size:15px;line-height:1;
  padding:2px 4px;cursor:pointer;flex:0 0 auto}
.fc-dc-del:hover{color:var(--danger)}
.fc-dc-send{display:flex;gap:8px;margin-top:8px}
.fc-dc-send input{flex:1 1 auto;min-width:0}
.fc-dc-send .btn{flex:0 0 auto}

/* 心动值已下线，这几条样式留着给旧书签兜底 */
@media print{.fc-dc-send{display:none}}

/* ==========================================================================
   日记里的照片（2026-10-02）：发布页选图 + 日记卡照片墙 + 待传托盘
   ========================================================================== */
.diary-photos{display:grid;gap:6px;margin-top:10px}
.diary-photos.n1{grid-template-columns:minmax(0,220px)}
.diary-photos.n2{grid-template-columns:repeat(2,minmax(0,170px))}
.diary-photos.n3{grid-template-columns:repeat(3,minmax(0,150px))}
.dphoto{position:relative;margin:0;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:var(--line-soft);cursor:zoom-in}
.dphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s var(--ease)}
.dphoto:hover img{transform:scale(1.06)}
.dp-del{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(0,0,0,.52);color:#fff;font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.dp-del:hover{background:var(--danger)}
.dp-tray{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.dp-tray:empty{display:none}
.dp-thumb{position:relative;width:66px;height:66px;border-radius:9px;overflow:hidden;background:var(--line-soft)}
.dp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dp-x{
  position:absolute;top:2px;right:2px;width:19px;height:19px;border-radius:50%;border:0;
  background:rgba(0,0,0,.52);color:#fff;font-size:12px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.dp-x:hover{background:var(--danger)}
.dp-ops{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* 相册：按上传人分档的小胶囊 + 「选择」按钮 */
.alb-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 8px}
.alb-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 10%,var(--line));background:var(--card);
  color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s;
}
.alb-chip:hover{color:var(--text)}
.alb-chip.on{
  background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line));
}
.alb-chip b{font-size:11.5px;font-weight:700;color:var(--accent);opacity:.9}
.alb-chips .sp{margin-left:auto}

/* --------------------------------------------------------------------------
   日记单页（/diary/<id>）— 2026-10-03 用户：「日记要可以单页显示」
   -------------------------------------------------------------------------- */
.dview{padding:17px 18px 15px}
.dv-title{margin:9px 0 0;font-size:19px;line-height:1.45;letter-spacing:.2px}
.dv-content{margin-top:9px;font-size:14.6px;line-height:1.9}
.dv-meta{display:block;margin-top:12px}
.dview .diary-ops{margin-top:13px}
.dview .diary-ops .btn{margin-left:0}
.dview .diary-ops .btn.ghost{margin-left:auto;text-decoration:none}
.dv-comments{margin-top:12px}
.dv-comments .dc-list{margin-top:4px}
.dv-empty{margin-top:8px}
.dv-nav{display:flex;gap:10px;margin-top:12px}
.dv-nav-item{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;text-decoration:none;color:var(--text);box-shadow:var(--shadow);
  transition:border-color .16s var(--ease),transform .16s var(--ease);
}
.dv-nav-item.right{text-align:right;align-items:flex-end}
.dv-nav-item:hover{border-color:var(--accent)}
.dv-nav-item:active{transform:scale(.985)}
.dv-nav-k{font-size:11.5px;color:var(--muted)}
.dv-nav-t{font-size:13.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 日记列表里：点标题/正文进单页 */
.d-open{display:block;color:inherit;text-decoration:none;border-radius:10px}
.d-open:hover .diary-head strong,.d-open:hover .dv-title{color:var(--accent)}
.d-open .diary-content{margin-top:8px}
.d-single{font-size:12.5px;color:var(--accent);text-decoration:none;white-space:nowrap}
.d-single:hover{text-decoration:underline}

/* ---- 谁看过（说说）---- */
.d-views{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:4px;line-height:1.4}
.d-views:not(:empty){cursor:default}
.dview .d-views{margin-top:6px;font-size:12.5px}