@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--background: #f9f9ff;--surface: #ffffff;--surface-low: #f1f3ff;--surface-container: #e9edff;--text: #141b2b;--muted: #434654;--outline: #c3c5d7;--outline-strong: #737686;--primary: #1a56db;--primary-deep: #003fb1;--primary-soft: #dbe1ff;--secondary: #7c3aed;--secondary-soft: #eaddff;--success: #059669;--success-soft: #d9fbe8;--danger: #ba1a1a;--danger-soft: #ffdad6;--shadow: 0 4px 6px rgba(0, 0, 0, .05);color:var(--text);background:var(--background);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--background)}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled,input:disabled,textarea:disabled{cursor:not-allowed;opacity:.65}.app-shell{width:min(1280px,calc(100% - 48px));margin:0 auto;padding:24px 0 48px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.topbar-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.topbar-links a{min-height:34px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--outline);border-radius:4px;color:var(--primary);background:#fff;font-size:13px;font-weight:700;text-decoration:none}.brand-button{display:inline-flex;align-items:center;gap:12px;border:0;background:transparent;color:var(--text);padding:0;text-align:left}.brand-button strong{display:block;font-size:18px;line-height:24px}.brand-button small{display:block;color:var(--muted);font-size:12px;line-height:16px}.brand-mark{display:grid;place-items:center;width:40px;height:40px;color:#fff;background:var(--primary);border-radius:8px}.command-band{display:grid;grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);align-items:start;gap:32px;padding-bottom:48px}.command-copy h1{max-width:760px;margin:0;font-size:40px;line-height:48px;font-weight:700;letter-spacing:0}.command-copy p:last-child{max-width:640px;margin:16px 0 0;color:var(--muted);font-size:16px;line-height:24px}.eyebrow{margin:0 0 6px;color:var(--primary-deep);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.command-stack{display:grid;gap:12px}.url-form,.manual-word-form{padding:16px;border:1px solid var(--outline);background:var(--surface);border-radius:8px}.url-form label,.manual-word-form label{display:block;margin-bottom:8px;color:var(--muted);font-size:12px;line-height:16px;font-weight:500}.manual-word-form{display:grid;gap:10px}.form-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.form-heading-row h2{margin:0;font-size:18px;line-height:24px}.form-heading-row span{color:var(--muted);font-size:12px;line-height:16px;font-weight:600}.manual-word-form textarea{width:100%;min-height:132px;resize:vertical;border:1px solid #d1d5db;border-radius:4px;padding:10px 12px;color:var(--text);background:#fff;outline:0;line-height:22px}.manual-word-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px #1a56db29}.manual-submit-button{justify-self:start}.manual-result{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px;line-height:20px}.manual-result strong{color:var(--success)}.input-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 6px 6px 12px;border:1px solid #d1d5db;border-radius:4px;background:#fff}.input-row:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px #1a56db29}.input-row svg{color:var(--outline-strong)}.input-row input{width:100%;min-width:0;border:0;outline:0;color:var(--text)}.input-row button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:1px solid var(--primary);border-radius:4px;padding:0 14px;font-size:14px;font-weight:600;white-space:nowrap}.input-row button{color:#fff;background:var(--primary)}.language-picker{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.language-picker label{display:inline-flex;align-items:center;gap:8px;margin:0;min-height:36px;padding:0 12px;border:1px solid var(--outline);border-radius:4px;color:var(--muted);background:#fff;font-size:13px;font-weight:600}.language-picker label:has(input:checked){border-color:var(--primary);color:var(--primary);background:#f8faff}.language-picker input{width:16px;height:16px;accent-color:var(--primary)}.clip-panel{display:grid;gap:12px;margin-top:12px;padding:12px;border:1px solid var(--outline);border-radius:8px;background:#f8faff}.clip-summary{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center}.clip-summary img{width:96px;aspect-ratio:16 / 9;object-fit:cover;border-radius:4px;background:var(--surface-container)}.clip-summary strong{display:block;color:var(--text);font-size:14px;line-height:20px}.clip-summary span,.clip-note{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:16px}.clip-range-header{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px;line-height:20px}.clip-range-header strong{color:var(--primary);font-size:13px;line-height:20px}.clip-range-grid{display:grid;gap:10px}.clip-range-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:10px;margin:0;color:var(--muted);font-size:12px;line-height:16px}.clip-range-label{color:var(--muted);font-weight:600}.clip-range-grid input[type=range]{width:100%;accent-color:var(--primary)}.time-part-inputs{display:grid;grid-template-columns:repeat(3,58px);gap:6px}.time-part-inputs label{display:grid;gap:3px;margin:0;color:var(--muted);font-size:11px;line-height:14px;text-align:center}.time-part-inputs input{min-width:0;height:34px;border:1px solid #d1d5db;border-radius:4px;padding:0 6px;color:var(--text);background:#fff;text-align:center}.clip-note{margin:0}.secondary-button{color:var(--primary);background:transparent}.form-error{display:flex;align-items:center;gap:8px;margin:10px 0 0;color:var(--danger);font-size:14px;line-height:20px}.analysis-progress{display:grid;gap:8px;margin-top:12px;padding:12px;border:1px solid var(--outline);border-radius:8px;background:#f8faff}.analysis-progress-row{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted);font-size:14px;line-height:20px}.analysis-progress-row strong{color:var(--primary);font-size:12px;line-height:16px}.analysis-progress-track{overflow:hidden;height:6px;border-radius:9999px;background:var(--primary-soft)}.analysis-progress-track span{display:block;height:100%;border-radius:inherit;background:var(--primary);transition:width .42s ease}.analysis-progress.done{background:#f0fdf6}.analysis-progress.done .analysis-progress-row strong{color:var(--success)}.analysis-progress.done .analysis-progress-track{background:var(--success-soft)}.analysis-progress.done .analysis-progress-track span{background:var(--success)}.analysis-progress.failed{background:#fff7f6}.analysis-progress.failed .analysis-progress-row,.analysis-progress.failed .analysis-progress-row strong{color:var(--danger)}.analysis-progress.failed .analysis-progress-track{background:var(--danger-soft)}.analysis-progress.failed .analysis-progress-track span{background:var(--danger)}.workspace-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:24px;align-items:start}.history-panel,.detail-panel,.home-library,.video-page{min-width:0}.home-library{padding-top:8px}.home-library .video-list{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.section-heading,.detail-header,.learning-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.section-heading h2,.detail-header h2,.learning-heading h3,.transcript-section h3{margin:0}.section-heading h2{font-size:24px;line-height:32px}.icon-button{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--outline);border-radius:4px;color:var(--muted);background:#fff}.video-list{display:grid;gap:12px;margin-top:16px}.video-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--outline)}.pagination-summary{color:var(--muted);font-size:13px;line-height:20px}.pagination-controls{display:flex;align-items:center;gap:6px}.pagination-arrow,.pagination-page{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 10px;border:1px solid var(--outline);border-radius:6px;color:var(--muted);background:#fff;font-size:13px;font-weight:600}.pagination-arrow:hover:not(:disabled),.pagination-page:hover:not(.active){border-color:var(--primary);color:var(--primary)}.pagination-page.active{border-color:var(--primary);color:#fff;background:var(--primary)}.pagination-arrow:disabled{cursor:not-allowed;opacity:.4}.pagination-ellipsis{display:inline-grid;place-items:center;width:24px;color:var(--outline-strong)}.video-card{display:grid;gap:8px;width:100%;padding:10px;border:1px solid var(--outline);border-radius:8px;color:var(--text);background:var(--surface);text-align:left}.video-card-main{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;width:100%;padding:0;border:0;color:inherit;background:transparent;text-align:left}.video-card:hover{box-shadow:var(--shadow)}.video-card.selected{border-color:var(--primary);background:#f8faff}.video-card img{width:112px;aspect-ratio:16 / 9;object-fit:cover;border-radius:6px}.video-card-body{display:grid;gap:6px;min-width:0}.video-title{display:-webkit-box;overflow:hidden;font-size:14px;line-height:20px;font-weight:600;-webkit-line-clamp:2;-webkit-box-orient:vertical}.video-meta,.stat-row{color:var(--muted);font-size:12px;line-height:16px}.delete-video-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;justify-self:end;min-height:32px;padding:0 10px;border:1px solid var(--danger-soft);border-radius:4px;color:var(--danger);background:#fff7f6;font-size:12px;font-weight:600}.delete-video-button:hover{border-color:var(--danger)}.stat-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.status-badge{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}.status-badge.done{color:var(--success)}.status-badge.failed{color:var(--danger)}.language-badge{color:var(--primary);font-weight:600}.detail-layout{display:grid;grid-template-columns:minmax(0,8fr) minmax(280px,4fr);gap:24px;align-items:start}.player-column{min-width:0}.detail-header{margin-bottom:16px}.detail-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.detail-header h2{font-size:24px;line-height:32px}.detail-header p:last-child{margin:6px 0 0;color:var(--muted)}.video-frame{position:sticky;top:16px;z-index:10;overflow:hidden;width:100%;aspect-ratio:16 / 9;border:1px solid var(--outline);border-radius:8px;background:#111827;box-shadow:0 12px 24px #141b2b1f}.video-frame iframe{width:100%;height:100%;border:0}.notice{display:flex;align-items:center;gap:8px;margin-top:16px;padding:12px;border-radius:8px;font-size:14px;line-height:20px}.notice.failed{color:var(--danger);background:var(--danger-soft)}.transcript-section{margin-top:24px}.section-heading.compact{margin-bottom:12px}.section-heading.compact span{color:var(--muted);font-size:12px}.transcript-list{display:grid;gap:8px}.transcript-item{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px;align-items:start}.translation-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 10px;border:1px solid var(--outline);border-radius:8px;color:var(--primary);background:#fff;font-size:12px;font-weight:700;line-height:16px}.translation-toggle:hover,.translation-toggle.active{border-color:var(--primary);background:#eef2ff}.transcript-content{display:grid;gap:6px;min-width:0}.transcript-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;width:100%;padding:12px;border:1px solid var(--outline);border-radius:8px;color:inherit;background:#fff;text-align:left}.transcript-row:hover{border-color:var(--primary)}.transcript-row.active{border-color:var(--success);background:#f0fdf6;box-shadow:inset 3px 0 0 var(--success)}.transcript-row span{color:var(--primary);font-size:12px;font-weight:600;line-height:20px}.transcript-row.active span{color:var(--success)}.transcript-row p{margin:0;color:var(--muted);font-size:14px;line-height:20px}.transcript-translation{min-height:20px;margin:0;padding:0 12px 8px 72px;color:#374151;font-size:14px;line-height:22px}.copy-confirm{position:absolute;top:8px;right:10px;padding:2px 8px;border-radius:4px;color:#fff;background:var(--success);font-size:12px;line-height:18px;font-weight:600}.learning-column{display:grid;gap:16px}.learning-group{padding:16px;border:1px solid var(--outline);border-radius:8px;background:#fff}.learning-heading{justify-content:flex-start;margin-bottom:12px}.learning-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:4px;color:var(--primary);background:var(--primary-soft)}.learning-action{margin-left:auto}.small-link-button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid var(--primary);border-radius:4px;color:var(--primary);background:transparent;font-size:12px;font-weight:600}.learning-list{display:grid;gap:10px}.learning-card{padding:12px;border:1px solid var(--outline);border-left:3px solid var(--primary);border-radius:8px;background:#fff}.learning-card.clickable{cursor:pointer}.learning-card.clickable:hover{border-color:var(--outline-strong)}.learning-card.clickable.active{border-color:var(--success);background:#f8fffb}.learning-card.clickable:focus-visible{outline:2px solid var(--success);outline-offset:2px}.learning-card.secondary{border-left-color:var(--secondary)}.learning-card.success{border-left-color:var(--success)}.card-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.card-title-row h4{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:16px;line-height:24px}.card-title-row span{color:var(--muted);font-size:12px;font-weight:600}.learning-card p{margin:6px 0;color:var(--muted);font-size:14px;line-height:20px}.word-meta{display:flex;align-items:center;gap:8px;margin-top:4px;color:var(--outline-strong);font-size:12px;line-height:16px}.word-meta span{padding:2px 6px;border:1px solid var(--outline);border-radius:9999px;color:var(--muted)}.grammar-structure{padding:8px;border:1px solid var(--secondary-soft);border-radius:6px;color:var(--secondary);background:#fbf8ff;font-size:13px;line-height:20px;font-weight:600}.speak-button{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--outline);border-radius:4px;background:#fff;line-height:1}.speak-button:hover{border-color:var(--primary)}.word-summary-page{display:grid;gap:24px}.word-summary-grid{display:grid;gap:20px}.word-level-section{padding:16px;border:1px solid var(--outline);border-radius:8px;background:#fff}.word-level-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0;color:var(--text);text-align:left;background:transparent;border:0;cursor:pointer}.word-level-toggle>span:last-child{color:var(--muted);font-size:13px}.word-level-title{display:inline-flex;align-items:center;gap:10px}.word-level-title svg{color:var(--primary)}.word-level-title>span{display:grid;gap:4px}.word-level-title strong{font-size:22px;line-height:28px}.word-table{display:grid;gap:10px;margin-top:16px}.word-row{display:grid;grid-template-columns:minmax(160px,.75fr) minmax(120px,.45fr) minmax(220px,1fr) minmax(0,1.4fr);align-items:start;gap:16px;padding:12px;border:1px solid var(--outline);border-radius:8px;background:#fff}.word-row strong{display:inline-flex;align-items:center;gap:6px;color:var(--text)}.word-row span,.word-row p{color:var(--muted);font-size:13px;line-height:20px}.word-row p{margin:0}.word-row .word-definition{color:var(--text)}.word-row>div{display:grid;gap:4px}.learning-card small{display:block;color:var(--outline-strong);font-size:12px;line-height:18px}.empty-state,.empty-detail{display:grid;place-items:center;min-height:280px;padding:32px;border:1px solid var(--outline);border-radius:8px;background:#fff;text-align:center}.empty-detail{min-height:520px}.empty-state svg,.empty-detail svg{color:var(--primary)}.empty-state h3,.empty-detail h2{margin:12px 0 4px}.empty-state p,.empty-detail p,.muted{margin:0;color:var(--muted);font-size:14px;line-height:20px}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:981px){.app-shell:has(.video-page){display:flex;flex-direction:column;height:100vh;overflow:hidden;padding-bottom:24px}.video-page{flex:1;min-height:0}.video-page .detail-layout{height:100%;min-height:0;align-items:stretch}.video-page .player-column,.video-page .learning-column{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.video-page .player-column{padding-right:4px}.video-page .learning-column{align-content:start;padding-right:4px}}@media(max-width:980px){.app-shell{width:min(100% - 32px,1280px)}.command-band,.workspace-grid,.detail-layout{grid-template-columns:1fr}.video-frame{position:static;box-shadow:none}.command-copy h1{font-size:32px;line-height:40px}}@media(max-width:640px){.app-shell{width:min(100% - 32px,1280px);padding-top:16px}.command-band{gap:20px;padding-bottom:32px}.input-row{grid-template-columns:auto minmax(0,1fr)}.input-row button{grid-column:1 / -1;width:100%}.video-card,.video-card-main{grid-template-columns:96px minmax(0,1fr)}.video-card img{width:96px}.video-pagination{align-items:flex-start;flex-direction:column}.pagination-controls{width:100%;overflow-x:auto;padding-bottom:4px}.word-row{grid-template-columns:1fr}.detail-header{align-items:flex-start;flex-direction:column}.detail-actions,.secondary-button{width:100%}.clip-summary{grid-template-columns:1fr}.clip-summary img{width:100%;max-width:220px}.clip-range-row{grid-template-columns:1fr}.time-part-inputs{grid-template-columns:repeat(3,minmax(0,1fr))}.transcript-item{grid-template-columns:max-content minmax(0,1fr);gap:8px}.translation-toggle{min-height:38px;padding:8px 10px}.transcript-translation{padding-left:12px}}