/* 朗聲英語 v1 — DR-ENG-001 */
:root{
  --bg:#f6f7fb; --card:#ffffff; --ink:#1f2430; --muted:#6b7280;
  --accent:#3b5bdb; --accent-soft:#e7ecff;
  --ok:#15803d; --ok-bg:#dcfce7;
  --miss:#b91c1c; --miss-bg:#fee2e2;
  --border:#e5e7eb;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:"Segoe UI","Microsoft JhengHei","PingFang TC",system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  max-width:860px; margin:0 auto; padding:24px 16px 60px;
}
header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;}
header h1{font-size:1.5rem; margin-bottom:4px;}
header .sub{color:var(--muted); font-size:.9rem; margin-bottom:18px;}
.userbox{display:flex; align-items:center; gap:8px; font-size:.92rem; color:var(--muted);}
.userbox .uname{font-weight:600; color:var(--ink);}
.banner{
  background:#fef3c7; border:1px solid #fcd34d; color:#92400e;
  border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:.9rem;
  display:none;
}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;}
select,input[type=text],input[type=email],input[type=password]{
  font-size:1rem; padding:8px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--card); color:var(--ink);
  font-family:inherit;
}
input:focus,select:focus{outline:2px solid var(--accent-soft); border-color:var(--accent);}
.seg{display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden;}
.seg button{border:none; border-radius:0; background:var(--card); padding:8px 14px;}
.seg button.on{background:var(--accent); color:#fff;}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:20px; margin-bottom:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.sentence-display{font-size:1.45rem; line-height:2.1; font-weight:500; margin-bottom:14px;}
.sentence-display .w{cursor:pointer; padding:2px 3px; border-radius:6px; transition:background .15s;}
.sentence-display .w:hover{background:var(--accent-soft);}
.sentence-display .w.ok{color:var(--ok); background:var(--ok-bg);}
.sentence-display .w.miss{color:var(--miss); background:var(--miss-bg); text-decoration:underline wavy;}
.btns{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
button{
  font-size:1rem; font-family:inherit; padding:10px 18px; border-radius:10px;
  border:1px solid var(--border); background:var(--card); color:var(--ink);
  cursor:pointer; transition:all .15s;
}
button:hover{border-color:var(--accent); color:var(--accent);}
button:disabled{opacity:.45; cursor:not-allowed;}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
button.primary:hover{filter:brightness(1.08); color:#fff;}
button.small{padding:6px 12px; font-size:.9rem;}
button.recording{background:#dc2626; border-color:#dc2626; color:#fff; animation:pulse 1.2s infinite;}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(220,38,38,.15);}}
.status{font-size:.9rem; color:var(--muted); min-height:1.4em; margin-bottom:8px;}
.transcript{
  font-size:1rem; color:var(--muted); background:var(--bg);
  border-radius:10px; padding:10px 14px; min-height:2.6em; font-style:italic;
}
.score{font-size:1.15rem; font-weight:600; margin-top:12px; display:none;}
.hint{font-size:.85rem; color:var(--muted); margin-top:6px;}
h2{font-size:1.05rem; margin:22px 0 10px; color:var(--muted); font-weight:600;}
.sent-item{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:12px 16px; margin-bottom:8px; cursor:pointer; display:flex;
  justify-content:space-between; align-items:center; gap:12px; transition:border .15s;
}
.sent-item:hover{border-color:var(--accent);}
.sent-item.active{border-color:var(--accent); background:var(--accent-soft);}
.sent-item .txt{font-size:.98rem; line-height:1.5;}
.chip{flex-shrink:0; font-size:.85rem; font-weight:600; padding:3px 10px; border-radius:999px;}
.chip.good{background:var(--ok-bg); color:var(--ok);}
.chip.mid{background:#fef3c7; color:#92400e;}
.chip.low{background:var(--miss-bg); color:var(--miss);}

/* 單字區 */
.addform{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.addform input.en{flex:1; min-width:140px;}
.addform input.zh{flex:1; min-width:140px;}
.vocab-list{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.vocab-item{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
}
.vocab-item .v-en{font-weight:600; font-size:1.02rem; min-width:120px;}
.vocab-item .v-zh{color:var(--muted); flex:1;}
.vocab-item .v-act{display:flex; gap:6px;}
.empty{color:var(--muted); font-size:.92rem; padding:8px 2px;}

/* 片語區 */
.phrase-item{
  display:flex; align-items:center; gap:12px; padding:10px 14px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border); border-radius:10px; margin-bottom:8px;
}
.phrase-item .p-en{font-weight:600;}
.phrase-item .p-zh{color:var(--muted);}
.phrase-item .p-eg{flex-basis:100%; font-size:.86rem; color:var(--muted); font-style:italic;}
.phrase-item .p-act{margin-left:auto; display:flex; gap:6px;}

/* 單字卡 */
.flash{
  background:linear-gradient(135deg,#3b5bdb,#5b7cfa); color:#fff;
  border-radius:16px; padding:38px 24px; text-align:center; cursor:pointer;
  user-select:none; margin-bottom:12px; box-shadow:0 4px 14px rgba(59,91,219,.28);
}
.flash .f-label{font-size:.85rem; opacity:.85; margin-bottom:10px; letter-spacing:.5px;}
.flash .f-text{font-size:2rem; font-weight:700; line-height:1.3; word-break:break-word;}
.flash .f-hint{font-size:.8rem; opacity:.8; margin-top:14px;}

/* 文章閱讀模式 */
.article-prose{font-size:1.18rem; line-height:2.05;}
.article-prose .rs{cursor:pointer; padding:2px 3px; border-radius:6px; transition:background .15s;}
.article-prose .rs:hover{background:var(--accent-soft);}
.article-prose .rs.active{background:var(--accent-soft); box-shadow:inset 0 -2px 0 var(--accent);}
.article-prose .rs.scored-good{border-bottom:2px solid var(--ok);}
.article-prose .rs.scored-mid{border-bottom:2px solid #d8a441;}
.article-prose .rs.scored-low{border-bottom:2px solid var(--miss);}
.bi-row{margin-bottom:12px;}
.bi-en{display:block;}
.bi-zh{color:var(--muted); font-size:.92rem; margin-top:2px; line-height:1.6;}

/* 題目導覽(一題一區) */
.qnav{display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin-bottom:14px; padding-bottom:12px; border-bottom:1px dashed var(--border);}
.qnav .qlabel{font-size:.9rem; color:var(--muted); font-weight:600; margin-right:6px;}
.qnav .qn{min-width:34px; height:30px; padding:0 8px; font-size:.85rem; border-radius:8px;}
.qnav .qn.on{background:var(--accent); border-color:var(--accent); color:#fff;}
.qnav .qn.done{background:var(--ok-bg); border-color:var(--ok); color:var(--ok);}
.qnav .qn.done.on{background:var(--accent); border-color:var(--accent); color:#fff;}

/* 中譯 */
.meaning{display:none; font-size:1.05rem; color:#0f766e; background:#f0fdfa;
  border-left:3px solid #14b8a6; padding:8px 12px; border-radius:8px; margin-bottom:12px; line-height:1.6;}
.sent-zh{color:var(--muted); font-size:.92rem; margin-top:5px; line-height:1.5;}
.listhead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px 0 10px;}
.listhead h2{margin:0;}

/* 點字小浮窗 */
.wordpop{position:absolute; z-index:60; background:var(--card); border:1px solid var(--accent);
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:10px 12px; display:none; max-width:280px;}
.wordpop .wp-word{font-weight:700; font-size:1.1rem; margin-bottom:4px;}
.wordpop .wp-pos{font-size:.8rem; color:var(--muted); margin-bottom:8px;}
.wordpop .wp-row{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.wordpop input{width:120px; font-size:.95rem; padding:6px 8px; border-radius:8px; border:1px solid var(--border);}
.wordpop button{padding:6px 10px; font-size:.9rem;}
.wordpop .wp-msg{color:var(--ok); font-size:.85rem; margin-top:6px; min-height:1em;}

/* 登入畫面 */
#loginView{max-width:400px; margin:8vh auto 0;}
#loginView .logo{text-align:center; margin-bottom:22px;}
#loginView .logo h1{font-size:1.8rem;}
#loginView .logo p{color:var(--muted); font-size:.92rem; margin-top:6px;}
#loginView form{display:flex; flex-direction:column; gap:12px;}
#loginView input{width:100%;}
.login-err{color:var(--miss); font-size:.9rem; min-height:1.3em;}

/* Toast(P-8:失敗不得靜默) */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:#1f2430; color:#fff; border-radius:12px; padding:12px 18px;
  font-size:.95rem; display:none; z-index:100; max-width:90vw;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  display:none; align-items:center; gap:12px;
}
#toast.err{background:#b91c1c;}
#toast button{background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff; padding:5px 12px; font-size:.88rem;}
#toast button:hover{border-color:#fff; color:#fff;}

.loading{color:var(--muted); text-align:center; padding:40px 0; font-size:1.05rem;}
.hidden{display:none !important;}