/* css/style.css */
:root{
  --ivory:#F7F2E8; --ink:#1F1B16; --muted:#6F665A;
  --red:#A63D2F; --line:#DED4C3; --white:#FFFDF8;
  --pad:24px;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--ivory);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.6;
  overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
.container{max-width:1180px;margin:0 auto;padding:0 var(--pad);}
.serif{font-family:'Cormorant Garamond',Georgia,serif;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,242,232,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  min-height:64px;gap:16px;}
.logo{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;
  font-weight:700;letter-spacing:.04em;white-space:nowrap;}
.logo span{color:var(--red);}
.nav{display:flex;gap:24px;font-size:14px;font-weight:500;}
.nav a{color:var(--muted);transition:.2s;}
.nav a:hover, .nav a.active{color:var(--ink);}
.header-right{display:flex;align-items:center;gap:10px;}
.menu-toggle{display:none;background:none;border:0;font-size:24px;
  cursor:pointer;padding:8px;line-height:1;}

/* ---------- Account menu ---------- */
.account-menu{position:relative;}
.user-signin{display:inline-flex;align-items:center;justify-content:center;
  padding:9px 16px;border:1px solid var(--ink);border-radius:999px;
  background:transparent;color:var(--ink);
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.2s;}
.user-signin:hover{background:var(--ink);color:var(--ivory);}
.user-chip{display:inline-flex;align-items:center;gap:8px;
  padding:4px 10px 4px 4px;border:0;border-radius:999px;background:transparent;
  cursor:pointer;font-size:13px;font-weight:600;max-width:180px;transition:.2s;}
.user-chip:hover{background:rgba(31,27,22,.06);}
.user-avatar{width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  background:var(--red);color:var(--white);display:grid;place-items:center;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;font-weight:600;
  object-fit:cover;}
.user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);}
.user-chip[aria-expanded="true"]{background:rgba(31,27,22,.06);}

.account-dropdown{position:absolute;right:0;top:calc(100% + 12px);width:252px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(31,27,22,.14);padding:8px;z-index:60;}
.menu-user{display:flex;align-items:center;gap:10px;padding:10px 12px 12px;
  border-bottom:1px solid var(--line);margin-bottom:6px;}
.menu-user .user-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 16px;
    color: var(--white); /* 强制白色 */
    line-height: 36px;   /* 兜底：垂直居中 */
    text-align: center;  /* 兜底：水平居中 */
}
.menu-user strong{display:block;font-size:14px;line-height:1.3;}
.menu-user span{display:block;font-size:12px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.menu-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:500;transition:.15s;}
.menu-item:hover{background:var(--ivory);}
.menu-item .zh{color:var(--muted);font-size:12px;}
.menu-badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--red);color:#fff;font-size:11px;font-weight:600;}
.menu-cta{display:flex;align-items:center;justify-content:center;margin-top:6px;
  padding:11px 14px;border-radius:999px;background:var(--ink);color:var(--ivory);
  font-size:13.5px;font-weight:600;transition:.2s;}
.menu-cta:hover{background:var(--red);}
.menu-sub{display:flex;align-items:center;justify-content:center;
  padding:9px 14px;font-size:13px;color:var(--muted);transition:.2s;}
.menu-sub:hover{color:var(--ink);}
.menu-signout{display:block;width:100%;text-align:left;margin-top:6px;
  padding:10px 12px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);font-size:13.5px;font-weight:500;cursor:pointer;transition:.15s;}
.menu-signout:hover{background:var(--ivory);color:var(--red);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 24px;border-radius:999px;font-size:14px;font-weight:600;
  border:1px solid var(--ink);transition:.2s;cursor:pointer;font-family:inherit;
  min-height:48px;}
.btn-primary{background:var(--ink);color:var(--ivory);}
.btn-primary:hover{background:var(--red);border-color:var(--red);}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--ivory);}

/* ---------- Footer ---------- */
.site-footer{padding:32px 0;color:var(--muted);font-size:13px;
  border-top:1px solid var(--line);}
.footer-grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--ivory);padding:12px 20px;border-radius:999px;
  font-size:14px;opacity:0;pointer-events:none;transition:.3s;z-index:200;
  max-width:calc(100% - 32px);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ========== 响应式 ========== */
@media (max-width:900px){
  :root{--pad:20px;}
  
  /* 隐藏桌面导航，显示汉堡按钮 */
  .nav{display:none;}
  .menu-toggle{display:block;}
  
  /* 900px 以下展开的移动端菜单 */
  .nav.open{
    display:flex;position:fixed;top:64px;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--ivory);padding:8px 16px 16px;
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 30px rgba(31,27,22,.08);
    z-index:49;
  }
  .nav.open a{padding:14px 4px;font-size:16px;color:var(--ink);
    border-bottom:1px solid var(--line);}
  .nav.open a:last-child{border-bottom:0;}
}

@media (max-width:640px){
  :root{--pad:16px;}
  .header-inner{min-height:60px;}
  .logo{font-size:20px;}
  
  /* 调整移动端菜单的偏移量，与 60px 的 Header 高度匹配 */
  .nav.open{ top: 60px; }

  .user-chip .user-name{display:none;}
  .user-chip{padding:3px;}
  .user-signin{padding:8px 13px;font-size:12.5px;}
  .account-dropdown{position:fixed;left:16px;right:16px;top:64px;
    width:auto;box-shadow:0 18px 40px rgba(31,27,22,.16);}

  .site-footer{padding:24px 0;text-align:center;}
  .footer-grid{flex-direction:column;align-items:center;gap:12px;}
  .footer-links{justify-content:center;}
}