/* ===========================================================
   芳芳 & 张张 · Neon Valley  —— 霓虹星露谷像素风
   =========================================================== */

:root{
  --bg:#0b0518;
  --bg2:#150a2e;
  --panel:#1a0f3c;
  --panel-2:#221452;
  --panel-3:#2c1a63;
  --line:#3d2780;
  --ink:#f6efff;
  --dim:#a495d1;
  --pink:#ff5ea8;
  --pink-d:#c9297a;
  --cyan:#4ff0e0;
  --cyan-d:#1a9e96;
  --lime:#c6ff5e;
  --gold:#ffd166;
  --violet:#a06bff;
  --fang:#ff5ea8;
  --zhang:#4ff0e0;
  --pix-font:"Press Start 2P", "Courier New", monospace;
  --num-font:"Press Start 2P", ui-monospace, monospace;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* 保证 hidden 属性永远生效（.stage 的 display:flex 会盖掉浏览器默认值） */
[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 50% -10%, #33165f 0%, transparent 55%),
    radial-gradient(circle at 15% 100%, #2a0f45 0%, transparent 50%),
    var(--bg);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* 桌面端像素网格背景 */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(120,80,220,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,80,220,.07) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}

.stage{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }

.phone{
  position:relative;
  width:min(430px, 100vw);
  height:min(920px, 100dvh);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#150a2e 0%, #0f0722 55%, #120826 100%);
  overflow:hidden;
  isolation:isolate;
}

@media (min-width:520px){
  .phone{
    border:3px solid #2b1858;
    box-shadow:
      0 0 0 3px #08040f,
      0 0 42px rgba(160,107,255,.35),
      0 0 90px rgba(255,94,168,.16),
      inset 0 0 60px rgba(80,40,160,.25);
  }
}

/* 扫描线 & 星点 */
.scanlines{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:multiply;
  opacity:.75;
}
.stars{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 18% 12%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(2px 2px at 72% 8%, rgba(198,255,94,.9), transparent 60%),
    radial-gradient(2px 2px at 42% 26%, rgba(79,240,224,.8), transparent 60%),
    radial-gradient(2px 2px at 86% 32%, rgba(255,94,168,.85), transparent 60%),
    radial-gradient(2px 2px at 12% 44%, rgba(255,209,102,.7), transparent 60%),
    radial-gradient(2px 2px at 62% 52%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px at 32% 68%, rgba(160,107,255,.75), transparent 60%),
    radial-gradient(2px 2px at 78% 76%, rgba(255,255,255,.5), transparent 60%);
  opacity:.55;
  animation:twinkle 4s steps(4) infinite alternate;
}
@keyframes twinkle{ from{opacity:.3} to{opacity:.75} }

/* ============ 顶栏 ============ */
.topbar{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:16px 16px 12px;
  border-bottom:2px solid rgba(120,80,220,.28);
  background:linear-gradient(180deg, rgba(38,18,78,.85), rgba(21,10,46,.2));
  backdrop-filter:blur(2px);
}
.brand-line{ display:flex; align-items:center; gap:8px; }
.heart{
  font-size:15px; color:var(--pink);
  text-shadow:0 0 8px var(--pink), 0 0 18px rgba(255,94,168,.7);
  animation:beat 1.4s steps(2) infinite;
}
@keyframes beat{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.22)} }

.brand h1{
  margin:0; font-size:19px; letter-spacing:2px;
  font-weight:800;
  text-shadow:0 0 10px rgba(255,94,168,.55), 0 2px 0 #0a0418, 0 0 26px rgba(160,107,255,.5);
}
.brand h1 em{ color:var(--cyan); font-style:normal; text-shadow:0 0 10px rgba(79,240,224,.8); }
.brand-sub{
  margin:5px 0 0; font-size:9px; letter-spacing:1.4px;
  color:var(--dim); font-family:var(--pix-font);
  text-shadow:0 0 6px rgba(160,107,255,.6);
}
.daycount{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 10px;
  background:#1d1046;
  border:2px solid var(--line);
  box-shadow:0 0 0 2px #08040f, 0 0 14px rgba(79,240,224,.28);
  color:var(--cyan);
  cursor:pointer;
  font-family:inherit;
}
.daycount b{ font-family:var(--num-font); font-size:13px; line-height:1; text-shadow:0 0 8px rgba(79,240,224,.9); }
.daycount small{ font-family:var(--pix-font); font-size:6px; color:#7f6fb0; letter-spacing:1px; }

/* ============ 内容区 ============ */
.view{
  position:relative; z-index:2;
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:14px 14px 22px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.view::-webkit-scrollbar{ width:4px; }
.view::-webkit-scrollbar-thumb{ background:#432a86; }

/* ============ 底部 TAB ============ */
.tabbar{
  position:relative; z-index:4;
  display:grid; grid-template-columns:repeat(6,1fr);
  border-top:2px solid rgba(120,80,220,.35);
  background:linear-gradient(180deg, rgba(24,12,52,.96), rgba(12,6,26,.99));
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  gap:2px;
}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:6px 2px;
  background:none; border:0; cursor:pointer;
  color:#7b6aa8;
  font-family:inherit; font-size:11px; letter-spacing:1px;
  transition:color .12s steps(2);
}
.tab svg{ width:22px; height:22px; display:block; }
.tab.on{ color:#fff; }
.tab.on svg{ color:var(--pink); filter:drop-shadow(0 0 6px rgba(255,94,168,.95)); }
.tab.on span{ color:var(--pink); text-shadow:0 0 8px rgba(255,94,168,.8); }
.tab:nth-child(2).on svg,.tab:nth-child(2).on span{ color:var(--cyan); filter:drop-shadow(0 0 6px rgba(79,240,224,.95)); text-shadow:0 0 8px rgba(79,240,224,.8); }
.tab:nth-child(3).on svg,.tab:nth-child(3).on span{ color:var(--lime); filter:drop-shadow(0 0 6px rgba(198,255,94,.9)); text-shadow:0 0 8px rgba(198,255,94,.7); }
.tab:nth-child(4).on svg,.tab:nth-child(4).on span{ color:#ffab5e; filter:drop-shadow(0 0 6px rgba(255,171,94,.95)); text-shadow:0 0 8px rgba(255,171,94,.8); }
.tab:nth-child(5).on svg,.tab:nth-child(5).on span{ color:var(--violet); filter:drop-shadow(0 0 6px rgba(160,107,255,.95)); text-shadow:0 0 8px rgba(160,107,255,.8); }
.tab:nth-child(6).on svg,.tab:nth-child(6).on span{ color:var(--gold); filter:drop-shadow(0 0 6px rgba(255,209,102,.9)); text-shadow:0 0 8px rgba(255,209,102,.7); }

/* ============ 通用组件 ============ */
.card{
  position:relative;
  background:linear-gradient(180deg, var(--panel) 0%, #150b34 100%);
  border:2px solid var(--line);
  box-shadow:0 0 0 2px #08040f, 0 6px 0 rgba(6,3,14,.6), inset 0 0 24px rgba(120,70,220,.12);
  padding:14px;
  margin-bottom:14px;
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 35%);
}

.card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.card-head h2{
  margin:0; font-size:14px; letter-spacing:1.6px; font-weight:800;
  text-shadow:0 0 10px rgba(160,107,255,.7), 0 2px 0 #0a0418;
}
.hint{ font-size:10px; color:var(--dim); letter-spacing:1px; font-family:var(--pix-font); }

.btn{
  font-family:inherit; font-size:13px; letter-spacing:1px; font-weight:700;
  color:var(--ink);
  background:linear-gradient(180deg,#3a2072,#251146);
  border:2px solid #4a2d90;
  padding:11px 16px;
  box-shadow:0 0 0 2px #08040f, 0 4px 0 #0a0418, 0 0 16px rgba(160,107,255,.3);
  cursor:pointer;
  transition:transform .06s steps(2);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}
.btn:active{ transform:translateY(3px); box-shadow:0 0 0 2px #08040f, 0 1px 0 #0a0418; }
.btn.pink{
  background:linear-gradient(180deg,#ff7ab8,#d62a7e);
  border-color:#ffa6ce; color:#33081e;
  box-shadow:0 0 0 2px #08040f, 0 4px 0 #7c0f42, 0 0 22px rgba(255,94,168,.6);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.btn.cyan{
  background:linear-gradient(180deg,#7ff8ec,#22b3aa);
  border-color:#b9fff8; color:#04302e;
  box-shadow:0 0 0 2px #08040f, 0 4px 0 #0d615c, 0 0 22px rgba(79,240,224,.5);
}
.btn.lime{
  background:linear-gradient(180deg,#dbff90,#96d92f);
  border-color:#eaffc2; color:#1f2d05;
  box-shadow:0 0 0 2px #08040f, 0 4px 0 #4c7211, 0 0 22px rgba(198,255,94,.5);
}
.btn.ghost{
  background:transparent; border-color:#4a2d90; color:#b9a8e8;
  box-shadow:0 0 0 2px #08040f, 0 4px 0 #0a0418;
}
.btn.block{ width:100%; }

.icon-btn{
  background:#1d1046; border:2px solid var(--line);
  color:var(--ink); width:34px; height:34px;
  display:grid; place-items:center; cursor:pointer;
  font-size:13px; font-family:inherit;
  box-shadow:0 0 0 2px #08040f;
}
.icon-btn:active{ transform:translateY(2px); }

.avatar{
  width:22px; height:22px; flex:0 0 22px;
  display:grid; place-items:center;
  font-size:11px; font-weight:800; color:#12061f;
  border:2px solid rgba(255,255,255,.35);
  font-family:inherit;
}
.avatar.fang{ background:var(--fang); box-shadow:0 0 10px rgba(255,94,168,.75); }
.avatar.zhang{ background:var(--zhang); box-shadow:0 0 10px rgba(79,240,224,.75); }

.chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 7px; font-size:10px; letter-spacing:.6px;
  border:1px solid currentColor;
  color:var(--dim);
  background:rgba(255,255,255,.03);
}
.chip.fang{ color:var(--fang); background:rgba(255,94,168,.12); }
.chip.zhang{ color:var(--zhang); background:rgba(79,240,224,.12); }
.chip.both{ color:var(--violet); background:rgba(160,107,255,.14); }

.empty{
  padding:26px 12px; text-align:center;
  color:#8b7bb8; font-size:12px; line-height:1.9; letter-spacing:1px;
}
.empty .big{ display:block; font-size:26px; margin-bottom:8px; filter:drop-shadow(0 0 8px rgba(160,107,255,.8)); }

.sec-title{
  display:flex; align-items:center; gap:8px;
  margin:4px 2px 10px;
  font-size:11px; letter-spacing:2px; color:var(--dim);
  font-family:var(--pix-font);
}
.sec-title::after{ content:""; flex:1; height:2px; background:repeating-linear-gradient(90deg,#3d2780 0 4px, transparent 4px 8px); }

/* ============ 日历 ============ */
.cal-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-title{
  text-align:center; font-size:16px; letter-spacing:2px; font-weight:800;
  text-shadow:0 0 12px rgba(255,94,168,.55), 0 2px 0 #0a0418;
}
.cal-title small{
  display:block; margin-top:4px; font-size:9px; letter-spacing:3px;
  color:var(--cyan); font-family:var(--pix-font);
  text-shadow:0 0 8px rgba(79,240,224,.7);
}
.cal-week{
  display:grid; grid-template-columns:repeat(7,1fr);
  margin-bottom:6px;
  font-size:10px; color:#8b7bb8; text-align:center; letter-spacing:1px;
}
.cal-week span:nth-child(6),.cal-week span:nth-child(7){ color:var(--pink); opacity:.8; }

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-cell{
  position:relative;
  aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:rgba(58,32,110,.35);
  border:2px solid transparent;
  color:#cbbcff;
  font-size:12px; cursor:pointer;
  font-family:inherit;
  transition:background .1s steps(2);
}
.cal-cell.out{ background:transparent; color:#463469; cursor:default; }
.cal-cell.today{ border-color:rgba(198,255,94,.7); color:var(--lime); box-shadow:0 0 10px rgba(198,255,94,.3) inset; }
.cal-cell.sel{
  border-color:var(--pink);
  background:rgba(255,94,168,.16);
  color:#fff;
  box-shadow:0 0 14px rgba(255,94,168,.5), inset 0 0 12px rgba(255,94,168,.25);
}
.cal-cell .dots{ display:flex; gap:2px; height:4px; }
.cal-cell .dot{ width:4px; height:4px; }
.dot.fang{ background:var(--fang); box-shadow:0 0 5px var(--fang); }
.dot.zhang{ background:var(--zhang); box-shadow:0 0 5px var(--zhang); }
.dot.both{ background:var(--violet); box-shadow:0 0 5px var(--violet); }

/* 日程条 */
.agenda-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; margin-bottom:10px;
  background:linear-gradient(90deg, rgba(255,94,168,.18), rgba(160,107,255,.06) 60%, transparent);
  border-left:4px solid var(--pink);
}
.agenda-head b{ font-size:14px; letter-spacing:1px; }
.agenda-head small{ display:block; color:var(--dim); font-size:10px; margin-top:3px; letter-spacing:1px; }

.ev{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px; margin-bottom:8px;
  background:rgba(44,26,99,.4);
  border:2px solid #32206b;
  cursor:pointer;
}
.ev:last-child{ margin-bottom:0; }
.ev-time{
  flex:0 0 46px; text-align:center;
  font-family:var(--num-font); font-size:11px;
  color:var(--cyan); padding-top:2px;
  text-shadow:0 0 8px rgba(79,240,224,.8);
}
.ev-time.none{ color:#6b5a99; font-size:9px; }
.ev-body{ flex:1; min-width:0; }
.ev-title{ font-size:13px; font-weight:700; letter-spacing:.5px; word-break:break-word; }
.ev-note{ font-size:11px; color:var(--dim); margin-top:4px; line-height:1.6; word-break:break-word; }
.ev-meta{ margin-top:6px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

.upcoming{ margin-top:2px; }
.up-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 6px; border-bottom:1px dashed rgba(120,90,180,.35);
  cursor:pointer; font-size:12px;
}
.up-item:last-child{ border-bottom:0; }
.up-date{
  font-family:var(--num-font); font-size:9px; color:var(--gold);
  flex:0 0 58px; text-shadow:0 0 6px rgba(255,209,102,.7);
}
.up-title{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-left{ font-size:10px; color:var(--dim); }

/* ============ 第一次 ============ */
.first-hero{
  position:relative; overflow:hidden;
  text-align:center; padding:18px 14px 16px;
  background:
    radial-gradient(circle at 50% 120%, rgba(255,94,168,.35), transparent 60%),
    linear-gradient(180deg,#241452,#150b34);
}
.first-hero .num{
  font-family:var(--num-font); font-size:26px; color:var(--lime);
  text-shadow:0 0 16px rgba(198,255,94,.85), 0 3px 0 #0a0418;
}
.first-hero p{ margin:8px 0 0; font-size:11px; color:var(--dim); letter-spacing:2px; }

.first-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.first-card{
  position:relative; padding:0; cursor:pointer;
  background:#180d38;
  border:2px solid #32206b;
  box-shadow:0 0 0 2px #08040f, 0 4px 0 #0a0418;
  text-align:left; font-family:inherit; color:var(--ink);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.first-card:active{ transform:translateY(2px); }
.first-card .ph{
  position:relative; width:100%; aspect-ratio:1/1; overflow:hidden;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,94,168,.55), transparent 55%),
    radial-gradient(circle at 72% 68%, rgba(79,240,224,.42), transparent 55%),
    linear-gradient(180deg,#2a1560,#160c34);
  display:grid; place-items:center;
}
.first-card .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.first-card .ph .ph-heart{
  font-size:30px; color:rgba(255,255,255,.85);
  text-shadow:0 0 14px var(--pink), 0 0 28px rgba(255,94,168,.8);
  animation:beat 2s steps(2) infinite;
}
.first-card .fc-body{ padding:8px 9px 10px; }
.first-card .fc-date{
  font-family:var(--num-font); font-size:8px; color:var(--cyan);
  letter-spacing:.5px; text-shadow:0 0 6px rgba(79,240,224,.6);
}
.first-card .fc-title{
  font-size:12px; margin-top:6px; font-weight:700; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.first-card .fc-badge{
  position:absolute; top:6px; left:6px; z-index:2;
  background:rgba(10,4,24,.8); border:1px solid var(--pink);
  color:var(--pink); font-size:9px; padding:2px 5px;
  font-family:var(--num-font);
}

/* 相册卡片上的留言预览 */
.al-note{
  font-size:11px; color:#b6a7dd; margin-top:5px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  word-break:break-word;
}
/* 卡片首行：日期 + 上传人徽标 */
.fc-topline{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* 干饭/相册的年月筛选条 */
.ym-filter{ margin:0 0 10px; }
.ym-filter .ym-all{
  padding:5px 8px; font-size:10px; letter-spacing:1px;
  border:1px solid #4a2d90; background:rgba(160,107,255,.08); color:#b9a8e8;
}
.ym-filter .ym-all.cyan{
  border-color:rgba(79,240,224,.45); background:rgba(79,240,224,.08); color:var(--cyan);
}

/* 详情里的上传人行 */
.detail-by{
  margin-top:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.mini-edit{
  background:none; border:1px solid #4a2d90; cursor:pointer;
  color:#b9a8e8; font-family:inherit; font-size:11px; letter-spacing:.5px;
  padding:4px 8px;
}
.mini-edit:active{ transform:translateY(1px); }

/* ============ 相册留言板 ============ */
.fc-cmt{
  position:absolute; bottom:6px; right:6px; z-index:2;
  background:rgba(10,4,24,.8); border:1px solid rgba(160,107,255,.6);
  color:#c9b6f5; font-size:9px; padding:2px 5px;
  font-family:var(--num-font);
}
.cmt-board{
  margin-top:14px; padding:12px;
  background:rgba(160,107,255,.06);
  border:1px solid #3a2478;
}
.cmt-title{
  font-size:12px; color:#c9b6f5; letter-spacing:1px; margin-bottom:10px;
}
.cmt-title small{
  font-family:var(--num-font); color:#8f7cc7; margin-left:4px;
}
.cmt-list{ display:flex; flex-direction:column; gap:10px; }
.cmt-empty{
  font-size:11px; color:var(--dim); letter-spacing:.5px; padding:6px 0;
}
.cmt-item{ padding:8px 10px; background:rgba(10,4,24,.45); border:1px solid #2a1a58; }
.cmt-head{ display:flex; align-items:center; gap:8px; }
.cmt-ts{ font-size:9px; color:#6f5fa3; font-family:var(--num-font); }
.cmt-del{
  margin-left:auto; background:none; border:none; cursor:pointer;
  color:#6f5fa3; font-size:11px; padding:2px 4px; font-family:inherit;
}
.cmt-del:active{ color:var(--pink); }
.cmt-text{
  margin-top:5px; font-size:12px; color:#e8e2f7; line-height:1.7;
  word-break:break-word;
}
.cmt-inputrow{ display:flex; gap:8px; margin-top:12px; }
.cmt-inputrow input{
  flex:1; min-width:0; background:rgba(10,4,24,.6);
  border:1px solid #3a2478; color:#e8e2f7; font-family:inherit; font-size:12px;
  padding:9px 10px; outline:none;
}
.cmt-inputrow input:focus{ border-color:var(--violet); }
.cmt-inputrow .btn{ padding:9px 14px; font-size:12px; flex-shrink:0; }

/* 干饭/喝酒记录的删除按钮 */
.meal-top{ position:relative; }
.meal-del{
  background:none; border:none; cursor:pointer;
  color:#6f5fa3; font-size:12px; padding:0 2px; font-family:inherit;
  opacity:.55; flex-shrink:0;
}
.meal-del:hover,.meal-del:active{ opacity:1; color:var(--pink); }
.sheet-tip{
  margin:0 0 10px; font-size:11px; color:var(--dim); letter-spacing:.5px; line-height:1.6;
}

/* ============ 干饭 / 体重 ============ */
.legend{ display:flex; gap:14px; margin-bottom:6px; }
.legend span{ display:flex; align-items:center; gap:5px; font-size:10px; color:var(--dim); letter-spacing:1px; }
.legend i{ width:8px; height:8px; display:block; }

.chart-wrap{ margin:2px -4px 8px; }
.chart-wrap svg{ width:100%; height:auto; display:block; overflow:visible; }

.weight-nums{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 12px; }
.wn{
  padding:10px; border:2px solid #32206b; background:rgba(44,26,99,.35);
}
.wn .who{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--dim); letter-spacing:1px; }
.wn .val{ font-family:var(--num-font); font-size:17px; margin-top:8px; }
.wn .val small{ font-size:9px; color:var(--dim); margin-left:4px; }
.wn .delta{ font-size:10px; margin-top:4px; letter-spacing:.5px; }
.wn.fang .val{ color:var(--fang); text-shadow:0 0 10px rgba(255,94,168,.8); }
.wn.zhang .val{ color:var(--zhang); text-shadow:0 0 10px rgba(79,240,224,.8); }
.delta.down{ color:var(--cyan); }
.delta.up{ color:var(--gold); }

.row-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.meal-item{
  display:flex; gap:10px; padding:10px; margin-bottom:8px;
  background:rgba(44,26,99,.35); border:2px solid #32206b;
}
.meal-item:last-child{ margin-bottom:0; }
.meal-photo{
  width:62px; height:62px; flex:0 0 62px; overflow:hidden;
  border:2px solid #4a2d90;
  background:#120829; display:grid; place-items:center; font-size:20px;
}
.meal-photo img{ width:100%; height:100%; object-fit:cover; }
.meal-body{ flex:1; min-width:0; }
.meal-top{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.meal-name{ font-size:13px; font-weight:700; }
.meal-type{
  font-size:9px; padding:2px 5px; letter-spacing:1px;
  background:rgba(255,209,102,.14); color:var(--gold); border:1px solid rgba(255,209,102,.5);
}
.meal-place{ font-size:11px; color:var(--dim); margin-top:4px; }
.meal-note{ font-size:11px; color:#9c8cc6; margin-top:4px; line-height:1.6; word-break:break-word; }
.stars-mini{ color:var(--gold); font-size:10px; letter-spacing:1px; text-shadow:0 0 6px rgba(255,209,102,.7); }
.meal-foot{ margin-top:6px; display:flex; align-items:center; gap:8px; }

.day-label{
  display:flex; align-items:center; gap:8px; margin:14px 2px 8px;
  font-size:11px; color:var(--dim); letter-spacing:1px;
}
.day-label::after{ content:""; flex:1; height:2px; background:repeating-linear-gradient(90deg,#3d2780 0 3px, transparent 3px 7px); }

/* ============ 拉屎 ============ */
.poop-today{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.poop-btn{
  position:relative; overflow:hidden;
  padding:14px 10px; cursor:pointer;
  background:linear-gradient(180deg,#241452,#170c36);
  border:2px solid #32206b; color:var(--dim);
  font-family:inherit;
  box-shadow:0 0 0 2px #08040f, 0 4px 0 #0a0418;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:all .1s steps(2);
}
.poop-btn .face{ font-size:26px; filter:grayscale(1) brightness(.7); transition:all .12s steps(2); }
.poop-btn .nm{ font-size:12px; letter-spacing:1px; }
.poop-btn .st{ font-size:10px; letter-spacing:1px; opacity:.8; }
.poop-btn.on{ color:#fff; }
.poop-btn.on.fang{ border-color:var(--fang); background:linear-gradient(180deg,rgba(255,94,168,.35),rgba(255,94,168,.08)); box-shadow:0 0 0 2px #08040f, 0 4px 0 #4d0f2a, 0 0 22px rgba(255,94,168,.5); }
.poop-btn.on.zhang{ border-color:var(--zhang); background:linear-gradient(180deg,rgba(79,240,224,.32),rgba(79,240,224,.06)); box-shadow:0 0 0 2px #08040f, 0 4px 0 #0b4642, 0 0 22px rgba(79,240,224,.45); }
.poop-btn.on .face{ filter:none; transform:scale(1.06); }

.poop-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.poop-cell{
  aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:rgba(58,32,110,.3); border:2px solid transparent;
  font-size:11px; color:#b0a0e0; cursor:pointer; font-family:inherit;
}
.poop-cell.out{ background:transparent; color:#433064; cursor:default; }
.poop-cell.today{ border-color:rgba(198,255,94,.7); color:var(--lime); }
.poop-cell .marks{ display:flex; gap:2px; height:5px; }
.poop-cell .m{ width:5px; height:5px; }
.poop-cell .m.fang{ background:var(--fang); box-shadow:0 0 5px var(--fang); }
.poop-cell .m.zhang{ background:var(--zhang); box-shadow:0 0 5px var(--zhang); }

.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stat{
  padding:10px 6px; text-align:center;
  background:rgba(44,26,99,.4); border:2px solid #32206b;
}
.stat .k{ font-size:9px; color:var(--dim); letter-spacing:1px; }
.stat .v{ font-family:var(--num-font); font-size:15px; margin-top:8px; color:var(--lime); text-shadow:0 0 10px rgba(198,255,94,.6); }
.stat .v.pink{ color:var(--fang); text-shadow:0 0 10px rgba(255,94,168,.6); }
.stat .v.cyan{ color:var(--zhang); text-shadow:0 0 10px rgba(79,240,224,.6); }

/* ============ 相册 ============ */
.al-hero{
  position:relative; overflow:hidden;
  text-align:center; padding:18px 14px 16px;
  background:
    radial-gradient(circle at 50% 120%, rgba(160,107,255,.4), transparent 60%),
    linear-gradient(180deg,#241452,#150b34);
}
.al-hero .num{
  font-family:var(--num-font); font-size:26px; color:var(--violet);
  text-shadow:0 0 16px rgba(160,107,255,.85), 0 3px 0 #0a0418;
}
.al-hero p{ margin:8px 0 0; font-size:11px; color:var(--dim); letter-spacing:2px; }

/* ============ 弹层表单 ============ */
.sheet-mask{
  position:fixed; inset:0; z-index:50;
  background:rgba(5,2,12,.78);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .14s steps(2);
  backdrop-filter:blur(2px);
}
.sheet-mask.on{ opacity:1; pointer-events:auto; }
.sheet{
  width:min(430px,100%);
  max-height:88dvh; overflow-y:auto;
  background:linear-gradient(180deg,#241452,#150b34);
  border-top:3px solid var(--pink);
  border-left:3px solid #2b1858; border-right:3px solid #2b1858;
  box-shadow:0 -12px 50px rgba(255,94,168,.25), 0 0 0 3px #08040f;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(14px);
  transition:transform .16s steps(3);
}
.sheet-mask.on .sheet{ transform:translateY(0); }

.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sheet-head h3{
  margin:0; font-size:15px; letter-spacing:2px;
  text-shadow:0 0 12px rgba(255,94,168,.6), 0 2px 0 #0a0418;
}

.field{ display:block; margin-bottom:12px; }
.field > span{
  display:block; font-size:10px; letter-spacing:2px; color:var(--dim);
  margin-bottom:6px; font-family:var(--pix-font);
}
.field input[type=text],.field input[type=password],.field input[type=date],
.field input[type=time],.field input[type=number],.field select,.field textarea{
  width:100%; padding:10px 10px;
  background:#100726; color:var(--ink);
  -webkit-text-fill-color:var(--ink);
  border:2px solid #3d2780;
  font-family:inherit; font-size:13px;
  outline:none; border-radius:0;
  box-shadow:inset 0 0 12px rgba(0,0,0,.6);
}
/* 密码框单独处理，避免动到 date/time 的系统选择器图标 */
.field input[type=password]{ appearance:none; -webkit-appearance:none; }
/* 浏览器自动填充时也要保持深色 */
.field input:-webkit-autofill,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:inset 0 0 0 1000px #100726, inset 0 0 12px rgba(0,0,0,.6);
  caret-color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--cyan);
  box-shadow:inset 0 0 12px rgba(0,0,0,.6), 0 0 12px rgba(79,240,224,.35);
}
.field textarea{ resize:vertical; }
.field input[type=date]::-webkit-calendar-picker-indicator,
.field input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(1) sepia(1) hue-rotate(240deg) saturate(4);
  cursor:pointer;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.seg{ display:flex; gap:8px; }
.seg button{
  flex:1; padding:9px 6px; cursor:pointer; font-family:inherit; font-size:12px;
  background:#180d38; color:var(--dim);
  border:2px solid #3d2780; letter-spacing:1px;
}
.seg button.on{ color:#fff; border-color:var(--pink); background:rgba(255,94,168,.2); box-shadow:0 0 12px rgba(255,94,168,.35); }

.uploader{
  display:flex; align-items:center; gap:12px;
  padding:12px; border:2px dashed #4a2d90; background:rgba(44,26,99,.3);
  cursor:pointer;
}
.uploader .up-ico{ font-size:22px; filter:drop-shadow(0 0 8px rgba(79,240,224,.7)); }
.uploader .up-txt{ font-size:12px; color:var(--dim); line-height:1.6; }
.uploader .up-txt b{ display:block; color:var(--cyan); font-size:12px; letter-spacing:1px; margin-bottom:2px; }
.preview{
  margin-top:10px; width:100%; aspect-ratio:4/3; overflow:hidden;
  border:2px solid #4a2d90; background:#100726;
  display:none; place-items:center;
}
.preview.on{ display:grid; }
.preview img{ width:100%; height:100%; object-fit:cover; }

/* 多图预览：九宫格缩略图 + 删除角标 */
.preview.multi{ aspect-ratio:auto; display:none; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px; }
.preview.multi.on{ display:grid; }
.preview.multi img{ aspect-ratio:1/1; width:100%; height:auto; }
.pv-item{ position:relative; display:block; }
.pv-del{
  position:absolute; top:4px; right:4px; width:22px; height:22px;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(14,7,32,.85); color:#ff5ea8; font-size:12px; line-height:1;
  display:grid; place-items:center;
}
.pv-more, .pv-full{
  aspect-ratio:1/1; display:grid; place-items:center;
  border:1px dashed #4a2d90; color:#7b6aa8; font-size:11px; text-align:center; padding:6px;
}
.pv-full{ color:#ff5ea8; }

/* 卡片右上角的张数角标 */
.fc-count{
  position:absolute; top:6px; right:6px; z-index:2;
  background:rgba(14,7,32,.85); color:var(--cyan);
  font-family:var(--num-font); font-size:9px; padding:3px 6px;
  border:1px solid var(--cyan-d);
}

.rate{ display:flex; gap:8px; }
.rate button{
  background:none; border:0; font-size:24px; cursor:pointer; padding:0 2px;
  color:#4a3a78; filter:grayscale(1);
  transition:transform .08s steps(2);
}
.rate button.on{ color:var(--gold); filter:none; text-shadow:0 0 12px rgba(255,209,102,.9); transform:scale(1.06); }

.sheet-actions{ display:flex; gap:10px; margin-top:16px; }
.sheet-actions .btn{ flex:1; }

/* 详情 */
.detail-photo{
  width:100%; max-height:52dvh; object-fit:cover; display:block;
  border:2px solid #4a2d90; box-shadow:0 0 26px rgba(255,94,168,.25);
}
/* 多张照片纵向排列，张数小标 */
.detail-photos{ display:flex; flex-direction:column; gap:10px; }
.dp-wrap{ position:relative; }
.dp-idx{
  position:absolute; right:10px; bottom:10px;
  background:rgba(14,7,32,.85); color:var(--cyan);
  font-family:var(--num-font); font-size:9px; padding:3px 6px;
  border:1px solid var(--cyan-d);
}
.detail-date{
  margin-top:12px; font-family:var(--num-font); font-size:10px;
  color:var(--cyan); letter-spacing:1px;
}
.detail-title{ font-size:17px; font-weight:800; margin-top:8px; letter-spacing:1px; line-height:1.5; }
.detail-note{ margin-top:8px; font-size:12.5px; color:#b6a7dd; line-height:1.9; white-space:pre-wrap; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%,10px);
  z-index:99; padding:10px 16px;
  background:#1d1046; border:2px solid var(--cyan);
  color:var(--cyan); font-size:12px; letter-spacing:1px;
  box-shadow:0 0 0 2px #08040f, 0 0 22px rgba(79,240,224,.45);
  opacity:0; pointer-events:none; transition:all .16s steps(2);
  white-space:nowrap;
}
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* 小屏适配 */
@media (max-height:680px){
  .topbar{ padding:12px 14px 10px; }
  .brand h1{ font-size:17px; }
  .brand-sub{ display:none; }
}

/* ===========================================================
   登录门（双人专属）
   =========================================================== */

.login{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:22px;
  overflow-y:auto;
  background:
    radial-gradient(circle at 50% -8%, #3a1a6e 0%, transparent 52%),
    radial-gradient(circle at 12% 96%, #2b0f47 0%, transparent 48%),
    #0b0518;
}
.login[hidden]{ display:none; }

.login-sky{
  position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(120,80,220,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,80,220,.06) 1px, transparent 1px),
    radial-gradient(2px 2px at 16% 14%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(2px 2px at 76% 10%, rgba(198,255,94,.8), transparent 60%),
    radial-gradient(2px 2px at 38% 30%, rgba(79,240,224,.7), transparent 60%),
    radial-gradient(2px 2px at 88% 38%, rgba(255,94,168,.8), transparent 60%),
    radial-gradient(2px 2px at 10% 52%, rgba(255,209,102,.6), transparent 60%),
    radial-gradient(2px 2px at 64% 66%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(2px 2px at 28% 82%, rgba(160,107,255,.7), transparent 60%);
  background-size:34px 34px, 34px 34px, auto, auto, auto, auto, auto, auto, auto;
  opacity:.9;
  animation:loginPulse 5s steps(5) infinite alternate;
}
@keyframes loginPulse{ from{opacity:.45} to{opacity:.95} }

.login-card{
  position:relative;
  width:min(352px, 100%);
  padding:28px 22px 20px;
  background:linear-gradient(180deg, rgba(38,22,88,.97) 0%, rgba(20,10,44,.98) 100%);
  border:2px solid var(--line);
  box-shadow:
    0 0 0 2px #08040f,
    0 0 0 4px rgba(61,39,128,.5),
    0 20px 60px rgba(0,0,0,.65),
    0 0 60px rgba(160,107,255,.22),
    inset 0 0 46px rgba(160,107,255,.12);
  animation:cardIn .32s steps(4) both;
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(14px) scale(.985) }
  to{ opacity:1; transform:none }
}
/* 四角像素装饰 */
.login-card::before,
.login-card::after{
  content:""; position:absolute; width:6px; height:6px;
  background:var(--cyan); box-shadow:0 0 10px var(--cyan);
}
.login-card::before{ top:-2px; left:-2px; box-shadow:0 0 10px var(--cyan), 288px 0 0 0 var(--cyan), 288px 0 10px 0 var(--cyan); }
.login-card::after{ bottom:-2px; right:-2px; background:var(--pink); box-shadow:0 0 10px var(--pink); }

.login-kicker{
  margin:0; text-align:center;
  font-family:var(--pix-font); font-size:8px;
  letter-spacing:3px; color:var(--cyan);
  text-shadow:0 0 10px rgba(79,240,224,.85);
}
.login-title{
  margin:12px 0 0; text-align:center;
  font-size:23px; font-weight:800; letter-spacing:3px;
  color:#fff;
  text-shadow:0 0 10px rgba(255,94,168,.85), 0 0 26px rgba(255,94,168,.45);
}
.login-title em{ font-style:normal; color:var(--pink); }
.login-sub{
  margin:8px 0 22px; text-align:center;
  font-size:11px; letter-spacing:1.6px; color:#9d8dc9;
}

.login-card .field{ margin-bottom:12px; }
.login-card .field input{
  font-size:13px;
  letter-spacing:1.2px;
  padding:12px 11px;
  background:#0f0624;
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
  border:2px solid #4a2d90;
  box-shadow:inset 0 0 14px rgba(0,0,0,.75), 0 0 0 1px rgba(160,107,255,.12);
}
.login-card .field input:focus{
  border-color:var(--cyan);
  box-shadow:inset 0 0 14px rgba(0,0,0,.75), 0 0 16px rgba(79,240,224,.45);
}
.login-card .field input::placeholder{ color:#5f5088; letter-spacing:.6px; }

.login-err{
  min-height:15px; margin:2px 0 6px;
  font-size:11px; letter-spacing:.6px; color:var(--pink);
  text-shadow:0 0 8px rgba(255,94,168,.5);
}
.login-err.on{ animation:shake .3s steps(3); }
@keyframes shake{
  0%{ transform:translateX(0) } 33%{ transform:translateX(-5px) }
  66%{ transform:translateX(5px) } 100%{ transform:translateX(0) }
}

.login-btn{
  position:relative;
  font-family:var(--pix-font);
  font-size:11px;
  letter-spacing:1px;
  padding:14px 12px;
}
.login-btn[disabled]{ opacity:.6; cursor:wait; }

.login-foot{
  margin:16px 0 0; text-align:center;
  font-size:10px; letter-spacing:1.4px; color:#5f5088;
}

/* 顶栏当前登录人 */
.top-right{ display:flex; align-items:center; gap:8px; }
.whoami{
  display:inline-flex; align-items:center;
  padding:3px 7px;
  font-size:10px; letter-spacing:1px;
  color:var(--dim);
  border:1px solid var(--line);
  background:rgba(34,20,82,.65);
  white-space:nowrap;
}
.whoami.fang{ color:var(--fang); border-color:rgba(255,94,168,.5); box-shadow:0 0 10px rgba(255,94,168,.22); }
.whoami.zhang{ color:var(--zhang); border-color:rgba(79,240,224,.5); box-shadow:0 0 10px rgba(79,240,224,.22); }

/* 设置面板里的账号行 */
.acct-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin-bottom:14px;
  background:rgba(34,20,82,.7);
  border:1px solid var(--line);
  font-size:11.5px; letter-spacing:.8px;
}
.acct-row .avatar{ flex:0 0 auto; }
.acct-row b{ font-weight:700; }
.acct-row small{ margin-left:auto; color:#7b6aa8; font-size:10px; }

/* 同步中的小提示 */
.sync-dot{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%);
  z-index:120;
  padding:5px 10px;
  font-size:10px; letter-spacing:1px;
  color:var(--cyan);
  background:rgba(12,6,26,.9);
  border:1px solid rgba(79,240,224,.45);
  opacity:0; transition:opacity .2s steps(2);
  pointer-events:none;
}
.sync-dot.on{ opacity:1; }