*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#f0f2f5;
  max-width:680px;margin:0 auto;
}

/* ── Top bar ── */
.topbar{
  position:sticky;top:0;z-index:100;
  background:white;border-bottom:1px solid #eee;
  padding:8px 12px;
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
}
.topbar h1{font-size:15px;color:#333;font-weight:700;white-space:nowrap}
.top-tabs{display:flex;gap:5px;flex:1;justify-content:center;flex-wrap:nowrap}
.tab{
  padding:5px 11px;border:2px solid #ddd;border-radius:16px;
  background:white;font-size:12px;cursor:pointer;transition:all 0.2s;
  font-weight:600;white-space:nowrap;
}
.tab.active{background:#e8391d;color:white;border-color:#e8391d}
.mode-toggle{
  display:flex;border:2px solid #ddd;border-radius:16px;overflow:hidden;flex-shrink:0;
}
.mode-btn{
  padding:5px 10px;border:none;background:white;font-size:12px;
  cursor:pointer;transition:all 0.2s;font-weight:500;color:#666;
}
.mode-btn.active{background:#333;color:white}

/* ── Study mode ── */
#study-view{
  display:flex;flex-direction:column;align-items:center;
  gap:12px;padding:24px 16px;
  min-height:calc(100vh - 52px);
  justify-content:center;
}
.counter{font-size:12px;color:#aaa}

.card-wrapper{
  perspective:1000px;
  height:min(320px, 44vh);
  aspect-ratio:5/7;
  flex-shrink:0;
}
.card{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform 0.55s ease;-webkit-transition:-webkit-transform 0.55s ease;
  cursor:pointer;
}
.card.flipped{transform:rotateY(180deg)}
.card-front,.card-back{
  position:absolute;inset:0;border-radius:14px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,0.10);background:white;
}
.card-back{transform:rotateY(180deg)}
.card-front{
  display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:10px;
}
.img-box{
  flex:1;width:100%;background:white;border:1px solid #ddd;
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;overflow:hidden;min-height:0;
}
.img-box img{width:100%;height:100%;object-fit:contain;border-radius:9px}
.img-placeholder{color:#ccc;font-size:12px;user-select:none}
.s-english{
  font-size:13px;color:#444;text-align:center;
  padding:3px 6px;
  display:flex;align-items:center;justify-content:center;
}
.card-back{
  padding:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;position:relative;
}
.mic-btn{
  position:absolute;top:10px;left:10px;background:none;border:none;
  cursor:pointer;padding:6px;border-radius:50%;
  transition:background 0.15s;line-height:0;
}
.mic-btn:hover,.mic-btn:active{background:#f5f5f5}
.mic-btn.no-audio{opacity:0.2;cursor:default}
.s-chinese{position:absolute;top:10px;right:10px;font-size:16px;color:#333;font-weight:600}
.s-pinyin{
  font-size:32px;font-weight:700;color:#1a1a1a;
  text-align:center;line-height:1.15;margin-bottom:8px;
}
.s-pinyin.long{font-size:20px}
.s-phonetic{font-size:13px;color:#888;text-align:center}
.nav{display:flex;gap:10px}
.nav-btn{
  padding:6px 14px;background:white;border:2px solid #ddd;
  border-radius:10px;font-size:12px;cursor:pointer;
  transition:all 0.15s;min-width:72px;text-align:center;
}
.nav-btn:hover{background:#f8f8f8}
.nav-btn:disabled{opacity:0.3;cursor:default;background:white}
.hint{font-size:11px;color:#ccc;text-align:center}

/* ── Library mode ── */
#library-view{display:none;padding:12px}
.lib-controls{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;flex-wrap:wrap;gap:8px;
}
.lib-controls span{font-size:12px;color:#999}
.face-toggle{display:flex;border:2px solid #ddd;border-radius:16px;overflow:hidden}
.face-btn{
  padding:5px 14px;border:none;background:white;font-size:12px;
  cursor:pointer;font-weight:500;color:#666;transition:all 0.2s;
}
.face-btn.active{background:#e8391d;color:white}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:8px;
}
.grid-card{
  border-radius:10px;background:white;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;
  overflow:hidden;position:relative;
  aspect-ratio:5/7;
  display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;
  padding:7px 5px 5px;
}
.grid-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,0.13)}
.grid-img{
  flex:1;width:100%;background:white;border:1px solid #eee;
  border-radius:7px;display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;overflow:hidden;min-height:0;
}
.grid-img img{width:100%;height:100%;object-fit:contain;border-radius:6px;padding:4px}
.grid-img-ph{font-size:9px;color:#ddd}
.grid-english{font-size:9px;color:#666;text-align:center;line-height:1.2}
.grid-back{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:100%;height:100%;
  padding:5px;position:relative;
}
.grid-mic{
  position:absolute;top:4px;left:4px;
  background:none;border:none;cursor:pointer;
  padding:3px;border-radius:50%;line-height:0;
}
.grid-mic:active{background:#f5f5f5}
.grid-chinese{
  position:absolute;top:4px;right:4px;
  font-size:10px;color:#555;font-weight:600;
}
.grid-pinyin{font-size:12px;font-weight:700;color:#1a1a1a;text-align:center;line-height:1.2}
.grid-pinyin.long{font-size:8px}
.grid-phonetic{font-size:8px;color:#aaa;text-align:center;margin-top:2px}
.grid-num{
  position:absolute;bottom:3px;right:4px;
  font-size:8px;color:#ddd;
}

/* ── Desktop ── */
@media(min-width:600px){
  .topbar{padding:8px 20px}
  .tab{padding:5px 14px;font-size:13px}
  .mode-btn{padding:5px 13px;font-size:13px}

  #study-view{gap:16px;padding:32px 24px}
  .card-wrapper{height:min(340px, 44vh);aspect-ratio:5/7}
  .s-pinyin{font-size:38px}
  .s-pinyin.long{font-size:24px}
  .s-chinese{font-size:19px}
  .s-phonetic{font-size:15px}
  .s-english{font-size:14px}
  .nav-btn{padding:7px 18px;font-size:13px;min-width:90px}
  .hint{font-size:12px}

  #library-view{padding:16px 20px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
}

/* ── iPad ── */
@media(min-width:768px){
  body{max-width:900px}

  .topbar{padding:14px 28px;gap:14px}
  .topbar h1{font-size:20px}
  .tab{padding:10px 22px;font-size:16px;border-radius:22px;border-width:2px}
  .mode-btn{padding:10px 18px;font-size:16px}
  .mode-toggle{border-radius:22px}

  .back-btn{font-size:18px}

  #study-view{gap:28px;padding:40px 32px}
  .counter{font-size:16px}
  .card-wrapper{height:min(500px, 58vh);aspect-ratio:5/7}
  .card-front{padding:16px}
  .card-back{padding:20px}
  .s-english{font-size:20px;padding:6px 10px}
  .s-pinyin{font-size:56px;margin-bottom:12px}
  .s-pinyin.long{font-size:36px}
  .s-chinese{font-size:26px;top:14px;right:14px}
  .s-phonetic{font-size:18px}
  .mic-btn{top:14px;left:14px;padding:10px}
  .mic-btn svg{width:32px;height:32px}

  .nav{gap:16px}
  .nav-btn{padding:14px 32px;font-size:18px;min-width:130px;border-radius:14px}
  .hint{font-size:15px}

  #library-view{padding:20px 28px}
  .lib-controls span{font-size:16px}
  .face-btn{padding:10px 22px;font-size:16px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .grid-card{padding:10px 8px 8px;border-radius:14px}
  .grid-english{font-size:13px}
  .grid-pinyin{font-size:18px}
  .grid-pinyin.long{font-size:12px}
  .grid-phonetic{font-size:11px}
  .grid-chinese{font-size:14px}
  .grid-num{font-size:11px}
}