:root {
  --bg: #101214;
  --panel: #171a1d;
  --panel-2: #1e2226;
  --panel-3: #252a2f;
  --line: #2e343a;
  --text: #f4f5f6;
  --muted: #99a2aa;
  --muted-2: #6f777f;
  --orange: #f0a252;
  --orange-2: #ffcb7c;
  --green: #83d6b5;
  --blue: #75baf7;
  --shadow: 0 16px 42px rgba(0,0,0,.24);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 16px 18px; border-right: 1px solid var(--line); background: #121416; display:flex; flex-direction:column; gap: 28px; }
.brand { display:flex; gap:10px; align-items:center; padding: 0 10px; }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg,#ff7e5f,#f9c74f 42%,#65d6af 65%,#5ea7ff); display:grid; place-items:center; color:#111; font-weight:900; box-shadow: 0 0 0 4px rgba(255,255,255,.04); }
.brand strong { font-size: 15px; letter-spacing: .02em; }
.brand small { display:block; color:var(--muted-2); font-size:10px; margin-top:3px; letter-spacing:.06em; }
.nav { display:grid; gap: 6px; }
.nav button { border:0; background:transparent; color:var(--muted); padding: 11px 12px; border-radius:10px; text-align:left; display:flex; align-items:center; gap:11px; font-size:13px; }
.nav button:hover, .nav button.active { color:var(--text); background:var(--panel-2); }
.nav .icon { width:18px; text-align:center; opacity:.9; }
.side-foot { margin-top:auto; border-top:1px solid var(--line); padding:16px 10px 0; color:var(--muted-2); font-size:11px; line-height:1.6; }

.main { min-width:0; }
.topbar { height:68px; display:flex; align-items:center; gap:20px; padding: 0 34px; border-bottom:1px solid var(--line); background: rgba(16,18,20,.92); position:sticky; top:0; z-index:20; backdrop-filter: blur(18px); }
.sidebar-toggle { display:none; flex:none; align-items:center; gap:7px; min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); font-size:12px; }
.sidebar-toggle:hover, .sidebar-toggle:focus-visible { border-color:var(--orange); outline-color:var(--orange); }
.sidebar-toggle span:first-child { font-size:17px; line-height:1; }
.search { flex:1; max-width: 680px; position:relative; }
.search input { width:100%; height:38px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); padding:0 14px 0 38px; outline:none; }
.search input:focus { border-color:#54616c; box-shadow: 0 0 0 3px rgba(117,186,247,.08); }
.search span { position:absolute; left:13px; top:9px; color:var(--muted-2); }
.top-actions { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:12px; }
.status-dot { width:8px; height:8px; background:#6ed6a8; border-radius:50%; box-shadow: 0 0 0 4px rgba(110,214,168,.12); }
.content { max-width: 1480px; margin:0 auto; padding: 34px 34px 80px; }
.hero { border:1px solid var(--line); border-radius:20px; padding:32px 34px; background: radial-gradient(circle at 88% 10%, rgba(240,162,82,.2), transparent 33%), linear-gradient(135deg,#1b2025,#171a1d 68%); box-shadow:var(--shadow); display:flex; justify-content:space-between; gap:30px; align-items:flex-end; }
.eyebrow { color:var(--orange); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.hero h1 { margin:10px 0 10px; font-size:clamp(28px,4vw,48px); line-height:1.07; letter-spacing:-.03em; }
.hero p { color:#b6bdc4; max-width:680px; line-height:1.7; margin:0; font-size:14px; }
.hero-stats { display:flex; gap:24px; flex-wrap:wrap; justify-content:flex-end; }
.scope-banner { border:1px solid var(--line); border-radius:20px; padding:28px 34px; background:var(--panel); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.scope-banner.category { border-color:rgba(131,214,181,.38); background:linear-gradient(120deg,rgba(131,214,181,.11),var(--panel) 52%); }
.scope-banner.blogger { border-color:rgba(194,154,245,.38); background:linear-gradient(120deg,rgba(194,154,245,.11),var(--panel) 52%); }
.scope-banner span { color:var(--muted); font-size:12px; }
.scope-banner h1 { margin:8px 0; font-size:clamp(24px,3vw,36px); overflow-wrap:anywhere; }
.scope-banner p { margin:0; color:var(--muted); font-size:12px; }
.scope-banner a { flex:none; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:12px; }
.scope-banner a:hover, .scope-banner a:focus-visible { color:var(--text); border-color:var(--muted); }
.stat b { display:block; font-size:28px; line-height:1; }
.stat span { color:var(--muted); font-size:11px; margin-top:7px; display:block; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:26px 0 18px; }
.toolbar h2 { margin:0; font-size:20px; letter-spacing:-.02em; }
.filters { display:flex; flex-wrap:wrap; gap:8px; }
.filter { color:var(--muted); border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:7px 12px; font-size:11px; }
.filter.active, .filter:hover { color:var(--text); border-color:#65717c; background:var(--panel-2); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:16px; }
.card { min-width:0; border:1px solid var(--line); background:var(--panel); border-radius:14px; overflow:hidden; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.card:hover { transform:translateY(-3px); border-color:#687682; box-shadow:0 12px 28px rgba(0,0,0,.25); }
.card-cover { aspect-ratio: 16/9; background:#0c0e10; position:relative; overflow:hidden; }
.card-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.card-cover:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.56)); pointer-events:none; }
.duration { position:absolute; right:10px; bottom:9px; z-index:1; padding:4px 7px; border-radius:6px; background:rgba(0,0,0,.7); color:#fff; font-size:10px; }
.play-badge { position:absolute; left:11px; bottom:8px; z-index:1; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.9); color:#151719; display:grid; place-items:center; font-size:11px; }
.card-body { padding:14px 14px 15px; }
.card-title { font-weight:650; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-summary { margin:9px 0 13px; color:#adb4ba; font-size:12px; line-height:1.55; min-height:37px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { border-radius:5px; padding:4px 7px; font-size:10px; color:#111; font-weight:650; }
.chip.sky { background:#a9e7ee; }.chip.rose { background:#f5b4cc; }.chip.blue { background:#afcdfb; }.chip.amber { background:#ffd48d; }.chip.violet { background:#d8b7fa; }
.chip.subtle { background:#d9dce0; color:#34373b; }

.detail-content { max-width: 1120px; margin:0 auto; padding: 26px 34px 80px; }
.back { display:inline-flex; gap:7px; color:var(--muted); font-size:12px; padding:6px 0; margin-bottom:18px; }
.back:hover { color:var(--text); }
.detail-head { display:grid; grid-template-columns: 1fr auto; gap:20px; align-items:end; margin-bottom:24px; }
.detail-head h1 { margin:9px 0 10px; font-size:34px; letter-spacing:-.03em; }
.detail-summary span { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.detail-head p { margin:0; color:var(--orange); font-size:14px; line-height:1.7; max-width:820px; }
.detail-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; }
.meta { border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:7px 10px; color:var(--muted); font-size:11px; }
.meta b { color:var(--text); margin-left:4px; }
.meta.category { border-color:rgba(131,214,181,.45); background:rgba(131,214,181,.13); color:#a5ebd2; }
.meta.category b { color:#b5f2dc; }
.meta.blogger { border-color:rgba(194,154,245,.48); background:rgba(194,154,245,.14); color:#dbbcff; }
.meta.blogger b { color:#e7d2ff; }
.meta:hover, .meta:focus-visible { filter:brightness(1.25); outline:2px solid currentColor; outline-offset:2px; }
.favorite { border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--orange-2); padding:11px 14px; }
.modules { display:grid; gap:14px; }
.study-stage { display:grid; gap:14px; min-width:0; }
.module { border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--panel); }
.module summary { list-style:none; cursor:pointer; padding:15px 18px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:10px; background:linear-gradient(90deg,rgba(240,162,82,.14),transparent); }
.module summary::-webkit-details-marker { display:none; }
.module summary:before { content:"⌄"; color:var(--orange); font-size:18px; transform:translateY(-1px); }
.module summary small { color:var(--muted); font-size:11px; font-weight:400; margin-left:auto; }
.module-inner { padding:0 18px 20px; }
.media-switch { display:flex; gap:8px; padding:16px 0 12px; border-bottom:1px solid var(--line); }
.media-switch button { border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:7px; padding:8px 11px; font-size:11px; }
.media-switch button.active { background:var(--orange); color:#24170d; border-color:var(--orange); font-weight:700; }
.media-switch button:disabled { opacity:.45; cursor:not-allowed; }
.media-panel[hidden] { display:none; }
.video-wrap { margin-top:16px; border-radius:10px; overflow:hidden; background:#050607; position:relative; }
.video-wrap video { display:block; width:100%; max-height:610px; background:#050607; }
.audio-wrap { margin-top:16px; border:1px solid var(--line); background:#111416; border-radius:10px; padding:13px; }
.audio-wrap audio { width:100%; }
.note { margin-top:13px; color:var(--muted); font-size:11px; line-height:1.6; }
.transcript { margin-top:16px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#131619; }
.transcript-head { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
.transcript-lines { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.mobile-cue-window, .mobile-transcript-toggle { display:none; }
.line { display:grid; grid-template-columns: 64px minmax(0,1fr) minmax(0,1fr); gap:16px; padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.045); cursor:pointer; }
.line:hover, .line.active { background:rgba(240,162,82,.08); }
.line .time { color:var(--orange); font-variant-numeric:tabular-nums; font-size:11px; padding-top:2px; }
.line .ko { color:#f5b265; font-size:14px; line-height:1.65; }
.line .zh { color:#c1c7cc; font-size:13px; line-height:1.65; }
.vocab-mark { padding:1px 2px; border-radius:3px; font-weight:700; cursor:help; }
.vocab-mark.word { color:#ffd486; background:rgba(255,196,87,.17); box-shadow:inset 0 -2px 0 #e7a244; }
.vocab-mark.phrase { color:#a4ebd4; background:rgba(96,202,166,.14); box-shadow:inset 0 -2px 0 #59c69d; }
.translation-toggle { border:1px solid #4b5962; border-radius:5px; padding:3px 8px; background:#20282e; color:#bdcbd3; font:inherit; font-size:12px; cursor:pointer; }
.translation-toggle:hover { border-color:#f0a252; color:#f8c485; }
.zh-text:not([hidden]) { display:block; margin-top:6px; }
.empty { color:var(--muted); padding:24px; text-align:center; font-size:13px; }
.vocab { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px; margin-top:15px; }
.vocab-item { border:1px solid var(--line); border-radius:10px; background:#15191c; padding:15px; }
.vocab-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.vocab-item b { color:var(--orange-2); font-size:16px; }
.vocab-head span { color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:3px 6px; font-size:11px; flex:none; }
.vocab-item .roman { color:var(--green); font-size:12px; margin-top:6px; }
.vocab-item p { margin:10px 0 0; color:#d3d8dc; font-size:14px; line-height:1.55; }
.vocab-usage { margin-top:9px; color:#b9c3cb; font-size:13px; line-height:1.6; }
.vocab-example { margin-top:10px; padding-top:9px; border-top:1px solid var(--line); color:#d8dde1; font-size:13px; line-height:1.55; }
.vocab-time { display:block; color:var(--orange-2); font-size:11px; margin-bottom:4px; }
.tool-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.tool-btn { border:1px solid var(--line); background:var(--panel-2); color:var(--text); border-radius:7px; padding:8px 10px; font-size:11px; }
.tool-btn.primary { color:#24170d; background:var(--orange); border-color:var(--orange); font-weight:700; }
.tool-btn:disabled { opacity:.55; cursor:wait; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); padding:10px 14px; background:#252a2f; border:1px solid #56616b; color:var(--text); border-radius:9px; box-shadow:var(--shadow); z-index:50; font-size:12px; }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 78% 8%,rgba(240,162,82,.17),transparent 35%),var(--bg); }
.auth-card,.account-card { width:min(100%,440px); padding:32px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:var(--shadow); }
.auth-brand { display:inline-flex; align-items:center; gap:10px; color:var(--orange-2); font-size:20px; font-weight:800; }
.auth-brand strong { color:var(--text); font-size:15px; }
.auth-card h1,.account-card h1 { margin:22px 0 7px; font-size:28px; }
.auth-card p,.account-card p { color:var(--muted); font-size:13px; line-height:1.65; }
.auth-card form,.account-card form { display:grid; gap:15px; margin-top:24px; }
.auth-card label,.account-card label { display:grid; gap:7px; color:var(--text); font-size:13px; }
.auth-card input,.account-card input { width:100%; min-height:44px; border:1px solid var(--line); border-radius:9px; padding:10px 12px; background:#111416; color:var(--text); outline:none; }
.auth-card input:focus,.account-card input:focus { border-color:var(--orange); }
.auth-primary { min-height:44px; border:0; border-radius:9px; padding:10px 16px; background:var(--orange); color:#24170d; font-weight:700; }
.auth-card a.auth-primary,.account-card a.auth-primary { display:block; margin-top:24px; text-align:center; text-decoration:none; }
.auth-primary:disabled { opacity:.5; cursor:wait; }
.auth-link { border:0; background:none; color:var(--orange-2); padding:6px 0; font-size:13px; }
.auth-card a.auth-link { display:block; margin-top:14px; text-decoration:none; }
.auth-message { min-height:22px; overflow-wrap:anywhere; color:var(--orange-2)!important; }
.account-page { padding:36px 24px 80px; display:flex; justify-content:center; }
.account-card { width:min(100%,1000px); }
.account-card form:not(.create-user-form) { max-width:440px; }
.create-user-form { grid-template-columns:1fr 1fr auto; align-items:end; }
.user-list { margin-top:20px; display:grid; gap:9px; }
.user-row { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
.user-row strong { color:var(--text); }
.user-row span { margin-left:8px; color:var(--muted); }
.user-row small { display:block; margin-top:5px; color:var(--orange-2); }
.user-actions { display:flex; flex-wrap:wrap; gap:7px; }
.user-actions button { border:1px solid var(--line); border-radius:7px; background:#171b1f; color:var(--text); padding:8px 10px; }
.user-actions button:hover { border-color:var(--orange); }
.skeleton { min-height:160px; border-radius:14px; background:linear-gradient(90deg,#171a1d 20%,#24282c 35%,#171a1d 55%); background-size:300% 100%; animation:shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position:-300% 0; } }
@media (max-width: 1100px) { .shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;padding:14px;flex-direction:row;align-items:center;gap:18px}.nav{display:flex;overflow:auto}.side-foot{display:none}.topbar{padding:0 16px}.content,.detail-content{padding:22px 16px 60px}.hero{padding:24px;display:block}.hero-stats{justify-content:flex-start;margin-top:24px}.scope-banner{padding:24px}.detail-head{grid-template-columns:1fr}.line{grid-template-columns:44px 1fr}.line .zh{grid-column:2}.favorite{justify-self:start}.grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))} }
@media (min-width: 950px) and (max-width: 1450px) { .study-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.study-stage .module{min-width:0}.study-stage .line{grid-template-columns:44px minmax(0,1fr)}.study-stage .line .zh{grid-column:2} }
@media (min-width: 950px) and (max-width: 1450px) and (orientation: landscape) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .shell.sidebar-open { grid-template-columns:250px minmax(0,1fr); }
  .shell .sidebar { display:none; }
  .shell.sidebar-open .sidebar { display:flex; position:sticky; top:0; height:100vh; padding:24px 16px 18px; flex-direction:column; align-items:stretch; gap:28px; }
  .shell.sidebar-open .nav { display:grid; overflow:visible; }
  .shell.sidebar-open .side-foot { display:block; }
  .sidebar-toggle { display:inline-flex; }
  .topbar { gap:14px; padding:0 18px; }
  .detail-content { max-width:none; padding:20px 18px 60px; }
  .study-stage { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:stretch; }
}
@media (max-width: 560px) { .brand small{display:none}.nav button{padding:9px;min-width:42px;min-height:42px;justify-content:center}.nav button span:last-child{display:none}.top-actions{display:none}.toolbar{align-items:flex-start;flex-direction:column}.scope-banner{flex-wrap:wrap}.grid{grid-template-columns:1fr 1fr;gap:10px}.card-body{padding:10px}.card-summary{font-size:11px}.detail-head h1{font-size:28px}.module-inner{padding:0 12px 16px}.media-switch{flex-wrap:nowrap;gap:6px;padding:8px 0}.media-switch button{min-height:40px;flex:1;min-width:0;padding:8px 5px}.study-stage .module:first-child summary{padding:10px 12px;font-size:14px}.study-stage .module:first-child summary small{display:none}.video-wrap{margin-top:10px}.video-wrap video{max-height:280px;max-height:min(32dvh,280px);object-fit:contain}.transcript-head{display:grid;justify-content:initial;gap:3px;line-height:1.45}.tool-btn{min-height:40px}.translation-toggle{min-height:36px}.line{gap:10px;padding:11px 10px}.line .ko,.line .zh{font-size:13px} }
@media (max-width: 560px) { .auth-card,.account-card{padding:22px}.auth-card h1,.account-card h1{font-size:24px}.create-user-form{grid-template-columns:1fr}.user-row{align-items:flex-start;flex-direction:column}.user-actions{width:100%} }
@media (max-width: 560px) { .mobile-cue-window{display:grid;gap:6px;margin-top:12px}.mobile-cue{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:6px 8px;width:100%;min-height:62px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#15191c;text-align:left;color:var(--muted)}.mobile-cue.current{border-color:rgba(240,162,82,.7);background:rgba(240,162,82,.13);color:var(--orange-2)}.mobile-cue:disabled{visibility:hidden}.mobile-cue-time{font-size:11px;color:var(--orange);font-variant-numeric:tabular-nums}.mobile-cue-ko{font-size:13px;line-height:1.4;overflow-wrap:anywhere}.mobile-cue-zh{grid-column:2;font-size:12px;line-height:1.45;color:#cfd5d9}.mobile-transcript-toggle{display:block;width:100%;margin-top:9px}.study-stage .transcript{display:none}.study-stage .mobile-transcript-open .transcript{display:block} }
@media (max-width: 560px) and (min-height: 650px) { .study-stage>.module:first-child{position:sticky;top:68px;z-index:19;box-shadow:0 10px 28px rgba(0,0,0,.55)} }
@media (max-width: 560px) and (max-height: 649px) { .study-stage>.module:first-child{position:static} }
@media (max-width: 400px) { .grid{grid-template-columns:1fr}.card-title{white-space:normal}.card-summary{font-size:12px} }