/* ===== 单词大师 App 全局样式 ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  background:#f5f6fa;
  color:#2d3436;
}

/* App 容器：移动端全屏，PC 居中成手机宽度 */
.app {
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:#f5f6fa;
  position:relative;
  box-shadow:0 0 30px rgba(0,0,0,.08);
}

/* ===== 顶部栏 ===== */
.topbar {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background:#fff;
  border-bottom:1px solid #eee;
}
.topbar .brand { cursor:pointer; line-height:1.3; flex-shrink:0; }
.topbar .logo { font-size:17px; font-weight:700; color:#2b3a67; }
.topbar .slogan { flex:1; text-align:center; font-size:0; line-height:1.2; padding:0 4px; }
.topbar .slogan-main { font-size:13px; color:#7a8699; font-weight:500; }
.topbar .slogan-sub { font-size:10px; color:#b5bdc9; margin-left:2px; }
.top-actions { display:flex; align-items:center; gap:8px; }
.btn-login {
  padding:6px 14px; border-radius:20px; font-size:13px;
  color:#2b3a67; text-decoration:none; border:1px solid #2b3a67;
}
.btn-register {
  padding:6px 14px; border-radius:20px; font-size:13px;
  background:#2b3a67; color:#fff; text-decoration:none;
}
.user-chip {
  padding:6px 14px; border-radius:20px; font-size:13px;
  background:#eef2ff; color:#2b3a67; cursor:pointer; max-width:120px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ===== 内容区 ===== */
.content {
  padding-bottom:70px; /* 给底部Tab留空间 */
  min-height:calc(100vh - 120px);
}

/* ===== 底部三Tab ===== */
.tabbar {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px;
  display:flex;
  background:#fff;
  border-top:1px solid #eee;
  z-index:100;
  padding-bottom:env(safe-area-inset-bottom);
}
.tab-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:8px 0 10px; text-decoration:none; color:#95a5a6;
  transition:color .2s;
}
.tab-item .tab-icon { font-size:22px; line-height:1.2; }
.tab-item .tab-label { font-size:11px; margin-top:2px; }
.tab-item.active { color:#2b3a67; font-weight:600; }

/* ===== 卡片 ===== */
.card {
  background:#fff; border-radius:14px; margin:12px 14px;
  padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.card-title { font-size:16px; font-weight:700; margin-bottom:12px; color:#2d3436; }

/* ===== 词书卡片墙 ===== */
.book-grid { display:flex; flex-wrap:wrap; gap:12px; padding:6px 14px; }
.book-card {
  width:calc(50% - 6px); background:#fff; border-radius:14px;
  overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.06);
  text-decoration:none; color:inherit; cursor:pointer;
}
.book-cover {
  width:100%; aspect-ratio:4/3; object-fit:cover; background:#eef2ff;
  display:flex; align-items:center; justify-content:center;
  font-size:40px; color:#b9c4e8;
}
.book-info { padding:10px 12px; }
.book-title { font-size:14px; font-weight:600; margin-bottom:4px; }
.book-meta { font-size:11px; color:#95a5a6; }
.book-tag {
  display:inline-block; padding:1px 6px; border-radius:8px; font-size:10px; margin-left:4px;
}
.tag-free { background:#dcfce7; color:#15803d; }
.tag-paid { background:#fef3c7; color:#b45309; }
.tag-owned { background:#dbeafe; color:#1d4ed8; }

/* ===== 按钮 ===== */
.btn {
  display:inline-block; padding:12px 0; width:100%;
  border:none; border-radius:12px; font-size:16px; cursor:pointer;
  text-align:center; text-decoration:none;
}
.btn-primary { background:#2b3a67; color:#fff; }
.btn-primary:active { background:#3a4d85; }
.btn-outline { background:#fff; color:#2b3a67; border:1.5px solid #2b3a67; }
.btn-success { background:#16a34a; color:#fff; }
.btn-gray { background:#e2e8f0; color:#475569; }
.btn-lg { padding:14px 0; font-size:17px; border-radius:14px; }
.btn-block { display:block; }

/* ===== 继续背单词大卡片 ===== */
.continue-card {
  background:linear-gradient(135deg,#2b3a67,#4a5f9e);
  color:#fff; border-radius:16px; margin:14px;
  padding:24px 20px; text-align:center;
}
.continue-card .big-icon { font-size:44px; margin-bottom:10px; }
.continue-card .continue-title { font-size:19px; font-weight:700; margin-bottom:6px; }
.continue-card .continue-sub { font-size:13px; opacity:.85; margin-bottom:16px; }
.continue-card .btn { background:#fff; color:#2b3a67; font-weight:600; max-width:240px; margin:0 auto; }

/* ===== 单词列表 ===== */
.word-list { background:#fff; border-radius:14px; margin:0 14px; overflow:hidden; }
.word-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-bottom:1px solid #f0f0f0;
}
.word-row:last-child { border-bottom:none; }
.word-main { flex:1; min-width:0; }
.word-text { font-size:15px; font-weight:600; }
.word-kana { font-size:12px; color:#95a5a6; margin-top:2px; }
.word-meaning { font-size:12px; color:#636e72; margin-top:2px; }

/* ===== 我的页面 ===== */
.profile-card {
  background:linear-gradient(135deg,#2b3a67,#4a5f9e);
  color:#fff; border-radius:16px; margin:14px;
  padding:24px 20px; display:flex; align-items:center; gap:14px;
}
.profile-avatar {
  width:60px; height:60px; border-radius:50%;
  background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
  font-size:28px;
}
.profile-name { font-size:18px; font-weight:700; }
.profile-email { font-size:12px; opacity:.8; margin-top:4px; }

.stat-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:0 14px; margin-bottom:12px; }
.stat-box { background:#fff; border-radius:12px; padding:12px 4px; text-align:center; }
.stat-num { font-size:18px; font-weight:700; color:#2b3a67; }
.stat-label { font-size:10px; color:#95a5a6; margin-top:3px; }

/* 打卡日历 */
.checkin-grid { display:grid; grid-template-columns:repeat(10,1fr); gap:4px; }
.checkin-cell {
  aspect-ratio:1; border-radius:4px; background:#f1f3f8;
  min-height:0; transition:background .2s;
}
.checkin-cell.checked { background:#22c55e; }

.menu-list { background:#fff; border-radius:14px; margin:0 14px 12px; overflow:hidden; }
.menu-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #f0f0f0;
  text-decoration:none; color:#2d3436; font-size:14px;
}
.menu-item:last-child { border-bottom:none; }
.menu-item:active { background:#f8f9fb; }
.menu-arrow { color:#bdc3c7; font-size:16px; }

/* ===== 学习记录 ===== */
.record-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:1px solid #f5f5f5;
}
.record-row:last-child { border-bottom:none; }
.record-book { font-size:14px; font-weight:600; }
.record-meta { font-size:11px; color:#95a5a6; margin-top:3px; }
.record-acc { font-size:15px; font-weight:700; color:#2b3a67; }

/* ===== 空状态 ===== */
.empty {
  text-align:center; padding:50px 20px; color:#bdc3c7;
}
.empty .empty-icon { font-size:52px; margin-bottom:12px; }
.empty .empty-text { font-size:14px; }

/* ===== 提示 ===== */
.toast {
  position:fixed; top:20%; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.8); color:#fff;
  padding:12px 22px; border-radius:10px; font-size:14px;
  z-index:999; opacity:0; transition:opacity .3s; pointer-events:none;
  white-space:nowrap;
}
.toast.show { opacity:1; }

/* ===== PC 适配 ===== */
@media (min-width:768px) {
  .app { max-width:480px; border-left:1px solid #e8e8e8; border-right:1px solid #e8e8e8; }
  body { background:#eef0f4; }
}

/* 隐藏滚动条但可滚动 */
::-webkit-scrollbar { width:0; height:0; }