/* ===== 我们的家 / 共享样式 ===== */
:root{
  --bg:#fbf6f1;
  --ink:#4a3f4d;
  --ink-soft:#9a8da0;
  --accent:#c77fa3;
  --accent-soft:#f5dce8;
  --paper:#ffffff;
  --deep:#ddd0f0;
  --deep-ink:#5c4a78;
  --daily:#ffe1b3;
  --daily-ink:#7a5418;
  --diary:#c7ead8;
  --diary-ink:#2c6b4a;
  --radius:20px;
  --shadow:0 10px 26px rgba(74,63,77,0.12);
}
:root[data-theme="dark"]{
  --bg:#211c23;
  --ink:#f1e9ee;
  --ink-soft:#b3a3b0;
  --accent:#e3a3c4;
  --accent-soft:#46303d;
  --paper:#2c252d;
  --deep:#4a3a66;
  --deep-ink:#e2d4f5;
  --daily:#5c4926;
  --daily-ink:#ffe1ac;
  --diary:#2c4a3c;
  --diary-ink:#ace4c8;
  --shadow:0 10px 26px rgba(0,0,0,0.45);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 8% 6%, #fff9f1 0%, transparent 38%),
    radial-gradient(circle at 94% 0%, #fdeaf2 0%, transparent 34%),
    radial-gradient(circle at 50% 100%, #eef6ef 0%, transparent 40%);
  background-attachment:fixed;
  font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
  color:var(--ink);
}
a{ color:inherit; text-decoration:none; }
:root[data-theme="dark"] body{
  background-image:
    radial-gradient(circle at 8% 6%, #3a2e3a 0%, transparent 38%),
    radial-gradient(circle at 94% 0%, #3a2832 0%, transparent 34%),
    radial-gradient(circle at 50% 100%, #1f2e26 0%, transparent 40%);
}
.theme-toggle{
  position:fixed; top:16px; right:16px; z-index:50;
  width:38px; height:38px; border-radius:50%; border:none;
  background:var(--paper); box-shadow:0 4px 12px rgba(74,63,77,.12);
  font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- gate (token entry) ---------- */
#gate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.gate-card{
  width:100%;
  max-width:380px;
  background:var(--paper);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:36px 28px;
  text-align:center;
  position:relative;
}
.gate-card .doodle{ font-size:34px; margin-bottom:6px; }
.gate-card h1{ font-size:22px; font-weight:800; margin:0 0 6px; letter-spacing:.5px; }
.gate-card p{ color:var(--ink-soft); font-size:14px; margin:0 0 22px; line-height:1.6; }
.gate-card input{
  width:100%; border:2px solid var(--accent-soft); background:#fff8fb;
  border-radius:14px; padding:13px 16px; font-size:15px; color:var(--ink);
  outline:none; margin-bottom:14px;
}
.gate-card input:focus{ border-color:var(--accent); }
.gate-card button{
  width:100%; border:none; background:var(--accent); color:#fff;
  font-size:15px; font-weight:700; padding:13px 16px; border-radius:14px;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.gate-card button:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(199,127,163,.35); }
.gate-error{ color:#b35d6b; font-size:13px; margin-top:12px; min-height:16px; }

/* ---------- shared app shell ---------- */
#app{ display:none; max-width:1080px; margin:0 auto; padding:36px 20px 80px; }
header.top{ text-align:center; margin-bottom:28px; position:relative; }
header.top .doodle{ font-size:30px; }
header.top h1{ font-size:26px; font-weight:800; margin:6px 0 4px; }
header.top .sub{ color:var(--ink-soft); font-size:14px; margin:0; }
.back-link{
  position:absolute; left:0; top:6px;
  font-size:13px; font-weight:700; color:var(--accent);
  display:flex; align-items:center; gap:4px;
}

.stats{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:22px 0 18px; }
.stat-pill{
  display:flex; align-items:center; gap:6px;
  background:var(--paper); border-radius:999px;
  padding:8px 16px; font-size:13px; font-weight:700;
  box-shadow:0 4px 12px rgba(74,63,77,.08);
}
.stat-pill .dot{ width:9px; height:9px; border-radius:50%; }

.controls{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:34px; }
.search-box{
  flex:1 1 240px; max-width:320px;
  display:flex; align-items:center; gap:8px;
  background:var(--paper); border-radius:999px;
  padding:10px 18px; box-shadow:0 4px 12px rgba(74,63,77,.08);
}
.search-box input{ border:none; outline:none; background:transparent; font-size:14px; width:100%; color:var(--ink); }
.filters{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.filter-btn{
  border:none; cursor:pointer; font-size:13px; font-weight:700;
  padding:9px 18px; border-radius:999px; color:var(--ink-soft);
  background:var(--paper); box-shadow:0 4px 12px rgba(74,63,77,.06);
  transition:transform .15s ease;
}
.filter-btn:hover{ transform:translateY(-1px); }
.filter-btn.active{ color:#fff; }

.empty{ text-align:center; color:var(--ink-soft); padding:60px 20px; font-size:14px; line-height:1.8; }
.empty .doodle{ font-size:32px; display:block; margin-bottom:10px; }

.refresh{
  position:fixed; right:20px; bottom:20px;
  width:48px; height:48px; border-radius:50%;
  background:var(--accent); color:#fff; border:none;
  font-size:20px; cursor:pointer;
  box-shadow:0 8px 20px rgba(199,127,163,.4);
}

/* ---------- nav cards (home page) ---------- */
.nav-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(2, 1fr);
  margin-top:30px;
}
@media (min-width:640px){ .nav-grid{ grid-template-columns:repeat(4, 1fr); } }
.nav-card{
  background:var(--paper); border-radius:22px; padding:26px 16px;
  text-align:center; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
  position:relative; display:block;
}
.nav-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(74,63,77,.18); }
.nav-card .icon{ font-size:30px; display:block; margin-bottom:10px; }
.nav-card .label{ font-size:14px; font-weight:800; }
.nav-card .badge{
  position:absolute; top:10px; right:10px;
  font-size:10px; font-weight:700; color:var(--ink-soft);
  background:var(--accent-soft); padding:3px 8px; border-radius:999px;
}
.nav-card.disabled{ opacity:.55; cursor:default; }
.nav-card.disabled:hover{ transform:none; box-shadow:var(--shadow); }

/* ---------- day counter ---------- */
.counter-card{
  background:var(--paper); border-radius:24px; padding:30px 20px;
  text-align:center; box-shadow:var(--shadow); margin:0 auto; max-width:420px;
}
.counter-card .num{ font-size:48px; font-weight:800; color:var(--accent); line-height:1; }
.counter-card .unit{ font-size:14px; color:var(--ink-soft); margin-top:6px; }
.counter-card .set-date{
  margin-top:14px; font-size:12px; color:var(--ink-soft);
  text-decoration:underline; cursor:pointer; background:none; border:none;
}