/* ============================================================
 * WordLoop P1 —— 样式（styles.css）
 * 柔和暖色调：#F7F5F3 背景 / Noto Serif SC / max-width 1100px
 * 移动端优先响应式
 * P1 新增：档位面板（tier-btn / tier-grid）
 * ============================================================ */
:root{
  --bg:#F7F5F3; --card:#FFFFFF; --ink:#2C2C2A; --ink2:#5F5E5A; --line:#E3DFD8;
  --accent:#A05A2C; --accent2:#8B5A2B; --warm:#FAEEDA; --warm2:#F5E6D3;
  --green:#3B6D11; --greenbg:#EAF3DE; --red:#A32D2D; --redbg:#FCEBEB;
  --blue:#185FA5; --bluebg:#E6F1FB;
  --radius:12px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--ink); font-family:"Noto Serif SC","Songti SC","STSong",serif; font-size:15px; line-height:1.75;}
#app{max-width:1100px; margin:0 auto; padding:0 16px 40px;}
.topbar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:16px 0; border-bottom:2px solid var(--accent); margin-bottom:20px;}
.logo{font-size:22px; font-weight:700; color:var(--accent); letter-spacing:1px;}
.logo-sub{font-size:12px; color:var(--ink2); margin-left:8px; font-weight:400;}
.tabs{display:flex; gap:6px; flex-wrap:wrap;}
.tab{border:none; background:transparent; padding:8px 16px; border-radius:999px; cursor:pointer; font-size:14px; color:var(--ink2); font-family:inherit;}
.tab:hover{background:var(--warm2);}
.tab.active{background:var(--accent); color:#fff;}
.wrap h2{font-size:20px; margin:8px 0 14px; color:var(--ink); padding-left:12px; border-left:4px solid var(--accent);}
h3{font-size:16px; margin:8px 0; color:var(--accent2);}
.view{display:none;}
.view.active{display:block;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin:14px 0;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px;}
.row.between{justify-content:space-between;}
.center-gap{justify-content:center;}
.center{text-align:center;}
.muted{color:var(--ink2);}
.small{font-size:13px;}
.hidden{display:none !important;}
.btn{border:none; border-radius:8px; padding:9px 18px; font-size:14px; cursor:pointer; font-family:inherit; background:var(--warm2); color:var(--accent2); transition:filter .15s;}
.btn:hover{filter:brightness(0.96);}
.btn.primary{background:var(--accent); color:#fff;}
.btn.danger{background:var(--red); color:#fff;}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--ink2);}
.btn:disabled{opacity:.6; cursor:wait;}
.input{width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:14px; font-family:inherit; background:#FBF9F6; margin:6px 0;}
.select{width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:14px; font-family:inherit; background:#FBF9F6; margin:6px 0;}
textarea.input{resize:vertical;}
label{display:block; font-size:13px; color:var(--ink2); margin-top:10px;}
.note{background:var(--warm); border-left:4px solid var(--accent); padding:10px 14px; border-radius:0 8px 8px 0; font-size:13px; margin:10px 0;}
.bar{background:var(--warm2); border-radius:999px; height:12px; overflow:hidden; margin:8px 0;}
.bar-fill{background:var(--green); height:100%; border-radius:999px; transition:width .4s;}
.list{display:flex; flex-direction:column; gap:8px; margin:10px 0;}
.chip{display:flex; justify-content:space-between; align-items:center; background:#FBF9F6; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:14px;}
.chip .tag{font-size:12px; color:var(--ink2);}

/* 材料词颜色标记：今天新学=蓝，1-5 天前=绿，其余默认 */
.wl-fresh{color:#2563EB;font-weight:600;}
.wl-recent{color:#16A34A;font-weight:600;}
.chip .btn{padding:4px 10px; font-size:13px;}
.flashcard{background:var(--warm); border:2px solid var(--accent); border-radius:16px; padding:36px 20px; margin:16px auto; max-width:480px; cursor:pointer; min-height:180px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px;}
.card-word{font-size:34px; font-weight:700; color:var(--accent); font-feature-settings:"liga" 0,"clig" 0; font-variant-ligatures:none;}
.card-def{font-size:16px;}
.card-def.revealed{color:var(--ink);}
.oow{color:var(--red); font-weight:700; text-decoration:underline wavy;}
.chat-box{background:#FBF9F6; border:1px solid var(--line); border-radius:var(--radius); padding:16px; min-height:280px; max-height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:10px;}
.msg{max-width:80%; padding:10px 14px; border-radius:12px; font-size:14px; white-space:pre-wrap;}
.msg.ai{background:var(--card); border:1px solid var(--line); align-self:flex-start;}
.msg.user{background:var(--accent); color:#fff; align-self:flex-end;}
.msg .meta{font-size:11px; opacity:.7; margin-bottom:4px;}
.msg .unlock-hint{font-size:12px; color:var(--accent2); background:var(--warm); border-radius:6px; padding:2px 8px; display:inline-block; margin-top:6px;}
.material-turns{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.turn{padding:10px 14px; border-radius:8px; background:#FBF9F6; border:1px solid var(--line);}
.turn .who{font-weight:700; color:var(--accent2); margin-right:8px;}
.footer{text-align:center; color:var(--ink2); font-size:12px; margin-top:30px;}
.switch{display:flex; align-items:center; gap:8px; cursor:pointer; margin:8px 0;}
.switch input{width:18px; height:18px;}
code{background:#F1EFE8; padding:1px 5px; border-radius:4px; font-size:13px;}

/* P1：词表档位面板 */
.tier-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:12px 0;}
.tier-btn{border:1px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer; background:#FBF9F6; transition:border-color .15s, background .15s;}
.tier-btn:hover{border-color:var(--accent);}
.tier-btn.active{border-color:var(--accent); background:var(--warm);}
.tier-name{font-weight:700; color:var(--accent2); font-size:15px;}
.tier-badge{display:inline-block; background:var(--accent); color:#fff; font-size:11px; border-radius:999px; padding:1px 8px; margin-left:6px; font-weight:400;}
.tier-meta{font-size:12px; color:var(--ink2); margin-top:4px;}
.tier-action{font-size:12px; color:var(--blue); margin-top:6px;}

@media(max-width:760px){
  .grid2{grid-template-columns:1fr;}
  .topbar{flex-direction:column; gap:10px; align-items:flex-start;}
  .msg{max-width:92%;}
  .card-word{font-size:28px;}
}

/* 读对话：当前朗读句高亮 */
.read-turn.active{background:var(--warm);border-radius:8px;transition:background .2s;}

/* 材料中文翻译行 */
.turn .zh{color:var(--ink2);font-size:13px;margin-top:3px;opacity:.85;}

/* 材料条目内联详情 */
.mat-detail{margin-top:10px;border-top:1px dashed #e5e0d5;padding-top:10px;}