:root{
  --bg:#f4f5f7; --card:#ffffff; --card2:#fafafa; --sentcard:#f5faf9;
  --text:#1a1a2e; --muted:#666; --sub:#888; --accent:#0f766e;
  --border:#dcdfe4; --bar:#1a1a2e; --barText:#fff; --shadow:0 1px 3px rgba(0,0,0,.06);
  --base:16px;
}
[data-theme="dark"]{
  --bg:#14151a; --card:#1e2027; --card2:#262932; --sentcard:#1b2420;
  --text:#e8eaed; --muted:#b0b6bd; --sub:#9aa0a8; --accent:#3ec9b0;
  --border:#3a3e49; --bar:#0d0e12; --barText:#e8eaed; --shadow:0 1px 3px rgba(0,0,0,.4);
}
[data-fontscale="1"]{--base:14px;}
[data-fontscale="2"]{--base:16px;}
[data-fontscale="3"]{--base:19px;}
[data-fontscale="4"]{--base:23px;}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{font-size:var(--base);}
body{
  background:var(--bg); color:var(--text); font-size:1rem;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.55; -webkit-text-size-adjust:100%;
  padding-top:calc(52px + env(safe-area-inset-top));
}
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  height:calc(52px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top);
  background:var(--bar); color:var(--barText);
  display:flex; align-items:center; gap:8px; padding-left:8px; padding-right:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.topbar h1{font-size:1rem; font-weight:600; margin:0; flex:1; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.top-actions{display:flex; gap:4px;}
.icon-btn{
  background:transparent; border:none; color:var(--barText); font-size:1.2rem;
  width:38px; height:38px; border-radius:8px; cursor:pointer; display:grid; place-items:center;
}
.icon-btn:active{background:rgba(255,255,255,.15);}

/* popover for font sizes */
.popover{
  position:fixed; top:calc(54px + env(safe-area-inset-top)); right:8px; z-index:40;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.18); padding:8px; display:flex; gap:6px; align-items:center;
}
.popover span{font-size:.8rem; color:var(--muted); padding:0 4px;}
.popover button{
  border:1px solid var(--border); background:var(--card2); color:var(--text);
  border-radius:8px; padding:6px 10px; cursor:pointer; font-size:.85rem;
}
.popover button.active{background:var(--accent); color:#fff; border-color:var(--accent);}

/* search + tools */
.search-wrap{
  position:sticky; top:calc(52px + env(safe-area-inset-top)); z-index:20;
  background:var(--bg); padding:10px 14px 8px; border-bottom:1px solid var(--border);
}
#search{
  width:100%; padding:11px 14px; font-size:1rem; border-radius:10px;
  border:1px solid var(--border); background:var(--card); color:var(--text); outline:none;
}
#search:focus{border-color:var(--accent);}
.tools{display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:10px;}
.chk{font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:6px; cursor:pointer;}
.chk input{width:16px; height:16px; accent-color:var(--accent);}
.accent{font-size:.85rem; color:var(--accent); cursor:pointer; user-select:none;
  border:1px solid var(--border); border-radius:8px; padding:4px 8px; background:var(--card);}

/* drawer */
.drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:50; width:80%; max-width:320px;
  background:var(--card); box-shadow:2px 0 16px rgba(0,0,0,.25);
  overflow-y:auto; padding:calc(16px + env(safe-area-inset-top)) 0 20px;
  transform:translateX(0); transition:transform .22s ease;
}
.drawer.hidden{transform:translateX(-102%);}
.drawer h2{font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--sub); margin:16px 18px 6px;}
.drawer a{
  display:block; padding:11px 18px; color:var(--text); text-decoration:none;
  font-size:.95rem; border-left:3px solid transparent;
}
.drawer a:active,.drawer a.active{background:var(--card2); border-left-color:var(--accent); color:var(--accent);}
.scrim{position:fixed; inset:0; z-index:45; background:rgba(0,0,0,.4);}
.scrim.hidden{display:none;}
.drawer.hidden ~ .scrim{display:none;}

/* main */
main{max-width:820px; margin:0 auto; padding:14px 14px 40px;}
.topic-title{font-size:1.35rem; font-weight:700; margin:6px 0 2px;}
.topic-sub{font-size:.82rem; color:var(--muted); margin-bottom:14px;}
.rule{height:2px; background:var(--bar); border:none; margin:0 0 14px;}
.section-bar{
  background:var(--bar); color:var(--barText); font-weight:600; font-size:1rem;
  padding:8px 12px; border-radius:8px; margin:18px 0 10px;
}
.cat-head{color:var(--accent); font-weight:700; font-size:.95rem; margin:16px 0 8px;}

/* cards */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:13px 15px; margin-bottom:11px; box-shadow:var(--shadow);
}
.card.sent{background:var(--card);}

/* word: title row */
.w-top{display:flex; align-items:center; gap:9px;}
.w-num{
  flex:none; min-width:1.6em; height:1.6em; padding:0 .35em; border-radius:6px;
  background:var(--accent); color:#fff; font-size:.78rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.w-word{font-weight:700; font-size:1.22rem; line-height:1.25;}
.w-pos{
  flex:none; color:var(--sub); font-size:.72rem;
  border:1px solid var(--border); border-radius:999px; padding:1px 8px; white-space:nowrap;
}
.w-top .speak{margin-left:auto;}
/* word: ipa + meaning row */
.w-meta{display:flex; align-items:baseline; flex-wrap:wrap; margin:7px 0 2px;}
.w-ipa{color:var(--accent); font-size:.95rem; padding-right:11px; margin-right:11px; border-right:1px solid var(--border);}
.w-mean{color:var(--text); font-size:1.05rem; font-weight:700;}
/* word: example block */
.w-exwrap{
  margin-top:11px; padding:9px 12px; border-left:3px solid var(--accent);
  background:var(--card2); border-radius:0 8px 8px 0;
}
.w-ex{
  color:var(--text); font-style:italic; font-size:.96rem; line-height:1.5;
  display:flex; align-items:flex-start; gap:6px;
}
.w-ex .speak{align-self:flex-start;}
.w-tr{color:var(--sub); font-size:.88rem; margin-top:6px; line-height:1.45;}

/* sentence card */
.s-top{display:flex; align-items:flex-start; gap:9px;}
.s-num{
  flex:none; min-width:1.6em; height:1.6em; padding:0 .35em; border-radius:6px;
  background:var(--accent); color:#fff; font-size:.78rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; margin-top:2px;
}
.s-en{font-weight:600; font-size:1.06rem; line-height:1.4; flex:1;}
.s-zh{color:var(--text); font-size:.95rem; margin:6px 0 0; line-height:1.45;}
.s-scene{
  color:var(--accent); font-size:.8rem; margin-top:7px; padding-left:9px;
  border-left:2px solid var(--border);
}
.s-scene::before{content:"场景 · "; color:var(--sub);}
.speak{
  cursor:pointer; border:none; background:transparent; flex:none;
  width:30px; height:30px; padding:0; border-radius:8px;
  font-size:0; color:transparent; /* hide emoji glyph */
  display:inline-flex; align-items:center; justify-content:center;
}
.speak::before{
  content:""; width:19px; height:19px; background-color:var(--accent);
  -webkit-mask:var(--spk) center/contain no-repeat; mask:var(--spk) center/contain no-repeat;
}
:root{--spk:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1c2.9.9 5 3.5 5 6.7s-2.1 5.8-5 6.7v2.1c4-1 7-4.6 7-8.8s-3-7.8-7-8.8z"/></svg>');}
.speak:active{background:rgba(15,118,110,.14);}
.w-ex .speak{width:26px; height:26px;}
.w-ex .speak::before{width:16px; height:16px;}

/* hide chinese (self-test) */
body.hide-zh .w-mean, body.hide-zh .w-tr, body.hide-zh .s-zh{
  filter:blur(5px); cursor:pointer; transition:filter .12s; user-select:none;
}
body.hide-zh .w-mean.reveal, body.hide-zh .w-tr.reveal, body.hide-zh .s-zh.reveal{filter:none;}

.no-result{color:var(--muted); text-align:center; padding:40px 10px;}
mark{background:#ffe27a; color:#1a1a2e; padding:0 1px; border-radius:2px;}
[data-theme="dark"] mark{background:#5a4d17; color:#ffe27a;}

/* PC: two columns for cards */
@media(min-width:820px){
  .cards{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
  .cards .card{margin-bottom:0;}
  .cat-head, .section-bar{grid-column:1/-1;}
}