:root{--color-accent: #0a84ff;--color-accent-dark: #0066cc;--color-bg: #ffffff;--color-bg-secondary: #f2f2f7;--color-bg-tertiary: #e5e5ea;--color-surface: #ffffff;--color-surface-raised: #f2f2f7;--color-border: #c6c6c8;--color-text-primary: #1c1c1e;--color-text-secondary: #6c6c70;--color-text-tertiary: #aeaeb2;--color-text-on-accent: #ffffff;--color-highlight: rgba(10, 132, 255, .15);--color-highlight-border: #0a84ff;--color-danger: #ff3b30;--color-success: #34c759;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-base: 15px;--font-size-md: 17px;--font-size-lg: 20px;--font-size-xl: 24px;--font-size-2xl: 28px;--line-height-tight: 1.3;--line-height-base: 1.5;--line-height-loose: 1.8;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--transition-fast: .15s ease;--transition-base: .25s ease;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--header-height: 52px;--player-height: 56.25vw;--max-content-width: 680px}@media (prefers-color-scheme: dark){:root{--color-bg: #000000;--color-bg-secondary: #1c1c1e;--color-bg-tertiary: #2c2c2e;--color-surface: #1c1c1e;--color-surface-raised: #2c2c2e;--color-border: #38383a;--color-text-primary: #ffffff;--color-text-secondary: #ebebf599;--color-text-tertiary: #ebebf54d;--color-highlight: rgba(10, 132, 255, .2);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;height:100%}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text-primary);background:var(--color-bg);height:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased;touch-action:manipulation}#app{min-height:100%;display:flex;flex-direction:column}.loading-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--color-text-secondary);font-size:var(--font-size-md)}.app-header{position:sticky;top:0;z-index:100;height:var(--header-height);padding-top:var(--safe-top);background:var(--color-bg);border-bottom:1px solid var(--color-border);display:flex;align-items:center;padding-left:var(--space-4);padding-right:var(--space-4);gap:var(--space-3)}.app-header__back{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;color:var(--color-accent);font-size:var(--font-size-md);cursor:pointer;border-radius:var(--radius-sm);flex-shrink:0;padding:0}.app-header__title{flex:1;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-header__action{display:flex;align-items:center;justify-content:center;height:32px;padding:0 var(--space-3);border:none;background:none;color:var(--color-accent);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;border-radius:var(--radius-sm);flex-shrink:0;white-space:nowrap}.view{flex:1;display:flex;flex-direction:column;padding-bottom:var(--safe-bottom)}.library-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:var(--space-4);padding:var(--space-8);text-align:center}.library-empty__icon{font-size:48px;opacity:.3}.library-empty__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.library-empty__body{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:var(--line-height-base)}.material-list{list-style:none;display:flex;flex-direction:column;gap:1px;background:var(--color-border);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.material-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-surface);cursor:pointer;transition:background var(--transition-fast);-webkit-tap-highlight-color:transparent;user-select:none}.material-card:active{background:var(--color-bg-secondary)}.material-card__thumb{width:80px;height:45px;border-radius:var(--radius-sm);object-fit:cover;background:var(--color-bg-tertiary);flex-shrink:0}.material-card__info{flex:1;min-width:0}.material-card__title{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.material-card__meta{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-top:var(--space-1)}.material-card__chevron{color:var(--color-text-tertiary);flex-shrink:0;font-size:var(--font-size-sm)}.material-card__delete{display:none;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:var(--color-danger);color:#fff;border-radius:var(--radius-full);cursor:pointer;font-size:var(--font-size-sm);flex-shrink:0}.library--editing .material-card__delete{display:flex}.library--editing .material-card__chevron{display:none}.add-material-form{padding:var(--space-6) var(--space-4);display:flex;flex-direction:column;gap:var(--space-5);max-width:var(--max-content-width);width:100%;margin:0 auto}.form-group{display:flex;flex-direction:column;gap:var(--space-2)}.form-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em}.form-input{width:100%;padding:var(--space-3) var(--space-4);font-size:var(--font-size-base);font-family:var(--font-family);color:var(--color-text-primary);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:border-color var(--transition-fast);-webkit-appearance:none}.form-input:focus{border-color:var(--color-accent)}.form-input::placeholder{color:var(--color-text-tertiary)}.form-hint{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.form-error{font-size:var(--font-size-sm);color:var(--color-danger)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-size:var(--font-size-base);font-family:var(--font-family);font-weight:var(--font-weight-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:opacity var(--transition-fast);-webkit-tap-highlight-color:transparent;white-space:nowrap}.btn:active{opacity:.7}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:var(--color-accent);color:var(--color-text-on-accent)}.btn--secondary{background:var(--color-bg-tertiary);color:var(--color-text-primary)}.btn--danger{background:var(--color-danger);color:#fff}.btn--full{width:100%}.processing-status{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border)}.processing-status__label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.progress-bar{height:4px;background:var(--color-bg-tertiary);border-radius:var(--radius-full);overflow:hidden}.progress-bar__fill{height:100%;background:var(--color-accent);border-radius:var(--radius-full);transition:width var(--transition-base)}#app.player-screen{height:100vh;height:-webkit-fill-available;height:100dvh;min-height:unset;overflow:hidden;display:flex;flex-direction:column}.player-top-panel{flex-shrink:0}#app.player-screen .transcript-list{flex:1;min-height:0;overflow-y:auto}.player-video-wrapper{width:100%;aspect-ratio:16 / 9;background:#000;position:relative}.player-video-wrapper iframe{width:100%;height:100%;border:none;display:block}.player-controls{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.controls-row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.rate-btn,.mode-btn{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family);font-weight:var(--font-weight-medium);border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text-primary);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);-webkit-tap-highlight-color:transparent}.rate-btn--active,.mode-btn--active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.play-pause-btn{width:36px;height:36px;border-radius:var(--radius-full);border:none;background:var(--color-accent);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}.ab-status{font-size:var(--font-size-xs);color:var(--color-accent);font-weight:var(--font-weight-medium)}.controls-row--offset{gap:var(--space-2)}.sync-hint{font-size:var(--font-size-xs);color:var(--color-success)}.transcript-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.transcript-sentence{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);cursor:pointer;transition:background var(--transition-fast);-webkit-tap-highlight-color:transparent}.transcript-sentence:active{background:var(--color-bg-secondary)}.transcript-sentence--active{background:var(--color-highlight);border-left:3px solid var(--color-highlight-border);padding-left:calc(var(--space-4) - 3px)}.transcript-list--sync-mode .transcript-sentence{border-left:3px solid transparent;padding-left:calc(var(--space-4) - 3px)}.transcript-list--sync-mode .transcript-sentence:active{border-left-color:var(--color-success);background:#34c7591f}@keyframes confirm-flash{0%{background:#34c75959;border-left-color:var(--color-success)}to{background:transparent;border-left-color:transparent}}.transcript-sentence--confirmed{animation:confirm-flash .7s ease-out forwards;border-left:3px solid transparent;padding-left:calc(var(--space-4) - 3px)}.transcript-sentence__en{font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--color-text-primary);margin-bottom:var(--space-1)}.transcript-sentence__ja{font-size:var(--font-size-sm);line-height:var(--line-height-base);color:var(--color-text-secondary)}.transcript-sentence__time{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-top:var(--space-1);font-variant-numeric:tabular-nums}span.word{cursor:pointer;border-radius:2px;transition:background var(--transition-fast)}span.word:hover{background:var(--color-highlight)}.settings-section{margin-top:var(--space-6)}.settings-section-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.06em;padding:0 var(--space-4) var(--space-2)}.settings-list{list-style:none;background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);display:flex;flex-direction:column;gap:1px;background:var(--color-border)}.settings-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface);cursor:pointer;transition:background var(--transition-fast);-webkit-tap-highlight-color:transparent}.settings-item:active{background:var(--color-bg-secondary)}.settings-item__label{flex:1;font-size:var(--font-size-base)}.settings-item__value{font-size:var(--font-size-base);color:var(--color-text-secondary)}.settings-item__chevron{color:var(--color-text-tertiary);font-size:var(--font-size-sm)}.dict-sheet{position:fixed;inset:0;z-index:500;display:flex;align-items:flex-end}.dict-sheet[hidden]{display:none}.dict-sheet__backdrop{position:absolute;inset:0;background:#0006;animation:fade-in var(--transition-fast) ease}.dict-sheet__panel{position:relative;width:100%;max-height:40vh;background:var(--color-surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-3) var(--space-4);padding-bottom:calc(var(--space-4) + var(--safe-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;animation:slide-up var(--transition-base) ease;box-shadow:var(--shadow-lg)}.dict-sheet__handle{width:36px;height:4px;background:var(--color-bg-tertiary);border-radius:var(--radius-full);margin:0 auto var(--space-4)}.dict-word{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-1)}.dict-base{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-3)}.dict-meaning{font-size:var(--font-size-base);line-height:var(--line-height-loose);color:var(--color-text-primary)}.dict-not-found{font-size:var(--font-size-base);color:var(--color-text-secondary);padding:var(--space-2) 0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.spinner{width:20px;height:20px;border:2px solid var(--color-bg-tertiary);border-top-color:var(--color-accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dict-progress-screen{position:fixed;inset:0;z-index:9999;background:var(--color-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-6)}.dict-progress-label{font-size:var(--text-sm);color:var(--color-text-secondary)}.dict-progress-bar-track{width:240px;height:6px;background:var(--color-bg-tertiary);border-radius:3px;overflow:hidden}.dict-progress-bar-fill{height:100%;background:var(--color-accent);border-radius:3px;transition:width .1s linear}