:root{
  --paper:#F5F1E6;
  --ink:#23283B;
  --ink-soft:#4A5066;
  --mustard:#D9A54B;
  --mustard-deep:#B8823A;
  --sage:#6B8F71;
  --card:#FFFFFF;
  --danger:#B5533C;
  --radius:14px;
  --shadow:0 8px 24px -8px rgba(35,40,59,0.25);
}

*{box-sizing:border-box;}

/* hidden 属性必须始终生效，优先级要压过任何单独设置了 display 的 class
   （比如 .lightbox、.field、.child-tabs 都设了自己的 display，
   不加这条规则的话 hidden 属性会被它们盖过去，导致该隐藏的东西藏不住）*/
[hidden]{ display:none !important; }

body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(35,40,59,0.055) 1px, transparent 0);
  background-size:22px 22px;
  color:var(--ink);
  font-family:'Work Sans', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: no-preference){
  .auth-card{ animation: settle .5s ease both; }
  @keyframes settle{
    from{ opacity:0; transform: translateY(10px) rotate(-1deg); }
    to{ opacity:1; transform: translateY(0) rotate(-0.6deg); }
  }
}

/* ---------- 语言切换 ---------- */
.lang-toggle{
  border:1.5px solid var(--ink);
  background:var(--card);
  color:var(--ink);
  padding:6px 13px;
  border-radius:999px;
  font-family:inherit;
  font-size:0.75rem;
  font-weight:600;
  cursor:pointer;
}
.lang-toggle:hover{ background:var(--ink); color:#fff; }

/* 登录/验证卡片里的小切换按钮，放在卡片右上角 */
.auth-card .lang-toggle{
  position:absolute;
  top:14px;
  right:14px;
}

/* 相册头部右侧：语言切换 + 退出登录 并排 */
.header-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ---------- 通用 ---------- */
.view{ min-height:100vh; }

.brand{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.7rem;
  margin:0 0 2px;
  letter-spacing:-0.01em;
}
.brand.small{ font-size:1.25rem; }
.tagline{
  margin:0 0 22px;
  color:var(--ink-soft);
  font-size:0.95rem;
}
.tagline.small{ margin:0; font-size:0.8rem; }

.link-btn{
  background:none;
  border:none;
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  font-size:0.85rem;
  padding:10px 4px;
  display:block;
  margin:6px auto 0;
}
.link-btn:hover{ color:var(--ink); }
.link-btn:focus-visible, .primary-btn:focus-visible, .ghost-btn:focus-visible,
.mode-btn:focus-visible, .child-tab:focus-visible, .photo-card:focus-visible{
  outline:3px solid var(--sage);
  outline-offset:2px;
}

/* ---------- 登录卡片 ---------- */
#auth-view, #verify-view{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}

.auth-card{
  position:relative;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:38px 32px 28px;
  width:100%;
  max-width:380px;
  transform:rotate(-0.6deg);
  text-align:center;
}

.pin{
  position:absolute;
  top:-11px;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #E9C27E, var(--mustard-deep));
  box-shadow:0 3px 6px rgba(0,0,0,0.25);
}

.mode-switch{
  display:flex;
  background:var(--paper);
  border-radius:999px;
  padding:4px;
  margin-bottom:22px;
}
.mode-btn{
  flex:1;
  border:none;
  background:none;
  padding:9px 6px;
  border-radius:999px;
  font-family:inherit;
  font-size:0.85rem;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.mode-btn.is-active{
  background:var(--ink);
  color:#fff;
}

.field{
  display:block;
  text-align:left;
  margin-bottom:14px;
}
.field span{
  display:block;
  font-size:0.8rem;
  color:var(--ink-soft);
  margin-bottom:5px;
}
.field input{
  width:100%;
  padding:11px 13px;
  border:1.5px solid #E2DDCE;
  border-radius:9px;
  font-family:inherit;
  font-size:0.95rem;
  background:#FCFAF5;
  color:var(--ink);
}
.field input:focus{
  outline:none;
  border-color:var(--sage);
  background:#fff;
}

.primary-btn{
  width:100%;
  padding:12px;
  border:none;
  border-radius:9px;
  background:var(--mustard);
  color:var(--ink);
  font-family:inherit;
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  margin-top:6px;
  transition:background .15s, transform .1s;
}
.primary-btn:hover{ background:var(--mustard-deep); }
.primary-btn:active{ transform:scale(0.98); }
.primary-btn:disabled{ opacity:0.6; cursor:wait; }

.verify-copy{
  color:var(--ink-soft);
  font-size:0.9rem;
  line-height:1.6;
  margin:0 0 20px;
}

.message{
  min-height:20px;
  font-size:0.85rem;
  margin:14px 0 0;
  color:var(--ink-soft);
}
.message.is-error{ color:var(--danger); }
.message.is-ok{ color:var(--sage); }

/* ---------- 相册头部 ---------- */
.gallery-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 24px;
  max-width:1080px;
  margin:0 auto;
}
.ghost-btn{
  background:none;
  border:1.5px solid var(--ink);
  color:var(--ink);
  padding:8px 16px;
  border-radius:999px;
  font-family:inherit;
  font-size:0.82rem;
  cursor:pointer;
}
.ghost-btn:hover{ background:var(--ink); color:#fff; }

/* ---------- 孩子切换标签 ---------- */
.child-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  max-width:1080px;
  margin:0 auto 8px;
  padding:0 24px;
}
.child-tab{
  border:1.5px solid var(--ink);
  background:var(--card);
  color:var(--ink);
  padding:8px 18px;
  border-radius:999px;
  font-family:inherit;
  font-size:0.88rem;
  cursor:pointer;
}
.child-tab.is-active{
  background:var(--sage);
  border-color:var(--sage);
  color:#fff;
}

/* ---------- 相册内容 ---------- */
.gallery-content{
  max-width:1080px;
  margin:0 auto;
  padding:16px 24px 60px;
}

.date-group{ margin-bottom:34px; }
.date-eyebrow{
  font-family:'Fraunces', serif;
  font-size:0.95rem;
  font-weight:600;
  color:var(--sage);
  margin:0 0 14px;
  padding-left:2px;
  border-left:3px solid var(--sage);
  padding-left:10px;
}

.photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:18px;
}

.photo-card{
  position:relative;
  background:var(--card);
  padding:8px 8px 10px;
  border-radius:4px;
  box-shadow:var(--shadow);
  cursor:pointer;
  border:none;
  display:block;
  width:100%;
  transition:transform .15s;
}
.photo-card:nth-child(3n+1){ transform:rotate(-1.4deg); }
.photo-card:nth-child(3n+2){ transform:rotate(1deg); }
.photo-card:nth-child(3n+3){ transform:rotate(-0.5deg); }
.photo-card:hover{ transform:scale(1.04) rotate(0deg); z-index:2; }

.photo-card::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:34px;
  height:14px;
  background:rgba(217,165,75,0.55);
  border:1px solid rgba(184,130,58,0.4);
}

.photo-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-radius:2px;
  background:#EDE8DA;
}

.photo-skeleton{
  width:100%;
  aspect-ratio:1/1;
  border-radius:2px;
  background:linear-gradient(100deg, #EDE8DA 30%, #F5F1E6 50%, #EDE8DA 70%);
  background-size:200% 100%;
  animation:shimmer 1.3s infinite;
}
@keyframes shimmer{
  from{ background-position:200% 0; }
  to{ background-position:-200% 0; }
}

.empty-state{
  max-width:420px;
  margin:60px auto;
  text-align:center;
  color:var(--ink-soft);
  line-height:1.7;
  padding:0 20px;
}

/* ---------- 放大层 ---------- */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(23,26,38,0.92);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:24px;
  z-index:50;
}
.lightbox img{
  max-width:min(90vw, 720px);
  max-height:72vh;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close{
  position:absolute;
  top:18px;
  right:22px;
  background:none;
  border:none;
  color:#fff;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
}
.lightbox-download{
  background:var(--mustard);
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  font-size:0.9rem;
  padding:10px 22px;
  border-radius:999px;
}
.lightbox-download:hover{ background:var(--mustard-deep); }

/* ---------- 响应式 ---------- */
@media (max-width:480px){
  .auth-card{ padding:32px 22px 24px; }
  .gallery-header{ padding:18px 16px; }
  .child-tabs, .gallery-content{ padding-left:16px; padding-right:16px; }
  .photo-grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:12px; }
}