:root{
  /* 低亮·护眼：偏绿的冷调羊皮纸（无黄） */
  --bg0:#c3cfc0; --bg1:#e1e8df;
  --card:#f2f6ed;
  --ink:#26271f; --ink2:#3b3d33; --sub:#61655a; --sub2:#92988b;
  --hairline:rgba(45,52,42,.20);
  --accent:#4f8def; --accent-soft:rgba(79,141,239,.12);
  --red:#ff6b78;
  /* 马卡龙目录色 */
  --sky:#5ba6f5;   /* 新词 · 浅蓝 */
  --orange:#ff9f7e; /* 重点 · 蜜桃 */
  --green:#46cd9b;  /* 已掌握 · 薄荷 */
  --gray:#9aa0ae;   /* 兜底中性 */
  --pink:#f7a8c8; --lav:#bfa7f5; --butter:#ffd97a;
  --shadow-card:0 1px 2px rgba(0,0,0,.04), 0 14px 30px -12px rgba(90,90,140,.16);
  --shadow-lift:0 2px 6px rgba(0,0,0,.05), 0 22px 44px -14px rgba(90,90,140,.22);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); line-height:1.5;
  background-color:var(--bg1);
  /* 偏绿冷调：鼠尾草/薄荷 极淡晕染，无黄 */
  background-image:
    radial-gradient(900px 470px at 18% -110px, rgba(150,184,160,.18), transparent 70%),
    radial-gradient(1000px 520px at 94% -150px, rgba(180,208,188,.16), transparent 70%),
    radial-gradient(820px 540px at 8% 44%, rgba(140,178,152,.14), transparent 68%),
    radial-gradient(820px 560px at 94% 56%, rgba(205,224,204,.18), transparent 68%),
    radial-gradient(760px 540px at 46% 106%, rgba(120,160,132,.12), transparent 70%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  background-attachment:fixed;
}
.topbar{
  position:sticky; top:0; z-index:5;
  background:rgba(225,232,223,.62);
  -webkit-backdrop-filter:saturate(200%) blur(22px); backdrop-filter:saturate(200%) blur(22px);
  border-bottom:1px solid var(--hairline);
  padding:16px 28px 12px; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.grand{font-size:30px; font-weight:700; letter-spacing:-.02em; margin:0; white-space:nowrap; color:var(--ink)}
#add-form{display:flex; gap:8px; flex:1; min-width:300px; max-width:640px}
#word-input{
  flex:1; font-size:15px; padding:9px 14px; border-radius:12px;
  border:1px solid var(--hairline); background:rgba(255,255,255,.9);
  outline:none; color:var(--ink);
}
#word-input::placeholder{color:var(--sub2)}
#word-input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.pill{border:0; border-radius:12px; padding:0 16px; font-size:14px; cursor:pointer; line-height:34px}
.pill.primary{background:var(--accent); color:#fff}
.pill.primary:hover{filter:brightness(1.08)}
.pill.primary:disabled{opacity:.5; cursor:default}
.pill.ghost{background:var(--card); border:1px solid var(--hairline); color:var(--ink2); line-height:32px}
.pill.ghost:hover{border-color:var(--accent); color:var(--accent)}
.pill.sm{padding:0 12px; line-height:28px; border-radius:9px}
.folders{display:flex; gap:8px; padding:12px 28px 0; flex-wrap:wrap; align-items:center}
.folder{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline); background:rgba(255,255,255,.7); color:var(--ink2);
  border-radius:999px; padding:6px 14px; cursor:pointer; font-size:13px; line-height:1.4;
  min-width:120px; text-align:center;
  transition:background .15s ease, box-shadow .15s ease, color .15s ease;
}
.folder:hover{background:#fff}
.folder.active{background:rgba(91,166,245,.18); border-color:var(--sky); color:#15487a;
  box-shadow:0 4px 12px -6px rgba(91,166,245,.55); font-weight:600}
.folder .dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px}
.folder[data-folder="new"] .dot{background:var(--sky)}
.folder[data-folder="key"] .dot{background:var(--orange)}
.folder[data-folder="mastered"] .dot{background:var(--green)}
.folder[data-folder="key"].active{background:rgba(255,159,126,.20); border-color:var(--orange);
  color:#7a3a17; box-shadow:0 4px 12px -6px rgba(255,159,126,.6)}
.folder[data-folder="mastered"].active{background:rgba(70,205,155,.18); border-color:var(--green);
  color:#0c5c3b; box-shadow:0 4px 12px -6px rgba(70,205,155,.6)}
.folder.active .dot{background:#fff; box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.folder .count{opacity:.85; font-weight:500; margin-left:2px}

/* 词库下载提示条 */
.dict-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:12px 28px 0; padding:9px 16px; border-radius:14px;
  background:rgba(229,244,232,.9); border:1px solid rgba(120,190,145,.45); color:#2f5d3c; font-size:13px;
}
#dict-bar-text{flex:1; min-width:220px}
#dict-bar.hidden{display:none}

/* 卡片流：左右两个独立纵向列 */
.card-list{
  position:relative;   /* 考卡盖在第一张卡正上方的定位基准 */
  max-width:1280px; margin:18px auto 14px; padding:0 28px;
  display:flex; gap:16px; align-items:flex-start;
}
.col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px}
@media (max-width:920px){ .card-list{flex-direction:column} }

.card{
  position:relative; overflow:hidden;
  /* 半透明磨砂玻璃卡：透出底色光晕 */
  background:
    linear-gradient(150deg, rgba(247,251,244,.72), rgba(238,245,236,.34));
  -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 0 0 .5px rgba(60,60,67,.05), var(--shadow-card);
  border-radius:var(--radius);
  padding:13px 16px 13px 19px;
  display:flex; flex-direction:column; gap:7px;
  transition:transform .16s ease, box-shadow .16s ease;
}
/* 左侧细彩条按目录着色（Apple 语义色） */
.card::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:3px; background:var(--tag, var(--gray))}
.card[data-tag="new"]{--tag:var(--sky);
  background-image:
    linear-gradient(150deg, rgba(91,166,245,.16), rgba(255,255,255,.0)),
    linear-gradient(150deg, rgba(247,251,244,.72), rgba(238,245,236,.34));}
.card[data-tag="key"]{--tag:var(--orange);
  background-image:
    linear-gradient(150deg, rgba(255,159,126,.22), rgba(255,255,255,.0)),
    linear-gradient(150deg, rgba(247,251,244,.72), rgba(238,245,236,.34));}
.card[data-tag="mastered"]{--tag:var(--green);
  background-image:
    linear-gradient(150deg, rgba(70,205,155,.20), rgba(255,255,255,.0)),
    linear-gradient(150deg, rgba(247,251,244,.72), rgba(238,245,236,.34));}
.card:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 .5px rgba(60,60,67,.04),
    0 3px 8px rgba(0,0,0,.05), 0 28px 54px -20px rgba(0,0,0,.26)}

.card-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.row-mean .meaning-side{flex:1 1 0; min-width:0}

.obsc{cursor:pointer; user-select:none; border-radius:10px; transition:background .15s ease}
.word-side{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.word{font-size:25px; font-weight:650; letter-spacing:-.01em; color:var(--ink)}
.ipa{color:var(--sub); font-size:14px}
.speaker{border:0; background:none; cursor:pointer; font-size:17px; color:var(--sub2); padding:0 2px; line-height:1}
.speaker:hover{color:var(--accent)}
.meaning-side{font-size:16px; line-height:1.6; color:var(--ink2)}
.pos{color:var(--sub); font-style:italic; margin-right:7px; font-size:14px}

/* 遮挡 = 毛玻璃遮罩：文字保留渲染但被高斯模糊，附磨砂浅底让遮挡位可见 */
.obsc.blur{
  filter: blur(7px);
  background:linear-gradient(0deg, rgba(142,142,160,.10), rgba(142,142,160,.06));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.obsc.blur:hover{filter: blur(6px)}

.acts{margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.chip{
  border:1px solid var(--hairline); background:#fff; border-radius:999px;
  padding:2px 11px; font-size:12px; cursor:pointer; color:var(--ink2); line-height:1.7;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover{background:var(--card); border-color:var(--accent); color:var(--accent)}
.chip.danger:hover{color:var(--red); border-color:var(--red)}
.detail-chip{flex:none; border-color:rgba(0,113,227,.35); color:var(--accent); font-weight:500}
.detail-chip:hover{background:var(--accent-soft)}

.example{margin-top:2px; border-top:1px dashed rgba(60,60,67,.22); padding-top:8px; font-size:14px; display:none}
.example.open{display:block}
.example .en{font-style:italic; color:var(--ink)}
.example .cn{color:var(--sub)}
.example .loading{color:var(--sub)}
.btn{
  border:1px solid var(--hairline); background:#fff; border-radius:999px;
  padding:3px 12px; font-size:12px; cursor:pointer; color:var(--ink2);
}
.btn:hover{border-color:var(--accent); color:var(--accent)}

.hint{text-align:center; color:var(--sub2); margin:22px; font-size:14px}
.hidden{display:none !important}
.linky{border:0;background:none;color:var(--accent);cursor:pointer;margin:6px 28px 24px;font-size:13px}
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:rgba(29,29,31,.92); color:#fff; padding:10px 18px; border-radius:999px;
  font-size:14px; z-index:9; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.utilities{display:flex; gap:18px; padding:6px 28px 0; flex-wrap:wrap}
.utilities .linky{margin:0; padding:2px 0}

/* 顶栏设置按钮 + 设置弹窗（极简） */
.pill.ghost:hover{background:var(--accent-soft)}
.modal{position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px}
#settings-modal.hidden{display:none}
.modal-card{background:rgba(255,255,255,.94); border:1px solid var(--hairline);
  border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.24);
  width:min(460px, 94vw); padding:18px 20px; display:flex; flex-direction:column; gap:14px;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
.modal-head{display:flex; justify-content:space-between; align-items:center}
.modal-head h2{margin:0; font-size:19px; font-weight:700; letter-spacing:-.01em}
.field-label{font-size:12px; color:var(--sub); letter-spacing:.02em}
.tools-row{display:flex; gap:8px; flex-wrap:wrap}
.export-picker{display:flex; gap:8px; flex-wrap:wrap; margin-top:-8px}
.modal hr{border:0; border-top:1px solid var(--hairline); margin:0}

.set-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.set-left{display:flex; flex-direction:column; gap:2px; min-width:0}
.set-title{font-size:15px; font-weight:600}
.set-sub{font-size:12px; color:var(--sub); overflow-wrap:anywhere}
.set-actions{display:flex; gap:6px; flex:none}
.key-edit{display:flex; flex-direction:column; gap:8px}
.key-edit-btns{display:flex; gap:8px; justify-content:flex-end}
#key-input{font-size:15px; padding:9px 12px; border-radius:12px; border:1px solid var(--hairline);
  background:#fff; outline:none}
#key-input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}

/* ---------- 词包视图（过词大卡） ---------- */
.pack-view { position: relative; padding: 0 18px 40px; }
#pack-head { margin: 14px 0 6px; }
.pack-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.pack-sub { color: var(--muted, #667); font-size: 13px; margin-bottom: 4px; }
.pack-track { height: 8px; border-radius: 6px; background: rgba(120,120,120,.18); overflow: hidden; }
.pack-track .bar { height: 100%; background: var(--accent, #43a047); transition: width .2s; }
.pack-stats { margin: 8px 0 12px; color: var(--muted, #667); font-size: 13px; }
.pack-stats b { color: var(--txt, inherit); }
.pack-batches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.batch-chip.locked { opacity: .35; cursor: not-allowed; }
.pack-card { display: flex; flex-direction: column; align-items: center; }
.pack-one { width: 100%; max-width: 460px; }
.pack-acts { display: flex; gap: 8px; justify-content: center; margin: 12px 0 6px; flex-wrap: wrap; }
.rate.known { background: #43a047; }
.rate.fuzzy { background: #f9a825; }
.rate.miss { background: #e53935; }
.pack-acts .rate { color: #fff; }
.pack-tip { margin-top: 2px; }
.pack-finish { text-align: center; padding: 30px 10px; }
.pack-undo { text-align: center; margin: 2px 0 10px; }
#pack-undo-btn { color: var(--accent, #4f8def); border-color: rgba(79,141,239,.4); background: var(--accent-soft, rgba(79,141,239,.12)); }
#pack-undo-btn:hover { background: #fff; }

/* ---------- 考研词汇 · 两级词库区（区切换 + 等级条） ---------- */
.topbar .brand { display: flex; flex-direction: column; gap: 0; line-height: 1.15; }
.brand .grand { margin: 0; }
.brand .slogan { font-size: 12px; color: var(--sub, #61655a); letter-spacing: .04em; }

.zone-nav {
  display: flex; gap: 6px; align-items: center; justify-content: center;
  padding: 12px 28px 0; flex-wrap: wrap;
}
.zone-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); background: rgba(255,255,255,.7);
  color: var(--ink2); border-radius: 999px; padding: 7px 22px;
  font-size: 14px; font-weight: 600; cursor: pointer; line-height: 1.4;
  min-width: 132px; text-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.zone-btn:hover { background: #fff; color: var(--accent); border-color: var(--accent); }
.zone-btn.active {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
  box-shadow: 0 4px 12px -6px rgba(79,141,239,.55);
}

/* 等级条：两级词库并排 */
.decks-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 4px; }
.decks-cap { font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: .06em; }
.decks-tiles { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.deck-tile {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  min-width: 220px; flex: 1 1 240px; max-width: 360px;
  border: 1px solid var(--hairline); border-radius: 14px;
  background: rgba(255,255,255,.72); padding: 10px 14px; cursor: pointer;
  color: var(--ink2); font: inherit; line-height: 1.45;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.deck-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.deck-tile.active {
  border-color: var(--accent);
  background: linear-gradient(150deg, rgba(79,141,239,.14), rgba(255,255,255,.6));
  box-shadow: inset 0 0 0 .5px rgba(79,141,239,.25), 0 8px 20px -12px rgba(79,141,239,.55);
}
.deck-tile.locked { cursor: not-allowed; opacity: .78; }
.deck-tile.locked:hover { border-color: var(--hairline); transform: none; }
.t-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.deck-tile.active .t-name { color: var(--accent); }
.deck-tile.locked .t-name { color: var(--sub); }
.t-tag { font-style: normal; font-size: 11px; font-weight: 500; color: var(--accent);
  border: 1px solid rgba(79,141,239,.35); border-radius: 999px; padding: 0 8px; margin-left: 4px; }
.t-track { height: 6px; border-radius: 5px; background: rgba(120,120,120,.18); overflow: hidden; }
.t-track .bar { height: 100%; background: var(--accent); transition: width .2s; }
.t-sub { font-size: 12px; color: var(--sub); }
.t-sub b { color: var(--ink2); }
.pack-title .pack-total { font-size: 13px; font-weight: 500; color: var(--sub); margin-left: 8px; }

/* ---------- 手机端紧凑化（≤640px；电脑端布局不受影响） ---------- */
@media (max-width: 640px){
  /* 顶栏：标题缩小、隐藏口号，录入框压扁，⚙设置同排不换行 */
  .topbar{padding:10px 12px 8px; gap:8px}
  .grand{font-size:20px}
  .brand .slogan{display:none}
  #add-form{min-width:0; gap:6px}
  #word-input{font-size:14px; padding:7px 10px; border-radius:10px; min-width:0}
  .pill{padding:0 12px; font-size:13px; line-height:30px}

  /* 区切换：两枚等宽铺满一行 */
  .zone-nav{padding:8px 12px 0; gap:8px}
  .zone-btn{min-width:0; flex:1 1 0; max-width:190px; padding:5px 10px; font-size:13px}

  /* 等级条：两枚词库按钮并排一行，内容紧凑 */
  .pack-view{padding:0 10px 30px; display:flex; flex-direction:column}
  .decks-bar{margin:6px 0 0; gap:8px}
  .decks-cap{display:none}
  .decks-tiles{gap:8px}
  .deck-tile{min-width:0; flex:1 1 0; padding:7px 10px; gap:3px; border-radius:12px}
  .t-name{font-size:13px}
  .t-tag{font-size:10px; padding:0 6px; margin-left:2px}
  .t-track{height:4px}
  .t-sub{font-size:10px}

  /* 头部压缩：过词卡一开屏就在可视区，不用往上扒 */
  #pack-head{margin:8px 0 2px; order:1}
  .pack-title{font-size:16px; margin-bottom:5px}
  .pack-title .pack-total{font-size:11px}
  .pack-track{height:5px}
  .pack-stats{font-size:11px; margin:5px 0 6px}
  .pack-sub{font-size:11px; margin-bottom:2px}
  #decks-bar{order:0}
  #pack-card{order:2}
  #pack-undo{order:3}
  /* 40 个批次按钮沉到页面最底端，且变小让行数减半 */
  #pack-batches{order:10; margin:10px 0 4px}
  .batch-chip{padding:1px 7px; font-size:11px}

  /* 过词大卡铺满宽度、内边距收紧 */
  .pack-one{max-width:none}
  .card{padding:10px 12px 10px 15px; gap:5px}
  .word{font-size:21px}
  .meaning-side{font-size:14px}
  .pack-acts{margin:8px 0 4px}
  .pack-acts .rate{padding:0 14px; line-height:32px; font-size:13px}
  .hint.pack-tip{font-size:11px; margin-top:2px}
  .deck-example{font-size:12px; padding-top:6px}

  /* 生词簿目录行：按钮不再撑爆，遮挡开关缩小 */
  .folders{padding:8px 12px 0}
  .folder{min-width:0; flex:1 1 auto; padding:5px 8px; font-size:12px}
  .blur-toggles{margin-left:auto; gap:5px}
  .blur-toggles .chip{padding:2px 7px; font-size:11px}

  /* 弹层与提示 */
  .hint{margin:12px; font-size:12px}
}

/* ---------- 单词考卡：盖在生词簿第一张卡正上方（同 .card 骨架，不用弹窗） ---------- */
.quiz-overlay{ position:absolute; z-index:8; }
.quiz-overlay .quiz-one{ width:100%; box-shadow:inset 0 0 0 .5px rgba(60,60,67,.05), var(--shadow-lift), 0 30px 70px -20px rgba(0,0,0,.4); }

/* 词库过词卡上的例句（来自 data/examples.json，随「下载发音和例句.bat」生成） */
.deck-example{ margin-top:4px; }
.deck-example .en{ font-style:italic; color:var(--ink) }
.deck-example .cn{ color:var(--sub) }

/* ---------- 生词簿全局遮挡开关 ---------- */
.blur-toggles { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.blur-toggles .chip { line-height: 1.7; }
.blur-toggles .chip.active {
  color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 600;
}