*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1a1a1a;--bg-surface: #2a2a2a;--text: #e0e0e0;--text-muted: #888;--accent: #ffca33;--accent-dim: rgba(255, 202, 51, .15)}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}.app{display:flex;flex-direction:column;height:100%}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--bg-surface);border-bottom:1px solid #333;min-height:48px;z-index:100}.main-content{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.image-viewer{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.image-container{position:relative;max-width:100%;max-height:100%;line-height:0}.lesson-image{max-width:100%;max-height:calc(100vh - 64px);display:block;-webkit-user-select:none;user-select:none}.image-dim{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000;transition:background .3s ease;pointer-events:none;z-index:5}.image-dim.active{background:#00000026}.region-overlay{transition:all .2s ease}.region-overlay:hover{border-color:#ffffff4d!important;background-color:#ffffff0d!important}.toolbar-actions{display:flex;align-items:center;gap:4px}.toolbar-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .2s ease}.toolbar-toggle:hover,.toolbar-toggle.active{background:var(--accent-dim);color:var(--accent)}.delete-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .2s ease}.delete-button:hover{background:#ff505026;color:#ff5050}.upload-panel{display:flex;align-items:center}.upload-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .2s ease}.upload-button:hover{background:var(--accent-dim);color:var(--accent)}.upload-spinner{width:20px;height:20px;border:2px solid var(--text-muted);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.lesson-nav{display:flex;align-items:center;gap:12px}.nav-button{background:transparent;border:none;color:var(--text);font-size:24px;cursor:pointer;padding:0 8px;line-height:1;opacity:.7;transition:opacity .2s}.nav-button:hover:not(:disabled){opacity:1}.nav-button:disabled{opacity:.2;cursor:default}.nav-indicator{font-size:14px;color:var(--text-muted);min-width:48px;text-align:center}.processing-state{display:flex;flex-direction:column;align-items:center;gap:16px}.processing-spinner{width:48px;height:48px;border:3px solid var(--bg-surface);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}.processing-text{color:var(--text-muted);font-size:16px}.subtitle-bar{position:absolute;bottom:24px;left:50%;transform:translate(-50%);background:#000000bf;padding:8px 20px;border-radius:8px;z-index:50;animation:subtitleFade 4s ease forwards}.subtitle-text{color:#fff;font-size:18px;white-space:nowrap}@keyframes subtitleFade{0%{opacity:0;transform:translate(-50%) translateY(4px)}8%{opacity:1;transform:translate(-50%) translateY(0)}75%{opacity:1}to{opacity:0}}.empty-state{text-align:center;color:var(--text-muted);font-size:18px}.analytics{width:100%;max-width:800px;height:100%;overflow-y:auto;padding:24px}.analytics-title{font-size:22px;font-weight:600;margin-bottom:20px;color:var(--text)}.analytics-loading,.analytics-error{text-align:center;color:var(--text-muted);padding:40px}.analytics-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}.analytics-card{background:var(--bg-surface);border-radius:10px;padding:16px;text-align:center}.card-value{font-size:28px;font-weight:700;color:var(--accent)}.card-label{font-size:12px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}.analytics-section{background:var(--bg-surface);border-radius:10px;padding:16px;margin-bottom:16px}.analytics-section h3{font-size:14px;color:var(--text-muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.level-bars{display:flex;flex-direction:column;gap:8px}.level-bar-row{display:flex;align-items:center;gap:10px}.level-label{width:24px;font-size:13px;font-weight:600;color:var(--text-muted)}.level-bar-track{flex:1;height:10px;background:#333;border-radius:5px;overflow:hidden}.level-bar-fill{height:100%;border-radius:5px;transition:width .5s ease;min-width:2px}.level-bar-fill[data-level="1"]{background:var(--accent)}.level-bar-fill[data-level="2"]{background:#4ecdc4}.level-bar-fill[data-level="3"]{background:#ff6b6b}.level-bar-fill[data-level=vocab]{background:var(--accent)}.level-count{width:36px;text-align:right;font-size:13px;color:var(--text)}.vocab-stats{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.vocab-pct{font-weight:600;color:var(--accent)}.analytics-table{width:100%;border-collapse:collapse;font-size:13px}.analytics-table th{text-align:left;padding:6px 8px;border-bottom:1px solid #444;color:var(--text-muted);font-weight:500}.analytics-table td{padding:6px 8px;border-bottom:1px solid #333}.analytics-table .img-name{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-words{display:flex;flex-wrap:wrap;gap:8px}.word-chip{background:#333;padding:4px 10px;border-radius:12px;font-size:13px}.word-chip small{color:var(--text-muted)}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:600px){.toolbar{padding:6px 10px}.analytics-cards{grid-template-columns:repeat(2,1fr)}}