:root{
  --primary: #FFD93D;
  --primary-dark: #F5C518;
  --primary-light: #FFF5D6;
  --secondary: #FF6B6B;
  --accent: #4ECDC4;
  --bg: #F8F9FA;
  --surface: #FFFFFF;
  --text: #2C3E50;
  --text-soft: #5A6C7D;
  --text-light: #5A6C7D;
  --border: #E8ECF1;
  --success: #1D9E75;
  --success-bg: #D1FAE5;
  --warning: #F59E0B;
  --danger: #EF4444;
  --sidebar-width: 240px;
  --topbar-height: 64px;
  --filter-collapsed-height: 150px;
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html,body{
  font-family:'Sarabun','Noto Sans SC',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  max-width:100vw;
}

/* Top Navigation */
.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--topbar-height);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  z-index:1000;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:16px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:18px;
  color:var(--text);
}
.logo-icon{
  width:36px;
  height:36px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:16px;
}
.user-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, #3DBBB4 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  color:#fff;
  cursor:pointer;
}

/* Mobile Menu Button */
.mobile-menu-btn{
  display:none;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  width:40px;
  height:40px;
  font-size:20px;
  cursor:pointer;
  color:var(--text);
  align-items:center;
  justify-content:center;
}
.page-title{
  font-size:24px;
  font-weight:700;
  margin-bottom:24px;
  color:var(--text);
}
.sidebar{
  position:fixed;
  left:0;
  top:var(--topbar-height);
  bottom:0;
  width:var(--sidebar-width);
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:20px 16px;
  overflow-y:auto;
  z-index:900;
  transition:transform 0.3s ease;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.sidebar::-webkit-scrollbar-thumb:hover{background:var(--text-light)}
.sidebar.hidden{transform:translateX(-100%)}
.sidebar-overlay{
  display:none;
  position:fixed;
  top:var(--topbar-height);
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  z-index:899;
}
.sidebar-overlay.show{
  display:block;
}
.sidebar-header{
  display:none;
}
.menu-toggle{display:none}
@media (max-width:1024px){
.sidebar{transform:translateX(-100%)}
.sidebar.show{transform:translateX(0)}
.main-content{margin-left:0!important;padding-left:20px;padding-right:20px}
.mobile-menu-btn{display:flex}
.mobile-menu-btn.hide{opacity:0;pointer-events:none}
.sidebar-overlay.show{display:block}
.topbar-left .mobile-menu-btn{display:flex;position:static}
}
@media (max-width:768px){
.main-content{padding-left:70px;padding-right:12px}
.grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.header-sticky{flex-direction:column;align-items:flex-start;padding:12px 0}
.page-title{font-size:20px;margin-bottom:12px}
.controls{gap:8px}
.tab{padding:4px 10px;font-size:12px}
}
@media (max-width:480px){
.main-content{padding-left:70px;padding-right:8px}
.grid{grid-template-columns:1fr;gap:12px}
.controls{gap:3px}
.tab{padding:3px 8px;font-size:11px}
.topic-filter-bar{flex-direction:column;align-items:flex-start;gap:8px}
.topic-filter-list{flex-wrap:wrap}
.topic-filter-clear{margin-left:0}
}
.sidebar-section{
  margin-bottom:24px;
}
.menu-title{
  font-size:11px;
  font-weight:600;
  color:var(--text-light);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:12px;
  padding-left:8px;
}
.sidebar-menu{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.menu-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:all 0.2s;
  font-size:14px;
  color:var(--text-light);
}
.menu-item:hover{
  background:var(--bg);
  color:var(--text);
}
.menu-item.active{
  background:var(--primary);
  color:#1a1a1a;
  font-weight:500;
}
.menu-icon{
  font-size:18px;
  width:24px;
  text-align:center;
}
.main-content{
  margin-left:var(--sidebar-width);
  margin-top:var(--topbar-height);
  padding:24px;
  min-height:calc(100vh - var(--topbar-height));
  flex:1;
  transition:margin-left 0.3s;
  min-width:0;
}
.wrap{
  padding:0;
  max-width:100%;
  overflow-x:hidden;
}
.header-sticky{
  position:sticky;
  top:0;
  background:var(--bg);
  z-index:100;
  padding:0 0 16px 0;
  border-bottom:none;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
}
.tab{
  padding:6px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  font-size:13px;
  cursor:pointer;
  transition:all 0.2s;
  color:var(--text-soft);
}
.tab:hover,.tab.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#1a1a1a;
}
.stats{font-size:13px;color:var(--text-soft);margin-left:auto}
.filter-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
  color:var(--text-soft);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
}
.filter-btn:hover{
  background:var(--bg);
  color:var(--text);
}
.filter-btn.active{
  background:var(--primary);
  color:#1a1a1a;
  border-color:var(--primary);
}
.filter-sidebar{width:320px;background:var(--surface);border-left:1px solid var(--border);padding:20px;position:fixed;right:0;top:0;bottom:0;overflow-y:auto;z-index:2001;transform:translateX(100%);transition:transform 0.3s;box-shadow:-2px 0 12px rgba(0,0,0,0.12)}
.filter-sidebar.show{transform:translateX(0)}
.filter-sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:2000}
.filter-sidebar-overlay.show{display:block}
.filter-sidebar-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.filter-sidebar-title{font-size:18px;font-weight:700;color:var(--text)}
.filter-sidebar-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-soft);cursor:pointer;font-size:18px;line-height:1;transition:all 0.2s}
.filter-sidebar-close:hover{background:var(--accent-light);color:var(--text)}
.filter-sidebar-actions{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.filter-action-link{border:none;background:transparent;color:#3B82F6;font-size:13px;font-weight:600;cursor:pointer;padding:0}
.filter-action-link:hover{color:var(--text)}
.filter-section{margin-bottom:24px}
.filter-section-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px}
.filter-options{display:flex;flex-direction:column;gap:6px}
.filter-radio{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  font-size:13px;
  cursor:pointer;
  background:var(--surface);
  color:var(--text);
  transition:all 0.2s;
}
.filter-radio:hover{
  background:var(--bg);
}
.filter-radio.checked{
  border-color:var(--primary);
  background:var(--primary);
  color:#1a1a1a;
}
.filter-radio input{
  margin:0;
  accent-color:var(--primary);
  transform:scale(1.1);
}
.filter-radio::after{content:attr(data-count);margin-left:auto;color:var(--text-soft);font-size:12px;font-weight:600;min-width:28px;text-align:right}
.compound-dropdown{width:320px;background:var(--surface);border-left:1px solid var(--border);padding:20px;position:fixed;right:0;top:0;bottom:0;overflow-y:auto;z-index:2001;transform:translateX(100%);transition:transform 0.3s;box-shadow:-2px 0 12px rgba(0,0,0,0.12)}
.compound-dropdown.show{transform:translateX(0)}
.compound-dropdown-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:2000}
.compound-dropdown-overlay.show{display:block}
.compound-dropdown-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.compound-dropdown-title{font-size:18px;font-weight:700;color:var(--text)}
.compound-dropdown-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-soft);cursor:pointer;font-size:18px;line-height:1;transition:all 0.2s}
.compound-dropdown-close:hover{background:var(--accent-light);color:var(--text)}
.compound-dropdown-item{padding:10px 14px;font-size:13px;color:var(--text);cursor:pointer;transition:background 0.15s;display:flex;justify-content:space-between;align-items:center}
.compound-dropdown-item:hover{background:var(--accent-light)}
.compound-dropdown-item.active{background:var(--accent);color:var(--surface)}
.compound-dropdown-item::after{content:attr(data-count);color:var(--text-soft);font-size:12px;font-weight:600;min-width:28px;text-align:right}
.compound-dropdown-item.active::after{color:var(--surface)}
.grid.combo-mode{grid-template-columns:1fr;gap:10px}
.combo-row{display:flex;align-items:stretch;gap:10px}
.combo-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 10px;text-align:center;min-width:0}
.combo-pinyin{font-size:11px;color:var(--text-soft);font-family:'Noto Sans SC',sans-serif;min-height:16px}
.combo-card-result{background:var(--primary-light);border-color:var(--primary-light)}
.combo-badge{display:inline-block;background:#5a6c7d;color:white;border-radius:999px;padding:3px 14px;font-size:11px;font-weight:600;font-family:'Noto Sans SC',sans-serif;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}
.combo-card-result .combo-badge{background:rgba(0,0,0,0.22)}
.combo-hanzi{font-size:28px;font-weight:700;font-family:'Noto Serif SC',serif;line-height:1.2;color:var(--text)}
.combo-card-result .combo-hanzi{color:var(--text)}
.combo-meaning{font-size:12px;color:var(--text-soft);line-height:1.4;margin-top:2px}
.combo-card-result .combo-meaning{color:var(--text-soft)}
.combo-symbol{font-size:20px;color:var(--text-soft);flex-shrink:0;align-self:center;font-weight:600}
.combo-speak{background:transparent;border:none;cursor:pointer;font-size:15px;padding:0;margin-top:4px;opacity:0.7}
.combo-speak:hover{opacity:1}
@media(max-width:480px){.combo-hanzi{font-size:22px}.combo-badge{font-size:10px;padding:2px 8px}}

.compound-dropdown-divider{height:1px;background:var(--border);margin:4px 0}
.progress{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.pbar{
  flex:1;
  height:8px;
  background:var(--bg);
  border-radius:4px;
  overflow:hidden;
}
.pfill{
  height:100%;
  background:var(--success);
  border-radius:4px;
  transition:width 0.3s;
}
.ptext{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}
.card-wrapper{perspective:1000px}
.card{
  position:relative;
  width:100%;
  min-height:224px;
  transform-style:preserve-3d;
  transition:transform 0.6s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.card.flipped{transform:rotateY(180deg)}
.card-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:16px;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
  background:var(--surface);
  border:1px solid var(--border);
}
.card-face:hover{
  border-color:var(--primary);
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
.card-back{
  background:var(--primary-light);
  transform:rotateY(180deg);
  border:1px solid var(--primary);
  min-height:224px;
  align-items:flex-start;
  justify-content:flex-start;
  padding:48px 20px 20px 20px;
}
.card-number{
  position:absolute;
  top:16px;
  left:20px;
  font-family:'Sarabun',sans-serif;
  font-size:12px;
  color:var(--text-light);
  font-weight:500;
}
.learned-btn{
  position:absolute;
  top:12px;
  right:12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:50%;
  width:32px;
  height:32px;
  font-size:14px;
  cursor:pointer;
  opacity:0.6;
  transition:all .2s;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
}
.learned-btn:hover{
  opacity:1;
  transform:scale(1.1);
  background:var(--primary);
  border-color:var(--primary);
}
.learned-btn.done{
  opacity:1;
  background:var(--success);
  border-color:var(--success);
  color:#fff;
}
.card.flipped .card-front .learned-btn{visibility:hidden}
.hanzi{
  font-family:'Noto Serif SC',serif;
  font-size:42px;
  font-weight:500;
  color:var(--text);
  line-height:1;
  margin-bottom:12px;
  text-align:center;
}
.hanzi-small{font-family:'Noto Serif SC',serif;font-size:1.15rem;color:var(--text);line-height:1.6;margin-bottom:4px}
.pinyin{
  font-family:'Noto Sans SC',sans-serif;
  font-size:16px;
  color:var(--text-light);
  text-align:center;
  margin-bottom:8px;
}
.pinyin.hidden{display:none}
.pinyin-light{font-family:'Noto Sans SC',sans-serif;font-size:0.82rem;color:var(--text-soft);margin-bottom:6px;line-height:1.5;text-align:left}
.meaning{
  font-family:'Sarabun',sans-serif;
  font-size:14px;
  color:var(--text);
  text-align:left;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  width:100%;
}
.meaning-light{font-family:'Sarabun',sans-serif;font-size:0.88rem;color:var(--text-soft);line-height:1.5;text-align:left}
.flip-hint{margin-top:12px;font-family:'Sarabun',sans-serif;font-size:12px;color:var(--text-light);letter-spacing:0.5px}
.back-label{font-family:'Sarabun',sans-serif;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-light);margin-bottom:6px;margin-top:12px;text-align:left}
.divider{width:100%;height:1px;background:var(--border);margin:8px 0}
.cat-label{
  font-size:11px;
  padding:4px 10px;
  border-radius:20px;
  margin-top:8px;
  text-align:center;
  display:inline-block;
  font-family:'Sarabun',sans-serif;
  font-weight:500;
  background:var(--bg);
  color:var(--text-light);
  border:1px solid var(--border);
}
.cat-action{background:var(--bg);color:var(--text-light)}
.cat-noun{background:var(--bg);color:var(--text-light)}
.cat-adj{background:var(--bg);color:var(--text-light)}
.cat-adv{background:var(--bg);color:var(--text-light)}
.cat-other{background:var(--bg);color:var(--text-light)}
.example-sentence{font-family:'Noto Serif SC',serif;font-size:1.15rem;color:var(--text);line-height:1.6;margin-bottom:4px;text-align:left}
.example{font-size:11px;color:var(--color-text-secondary);text-align:center;line-height:1.5;margin-top:6px;max-width:100%;word-wrap:break-word;overflow-wrap:break-word}
.hint{font-size:11px;color:var(--color-text-tertiary);margin-top:2px;text-align:center}
.page-ctrl{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:24px;
  justify-content:center;
  flex-wrap:wrap;
}
.page-btn{
  padding:8px 16px;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:13px;
  cursor:pointer;
  background:var(--surface);
  color:var(--text-soft);
  transition:all 0.2s;
}
.page-btn:hover{
  background:var(--bg);
}
.page-btn:disabled{
  opacity:0.4;
  cursor:default;
}
.page-btn.active{
  background:var(--primary);
  color:#1a1a1a;
  border-color:var(--primary);
}
.pinfo{
  font-size:13px;
  color:var(--text-light);
}
.remove-btn{position:absolute;top:8px;right:8px;background:var(--surface);color:var(--danger);border:1px solid var(--border);border-radius:50%;width:28px;height:28px;font-size:14px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1;transition:all 0.2s}
.card:hover .remove-btn{display:flex}
.remove-btn:hover{background:var(--danger);color:#fff}
.speak-btn{position:absolute;top:8px;right:8px;background:var(--primary);color:#1a1a1a;border:none;border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;opacity:1;transition:background 0.2s;z-index:10}
.speak-btn:hover{background:var(--primary-dark)}
#gameModal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center}
#gameModal.show{display:flex}
.game-container{background:var(--surface);border-radius:12px;padding:0 24px 24px 24px;max-width:800px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px rgba(0,0,0,0.3),0 10px 10px -5px rgba(0,0,0,0.2);position:relative}
.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:16px 0;position:sticky;top:0;z-index:10;background:var(--surface)}
.game-title{font-size:20px;font-weight:600;color:var(--text)}
.game-close{background:transparent;border:none;font-size:24px;cursor:pointer;color:var(--text-soft)}
.game-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:20px;
}
.game-card{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:12px;
  padding:16px;
  text-align:center;
  cursor:pointer;
  transition:all 0.2s;
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:500;
  color:var(--text);
}
.game-card:hover{
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
.game-card.selected{
  background:var(--primary);
  border-color:var(--primary);
  color:#1a1a1a;
}
.game-card.matched{
  background:var(--success-bg);
  border-color:var(--success);
  pointer-events:none;
  opacity:0.6;
  color:var(--success);
}
.game-card.wrong{
  background:#FEE2E2;
  border-color:var(--danger);
  animation:shake 0.3s;
  color:#991B1B;
}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.game-stats{display:flex;gap:20px;justify-content:center;font-size:14px;color:var(--text-soft);margin-bottom:16px}
.game-over-modal{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(253,252,248,0.95);display:flex;align-items:center;justify-content:center;z-index:100;border-radius:12px}
.game-over-content{text-align:center;padding:32px}
.game-over-title{font-size:32px;font-weight:600;color:#10B981;margin-bottom:16px}
.game-over-message{font-size:18px;color:var(--text);margin-bottom:8px}
.game-over-time{font-size:16px;color:var(--text-soft);margin-bottom:24px}
.game-over-btn{background:var(--primary);color:#1a1a1a;border:none;border-radius:8px;padding:12px 32px;font-size:16px;cursor:pointer;transition:background 0.2s;font-weight:600}
.game-over-btn:hover{background:var(--primary-dark)}
.game-result-modal{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(253,252,248,0.98);display:flex;align-items:center;justify-content:center;z-index:101;border-radius:12px}
.game-result-content{text-align:center;padding:40px;background:var(--surface);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,0.15);max-width:350px;width:90%}
.game-result-title{font-size:28px;font-weight:600;color:#10B981;margin-bottom:20px}
.game-result-message{font-size:18px;color:var(--text);margin-bottom:12px}
.game-result-time{font-size:16px;color:var(--text-soft);margin-bottom:20px}
.game-result-stars{font-size:24px;margin-bottom:28px;letter-spacing:4px}
.game-result-btn{background:var(--primary);color:#1a1a1a;border:none;border-radius:8px;padding:14px 40px;font-size:16px;cursor:pointer;transition:background 0.2s;font-weight:600}
.game-result-btn:hover{background:var(--primary-dark)}
.article-container{background:var(--surface);border-radius:12px;padding:0 24px 24px 24px;max-width:900px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px rgba(0,0,0,0.3),0 10px 10px -5px rgba(0,0,0,0.2);position:relative}
.article-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:16px 0 12px 0;border-bottom:2px solid var(--border);position:sticky;top:0;z-index:10;background:var(--surface)}
.article-title{font-size:22px;font-weight:600;color:var(--text)}
.article-close{background:transparent;border:none;font-size:24px;cursor:pointer;color:var(--text-soft)}
.article-list{display:flex;flex-direction:column;gap:12px}
.article-item{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;cursor:pointer;transition:all 0.2s}
.article-item:hover{background:var(--surface);border-color:var(--primary)}
.article-item-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px}
.article-item-desc{font-size:13px;color:var(--text-soft)}
.article-content{background:var(--surface);padding:20px;border-radius:10px}
.article-content h3{font-size:18px;font-weight:600;color:var(--text);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.article-para{margin-bottom:16px;line-height:1.8;color:var(--text);font-size:15px}
.article-para .zh-word{color:var(--primary);font-weight:600;cursor:pointer}
.article-para .zh-word:hover{text-decoration:underline}
.article-back-btn{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:14px;color:var(--text);cursor:pointer;margin-bottom:16px;transition:all 0.2s}
.article-back-btn:hover{background:var(--surface);border-color:var(--primary)}
.article-range-filter{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.article-range-btn{padding:6px 14px;border:1px solid var(--border);border-radius:20px;background:var(--bg);color:var(--text-soft);font-size:13px;cursor:pointer;transition:all 0.2s}
.article-range-btn:hover{background:var(--surface);border-color:var(--primary)}
.article-range-btn.active{background:var(--primary);border-color:var(--primary);color:#1a1a1a;font-weight:600}
.submenu{display:none;padding-left:20px;background:rgba(255,255,255,0.5)}
.submenu.show{display:block}
.submenu-toggle{cursor:pointer;user-select:none}
.submenu-item{padding-left:12px;font-size:13px}
.chevron{display:inline-block;transition:transform 0.2s ease;font-size:0.8em;margin-left:4px}
#articleModal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center}
#articleModal.show{display:flex}
#strokeModal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1100;align-items:center;justify-content:center}
#strokeModal.show{display:flex}
.modal-overlay{cursor:pointer}
.stroke-container{background:var(--surface);border-radius:16px;padding:24px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px rgba(0,0,0,0.4),0 10px 10px -5px rgba(0,0,0,0.3)}
.stroke-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--border);position:relative}
.stroke-title{font-size:20px;font-weight:600;color:var(--text)}
.stroke-close{background:transparent;border:none;font-size:24px;cursor:pointer;color:var(--text-soft)}
.stroke-characters{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-bottom:16px}
.stroke-character{display:flex;flex-direction:column;align-items:center;gap:8px}
.stroke-character-label{font-size:14px;color:var(--text-soft)}
.stroke-character-canvas{width:150px;height:150px;border:2px solid var(--border);border-radius:12px;background:var(--bg)}
.stroke-controls{display:flex;gap:10px;justify-content:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.stroke-btn{background:var(--primary);color:#1a1a1a;border:none;border-radius:8px;padding:10px 20px;font-size:14px;cursor:pointer;transition:background 0.2s;font-weight:600}
.stroke-btn:hover{background:var(--primary-dark)}
.stroke-btn-secondary{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 20px;font-size:14px;cursor:pointer;transition:all 0.2s}
.stroke-btn-secondary:hover{background:var(--border)}
.stroke-info{text-align:center;margin-bottom:16px;color:var(--text-soft);font-size:14px}
.stroke-btn-small{position:absolute;top:8px;right:8px;background:var(--bg);border:1px solid var(--border);border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;opacity:0.6;transition:all .2s;z-index:2;display:flex;align-items:center;justify-content:center;visibility:visible}
.stroke-btn-small:hover{opacity:1;transform:scale(1.1);background:var(--primary);border-color:var(--primary)}
.card.flipped .card-front .stroke-btn-small{visibility:hidden}
.stroke-legend{display:flex;justify-content:center;gap:16px;margin-bottom:16px;font-size:13px;color:var(--text-soft)}
.legend-item{display:flex;align-items:center;gap:6px}
.legend-dot{width:12px;height:12px;border-radius:50%}
#writingModal,#readingModal,#orderingModal,#similarModal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center}
#writingModal.show,#readingModal.show,#orderingModal.show,#similarModal.show{display:flex}
.exercise-container{background:var(--surface);border-radius:16px;padding:0 24px 24px 24px;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px rgba(0,0,0,0.4),0 10px 10px -5px rgba(0,0,0,0.3);position:relative}
.exercise-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:16px 0 12px 0;border-bottom:2px solid var(--border);position:sticky;top:0;z-index:10;background:var(--surface)}
.exercise-title{font-size:20px;font-weight:600;color:var(--text)}
.exercise-close{background:transparent;border:none;font-size:24px;cursor:pointer;color:var(--text-soft)}
.exercise-stats{display:flex;gap:20px;margin-bottom:20px;font-size:14px;color:var(--text-soft)}
.exercise-stats strong{color:var(--text)}
.exercise-content{margin-bottom:20px}
.writing-word{font-size:48px;font-weight:600;color:var(--text);text-align:center;margin-bottom:8px}
.writing-pinyin{font-size:18px;color:var(--text-soft);text-align:center;margin-bottom:8px}
.writing-meaning{font-size:16px;color:var(--text);text-align:center;margin-bottom:16px}
.writing-canvas-area{display:flex;flex-direction:column;align-items:center;margin-bottom:12px}
.writing-canvas{width:300px;height:300px;border:2px solid var(--border);border-radius:12px;background:var(--bg);cursor:crosshair}
.writing-canvas-controls{display:flex;gap:10px;margin-top:10px}
.reading-question{font-size:18px;color:var(--text);margin-bottom:16px;line-height:1.6}
.reading-options{display:flex;flex-direction:column;gap:10px}
.reading-option{padding:16px 20px;border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:all 0.2s;font-size:15px;margin-bottom:8px}
.reading-option:hover{background:var(--bg);border-color:var(--accent)}
.reading-option.selected{background:var(--accent-light);border-color:var(--accent)}
.reading-option.correct{background:#D1FAE5;border-color:#10B981}
.reading-option.wrong{background:#FEE2E2;border-color:#EF4444}
.ordering-hint{font-size:14px;color:var(--text-soft);margin-bottom:12px;text-align:center}
.ordering-pinyin{font-size:16px;color:var(--accent);text-align:center;margin-bottom:12px}
.ordering-words{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px;min-height:50px}
.ordering-word{padding:8px 16px;background:var(--bg);border:2px solid var(--border);border-radius:8px;cursor:pointer;font-size:16px;transition:all 0.2s}
.ordering-word:hover{background:var(--accent-light);border-color:var(--accent)}
.ordering-word.selected{background:var(--accent-light);border-color:var(--accent)}
.ordering-result{font-size:20px;font-weight:600;color:var(--text);text-align:center;margin-bottom:12px;min-height:30px}
.exercise-feedback{text-align:center;padding:12px;border-radius:8px;margin-top:12px;font-size:14px}
.exercise-feedback.correct{background:#D1FAE5;color:#065F46}
.exercise-feedback.wrong{background:#FEE2E2;color:#991B1B}
.exercise-controls{display:flex;gap:10px;justify-content:center;padding-top:16px;border-top:1px solid var(--border)}
.exercise-btn{background:var(--primary);color:#1a1a1a;border:none;border-radius:8px;padding:10px 20px;font-size:14px;cursor:pointer;transition:background 0.2s;font-weight:600}
.exercise-btn:hover{background:var(--primary-dark)}
.exercise-btn-secondary{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 20px;font-size:14px;cursor:pointer;transition:all 0.2s}
.exercise-btn-secondary:hover{background:var(--border)}
.similar-container{background:var(--surface);border-radius:16px;padding:0 24px 24px 24px;max-width:700px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px rgba(0,0,0,0.4),0 10px 10px -5px rgba(0,0,0,0.3);position:relative}
.similar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:16px 0 12px 0;border-bottom:2px solid var(--border);position:sticky;top:0;z-index:10;background:var(--surface)}
.similar-title{font-size:20px;font-weight:600;color:var(--text)}
.similar-close{background:transparent;border:none;font-size:24px;cursor:pointer;color:var(--text-soft)}
.similar-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.similar-card{border:2px solid var(--border);border-radius:12px;padding:16px;background:var(--bg);cursor:pointer;transition:all 0.2s}
.similar-card:hover{border-color:var(--primary);background:var(--primary);opacity:0.8}
.similar-card-header{display:flex;justify-content:center;gap:24px;margin-bottom:12px}
.similar-char{font-size:48px;font-weight:600;color:var(--text)}
.similar-char-label{font-size:12px;color:var(--text-soft);text-align:center;margin-top:4px}
.similar-meaning{text-align:center;font-size:14px;color:var(--text);margin-bottom:8px}
.similar-diff-box{background:#F9FAFB;border-radius:8px;padding:12px;margin-top:12px;font-size:13px;color:var(--text-soft);line-height:1.6}
.similar-example{margin-top:8px;padding:8px;background:#F3F4F6;border-radius:6px;font-size:12px}
.similar-example-zh{color:#1E40AF;font-weight:500}
.similar-example-py{color:#6B7280}
.similar-example-th{color:#059669}
.similar-detail-view{display:none}
.similar-detail-view.active{display:block}
.similar-list-view{display:block}
.similar-list-view.hidden{display:none}
.similar-back-btn{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:14px;cursor:pointer;transition:all 0.2s;margin-bottom:16px}
.similar-back-btn:hover{background:var(--surface);border-color:var(--primary)}
.similar-detail-content{background:var(--bg);border-radius:12px;padding:20px}
.similar-detail-header{display:flex;justify-content:center;align-items:center;gap:40px;margin-bottom:20px}
.similar-detail-char{font-size:64px;font-weight:600;color:var(--text)}
.similar-detail-pinyin{font-size:18px;color:var(--text-soft);text-align:center;margin-bottom:4px}
.similar-detail-meaning{font-size:16px;color:var(--text);text-align:center;margin-bottom:12px}
.similar-detail-box{flex:1;background:var(--surface);border-radius:12px;padding:16px;border:2px solid var(--border)}
.similar-detail-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:8px;text-align:center}
.similar-diff-highlight{background:var(--bg);padding:12px;border-radius:8px;margin-bottom:16px;font-size:14px;line-height:1.6;color:var(--text);border:1px solid var(--border)}
#listeningModal,#randomQuizModal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center}
#listeningModal.show,#randomQuizModal.show{display:flex}
.listening-container,.quiz-container{background:var(--surface);border-radius:16px;padding:0 24px 24px 24px;max-width:700px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px rgba(0,0,0,0.4),0 10px 10px -5px rgba(0,0,0,0.3);position:relative}
.listening-word{font-size:64px;text-align:center;margin:30px 0;color:var(--text-soft);opacity:0.3}
.listening-input{width:100%;padding:16px;font-size:32px;text-align:center;border:2px solid var(--border);border-radius:12px;font-family:'Noto Serif SC',serif;margin-bottom:16px}
.listening-input:focus{outline:none;border-color:var(--primary)}
.listening-result{text-align:center;padding:8px;border-radius:6px;margin:8px 0;font-size:14px}
.listening-result.correct{background:#D1FAE5;color:#065F46}
.listening-result.wrong{background:#FEE2E2;color:#991B1B}
.quiz-mode-selector{display:flex;gap:10px;margin-bottom:20px;justify-content:center;flex-wrap:wrap}
.quiz-mode-btn{padding:10px 20px;border:2px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text-soft);cursor:pointer;transition:all 0.2s;font-size:14px}
.quiz-mode-btn:hover{border-color:var(--primary);background:var(--surface)}
.quiz-mode-btn.active{background:var(--primary);color:#1a1a1a;border-color:var(--primary);font-weight:600}
.quiz-question{font-size:20px;color:var(--text);margin-bottom:20px;text-align:center;font-weight:500}
.quiz-input{width:100%;padding:12px;font-size:18px;border:2px solid var(--border);border-radius:8px;margin-bottom:16px;font-family:'Noto Serif SC',serif}
.quiz-progress-chart{margin-top:24px;padding:20px;background:var(--bg);border-radius:12px}
.quiz-chart-bar{height:30px;background:var(--primary);border-radius:4px;margin-bottom:8px;position:relative;transition:width 0.3s}
.quiz-chart-label{font-size:13px;color:var(--text-soft);margin-bottom:4px}
.game-mode-selector{display:flex;gap:10px;margin-bottom:16px;justify-content:center;flex-wrap:wrap}
.game-mode-btn{padding:8px 16px;border:2px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text-soft);cursor:pointer;transition:all 0.2s;font-size:13px}
.game-mode-btn:hover{border-color:var(--primary);background:var(--surface)}
.game-mode-btn.active{background:var(--primary);color:#1a1a1a;border-color:var(--primary);font-weight:600}

/* === Character Breakdown Section === */
#charBreakdownSection{padding:0 0 20px 0}
.cb-filter-bar{display:flex;flex-direction:column;gap:12px}
.cb-char-filter-btn{padding:8px 14px;border:2px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text-soft);cursor:pointer;transition:all 0.2s;font-size:14px;font-family:'Noto Serif SC',serif;min-width:40px}
.cb-char-filter-btn:hover{border-color:var(--primary);background:var(--surface)}
.cb-char-filter-btn.active{background:var(--primary);color:#1a1a1a;border-color:var(--primary);font-weight:600}
.cb-search-bar .cb-search-input{flex:1;padding:12px 16px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;background:var(--bg)}
.cb-search-input:focus{outline:none;border-color:var(--accent)}
.cb-count{font-size:13px;color:var(--text-soft);white-space:nowrap}
.cb-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:900px;margin:0 auto}

/* Each compound word row */
.cb-row{background:var(--bg);border-radius:14px;padding:16px 20px;border:1px solid var(--border);transition:box-shadow 0.15s}
.cb-row:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);border-color:var(--accent)}
.cb-equation{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cb-op{font-size:20px;color:var(--text-soft);font-weight:300;flex-shrink:0;padding:0 2px}

/* Component character card */
.cb-char-card{background:var(--surface);border-radius:10px;border:1.5px solid var(--border);padding:12px 16px;flex:1;text-align:center}
.cb-char-pinyin{font-size:12px;color:var(--text-soft);margin-bottom:6px;font-style:italic}
.cb-char-han{font-size:36px;font-family:'Noto Serif SC',serif;color:var(--text);line-height:1;margin-bottom:6px}
.cb-char-meaning{font-size:12px;color:var(--text-soft);line-height:1.4}

/* Result compound word card */
.cb-result-card{background:var(--surface);border-radius:10px;border:2px solid var(--accent);overflow:hidden;width:240px;flex-shrink:0;text-align:center}
.cb-result-header{background:linear-gradient(135deg,#2C3E50,#3D5A73);padding:5px 12px;font-size:12px;color:#fff;font-style:italic}
.cb-result-body{padding:10px 16px 12px}
.cb-result-han{font-size:34px;font-family:'Noto Serif SC',serif;color:var(--text);line-height:1;margin-bottom:5px}
.cb-result-meaning{font-size:13px;color:var(--text-soft);line-height:1.4}

/* Full breakdown meaning below */
.cb-fm{font-size:12px;color:var(--accent);margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}

@media(max-width:600px){
  .cb-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .cb-char-han{font-size:26px}
  .cb-result-han{font-size:24px}
  .cb-char-card{padding:8px 12px}
  .cb-result-card{width:100%;flex:1;padding:6px 10px 8px;flex-basis:100%}
  .cb-result-header{font-size:10px;padding:3px 8px}
  .cb-result-body{padding:6px 10px 8px}
  .cb-equation{gap:4px;flex-wrap:wrap;flex-direction:row}
  .cb-op{font-size:16px}
  .cb-body{padding:12px}
}