:root {
  --bg: #111217;
  --surface: #1d1e23;
  --surface2: #24262d;
  --text: #f6f4f7;
  --muted: #aaaab2;
  --accent: #b75cff;
  --accent2: #73e6c2;
  --border: rgba(255,255,255,.09);
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; }
body { padding-bottom:calc(72px + var(--safe-bottom)); }
button, input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.topbar {
  height:calc(62px + var(--safe-top)); padding:var(--safe-top) 10px 0;
  display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--border);
  background:#15161a; position:sticky; top:0; z-index:10;
}
.title-wrap { flex:1; min-width:0; }
.title { font-size:17px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.subtitle-label { color:var(--muted); font-size:11px; margin-top:2px; }
.icon-btn, .control, .mini-btn {
  border:0; background:transparent; color:var(--text); cursor:pointer; touch-action:manipulation;
}
.icon-btn { width:42px; height:42px; border-radius:50%; font-size:25px; }
.icon-btn:active, .control:active, .mini-btn:active { background:rgba(255,255,255,.1); }
.player-shell { background:#050505; position:relative; width:100%; }
video { width:100%; display:block; aspect-ratio:16/9; background:#000; object-fit:contain; }
.center-play {
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
  background:rgba(0,0,0,.55); font-size:31px; backdrop-filter:blur(8px);
}
.hidden { display:none !important; }
.controls {
  position:absolute; left:0; right:0; bottom:0; padding:8px 9px 9px;
  display:flex; align-items:center; gap:4px; background:linear-gradient(transparent,rgba(0,0,0,.86));
}
.control { min-width:40px; height:40px; border-radius:9px; font-size:14px; }
.progress-wrap { flex:1; }
#progress { width:100%; accent-color:var(--accent); }
.time { font-size:11px; color:#ddd; white-space:nowrap; }
.learning-card { padding:10px; }
.sentence-tools { display:flex; gap:6px; overflow:auto; padding:2px 1px 10px; }
.mini-btn {
  background:var(--surface2); border:1px solid var(--border); border-radius:10px;
  padding:8px 10px; white-space:nowrap; font-size:12px;
}
.original, .translation {
  text-align:center; border-radius:16px; padding:20px 13px; margin-top:5px;
  line-height:1.65; overflow-wrap:anywhere;
}
.original { background:var(--surface); font-size:25px; font-weight:650; }
.translation { color:#e6e4e8; font-size:20px; direction:rtl; min-height:48px; }
.placeholder { color:var(--muted); font-size:15px; font-weight:400; }
.word {
  display:inline-block; margin:1px 2px; padding:0 2px; border-radius:5px;
  cursor:pointer; touch-action:manipulation; transition:background .12s;
}
.word:active, .word.selected { background:rgba(183,92,255,.35); }
.status { color:#ffb8b8; text-align:center; font-size:13px; padding:0 15px 20px; }
.bottom-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  padding:7px 8px calc(7px + var(--safe-bottom)); background:rgba(20,21,26,.96);
  border-top:1px solid var(--border); display:flex; justify-content:space-around;
  backdrop-filter:blur(16px);
}
.nav-item { background:transparent; color:#aaa; border:0; min-width:58px; display:flex; flex-direction:column; gap:3px; align-items:center; font-size:20px; touch-action:manipulation; }
.nav-item span { font-size:10px; }
.nav-item.active { color:var(--text); }
.sheet-backdrop { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.55); }
.word-sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:31; background:#202126;
  border-radius:22px 22px 0 0; padding:10px 18px calc(18px + var(--safe-bottom));
  box-shadow:0 -15px 50px rgba(0,0,0,.45); animation:sheet .18s ease-out;
}
@keyframes sheet { from { transform:translateY(100%); } to { transform:translateY(0); } }
.sheet-handle { width:42px; height:4px; background:#777; border-radius:5px; margin:2px auto 8px; }
.sheet-head { display:flex; align-items:center; }
.sheet-head h2 { flex:1; margin:0; font-size:28px; }
.word-main { font-size:21px; color:var(--accent2); margin:15px 0; }
.word-example { color:#ccc; line-height:1.5; margin-bottom:18px; }
.save-btn { width:100%; padding:14px; border:0; border-radius:13px; background:var(--accent); color:white; font-weight:750; }
.panel { position:fixed; inset:0; z-index:25; background:var(--bg); padding-top:calc(70px + var(--safe-top)); }
.panel-inner { padding:20px; max-width:900px; margin:auto; }
.close-panel { position:absolute; right:10px; top:calc(8px + var(--safe-top)); }
.vocab-item { padding:15px 0; border-bottom:1px solid var(--border); }
.vocab-word { font-weight:750; font-size:20px; }
.vocab-translation { color:var(--accent2); margin-top:4px; }
@media (min-width: 800px) {
  body { max-width:1200px; margin:auto; }
  .topbar { position:relative; }
  main { padding:18px; }
  .player-shell { border-radius:18px; overflow:hidden; max-width:950px; margin:auto; }
  .learning-card { max-width:950px; margin:auto; }
  .bottom-nav { max-width:720px; left:50%; transform:translateX(-50%); border:1px solid var(--border); border-radius:18px 18px 0 0; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .topbar { display:none; }
  video { max-height:100vh; aspect-ratio:auto; }
  .bottom-nav { display:none; }
}