:root { color-scheme: dark; --red:#e11d2f; --bg:#080c14; --surface:#111827; --surface-2:#182131; --line:rgba(255,255,255,.11); --text:#f9fafb; --muted:#9ca3af; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,sans-serif; letter-spacing:0; }
button,input,textarea { font:inherit; }
button { min-height:42px; border:1px solid var(--line); border-radius:8px; padding:9px 12px; background:var(--surface-2); color:var(--text); font-weight:750; cursor:pointer; }
button.primary { border-color:var(--red); background:var(--red); }
button.saved,.popup-actions button.saved { border-color:#16a34a; background:#15803d; color:#fff; }
button:disabled { opacity:.55; }
button.saved:disabled { opacity:1; }
input,textarea { width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--surface); color:var(--text); }
textarea { resize:vertical; line-height:1.45; }
h1,h2,h3,p { overflow-wrap:anywhere; }

.mobile-header { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; padding:max(12px,env(safe-area-inset-top)) 16px 12px; border-bottom:1px solid var(--line); background:rgba(8,12,20,.96); }
.brand { display:flex; align-items:center; gap:10px; }
.brand .logo { display:grid; width:40px; height:40px; place-items:center; border-radius:8px; background:var(--red); font-size:25px; font-weight:900; }
.brand strong,.brand span { display:block; }
.brand span { color:var(--muted); font-size:12px; }
.icon-button { width:42px; padding:0; font-size:24px; }
.mobile-main { width:min(980px,calc(100% - 24px)); margin:0 auto; padding:14px 0 calc(32px + env(safe-area-inset-bottom)); }
.auth-panel { display:grid; max-width:680px; gap:12px; margin:0 auto; }
.auth-panel h1 { margin:8px 0; font-size:24px; }
.auth-panel label { display:grid; gap:6px; font-size:13px; font-weight:750; }
.button-row { display:flex; flex-wrap:wrap; gap:8px; }
.status { min-height:20px; color:#fda4af; }

.tabs { position:sticky; top:65px; z-index:4; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin-bottom:18px; padding:4px; border:1px solid var(--line); border-radius:8px; background:rgba(17,24,39,.96); }
.tab { min-width:0; border:0; background:transparent; color:var(--muted); padding:8px 5px; font-size:13px; }
.tab.active { background:var(--red); color:#fff; }
.tab span { display:inline-grid; min-width:20px; height:20px; place-items:center; border-radius:10px; background:rgba(255,255,255,.16); font-size:11px; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:4px 0 14px; }
.section-heading h1 { margin:0; font-size:26px; }
.section-heading p,.settings-section p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.inline-status { min-height:20px; color:var(--muted); font-size:12px; }

.feed-section { margin:18px 0 24px; }
.feed-section h2,.settings-section h2 { margin:0; font-size:18px; }
.feed-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.pager { display:flex; align-items:center; gap:6px; }
.pager button { width:38px; min-height:36px; padding:0; font-size:22px; }
.pager span { min-width:38px; color:var(--muted); text-align:center; font-size:12px; }
.article-list,.video-list { display:grid; gap:12px; }
.article-reader,.video-study { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.article-summary-row { display:grid; grid-template-columns:minmax(130px,28%) 1fr; min-height:150px; }
.article-summary-row img,.article-summary-row .image-fallback { width:100%; height:100%; min-height:150px; object-fit:cover; background:#202938; }
.image-fallback { display:grid; place-items:center; color:var(--red); font-size:42px; font-weight:900; }
.article-summary { display:grid; align-content:start; gap:7px; padding:14px; }
.article-summary span,.video-meta span { color:#fda4af; font-size:11px; font-weight:800; text-transform:uppercase; }
.article-summary h3,.video-meta h3 { margin:0; font-size:18px; line-height:1.35; }
.article-summary time { color:var(--muted); font-size:11px; }
.article-excerpt { padding:14px; border-top:1px solid var(--line); color:#e5e7eb; font-size:15px; line-height:1.7; user-select:text; -webkit-user-select:text; }
.open-original { display:inline-flex; margin:0 14px 14px; border-bottom:1px solid #fda4af; color:#fda4af; font-size:13px; font-weight:800; text-decoration:none; }
.youtube-player { display:block; width:100%; aspect-ratio:16/9; border:0; background:#000; }
.video-meta { display:grid; gap:5px; padding:12px 14px; border-bottom:1px solid var(--line); }
.bilingual-subtitles { display:grid; gap:6px; min-height:104px; padding:14px; text-align:center; }
.subtitle-en { color:#fff; font-size:20px; font-weight:800; line-height:1.45; user-select:text; -webkit-user-select:text; }
.subtitle-vi { color:#60a5fa; font-size:17px; font-style:italic; font-weight:400; line-height:1.45; }
.subtitle-word { cursor:pointer; }
.subtitle-word:hover { color:#fda4af; }

.stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.stats>div { padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.stats strong,.stats span { display:block; }
.stats strong { font-size:28px; }
.stats span { color:var(--muted); font-size:12px; }
.review-card { min-height:220px; padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.review-word { margin:4px 0 14px; font-size:36px; font-weight:900; }
.phonetic { color:var(--muted); }
.translation { margin:12px 0; padding:12px; border-left:4px solid #3b82f6; background:rgba(59,130,246,.11); color:#60a5fa; font-size:20px; font-style:italic; font-weight:400; }
.context { display:grid; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.context strong { color:#fda4af; font-size:12px; }
.context p { margin:4px 0 0; color:#d1d5db; line-height:1.5; }
.vi-line,.popup-language.vi p,.context-meaning p { color:#60a5fa !important; font-style:italic; font-weight:400 !important; text-transform:none; }
.review-details { display:grid; gap:8px; margin-top:14px; }
.review-details h3 { margin:0; font-size:15px; }
.review-meaning,.review-example { padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); }
.review-meaning p,.review-example p { margin:4px 0; line-height:1.45; }
.review-actions { margin-top:14px; }
.toolbar { display:grid; grid-template-columns:1fr auto; gap:8px; margin:0 0 14px; }
.word-list { display:grid; gap:8px; }
.word-item { width:100%; overflow:hidden; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--surface); text-align:left; }
.word-summary { width:100%; border:0; border-radius:0; padding:12px; background:transparent; text-align:left; }
.word-summary strong { display:block; font-size:18px; }
.word-summary span { color:#60a5fa; font-style:italic; font-weight:400; }
.word-details { padding:0 12px 12px; border-top:1px solid var(--line); }
.word-details h4 { margin:14px 0 6px; }
.inline-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.muted { color:var(--muted); font-size:12px; }
.empty { grid-column:1/-1; color:var(--muted); text-align:center; padding:28px 12px; border:1px dashed var(--line); border-radius:8px; }

.settings-section { display:grid; gap:8px; margin-bottom:14px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:700; }
.toggle-row input { width:20px; height:20px; accent-color:var(--red); }
.reminder-times { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.reminder-times label { display:grid; gap:5px; color:var(--muted); font-size:12px; }
.full-button { width:100%; }

.selection-translate { position:fixed; z-index:30; width:44px; min-height:44px; padding:0; border-color:#ff7180; background:var(--red); font-size:22px; }
.study-popover { position:fixed; z-index:40; right:10px; bottom:10px; left:10px; max-height:min(72vh,680px); overflow:auto; border:1px solid #374151; border-radius:8px; padding:14px; background:#080c14; box-shadow:0 16px 50px rgba(0,0,0,.6); font-size:14px; }
.popup-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.popup-head strong,.popup-head span { display:block; }
.popup-head strong { font-size:20px; }
.popup-head span { color:var(--muted); font-size:12px; }
.popup-logo { display:grid; width:36px; height:36px; place-items:center; border-radius:8px; background:var(--red); font-size:22px; font-weight:900; }
.popup-language,.popup-meaning,.popup-example,.popup-note { margin-top:8px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.popup-language.vi { border-left:4px solid var(--red); }
.popup-language label { color:#fda4af; font-size:11px; font-weight:800; text-transform:uppercase; }
.popup-language p,.popup-meaning p,.popup-example p,.popup-note p { margin:5px 0; line-height:1.45; }
.popup-actions { position:sticky; bottom:-14px; display:flex; flex-wrap:wrap; gap:8px; margin:14px -14px -14px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#080c14; }
.popup-loading { padding:24px; color:var(--muted); text-align:center; }
.context-meaning { margin-top:8px; padding:11px; border:1px solid rgba(96,165,250,.38); border-left:4px solid #3b82f6; border-radius:8px; background:rgba(59,130,246,.1); }
.context-meaning label { color:#93c5fd; font-size:12px; font-weight:800; }
.context-meaning p { margin:6px 0 0; font-size:16px; }
.exit-summary { position:fixed; inset:0; z-index:60; display:grid; place-items:end center; padding:16px; background:rgba(0,0,0,.58); }
.exit-card { width:min(620px,100%); max-height:min(80vh,720px); overflow:auto; border:1px solid var(--line); border-radius:8px; padding:14px; background:#080c14; box-shadow:0 22px 70px rgba(0,0,0,.64); }
.exit-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0; }
.exit-stats div { padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); text-align:center; }
.exit-stats strong,.exit-stats span { display:block; }
.exit-stats strong { font-size:26px; }
.exit-stats span { color:var(--muted); font-size:12px; }
.exit-chart { display:flex; align-items:end; gap:3px; min-height:70px; margin:12px 0 4px; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.exit-chart span { flex:1; min-width:4px; border-radius:4px 4px 0 0; background:#334155; }
.exit-chart span.today { background:var(--red); }

@media (max-width:520px) {
  .mobile-main { width:calc(100% - 20px); }
  .tabs { top:65px; }
  .tab { font-size:12px; }
  .article-summary-row { grid-template-columns:116px 1fr; min-height:122px; }
  .article-summary-row img,.article-summary-row .image-fallback { min-height:122px; }
  .article-summary { padding:10px; }
  .article-summary h3 { font-size:17px; line-height:1.35; }
  .article-summary span { font-size:12px; }
  .article-excerpt { font-size:17px; line-height:1.75; }
  .subtitle-en { font-size:18px; }
  .subtitle-vi { font-size:16px; }
  .reminder-times { grid-template-columns:1fr 1fr; }
  .review-word { font-size:31px; }
  .study-popover { left:50% !important; right:auto; top:17dvh !important; bottom:auto; width:min(67vw,390px); height:66dvh; max-height:66dvh; transform:translateX(-50%); padding:11px; border-radius:8px; font-size:13.6px; }
  .popup-head { gap:8px; margin-bottom:8px; }
  .popup-head strong { font-size:18px; }
  .popup-head span { font-size:12px; }
  .popup-logo { width:32px; height:32px; font-size:19px; }
  .popup-language,.popup-meaning,.popup-example,.popup-note,.context-meaning { padding:8px; }
  .popup-language label { font-size:11px; }
  .popup-language p,.popup-meaning p,.popup-example p,.popup-note p { line-height:1.43; }
  .context-meaning p { font-size:15px; }
  .popup-actions { bottom:-10px; margin:10px -10px -10px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .popup-actions button { min-height:37px; padding:7px 9px; font-size:13px; }
  .exit-summary { place-items:end center; padding:10px; }
  .exit-card { max-height:78dvh; }
}