:root {
  --sky1:#8ed6ff; --sky2:#cdeffe; --grass:#bdf0c0;
  --her:#ff6f91;  --her-soft:#ffd0dc;     /* user1 / 小狗 / 她 = 粉 */
  --his:#39b7c9;  --his-soft:#bdeef4;     /* user2 / 小猫 / 男友 = 蓝青 */
  --ink:#27406b; --muted:#6b7fa6;
  --card:rgba(255,255,255,.82);
  --ok:#06d6a0;
  --shadow:0 10px 28px rgba(39,64,107,.16);
  --plank1:#ffd166; --plank2:#ff9f45;
  --fulcrum:#c98a5e;
  --r:22px;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; padding:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 52%,var(--grass) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

/* 飘云 */
.clouds { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.cloud { position:absolute; opacity:.85; animation:drift linear infinite; }
.c1 { top:7%;  font-size:54px; animation-duration:52s; }
.c2 { top:20%; font-size:40px; animation-duration:68s; animation-delay:-24s; }
.c3 { top:38%; font-size:62px; animation-duration:84s; animation-delay:-46s; }
@keyframes drift { from { left:-18%; } to { left:116%; } }

.wrap { position:relative; z-index:1; max-width:560px; margin:0 auto; padding:16px 14px 40px; }

.card {
  background:var(--card);
  border:2px solid rgba(255,255,255,.7);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:16px;
  margin-bottom:14px;
}

.view { animation:fadeIn .35s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }

/* ===== 按钮 ===== */
.btn-primary {
  width:100%; border:none; border-radius:999px; cursor:pointer;
  padding:14px 20px; font-size:17px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#ff9bb3,#ff6f91);
  box-shadow:0 6px 16px rgba(255,111,145,.4);
  transition:transform .12s ease;
}
.btn-primary.small { width:auto; padding:12px 18px; font-size:15px; white-space:nowrap; }
.btn-primary:active { transform:scale(.95); }
.btn-ghost {
  width:100%; margin-top:10px; border:2px solid rgba(39,64,107,.18);
  background:transparent; color:var(--muted); border-radius:999px;
  padding:12px; font-size:15px; font-weight:600; cursor:pointer;
}
.pill-btn {
  border:none; cursor:pointer; border-radius:999px; padding:8px 14px;
  font-size:14px; font-weight:700; color:var(--ink);
  background:rgba(255,255,255,.8); box-shadow:var(--shadow);
}
.pill-btn:active { transform:scale(.95); }
.icon-btn {
  border:none; cursor:pointer; width:38px; height:38px; border-radius:50%;
  font-size:18px; color:var(--ink); background:rgba(255,255,255,.8);
  box-shadow:var(--shadow);
}

/* ===== 登录 ===== */
.login-card { margin-top:14vh; text-align:center; padding:28px 22px; }
.app-title { font-size:24px; margin:0 0 6px; }
.login-sub { color:var(--muted); margin:0 0 22px; }
.pin-input {
  width:100%; text-align:center; letter-spacing:8px; font-size:22px;
  padding:14px; border-radius:16px; border:2px solid var(--his-soft);
  background:#fff; margin-bottom:14px; outline:none;
}
.pin-input:focus { border-color:var(--his); }
.login-err { color:var(--her); min-height:22px; margin-top:12px; font-weight:600; }

/* ===== 顶栏 ===== */
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.title-mini { font-weight:800; font-size:18px; }
.topbar-right { display:flex; gap:8px; align-items:center; }
.week-banner {
  text-align:center; font-weight:700; color:var(--ink);
  background:rgba(255,255,255,.6); border-radius:999px;
  padding:6px 14px; margin:0 auto 12px; width:fit-content; box-shadow:var(--shadow);
}

/* ===== 跷跷板 ===== */
.seesaw-card { padding-bottom:12px; }
.seesaw { position:relative; height:246px; }

.leadbadge {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.92); padding:5px 14px; border-radius:999px;
  font-weight:800; font-size:14px; color:var(--ink); box-shadow:var(--shadow);
  white-space:nowrap; z-index:4;
}

.board {
  position:absolute; left:7%; right:7%; bottom:92px; height:18px;
  transform-origin:50% 50%;
  transition:transform .9s cubic-bezier(.34,1.2,.4,1);
  will-change:transform;
}
.plank {
  position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(90deg,var(--plank1),var(--plank2));
  box-shadow:0 5px 0 rgba(0,0,0,.10), inset 0 2px 2px rgba(255,255,255,.55);
}
.plank::after { /* 中心铆钉 */
  content:""; position:absolute; left:50%; top:50%; width:14px; height:14px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#c98a5e);
}

.seat { position:absolute; bottom:100%; display:flex; flex-direction:column; align-items:center; width:98px; }
.seat.left  { left:0;  transform:translateX(-50%); }
.seat.right { right:0; transform:translateX(50%); }

.char {
  width:86px; height:92px;
  display:flex; align-items:flex-end; justify-content:center;
  transform-origin:50% 85%;
  transition:transform .9s cubic-bezier(.34,1.2,.4,1);
  animation:bob 1.7s ease-in-out infinite;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.2));
}
.char img { width:100%; height:100%; object-fit:contain; display:block; }
.seat.is-me .char { filter:drop-shadow(0 0 7px rgba(255,209,102,.95)) drop-shadow(0 3px 2px rgba(0,0,0,.2)); }
@keyframes bob { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }

/* 小头像（角标/记录/往期里用同一对形象图） */
.mini-ava { width:26px; height:26px; object-fit:contain; vertical-align:middle; display:inline-block; }

.dumb {
  width:60px; margin-top:-4px;
  transform-origin:50% 0;
  transition:transform .9s cubic-bezier(.34,1.2,.4,1);
}
.dumb .db-svg { width:100%; height:auto; display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.sandA_L, .sandB_L, .sandA_R, .sandB_R { transition:y .7s ease, height .7s ease; }

.seat.justlogged .char { animation:pop .6s ease, bob 1.7s ease-in-out infinite .6s; }
@keyframes pop {
  0% { scale:1; } 30% { scale:1.35; translate:0 -12px; } 60% { scale:.92; } 100% { scale:1; }
}

.fulcrum {
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  width:0; height:0; border-left:34px solid transparent; border-right:34px solid transparent;
  border-bottom:84px solid var(--fulcrum);
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.15));
}
.fulcrum::after { content:""; }
.ground {
  position:absolute; left:6%; right:6%; bottom:14px; height:20px;
  background:radial-gradient(ellipse at center, rgba(40,80,40,.30), transparent 72%);
  border-radius:50%;
}

.end-labels { display:flex; gap:10px; margin-top:8px; }
.endlabel { flex:1; text-align:center; background:rgba(255,255,255,.62); border-radius:16px; padding:8px 6px; }
.el-avatar { font-size:22px; line-height:1; }
.el-name { font-size:13px; color:var(--muted); margin:2px 0; }
.el-total { font-weight:800; font-size:16px; }
.endlabel.left  .el-total { color:var(--her); }
.endlabel.right .el-total { color:var(--his); }
.you-tag { background:#ffd166; color:#7a5a00; border-radius:6px; padding:0 5px; font-size:11px; font-weight:700; }

/* ===== 加码面板 ===== */
.add-title { font-size:17px; margin:0 0 12px; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.quick-btn {
  border:none; cursor:pointer; border-radius:16px; padding:12px 4px;
  background:linear-gradient(180deg,#fff,#eef6ff); color:var(--ink);
  font-size:18px; font-weight:800; box-shadow:var(--shadow); transition:transform .12s;
}
.quick-btn small { display:block; font-size:11px; font-weight:600; color:var(--muted); }
.quick-btn:active { transform:scale(.93); }
.custom-row { display:flex; gap:8px; margin-bottom:12px; }
.custom-min {
  flex:1; border:2px solid var(--his-soft); border-radius:14px; padding:12px;
  font-size:16px; outline:none; background:#fff; min-width:0;
}
.custom-min:focus { border-color:var(--his); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  border:2px solid rgba(39,64,107,.14); background:#fff; cursor:pointer;
  border-radius:999px; padding:6px 12px; font-size:13px; color:var(--ink); transition:all .15s;
}
.chip.on { background:var(--his); border-color:var(--his); color:#fff; }

/* 闪提示 */
.flash {
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--ok); color:#fff; font-weight:800; padding:12px 22px;
  border-radius:999px; box-shadow:0 8px 24px rgba(6,214,160,.4);
  opacity:0; pointer-events:none; transition:all .25s ease; z-index:500;
}
.flash.show { opacity:1; transform:translate(-50%,0); }

/* ===== 记录列表 ===== */
.list-title, .add-title { color:var(--ink); }
.list-title { font-size:16px; margin:0 0 8px; }
.entry-list { display:flex; flex-direction:column; }
.entry-row { display:flex; align-items:center; gap:8px; padding:9px 6px; border-bottom:1px dashed rgba(39,64,107,.12); }
.entry-row.mine { background:rgba(255,209,102,.12); border-radius:12px; }
.entry-ava { font-size:20px; }
.entry-min { font-weight:800; }
.entry-act { font-size:12px; color:var(--muted); background:rgba(39,64,107,.07); padding:2px 8px; border-radius:999px; }
.entry-time { margin-left:auto; font-size:12px; color:var(--muted); }
.entry-del { border:none; background:transparent; cursor:pointer; font-size:16px; padding:2px 4px; opacity:.7; }
.entry-del:active { transform:scale(.9); }
.empty { text-align:center; color:var(--muted); padding:22px 8px; }

/* ===== 往期 ===== */
.history-list { display:flex; flex-direction:column; gap:12px; }
.week-card { background:var(--card); border:2px solid rgba(255,255,255,.7); border-radius:18px; box-shadow:var(--shadow); padding:14px; }
.week-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.week-range { font-weight:800; }
.week-lead { font-size:13px; font-weight:700; color:var(--ink); background:rgba(255,209,102,.35); padding:3px 10px; border-radius:999px; }
.hbar-row { display:flex; align-items:center; gap:8px; margin:6px 0; }
.hbar-ava { width:30px; text-align:center; line-height:0; }
.hbar-track { flex:1; height:16px; background:rgba(39,64,107,.08); border-radius:999px; overflow:hidden; }
.hbar { height:100%; border-radius:999px; transition:width .6s ease; min-width:3px; }
.hbar.her { background:linear-gradient(90deg,var(--her-soft),var(--her)); }
.hbar.his { background:linear-gradient(90deg,var(--his-soft),var(--his)); }
.hbar-val { font-size:13px; font-weight:700; width:84px; text-align:right; }

/* 致命错误重试 */
.fatal { text-align:center; color:var(--her); background:rgba(255,255,255,.8); border-radius:16px; padding:18px; margin-top:20px; cursor:pointer; font-weight:600; }

/* ===== 资料弹层 ===== */
.modal { position:fixed; inset:0; z-index:1000; display:none; }
.modal.open { display:block; }
.modal-mask { position:absolute; inset:0; background:rgba(20,30,60,.42); }
.modal-card {
  position:absolute; left:50%; bottom:0; width:100%; max-width:560px;
  background:#fff; border-radius:24px 24px 0 0; padding:20px 18px 26px;
  box-shadow:0 -8px 30px rgba(0,0,0,.22); animation:sheetUp .3s ease;
}
@keyframes sheetUp { from { transform:translate(-50%,100%);} to { transform:translate(-50%,0);} }
.modal-card { transform:translateX(-50%); }
.modal-head { display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:18px; margin-bottom:14px; }
.field-label { display:block; font-size:13px; color:var(--muted); margin:10px 0 6px; font-weight:600; }
.text-input { width:100%; border:2px solid var(--his-soft); border-radius:14px; padding:12px; font-size:16px; outline:none; }
.text-input:focus { border-color:var(--his); }
.avatar-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.ava-opt {
  width:48px; height:48px; border-radius:14px; border:2px solid rgba(39,64,107,.12);
  background:#f5f9ff; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.ava-opt.on { border-color:var(--her); background:var(--her-soft); transform:scale(1.05); }

/* 撒花 */
.confetti-layer { position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }
.confetti-layer span { position:absolute; top:-40px; animation:fall 2.4s linear forwards; }
@keyframes fall { to { transform:translateY(112vh) rotate(440deg); opacity:.15; } }

@media (max-width:380px) {
  .quick-grid { grid-template-columns:repeat(2,1fr); }
  .char { width:70px; height:76px; }
}

@media (prefers-reduced-motion:reduce) {
  *, ::after, ::before { animation:none !important; transition:none !important; }
}