:root {
  --ink: #29332f;
  --muted: #738079;
  --cream: #fffaf4;
  --paper: #fffefb;
  --green: #1f6a52;
  --green-dark: #164f3d;
  --mint: #dff1e7;
  --peach: #f6c3a4;
  --soft-peach: #fff0e6;
  --blue: #dfeaf6;
  --yellow: #f5df94;
  --line: #e8e5dd;
  --shadow: 0 20px 60px rgba(46, 61, 53, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #eeeae3; color: var(--ink); font-family: "DM Sans", "Noto Sans SC", sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { max-width: 1440px; min-height: 100vh; margin: 0 auto; background: var(--cream); display: grid; grid-template-columns: 220px 1fr; box-shadow: 0 0 80px rgba(38, 50, 43, .08); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 34px 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: rgba(255, 253, 248, .96); }
.brand, .mobile-brand { display: flex; align-items: center; gap: 11px; color: var(--green-dark); font-weight: 700; font-size: 20px; text-decoration: none; letter-spacing: -.4px; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px 11px 11px 4px; background: var(--green); color: white; font-family: Georgia, serif; font-size: 22px; box-shadow: 0 5px 15px rgba(31,106,82,.18); }
.side-nav { display: grid; gap: 8px; margin-top: 58px; }
.nav-item { border: 0; background: transparent; display: flex; align-items: center; gap: 14px; padding: 13px 14px; color: #7e8882; border-radius: 12px; cursor: pointer; transition: .2s ease; }
.nav-item span { width: 22px; font-size: 22px; line-height: 1; text-align: center; font-weight: 400; }
.nav-item b { font-size: 14px; font-weight: 600; }
.nav-item:hover, .nav-item.active { background: var(--mint); color: var(--green-dark); }
.side-streak { margin-top: auto; padding: 16px; border-radius: 16px; background: var(--soft-peach); display: flex; align-items: center; gap: 11px; }
.side-streak .flame { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--peach); color: #9f4b27; }
.side-streak strong, .side-streak small { display: block; }
.side-streak small { color: var(--muted); margin-top: 2px; font-size: 11px; }
main { min-width: 0; }
.topbar { height: 100px; padding: 0 5vw; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; background: rgba(255,250,244,.88); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.mobile-brand { display: none; border: 0; background: none; }
.top-greeting { display: grid; gap: 2px; }
.top-greeting small { color: var(--muted); font-size: 12px; }
.top-greeting strong { font-size: 17px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.level-pill { display: flex; align-items: center; gap: 8px; border: 1px solid #d9e6df; background: #f4faf6; padding: 7px 11px 7px 7px; border-radius: 999px; cursor: pointer; }
.level-pill span { background: var(--green); color: white; border-radius: 999px; padding: 5px 8px; font-weight: 700; font-size: 11px; }
.level-pill b { font-size: 12px; }
.level-pill i { color: var(--muted); font-style: normal; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--paper); border-radius: 50%; cursor: pointer; position: relative; }
.notification-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #e9875e; right: 5px; top: 3px; border: 2px solid white; }
.avatar, .large-avatar { display: grid; place-items: center; border-radius: 50%; background: #e3a37c; color: white; font-weight: 700; }
.avatar { width: 40px; height: 40px; }
.page { display: none; padding: 36px 5vw 80px; max-width: 1220px; margin: 0 auto; animation: fade .32s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } }
.hero-card { min-height: 315px; border-radius: 28px; background: linear-gradient(120deg, #dcefe5 0%, #eaf5ed 55%, #f5e4cf 100%); overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.hero-copy { padding: 44px 48px; position: relative; z-index: 2; }
.eyebrow, .section-kicker { font-size: 10px; letter-spacing: 2px; font-weight: 700; color: var(--green); }
.hero-copy h1 { font-family: Georgia, "Noto Serif SC", serif; margin: 12px 0 12px; font-size: clamp(36px, 4vw, 55px); line-height: 1.07; letter-spacing: -2px; font-weight: 500; }
.hero-copy h1 em { color: var(--green); font-style: italic; }
.hero-copy p { color: #617269; font-size: 14px; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 25px; }
.hero-actions > span { color: var(--muted); font-size: 12px; }
.primary-button, .secondary-button { border: 0; border-radius: 11px; padding: 12px 18px; font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s ease; }
.primary-button { background: var(--green); color: white; box-shadow: 0 7px 20px rgba(31,106,82,.17); }
.primary-button:hover { background: var(--green-dark); transform: translateY(-1px); }
.primary-button span { margin-left: 12px; }
.secondary-button { background: var(--paper); color: var(--green); border: 1px solid #cbded4; }
.hero-art { position: relative; min-height: 315px; }
.sun { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,250,238,.58); right: 60px; top: 30px; box-shadow: 0 0 0 28px rgba(255,255,255,.12); }
.word-bubble { position: absolute; background: rgba(255,255,255,.83); padding: 9px 14px; border-radius: 16px 16px 16px 5px; font-family: Georgia, serif; color: var(--green); box-shadow: 0 8px 22px rgba(48,76,62,.09); }
.word-bubble.b1 { right: 55px; top: 48px; transform: rotate(5deg); }
.word-bubble.b2 { left: 23px; top: 113px; transform: rotate(-4deg); font-size: 12px; }
.headphones { position: absolute; right: 100px; top: 120px; color: var(--green); font-size: 72px; font-weight: 700; letter-spacing: -23px; transform: rotate(4deg); }
.headphones span { display: inline-grid; place-items: center; background: #f5b994; width: 76px; height: 76px; border-radius: 50%; color: white; font-size: 29px; letter-spacing: 0; }
.desk-line { position: absolute; height: 62px; background: #dfa17f; left: 25px; right: -30px; bottom: -20px; border-radius: 70% 0 0 0; transform: rotate(-3deg); }
.plant { position: absolute; right: 21px; bottom: 28px; width: 85px; height: 100px; z-index: 2; }
.plant b { display: block; width: 58px; height: 50px; background: #e9c3a9; border-radius: 8px 8px 22px 22px; position: absolute; bottom: 0; }
.plant i { position: absolute; width: 25px; height: 55px; border-radius: 90% 5%; background: #5c8f72; left: 25px; top: 8px; transform-origin: bottom; }
.plant i:nth-child(1) { transform: rotate(-45deg); }.plant i:nth-child(3) { transform: rotate(42deg); }
.section-heading, .summary-head { display: flex; align-items: end; justify-content: space-between; }
.section-heading { margin: 38px 2px 18px; }
.section-heading h2, .summary-head h2, .level-card h2 { margin: 4px 0 0; font-family: Georgia, "Noto Serif SC", serif; font-weight: 500; font-size: 25px; }
.plan-time { color: var(--muted); font-size: 12px; }
.task-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.task-card { min-height: 184px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 19px; display: flex; flex-direction: column; cursor: pointer; transition: .22s ease; position: relative; overflow: hidden; }
.task-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.task-card.done { background: #f1f8f4; border-color: #cce2d7; }
.task-card.done::after { content: "✓"; position: absolute; right: 16px; top: 16px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 12px; }
.task-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; font-size: 20px; margin-bottom: 18px; }
.task-card:nth-child(1) .task-icon { background: var(--soft-peach); color: #b35d35; }.task-card:nth-child(2) .task-icon { background: var(--mint); color: var(--green); }.task-card:nth-child(3) .task-icon { background: var(--blue); color: #446985; }.task-card:nth-child(4) .task-icon { background: #f6efd4; color: #8b712a; }
.task-card h3 { margin: 0 0 5px; font-size: 16px; }.task-card p { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.6; }.task-meta { margin-top: auto; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }.task-meta b { color: var(--green); }
.summary-card { margin-top: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 21px; padding: 26px 28px; }
.summary-status { background: #f2f0ea; color: var(--muted); padding: 7px 10px; border-radius: 999px; font-size: 10px; }
.summary-empty { display: flex; align-items: center; gap: 23px; padding: 23px 0 2px; color: var(--muted); font-size: 12px; }
.mini-chart { width: 80px; height: 44px; display: flex; gap: 5px; align-items: end; padding: 8px 10px; border-radius: 10px; background: var(--mint); }.mini-chart i { width: 10px; background: #74a58d; border-radius: 3px 3px 0 0; }.mini-chart i:nth-child(1) {height: 12px}.mini-chart i:nth-child(2){height:22px}.mini-chart i:nth-child(3){height:17px}.mini-chart i:nth-child(4){height:29px}
.summary-content { display: grid; grid-template-columns: 100px 1fr; gap: 25px; align-items: center; padding-top: 23px; }
.score-ring { width: 92px; height: 92px; display: grid; place-items: center; align-content: center; border-radius: 50%; background: conic-gradient(var(--green) var(--score), #e6ece8 0); position: relative; }.score-ring::after { content: ""; position: absolute; inset: 8px; background: var(--paper); border-radius: 50%; }.score-ring span,.score-ring small { position: relative; z-index: 2; }.score-ring span {font-size:26px;font-weight:700}.score-ring small{font-size:9px;color:var(--muted)}
.summary-text h3 { margin: 0 0 5px; }.summary-text p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.summary-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }.summary-tags span, .learning-points span { border-radius: 999px; padding: 5px 9px; background: var(--mint); color: var(--green); font-size: 9px; font-weight: 600; }
.hidden { display: none !important; }
.page-title { display: flex; align-items: end; justify-content: space-between; margin: 10px 0 32px; }.page-title h1 { font-family: Georgia, "Noto Serif SC", serif; font-weight: 500; font-size: 36px; margin: 6px 0 6px; }.page-title p { color: var(--muted); font-size: 13px; margin: 0; }
.daily-count b { font-family: Georgia, serif; font-size: 32px; color: var(--green); }.daily-count span { color: var(--muted); font-size: 12px; }.word-progress { height: 4px; background: #e6e4dc; border-radius: 9px; overflow: hidden; margin-bottom: 30px; }.word-progress span { display: block; height: 100%; background: var(--green); width: 0; transition: width .3s; }
.word-stage { display: flex; justify-content: center; align-items: center; gap: 28px; min-height: 440px; }.round-arrow { width: 43px; height: 43px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); cursor: pointer; }.flashcard { width: min(580px, 70vw); min-height: 410px; background: var(--paper); border-radius: 26px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; cursor: pointer; position: relative; overflow: hidden; }.flashcard::before { content:""; width:200px;height:200px;border-radius:50%;background:var(--soft-peach);position:absolute;right:-80px;top:-100px; }.card-corner { font-size: 10px; color: var(--muted); letter-spacing: 1px; }.card-corner span { color: var(--green); font-weight: 700; }.word-main { text-align: center; margin: auto 0; }.word-type { color: #b66540; background: var(--soft-peach); border-radius: 999px; padding: 5px 9px; font-size: 10px; }.word-main h2 { margin: 14px 0 2px; font-family: Georgia, serif; font-size: 48px; font-weight: 500; }.phonetic { color: var(--muted); margin: 4px 0; }.sound-button { border:0;background:var(--mint);color:var(--green);border-radius:50%;width:35px;height:35px;cursor:pointer; }.word-reveal { opacity: 0; max-height: 0; transition: .3s ease; overflow: hidden; }.flashcard.flipped .word-reveal { opacity: 1; max-height: 200px; }.flashcard.flipped .flip-hint { opacity: 0; }.divider { width: 45px; height: 1px; background: var(--line); margin: 17px auto 10px; }.word-reveal h3 { margin: 0; font-size: 18px; }.word-reveal p { margin: 6px 0 0; font-size: 13px; }.word-reveal .translation { color: var(--muted); font-size: 11px; }.flip-hint { text-align: center; color: #a3aaa5; font-size: 10px; transition: .2s; }.word-actions { display:flex;justify-content:center;gap:12px;margin-top:18px; }
.filter-tabs { display:flex;background:#eeeae3;padding:4px;border-radius:10px; }.filter-tabs button { border:0;background:transparent;padding:7px 12px;border-radius:7px;color:var(--muted);font-size:11px;cursor:pointer; }.filter-tabs button.active{background:var(--paper);color:var(--green);font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.featured-video { display:grid;grid-template-columns:1.25fr .75fr;border:1px solid var(--line);background:var(--paper);border-radius:24px;overflow:hidden;min-height:325px; }.feature-visual { position:relative; min-height:325px;overflow:hidden; }.nature { background:linear-gradient(180deg,#c5e3e7 0 48%,#5b8e84 49% 66%,#28594c 67%); }.nature::before,.nature::after {content:"";position:absolute;background:#85b99b;border-radius:50% 50% 10% 10%;bottom:55px; }.nature::before{width:180px;height:90px;left:30px}.nature::after{width:260px;height:125px;right:-45px;background:#3e7868}.scene-land i{position:absolute;bottom:78px;width:10px;height:80px;background:#215644}.scene-land i::after{content:"";position:absolute;width:60px;height:60px;border-radius:50%;background:#37725e;left:-25px;top:-20px}.scene-land i:nth-child(1){left:20%}.scene-land i:nth-child(2){left:45%;height:105px}.scene-land i:nth-child(3){right:16%;height:90px}.video-badge { position:absolute;left:18px;top:18px;background:rgba(255,255,255,.85);border-radius:999px;padding:7px 10px;font-size:9px;font-weight:700;z-index:2; }.play-button { position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--green);font-size:20px;z-index:3;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.18); }.feature-copy { padding:36px 31px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center; }.content-type{font-size:9px;color:var(--green);letter-spacing:1.5px;font-weight:700}.feature-copy h2{font-family:Georgia,serif;font-size:27px;margin:9px 0}.feature-copy p{font-size:12px;color:var(--muted);line-height:1.7}.learning-points{display:flex;gap:6px;margin:6px 0 21px;flex-wrap:wrap}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.video-card{border:1px solid var(--line);border-radius:17px;overflow:hidden;background:var(--paper);cursor:pointer;transition:.2s}.video-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.video-thumb{height:145px;display:grid;place-items:center;font-size:38px;position:relative}.video-thumb::after{content:"▶";font-size:12px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.85);color:var(--green)}.video-card:nth-child(1) .video-thumb{background:#dce9d4}.video-card:nth-child(2) .video-thumb{background:#e8dcd3}.video-card:nth-child(3) .video-thumb{background:#d7e8ee}.video-info{padding:14px}.video-info small{font-size:8px;color:var(--green);font-weight:700;letter-spacing:1px}.video-info h3{font-family:Georgia,serif;margin:6px 0 4px;font-size:17px}.video-info p{color:var(--muted);font-size:10px;margin:0}.watched-mark{position:absolute;right:9px;top:9px;background:var(--green);color:white;border-radius:999px;padding:5px 7px;font-size:8px}
.shadow-level{padding:7px 11px;border-radius:999px;background:var(--mint);color:var(--green);font-size:10px;font-weight:700}.shadow-layout{display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid var(--line);background:var(--paper);border-radius:25px;overflow:hidden;min-height:540px}.shadow-player{background:linear-gradient(145deg,#d9ece2,#f8e5d8);padding:40px;display:flex;flex-direction:column;justify-content:center;align-items:center}.speaker-portrait{width:220px;height:250px;border-radius:110px 110px 30px 30px;background:#e5ad8b;display:flex;flex-direction:column;justify-content:end;align-items:center;overflow:hidden;box-shadow:0 18px 40px rgba(80,74,62,.14)}.portrait-face{font-size:110px;line-height:1;color:#f9ddc9;transform:translateY(15px)}.speaker-portrait span{background:rgba(31,106,82,.9);color:white;width:100%;text-align:center;padding:12px;font-size:9px;letter-spacing:1.4px;z-index:2}.waveform{height:35px;display:flex;align-items:center;gap:3px;margin:30px 0 18px}.waveform i{display:block;width:3px;height:var(--h);background:#6c9a83;border-radius:9px;animation:wave 1.2s ease-in-out infinite;animation-delay:var(--d)}@keyframes wave{50%{transform:scaleY(.45)}}.listen-button{border:0;background:var(--green);color:white;border-radius:999px;padding:11px 18px;font-size:11px;cursor:pointer}.listen-button span{margin-right:8px}.sentence-panel{padding:46px;display:flex;flex-direction:column}.step-label{color:var(--muted);font-size:9px;letter-spacing:1px}.step-label b{color:var(--green)}.sentence-panel h2{font-family:Georgia,serif;font-size:32px;line-height:1.35;margin:28px 0 9px;font-weight:500}.sentence-panel>p{margin:0;color:var(--muted);font-size:13px}.pronunciation-tip{margin:25px 0 12px;border-left:3px solid var(--peach);background:var(--soft-peach);padding:11px 14px;display:grid;gap:3px}.pronunciation-tip b{font-size:10px;color:#a85631}.pronunciation-tip span{font-size:11px;color:#795c4e}.record-area{display:flex;flex-direction:column;align-items:center;margin:25px 0}.record-button{width:72px;height:72px;border-radius:50%;border:7px solid #dcece4;background:var(--green);color:#f2b091;cursor:pointer;font-size:25px;box-shadow:0 0 0 1px #b8d8c8;transition:.2s}.record-button.recording{animation:pulse 1s infinite;background:#b95b45}@keyframes pulse{50%{box-shadow:0 0 0 13px rgba(185,91,69,.12)}}.record-area>b{font-size:11px;margin-top:10px}.record-area small{font-size:9px;color:var(--muted);margin-top:2px}.record-result{display:flex;align-items:center;gap:13px;background:#f0f7f3;border-radius:13px;padding:12px}.result-score{width:50px;height:50px;border-radius:50%;background:var(--green);color:white;display:grid;place-items:center;align-content:center}.result-score b{font-size:18px;line-height:1}.result-score span{font-size:7px}.record-result>div:last-child b{font-size:12px}.record-result p{font-size:9px;color:var(--muted);margin:2px 0}.sentence-nav{margin-top:auto;display:flex;justify-content:space-between}.sentence-nav button{border:0;background:transparent;color:var(--green);font-size:11px;font-weight:700;cursor:pointer}
.profile-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:14px}.profile-card,.stat-card,.level-card,.week-card{background:var(--paper);border:1px solid var(--line);border-radius:19px;padding:22px}.main-profile{display:flex;align-items:center;gap:14px}.large-avatar{width:56px;height:56px;font-size:20px}.main-profile h2{font-size:17px;margin:0 0 4px}.main-profile p{font-size:10px;color:var(--muted);margin:0}.main-profile button{margin-left:auto;padding:8px 10px;font-size:9px}.stat-card{display:flex;flex-direction:column}.stat-card span{font-size:10px;color:var(--muted)}.stat-card b{font-family:Georgia,serif;font-size:32px;margin-top:12px}.stat-card small{font-size:9px}.stat-card.peach{background:var(--soft-peach)}.stat-card.mint{background:#eaf5ef}.stat-card.blue{background:#edf3f8}.level-card{margin-top:17px;display:flex;justify-content:space-between;align-items:center}.level-card p{font-size:11px;color:var(--muted)}.level-options{display:flex;gap:6px}.level-option{border:1px solid var(--line);background:var(--paper);border-radius:11px;padding:10px 12px;cursor:pointer;text-align:center}.level-option b,.level-option span{display:block}.level-option b{color:var(--green)}.level-option span{font-size:8px;color:var(--muted)}.level-option.active{background:var(--green);border-color:var(--green)}.level-option.active b,.level-option.active span{color:white}.week-card{margin-top:17px}.week-days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:22px}.day-item{text-align:center}.day-item span{font-size:9px;color:var(--muted)}.day-dot{width:38px;height:38px;margin:7px auto 0;border-radius:50%;display:grid;place-items:center;background:#f0eee8;color:#aaa;font-size:11px}.day-item.done .day-dot{background:var(--mint);color:var(--green);font-weight:700}.day-item.today .day-dot{background:var(--green);color:white;box-shadow:0 0 0 4px #dcece4}
.bottom-nav { display: none; }
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(29,39,34,.48);backdrop-filter:blur(8px)}.modal-card{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--cream);border-radius:25px;padding:35px;box-shadow:0 30px 90px rgba(0,0,0,.24);animation:modalIn .25s ease}@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}}.modal-close{position:absolute;right:16px;top:15px;border:0;background:#eeeae3;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:18px}.level-modal-card{text-align:center}.modal-icon{display:grid;place-items:center;margin:0 auto 18px;width:58px;height:58px;border-radius:18px 18px 18px 6px;background:var(--green);color:white;font-family:Georgia,serif;font-size:22px}.modal-card h2{font-family:Georgia,"Noto Serif SC",serif;font-size:27px;margin:9px 0}.modal-card>p{color:var(--muted);font-size:11px;line-height:1.7;max-width:420px;margin:0 auto}.modal-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:24px 0}.modal-level{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:14px 5px;cursor:pointer}.modal-level b,.modal-level span{display:block}.modal-level b{font-size:18px;color:var(--green)}.modal-level span{font-size:8px;color:var(--muted)}.modal-level.selected{background:var(--mint);border:2px solid var(--green);padding:13px 4px}.wide{width:100%}.video-modal-card{width:min(900px,100%);display:grid;grid-template-columns:1.4fr .6fr;padding:0;overflow:hidden}.mock-video{background:#18231f;color:white;min-height:480px;display:flex;flex-direction:column;justify-content:end}.video-scene{flex:1;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#547d72,#182c26 70%);font-size:90px}.caption{text-align:center;font-size:15px;padding:14px;background:rgba(0,0,0,.4)}.video-controls{display:flex;align-items:center;gap:12px;padding:15px}.video-controls button{border:0;background:transparent;color:white;cursor:pointer}.video-timeline{height:4px;background:#53635e;flex:1;border-radius:5px;overflow:hidden}.video-timeline i{display:block;width:0;height:100%;background:#f4b088}.video-controls>span:last-child{font-size:9px}.video-study{padding:60px 25px 25px;display:flex;flex-direction:column}.video-study h2{font-size:23px}.subtitle-switches{display:flex;gap:12px;font-size:10px;margin:25px 0}.video-study .wide{margin-top:auto}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:#20372e;color:white;border-radius:999px;padding:10px 16px;font-size:11px;opacity:0;pointer-events:none;z-index:200;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width: 1050px){.task-grid{grid-template-columns:repeat(2,1fr)}.profile-grid{grid-template-columns:repeat(3,1fr)}.main-profile{grid-column:1/-1}.hero-card{grid-template-columns:1fr .65fr}.featured-video{grid-template-columns:1fr 1fr}}
@media (max-width: 760px){body{background:var(--cream)}.app-shell{display:block;min-height:100vh}.sidebar{display:none}.topbar{height:72px;padding:0 18px}.mobile-brand{display:flex}.mobile-brand b{display:none}.top-greeting{display:none}.icon-button{display:none}.avatar{width:34px;height:34px}.page{padding:23px 18px 105px}.hero-card{display:block;min-height:405px}.hero-copy{padding:30px 25px}.hero-copy h1{font-size:39px}.hero-copy p{max-width:85%;line-height:1.6}.hero-art{position:absolute;inset:auto 0 0 0;height:160px;min-height:0}.sun{width:180px;height:180px;right:60px;top:0}.headphones{font-size:52px;right:90px;top:25px}.headphones span{width:60px;height:60px;font-size:21px}.word-bubble.b1{right:28px;top:2px}.word-bubble.b2{left:20px;top:40px}.plant{transform:scale(.7);right:2px;bottom:3px}.hero-actions{margin-top:17px}.hero-actions>span{display:none}.section-heading{margin-top:29px}.task-grid{grid-template-columns:1fr 1fr;gap:10px}.task-card{min-height:160px;padding:15px}.summary-content{grid-template-columns:80px 1fr}.score-ring{width:74px;height:74px}.bottom-nav{display:flex;position:fixed;z-index:50;left:0;right:0;bottom:0;height:72px;background:rgba(255,254,251,.94);backdrop-filter:blur(20px);border-top:1px solid var(--line);justify-content:space-around;padding:5px 8px calc(5px + env(safe-area-inset-bottom))}.bottom-nav .nav-item{flex-direction:column;gap:3px;padding:5px 10px;background:transparent}.bottom-nav .nav-item span{font-size:20px}.bottom-nav .nav-item b{font-size:9px}.bottom-nav .nav-item.active{color:var(--green)}.page-title{display:block;margin-top:0}.page-title h1{font-size:31px}.daily-count,.shadow-level{display:inline-block;margin-top:15px}.word-stage{gap:8px;min-height:400px}.flashcard{width:calc(100vw - 90px);min-height:380px;padding:20px}.word-main h2{font-size:37px}.round-arrow{width:33px;height:33px;flex:none}.featured-video{grid-template-columns:1fr}.feature-visual{min-height:225px}.feature-copy{padding:25px}.video-grid{grid-template-columns:1fr}.video-thumb{height:170px}.filter-tabs{margin-top:18px;width:max-content}.shadow-layout{grid-template-columns:1fr}.shadow-player{padding:25px}.speaker-portrait{width:160px;height:180px}.portrait-face{font-size:80px}.waveform{margin:18px 0 12px}.sentence-panel{padding:28px 24px;min-height:480px}.sentence-panel h2{font-size:26px;margin-top:18px}.profile-grid{grid-template-columns:repeat(3,1fr);gap:8px}.profile-card,.stat-card,.level-card,.week-card{padding:16px}.stat-card b{font-size:25px}.level-card{display:block}.level-options{margin-top:15px;overflow:auto}.week-days{gap:2px}.day-dot{width:32px;height:32px}.modal-card{padding:27px 19px}.modal-levels{grid-template-columns:repeat(5,1fr);gap:4px}.modal-level{padding:12px 2px}.modal-level.selected{padding:11px 1px}.video-modal-card{grid-template-columns:1fr;padding:0}.mock-video{min-height:340px}.video-study{padding:25px}.video-study .wide{margin-top:18px}}
@media (max-width: 390px){.task-grid{grid-template-columns:1fr}.hero-copy h1{font-size:34px}.main-profile{flex-wrap:wrap}.main-profile button{margin-left:70px}.profile-grid{grid-template-columns:1fr 1fr}.stat-card.blue{grid-column:1/-1}}

/* v2: real accounts, real progress, spaced repetition and actual media */
.auth-screen{min-height:100vh;background:linear-gradient(125deg,#dcefe5 0 49%,#fffaf4 49%);padding:34px 5vw;position:relative;overflow:hidden}.auth-screen::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.2);left:-120px;bottom:-150px}.auth-brand{display:flex;align-items:center;gap:10px;color:var(--green-dark);font-size:20px;position:relative;z-index:2}.auth-wrap{min-height:calc(100vh - 80px);max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 480px;gap:90px;align-items:center;position:relative;z-index:2}.auth-story h1{font-family:Georgia,"Noto Serif SC",serif;font-size:clamp(42px,5vw,67px);font-weight:500;line-height:1.08;letter-spacing:-2px;margin:16px 0}.auth-story h1 em{font-style:italic;color:var(--green)}.auth-story>p{max-width:500px;color:#5f7368;line-height:1.8}.auth-features{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}.auth-features span{background:rgba(255,255,255,.62);padding:8px 12px;border-radius:999px;color:var(--green);font-size:11px;font-weight:700}.auth-card{background:rgba(255,254,251,.97);border:1px solid rgba(255,255,255,.8);box-shadow:0 30px 80px rgba(41,57,49,.14);border-radius:26px;padding:28px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#efede7;padding:4px;border-radius:11px;margin-bottom:27px}.auth-tabs button{border:0;background:transparent;border-radius:8px;padding:9px;cursor:pointer;color:var(--muted);font-size:12px}.auth-tabs button.active{background:white;color:var(--green);font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.06)}.auth-form{display:grid;gap:16px}.auth-form h2{font-family:Georgia,"Noto Serif SC",serif;font-size:25px;font-weight:500;margin:4px 0 2px}.auth-form label{display:grid;gap:7px;font-size:11px;font-weight:600}.auth-form input{width:100%;border:1px solid var(--line);background:#fff;padding:12px 13px;border-radius:10px;outline:none}.auth-form input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(31,106,82,.08)}.form-error{min-height:16px;margin:0;color:#b5503c;font-size:10px}.local-note{text-align:center;color:#9a9f9b;font-size:9px;margin:19px 0 0}.logout-button{border:0;background:transparent;color:#9b7160;font-size:10px;cursor:pointer;margin-top:12px;padding:7px}.session-time{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;background:var(--paper);border:1px solid var(--line);padding:8px 11px;border-radius:999px}.session-time span{color:var(--green)}
.truth-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:16px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}.truth-strip>div{background:var(--paper);padding:17px 19px;display:grid;gap:4px}.truth-strip small{font-size:9px;color:var(--muted)}.truth-strip b{font-family:Georgia,"Noto Serif SC",serif;font-size:18px;font-weight:500}.real-hero .hero-copy h1{font-size:clamp(34px,3.8vw,52px)}.real-hero .hero-copy h1 span{color:var(--ink)}
.word-dashboard{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:15px;overflow:hidden;margin-bottom:24px}.word-dashboard>div{background:var(--paper);padding:14px 18px;display:grid;gap:4px}.word-dashboard span{font-size:9px;color:var(--muted)}.word-dashboard b{font-size:13px}.word-dashboard button{border-radius:0}.single-card{min-height:420px}.single-card .flashcard{width:min(620px,85vw)}.card-corner{display:flex;align-items:center;gap:8px}.card-corner i{font-style:normal;color:var(--muted);font-size:9px}.memory-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;max-width:620px;margin:14px auto 0}.memory-actions button{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:11px 5px;cursor:pointer;display:grid;gap:2px}.memory-actions button:hover{border-color:var(--green);background:#f0f7f3}.memory-actions b{font-size:11px}.memory-actions small{font-size:8px;color:var(--muted)}.memory-actions .rating-again{color:#a94e3c}.memory-actions .rating-easy{color:var(--green)}.word-finished{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:60px 20px;margin:35px 0}.word-finished>span{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--mint);color:var(--green);font-size:25px;margin:auto}.word-finished h2{font-family:Georgia,"Noto Serif SC",serif;font-weight:500}.word-finished p{color:var(--muted);font-size:11px}.schedule-note{max-width:620px;margin:30px auto 0;border-left:3px solid var(--green);background:#edf6f1;padding:14px 18px;border-radius:0 12px 12px 0}.schedule-note b{font-size:11px}.schedule-note p{margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.6}
.word-search-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:16px}.word-search-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.word-search-head h2{font-family:Georgia,"Noto Serif SC",serif;font-size:21px;font-weight:500;margin:4px 0}.word-search-head p{font-size:9px;color:var(--muted);margin:0}.saved-word-total{min-width:75px;text-align:center;background:var(--mint);border-radius:12px;padding:10px}.saved-word-total b,.saved-word-total span{display:block}.saved-word-total b{font-size:21px;color:var(--green)}.saved-word-total span{font-size:8px;color:var(--muted)}.word-search-box{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:16px}.word-search-box input{min-width:0;border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 14px;font:inherit;font-size:11px;outline:none}.word-search-box input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(38,105,82,.08)}.word-search-results{display:grid;gap:7px;margin-top:10px}.search-hint{margin:4px 0 0;color:var(--muted);font-size:9px}.word-search-result{display:grid;grid-template-columns:minmax(110px,.55fr) 1fr auto;align-items:center;gap:12px;border-top:1px solid var(--line);padding:10px 2px}.word-search-result b{font-family:Georgia,serif;font-size:16px}.word-search-result b small{display:block;font-family:inherit;font-size:7px;color:var(--green);margin-top:3px}.word-search-result p{margin:0;font-size:10px;color:var(--muted);line-height:1.5}.word-search-result button{padding:8px 10px;font-size:8px}.word-search-result button:disabled{opacity:.55;cursor:default}.saved-word-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.saved-word-chip{display:flex;align-items:center;gap:5px;background:#edf5f1;color:var(--green);border-radius:999px;padding:6px 9px;font-size:9px}.saved-word-chip button{border:0;background:transparent;color:inherit;cursor:pointer;padding:0;font-size:13px}.finished-actions{display:flex;justify-content:center;gap:9px;margin-top:20px}
.video-source-notice{display:flex;gap:11px;align-items:center;background:#fff4e9;border:1px solid #f1dccb;border-radius:13px;padding:12px 15px;margin:-12px 0 16px}.video-source-notice>span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e7a67e;color:white;font-family:Georgia,serif}.video-source-notice p{margin:0;font-size:10px;color:#78695f;line-height:1.6}.local-video-import{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(120deg,#dfeee7,#f5eee5);border-radius:18px;padding:19px 23px;margin-bottom:18px}.local-video-import h2{font-family:Georgia,"Noto Serif SC",serif;font-size:20px;font-weight:500;margin:4px 0}.local-video-import p{margin:0;color:var(--muted);font-size:10px}.file-button{display:inline-block}.file-button input{display:none}.real-video-grid{grid-template-columns:repeat(3,1fr)}.real-video-grid .video-card{min-height:245px}.video-thumb .provider-badge{position:absolute;left:9px;top:9px;background:rgba(255,255,255,.88);border-radius:999px;padding:5px 7px;font-size:7px;color:var(--green);font-weight:700}.video-thumb .level-badge{position:absolute;right:9px;bottom:8px;color:white;background:rgba(24,50,42,.8);border-radius:999px;padding:4px 7px;font-size:7px}.actual-player-card{grid-template-columns:1.45fr .55fr}.actual-video-wrap{background:#101814;min-height:520px;display:grid;place-items:center}.actual-video-wrap iframe,.actual-video-wrap video{width:100%;height:100%;min-height:520px;border:0;background:#000}.external-link{color:var(--green);font-size:10px;margin-top:13px}.video-honesty{display:flex;gap:8px;align-items:center;background:#edf5f1;padding:10px;border-radius:10px;margin:18px 0}.video-honesty p{font-size:9px;color:var(--muted);line-height:1.5;margin:0}.video-honesty span{color:var(--green)}
.speech-support{display:flex;gap:9px;align-items:center;padding:10px 13px;background:#eef5f1;border-radius:10px;margin:-16px 0 15px;font-size:10px;color:var(--muted)}.speech-support span{color:#c59a35}.speech-support.supported span{color:#2d8b64}.speech-support.unsupported{background:#fff1e9}.speech-support.unsupported span{color:#c35f45}.recognition-live{background:#edf5f1;border-radius:10px;padding:10px 12px;font-size:10px;color:var(--muted)}.recognition-live span{color:var(--ink);font-weight:600}.manual-fallback{background:#fff3ea;border-radius:12px;padding:12px;text-align:center}.manual-fallback p{font-size:9px;color:var(--muted)}.manual-fallback button{border:1px solid #e6cab9;background:white;border-radius:8px;padding:7px 9px;margin:3px;font-size:9px;cursor:pointer}.record-result{margin-bottom:12px}.result-score b{font-size:15px}.recognized-word-good{color:var(--green)}
.created-label{margin-left:auto;font-size:9px;color:var(--muted)}.settings-card{background:var(--paper);border:1px solid var(--line);border-radius:19px;padding:24px;margin-top:16px}.setting-heading h2{font-family:Georgia,"Noto Serif SC",serif;font-weight:500;margin:4px 0 2px}.setting-heading p{font-size:10px;color:var(--muted);margin:0}.precise-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px}.precise-level{border:1px solid var(--line);background:white;border-radius:12px;padding:11px;text-align:left;cursor:pointer;display:grid;gap:3px}.precise-level b{font-size:12px}.precise-level small{color:var(--muted);font-size:8px}.precise-level span{color:var(--green);font-size:8px}.precise-level.active{border:2px solid var(--green);background:var(--mint);padding:10px}.two-column-settings{display:grid;grid-template-columns:1fr 1fr;gap:40px}.goal-picker{display:flex;align-items:center;gap:8px;margin-top:18px}.goal-picker button{border:1px solid var(--line);background:white;border-radius:9px;width:34px;height:34px;cursor:pointer}.goal-picker input{width:55px;text-align:center;border:1px solid var(--line);border-radius:9px;padding:8px}.goal-picker span{font-size:10px;color:var(--muted)}.method-options{display:grid;gap:7px;margin-top:14px}.method-option{border:1px solid var(--line);background:white;border-radius:10px;padding:9px 11px;text-align:left;cursor:pointer}.method-option b,.method-option small{display:block}.method-option b{font-size:10px}.method-option small{font-size:8px;color:var(--muted);margin-top:2px}.method-option.active{border-color:var(--green);background:#edf6f1}.data-card{display:flex;justify-content:space-between;align-items:center;background:#f0eee8;border-radius:14px;padding:16px 20px;margin-top:16px}.data-card b{font-size:11px}.data-card p{margin:3px 20px 0 0;font-size:9px;color:var(--muted)}
@media(max-width:1050px){.precise-levels{grid-template-columns:repeat(3,1fr)}.actual-player-card{grid-template-columns:1fr}.actual-video-wrap,.actual-video-wrap iframe,.actual-video-wrap video{min-height:430px}.video-study{min-height:260px}.auth-wrap{gap:40px}.real-video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.auth-screen{padding:24px 18px;background:linear-gradient(180deg,#dcefe5 0 34%,#fffaf4 34%)}.auth-wrap{display:block;min-height:auto;padding:60px 0 20px}.auth-story{margin-bottom:36px}.auth-story h1{font-size:37px}.auth-story>p{font-size:12px}.auth-features{display:none}.auth-card{padding:22px 18px}.session-time{display:none}.level-pill b{display:none}.truth-strip{grid-template-columns:1fr 1fr}.truth-strip>div{padding:13px}.word-dashboard{grid-template-columns:1fr 1fr}.word-dashboard button{grid-column:1/-1}.memory-actions{grid-template-columns:1fr 1fr}.real-video-grid{grid-template-columns:1fr}.local-video-import{display:block}.local-video-import .file-button{margin-top:14px}.actual-player-card{padding:0}.actual-video-wrap,.actual-video-wrap iframe,.actual-video-wrap video{min-height:240px}.precise-levels{grid-template-columns:1fr 1fr}.two-column-settings{grid-template-columns:1fr;gap:28px}.data-card{display:block}.data-card button{margin-top:12px}.created-label{width:100%;margin:8px 0 0 70px}.real-hero .hero-copy h1{font-size:33px}}
@media(max-width:760px){.word-search-card{padding:17px 14px}.word-search-head{align-items:flex-start}.word-search-head p{line-height:1.6}.saved-word-total{min-width:60px}.word-search-box{grid-template-columns:1fr}.word-search-result{grid-template-columns:1fr auto;gap:5px}.word-search-result p{grid-column:1/-1;grid-row:2}.finished-actions{flex-direction:column}.finished-actions button{width:100%}}

/* Mastery loop, examples and spelling */
.word-dashboard{grid-template-columns:repeat(4,1fr) auto}.example-row{display:flex;align-items:center;justify-content:center;gap:10px}.example-row p{margin:0;line-height:1.6}.example-sound{border:1px solid var(--line);background:#f1f7f3;color:var(--green);border-radius:999px;padding:7px 10px;font-size:8px;white-space:nowrap;cursor:pointer}.spelling-tools{max-width:620px;margin:16px auto 0;display:flex;align-items:center;justify-content:center;gap:8px}.spelling-tools>span{font-size:9px;color:var(--muted);margin-right:4px}.spelling-tools button{padding:8px 12px;font-size:9px}.spelling-panel{max-width:620px;margin:10px auto 0;padding:17px;background:linear-gradient(120deg,#edf6f1,#fff7ee);border:1px solid var(--line);border-radius:14px}.spelling-prompt{display:flex;align-items:center;gap:10px}.spelling-prompt>span{font-size:8px;color:var(--green);font-weight:700;letter-spacing:1px}.spelling-prompt>b{font-size:13px;flex:1}.spelling-prompt .sound-button{width:34px;height:34px}.spelling-answer{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}.spelling-answer input{min-width:0;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;font-size:13px;letter-spacing:1px}.spelling-panel>p{font-size:10px;margin:9px 2px 0;color:var(--muted)}.spelling-panel>p.correct{color:var(--green);font-weight:700}.spelling-panel>p.wrong{color:#a94e3c}.cloud-sync-state{display:inline-flex;align-items:center;gap:5px;color:var(--green)}
@media(max-width:900px){.word-dashboard{grid-template-columns:1fr 1fr}.word-dashboard button{grid-column:1/-1}}
@media(max-width:760px){.example-row{display:block}.example-sound{margin-top:8px}.spelling-tools{flex-wrap:wrap}.spelling-tools>span{width:100%;text-align:center}.spelling-answer{grid-template-columns:1fr}.spelling-answer button{width:100%}}

/* v3 media sources and subtitle controls */
.local-video-import{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 20px}.import-actions{display:flex;gap:8px}.direct-url-box{grid-column:1/-1;display:flex;gap:8px}.direct-url-box input{flex:1;border:1px solid rgba(31,106,82,.18);background:rgba(255,255,255,.76);border-radius:10px;padding:10px 12px;font-size:10px;outline:none}.actual-video-wrap{position:relative}.subtitle-overlay{position:absolute;left:5%;right:5%;bottom:58px;text-align:center;pointer-events:none;text-shadow:0 2px 5px #000}.subtitle-overlay b,.subtitle-overlay span{display:block;width:max-content;max-width:100%;margin:0 auto;background:rgba(0,0,0,.68);color:#fff;padding:4px 9px}.subtitle-overlay b{font-size:16px}.subtitle-overlay span{font-size:12px;color:#f4df9d;margin-top:2px}.subtitle-controls{display:flex;align-items:center;gap:5px;margin:16px 0 8px}.subtitle-controls>span{font-size:9px;color:var(--muted);margin-right:4px}.subtitle-controls button{border:1px solid var(--line);background:white;border-radius:999px;padding:5px 8px;font-size:8px;cursor:pointer}.subtitle-controls button.active{background:var(--green);border-color:var(--green);color:white}.transcript-box{max-height:120px;overflow:auto;border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px}.transcript-box>p{margin:0;font-size:9px;color:var(--muted);line-height:1.55}.transcript-box .cue-line{padding:5px 6px;border-radius:6px;cursor:pointer}.transcript-box .cue-line.active{background:var(--mint);color:var(--green)}.transcript-box .cue-line b{display:block;font-size:9px}.transcript-box .cue-line span{font-size:8px;color:var(--muted)}
@media(max-width:760px){.local-video-import{display:block}.import-actions{flex-wrap:wrap}.direct-url-box{margin-top:10px}.subtitle-overlay{bottom:42px}.subtitle-overlay b{font-size:12px}.subtitle-overlay span{font-size:10px}}

/* v4 live media feed and complete exam progress */
.feed-update-bar{display:flex;justify-content:space-between;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 15px;margin:-12px 0 14px}.feed-state{display:flex;align-items:center;gap:10px}.feed-state>span{width:9px;height:9px;border-radius:50%;background:#c9a04e;box-shadow:0 0 0 4px rgba(201,160,78,.12)}.feed-state>span.online{background:#3d9870;box-shadow:0 0 0 4px rgba(61,152,112,.12)}.feed-state>span.offline{background:#b77a67}.feed-state b,.feed-state small{display:block}.feed-state b{font-size:10px}.feed-state small{font-size:8px;color:var(--muted);margin-top:2px}.feed-actions{display:flex;align-items:center;gap:8px}.feed-actions label{font-size:9px;color:var(--muted)}.feed-actions select{border:1px solid var(--line);background:white;border-radius:8px;padding:7px;font-size:9px;margin-left:5px}.feed-actions button{padding:8px 10px;font-size:9px}.video-thumb{overflow:hidden}.video-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.video-thumb img+span,.video-thumb img~span{z-index:2}.video-thumb:has(img)::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(14,31,25,.62));z-index:1}.video-thumb:has(img)::after{position:relative;z-index:3}.fresh-badge{position:absolute;left:9px;bottom:8px;z-index:3;background:#f0a17b;color:white;border-radius:999px;padding:4px 7px;font-size:7px}.empty-video-list{grid-column:1/-1;text-align:center;padding:50px;color:var(--muted);font-size:11px;background:var(--paper);border:1px dashed var(--line);border-radius:15px}
.video-library-section{margin-top:22px}.library-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:0 2px 12px}.library-heading h2{font-family:Georgia,"Noto Serif SC",serif;font-size:23px;font-weight:500;margin:4px 0 0}.library-heading>span{font-size:9px;color:var(--muted)}.archive-library{margin-top:35px;padding-top:26px;border-top:1px solid var(--line)}.published-date{font-size:8px;color:var(--muted);margin-top:8px}.video-thumb .hd-badge{position:absolute;right:9px;top:9px;z-index:3;background:rgba(17,35,29,.82);color:white;border-radius:999px;padding:5px 7px;font-size:7px}.video-thumb .provider-badge+.hd-badge{right:9px}.video-card .provider-badge{max-width:62%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exam-progress-card{background:linear-gradient(125deg,#e5f2ea,#fff8ef);border:1px solid #d9e8df;border-radius:20px;padding:22px 24px;margin-bottom:16px}.exam-progress-head{display:flex;justify-content:space-between;align-items:center}.exam-progress-head h2{font-family:Georgia,"Noto Serif SC",serif;font-size:23px;font-weight:500;margin:4px 0}.exam-progress-head p{font-size:9px;color:var(--muted);margin:0}.big-progress{text-align:right}.big-progress b,.big-progress span{display:block}.big-progress b{font-family:Georgia,serif;font-size:29px;color:var(--green)}.big-progress span{font-size:8px;color:var(--muted)}.exam-progress-bar{height:8px;background:rgba(255,255,255,.8);border-radius:99px;overflow:hidden;margin:18px 0}.exam-progress-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),#72a58b);border-radius:99px;transition:width .4s}.exam-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(49,82,66,.1);border-radius:12px;overflow:hidden}.exam-metrics>div{background:rgba(255,255,255,.68);padding:11px 13px}.exam-metrics small,.exam-metrics b{display:block}.exam-metrics small{font-size:8px;color:var(--muted)}.exam-metrics b{font-size:16px;margin-top:3px}.focus-progress{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:15px;margin-top:14px}.focus-progress>span{font-size:9px;color:var(--muted)}.focus-progress>span b{color:var(--green)}.focus-progress>span i{font-style:normal}.focus-progress>div{height:4px;background:rgba(255,255,255,.8);border-radius:9px;overflow:hidden}.focus-progress>div i{display:block;width:0;height:100%;background:#e39b74;border-radius:9px}
@media(max-width:760px){.feed-update-bar{align-items:flex-start;gap:12px}.feed-actions{display:grid;justify-items:end}.feed-actions label{white-space:nowrap}.exam-progress-card{padding:18px 16px}.exam-metrics{grid-template-columns:1fr 1fr}.exam-metrics>div:last-child{grid-column:1/-1}.focus-progress{grid-template-columns:1fr}.video-thumb img{height:100%}.library-heading{align-items:flex-start}.library-heading h2{font-size:20px}.library-heading>span{max-width:42%;text-align:right}}