*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{color:#1a1a1a;background:#d0d0d0;width:100%;height:100%;font-family:system-ui,Segoe UI,Roboto,sans-serif;font-size:13px;overflow:hidden}button{cursor:pointer;font-family:inherit}input[type=range]{cursor:pointer}@keyframes recBlink{0%,to{opacity:1}50%{opacity:.25}}.rec-dot.is-recording{animation:.9s infinite recBlink}.natali-app{flex-direction:column;width:100%;height:100%;display:flex}.login-gate-overlay{z-index:9999;background:linear-gradient(135deg,#fdfbfb 0%,#ebedee 100%);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.login-gate-card{text-align:center;background:#fff;border-radius:16px;flex-direction:column;align-items:center;width:100%;max-width:440px;padding:48px;display:flex;box-shadow:0 10px 40px #0000000d,0 1px 3px #00000008}.login-logo{object-fit:contain;max-width:300px;max-height:300px;margin-bottom:24px}.login-slogan{color:#777;letter-spacing:1px;text-transform:uppercase;margin-bottom:40px;font-size:15px;font-weight:400}.login-input-group{width:100%;margin-bottom:24px}.login-pin-input{text-align:center;letter-spacing:8px;box-sizing:border-box;color:#333;background:#fdfdfd;border:1px solid #ddd;border-radius:8px;outline:none;width:100%;padding:16px;font-family:monospace;font-size:28px;transition:all .2s}.login-pin-input:focus{background:#fff;border-color:#222;box-shadow:0 0 0 3px #0000000d}.login-error{color:#f44336;min-height:20px;margin-top:8px;font-size:14px}.login-submit-btn{color:#fff;letter-spacing:1px;text-transform:uppercase;cursor:pointer;background:#111;border:none;border-radius:8px;width:100%;padding:16px;font-size:15px;font-weight:600;transition:all .2s}.login-submit-btn:hover:not(:disabled){background:#333;transform:translateY(-1px)}.login-submit-btn:active:not(:disabled){transform:translateY(0)}.login-submit-btn:disabled{color:#999;cursor:not-allowed;background:#e0e0e0}.toolbar{-webkit-user-select:none;user-select:none;background:#fdfdfd;border-bottom:2px solid #888;flex-shrink:0;align-items:center;gap:0;height:90px;padding:0 10px;display:flex}.logo-menu-wrap{align-items:center;height:100%;display:flex;position:relative}.logo-button{cursor:pointer;background:0 0;border:none;outline:none}.tb-logo{color:#1a1a1a;letter-spacing:.5px;flex-shrink:0;padding:0 14px;font-size:18px;font-style:italic;font-weight:800}.logo-dropdown{z-index:1000;background:#fff;border:1px solid #ccc;border-radius:4px;flex-direction:column;min-width:180px;padding:6px;display:flex;position:absolute;top:calc(100% - 10px);left:0;box-shadow:0 8px 24px #00000024}.logo-dropdown button{text-align:left;cursor:pointer;color:#333;background:0 0;border:none;width:100%;padding:8px 12px;font-size:13px}.logo-dropdown button:hover:not(:disabled){background:#f0f0f0}.logo-dropdown button:disabled{color:#aaa;cursor:default}.logo-dropdown-separator{background:#ddd;height:1px;margin:6px 0}.layers-dropdown{width:520px;min-width:500px;max-width:calc(100vw - 16px);padding:8px;position:fixed;top:80px;left:auto;right:8px}.layer-row{white-space:nowrap;color:#333;cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:4px;flex-wrap:nowrap;align-items:center;gap:4px;min-height:28px;margin:0;padding:2px 6px;font-size:13px;display:flex}.layer-row.active{background-color:#4a90e21a;border-color:#8ab4ff}.layer-row button{text-align:center!important;width:auto!important;margin:0!important;padding:0!important}.layer-name{text-overflow:ellipsis;white-space:nowrap;flex:0 130px;min-width:90px;max-width:140px;overflow:hidden}.layer-color-input{cursor:pointer;background:0 0;border:none;border-radius:4px;width:18px;height:18px;padding:0}.layer-color-input::-webkit-color-swatch-wrapper{padding:0}.layer-color-input::-webkit-color-swatch{border:1px solid #ccc;border-radius:4px}.tb-group{flex-direction:column;justify-content:center;align-items:center;gap:4px;height:100%;padding:0 10px;display:flex}.tb-divider{background:#ccc;flex-shrink:0;width:1px;height:56px}.toolbar-history-group{flex-direction:column;align-items:center;gap:4px;display:flex}.history-button{color:#333;cursor:pointer;background:#fdfdfd;border:1.5px solid #bbb;border-radius:4px;justify-content:center;align-items:center;width:32px;height:24px;padding:0;transition:background .1s,border-color .1s;display:flex}.history-button:hover{background:#f0f0f0;border-color:#999}.main-tools-grid{grid-template-rows:repeat(2,auto);gap:4px;display:grid}.construction-tools-grid{grid-template-rows:repeat(2,auto);grid-auto-flow:column;gap:4px;display:grid}.tb-thickness{--bc-w:192px;flex-direction:row;justify-content:center;align-items:center;gap:12px}.thickness-controls{min-width:var(--bc-w);flex-direction:column;gap:2px;display:flex}.thickness-dots{width:var(--bc-w);box-sizing:border-box;justify-content:space-between;align-items:center;display:flex}.thickness-dot{cursor:pointer;background:#333;border:1.5px solid #0000;border-radius:50%;flex-shrink:0;transition:border-color .1s}.thickness-dot.active{outline-offset:1px;border-color:#fdfdfd;outline:1.5px solid #1a1a1a}.thickness-slider-row,.tone-row{align-items:center;gap:6px;display:flex}.tone-gradient{display:none}.tb-sub-divider{border-left:1.5px dashed #ccc;width:1px;height:48px;margin:0 4px}.fill-mode-selector{align-items:center;gap:4px;display:flex}.fill-mode-btn{cursor:pointer;background:0 0;border:1.5px solid #0000;border-radius:2px;justify-content:center;align-items:center;width:28px;height:40px;padding:0;transition:border-color .1s,background-color .1s;display:flex}.fill-mode-btn:hover{background:#f0f0f0}.fill-mode-btn.active{background:#fff;border-color:#888}.fill-icon{border-radius:10px;width:14px;height:24px;transform:rotate(20deg)}.icon-solid{background:#111}.icon-fade-out{background:linear-gradient(#111 20%,#1110 100%)}.icon-fade-in-out{background:linear-gradient(#1110 0%,#111 50%,#1110 100%)}.icon-soft-edge{background:linear-gradient(90deg,#1110 0%,#111 50%,#1110 100%)}.tb-clear{min-width:auto}.clear-btn{color:#d32f2f;cursor:pointer;background:#fff;border:1.5px solid #d32f2f;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;font-size:22px;font-weight:700;line-height:1;transition:background .1s;display:flex}.clear-btn:hover{background:#ffebee}.clear-label{color:#d32f2f;text-align:center;margin-top:-2px;font-size:9px}.tb-mode{flex-direction:column;gap:2px;min-width:auto;padding:0 4px}.tb-sliders{align-items:stretch;gap:1px;min-width:260px;padding:0 14px}.tb-toggles{flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;min-width:auto;padding:0 12px}.tb-toggle-label{cursor:pointer;color:#444;align-items:center;gap:6px;font-size:11px;line-height:1;display:flex}.tb-toggle-checkbox{appearance:none;cursor:pointer;background:#d1d1d1;border:none;border-radius:18px;outline:none;flex-shrink:0;width:34px;height:18px;margin:0;padding:0;transition:background .2s;position:relative}.tb-toggle-checkbox:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .2s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0000004d}.tb-toggle-checkbox:checked:after{transform:translate(16px)}.tb-toggle-checkbox.sync-toggle:checked,.tb-toggle-checkbox.center-toggle:checked,.tb-toggle-checkbox.axes-toggle:checked,.tb-toggle-checkbox.grid-toggle:checked{background:#4caf50}.tb-toggle-checkbox.check-toggle:checked{background:#f44336}.tb-toggle-text{-webkit-user-select:none;user-select:none;font-weight:500}.guide-toggles-col{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.center-controls-row{white-space:nowrap;align-items:center;gap:6px;display:flex}.center-mode-select{background:#fff;border:1px solid #ccc;border-radius:4px;outline:none;max-width:76px;height:24px;padding:1px 4px;font-size:12px}.center-view-button{white-space:nowrap;cursor:pointer;background:#eee;border:1px solid #ccc;border-radius:4px;height:24px;padding:1px 6px;font-size:12px;transition:background .1s}.center-view-button:hover{background:#e0e0e0}.tb-file{flex-direction:row;gap:12px;margin-left:auto;padding-right:14px}.file-name{color:#666;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle;max-width:150px;font-size:12px;font-style:italic;display:inline-block;overflow:hidden}.file-name.has-file{color:#1a1a1a;font-style:normal}.add-btn{color:#1a1a1a;cursor:pointer;white-space:nowrap;background:#e0e0e0;border:1.5px solid #1a1a1a;border-radius:4px;padding:5px 14px;font-size:12px;font-weight:600;transition:background .1s}.add-btn:hover{background:#d5d5d5}.settings-btn{color:#555;cursor:pointer;white-space:nowrap;background:#f0f0f0;border:1.5px solid #bbb;border-radius:4px;padding:5px 8px;font-size:14px;line-height:1;transition:background .1s,border-color .1s}.settings-btn:hover{background:#e2e2e2;border-color:#999}@media (width<=1000px){.toolbar{flex-wrap:wrap;justify-content:center;gap:8px;height:auto;padding:8px}.tb-divider{display:none}.tb-file{border-top:1px solid #ddd;justify-content:center;width:100%;margin-left:0;padding-top:8px}}.layer-quick-swatches{align-items:center;gap:5px;display:flex}.layer-quick-swatch{cursor:pointer;border:1px solid #ddd;border-radius:3px;flex-shrink:0;width:16px;height:16px;transition:opacity .2s,transform .1s}.layer-quick-swatch:hover{transform:scale(1.1)}.layer-quick-swatch.is-active{border:2px solid #111;box-shadow:inset 0 0 0 1px #fff}.layer-quick-swatch.is-hidden{opacity:.35;background-image:repeating-linear-gradient(45deg, #fff6, #fff6 2px, transparent 2px,)}.layer-drag-handle{cursor:grab;-webkit-user-select:none;user-select:none;opacity:.5;flex:none;min-width:16px;padding:0 4px;font-size:14px;line-height:1}.layer-drag-handle:active{cursor:grabbing}.scale-lock-button{cursor:pointer;background:0 0;border:1px solid #ccc;border-radius:4px;justify-content:center;align-items:center;width:28px;min-width:28px;height:18px;padding:0;font-size:11px;line-height:1;display:inline-flex}.scale-lock-button.is-unlocked{background:#fdfdfd;border-color:#aaa}.scale-lock-button:disabled{opacity:.55;cursor:default}.tool-btn{color:#333;-webkit-user-select:none;user-select:none;background:#f7f7f7;border:1px solid #ccc;border-radius:4px;justify-content:center;align-items:center;width:34px;height:34px;font-size:18px;transition:background .1s,border-color .1s;display:flex}.tool-btn:hover{background:#eaeaea;border-color:#999}.tool-btn.active{box-shadow:none;background:#fff;border:2px solid #1a1a1a}.mode-btn{cursor:pointer;box-sizing:border-box;background:#f7f7f7;border:1px solid #ccc;border-radius:2px;justify-content:center;align-items:center;width:24px;height:16px;padding:0;transition:background .1s,border-color .1s;display:flex}.mode-btn:hover{background:#eaeaea;border-color:#999}.mode-btn.active{background:#fff;border:1.5px solid #1a1a1a}.mode-icon-overlay{color:#444;border:1px solid;border-radius:1px;width:16px;height:10px}.mode-btn.active .mode-icon-overlay{color:#1a1a1a}.mode-icon-split-v{color:#444;gap:2px;display:flex}.mode-btn.active .mode-icon-split-v{color:#1a1a1a}.mode-icon-split-v span{border:1px solid;border-radius:1px;width:7px;height:10px;display:block}.mode-icon-split-h{color:#444;flex-direction:column;gap:2px;display:flex}.mode-btn.active .mode-icon-split-h{color:#1a1a1a}.mode-icon-split-h span{border:1px solid;border-radius:1px;width:16px;height:4px;display:block}.compact-slider-container{flex-shrink:0;align-items:center;width:192px;height:18px;display:flex;position:relative}.compact-slider-track-bg{pointer-events:none;border-radius:2px;height:4px;position:absolute;left:0;right:0}.compact-slider-track-fill{pointer-events:none;border-radius:2px;height:4px;position:absolute;left:0}.compact-slider-thumb{color:#111;pointer-events:none;box-sizing:border-box;z-index:2;background-color:#fff;border:1px solid #999;border-radius:9px;justify-content:center;align-items:center;min-width:24px;height:18px;margin-top:-9px;padding:0 6px;font-size:11px;font-weight:500;display:flex;position:absolute;top:50%;transform:translate(-50%);box-shadow:0 1px 3px #0000001a}.compact-slider-input{opacity:0;cursor:pointer;z-index:3;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0}.delayed-tooltip-container{width:100%;display:inline-flex;position:relative}.delayed-tooltip-content{color:#fff;pointer-events:none;white-space:nowrap;z-index:1000;background:#000000d9;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:500;animation:.15s ease-out forwards tooltipFadeIn;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%)}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%)}}.session-timer{background-color:#fcfcfc;border:1px solid #ddd;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;min-width:60px;padding:4px;display:flex;box-shadow:inset 0 1px 3px #0000000d}.session-timer-display{color:#333;margin-bottom:4px;font-family:monospace;font-size:13px;font-weight:700;line-height:1}.session-timer-controls{gap:8px;display:flex}.session-timer-btn{cursor:pointer;color:#555;background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-size:11px;transition:color .1s;display:flex}.session-timer-btn:hover:not(:disabled){color:#000}.session-timer-btn:disabled{opacity:.3;cursor:default}.workspace{background:#e0e0e0;flex-direction:column;flex:1;display:flex;overflow:hidden}.photo-viewport-shell{flex:1;width:100%;height:100%;min-height:0;display:flex;position:relative;overflow:hidden}.photo-viewport{scrollbar-width:none;-ms-overflow-style:none;flex:1;width:100%;height:100%;min-height:0;display:flex;overflow:auto}.photo-viewport::-webkit-scrollbar{display:none}.split-photo-viewport{background:#e0e0e0;flex:1;min-height:0}.photo-centerer{flex-shrink:0;margin:auto}.pan-padding-layer{box-sizing:content-box;width:max-content;height:max-content;display:inline-block;position:relative}.photo-stage{background:#fff;border:1px solid #666;flex-shrink:0;position:relative;overflow:hidden;box-shadow:0 4px 12px #0000001a}.canvas-stage{background:#fff}.stage-layer{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.canvas-overlay-label{color:#999;pointer-events:none;flex-direction:column;align-items:center;gap:6px;font-size:14px;display:flex}.canvas-overlay-label .big-label{color:#888;font-size:20px}.workspace-split{flex:1;width:100%;height:100%;min-height:0;padding:0;display:grid}.split-panel{background:#fff;flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.split-canvas-placeholder{background:#e0e0e0;flex:1;justify-content:center;align-items:center;min-height:0;display:flex}.split-divider{background:#d4d4d4;flex-shrink:0;align-self:stretch}.workspace-split.split-vertical .split-divider{cursor:col-resize;border-left:1px solid #bbb;border-right:1px solid #bbb;width:4px}.workspace-split.split-vertical .split-divider.is-locked{cursor:not-allowed;opacity:.5}.workspace-split.split-horizontal .split-divider{cursor:row-resize;border-top:1px solid #bbb;border-bottom:1px solid #bbb;height:4px}.workspace-split.split-horizontal .split-divider.is-locked{cursor:not-allowed;opacity:.5}.panel-placeholder{color:#aaa;pointer-events:none;flex-direction:column;align-items:center;gap:8px;font-size:14px;display:flex}.panel-placeholder .ph-icon{font-size:36px;line-height:1}.drawing-canvas{touch-action:none;background:0 0;display:block;position:absolute;inset:0}.brush-cursor-preview{pointer-events:none;z-index:9999;background:0 0;border:1px solid #111;border-radius:50%;position:fixed;transform:translate(-50%,-50%)}.brush-cursor-preview:after{content:"";background:#111;border-radius:50%;width:3px;height:3px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.guide-overlay{pointer-events:none;-webkit-user-select:none;user-select:none;z-index:20;position:absolute;inset:0}.guide-overlay-grid{background-image:linear-gradient(90deg,#0000 50%,#50505026 50% calc(50% + 1px),#0000 calc(50% + 1px)),linear-gradient(#0000 50%,#50505026 50% calc(50% + 1px),#0000 calc(50% + 1px));background-size:var(--guide-grid-step) var(--guide-grid-step);background-position:50%;position:absolute;inset:0}.guide-overlay-axis-v,.guide-overlay-axis-h{background:#50505059;position:absolute}.guide-overlay-axis-v{width:1px;top:0;bottom:0;left:50%}.guide-overlay-axis-h{height:1px;top:50%;left:0;right:0}.guide-overlay-center{width:32px;height:32px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.guide-overlay-cross-v,.guide-overlay-cross-h{background:#5050508c;position:absolute}.guide-overlay-cross-v{width:1px;top:0;bottom:0;left:50%}.guide-overlay-cross-h{height:1px;top:50%;left:0;right:0}.settings-overlay{z-index:1000;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.settings-modal{background:#fff;border-radius:8px;flex-direction:column;width:480px;max-width:95vw;max-height:85vh;font-size:13px;display:flex;overflow:hidden;box-shadow:0 8px 32px #00000038}.settings-header{flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 18px 10px;display:flex}.settings-tabs{background:#fff;border-bottom:1px solid #e0e0e0;flex-wrap:wrap;flex-shrink:0;gap:6px;padding:0 18px 12px;display:flex}.settings-tab{color:#333;cursor:pointer;background:#f7f7f7;border:1px solid #d0d0d0;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:500;transition:background .15s,color .15s,border-color .15s}.settings-tab:hover{background:#eee;border-color:silver}.settings-tab.active{color:#fff;background:#111;border-color:#111;font-weight:600}.settings-note{color:#777;padding:8px 0;font-size:12px;line-height:1.4}.settings-title{color:#1a1a1a;letter-spacing:.1px;font-size:15px;font-weight:700}.settings-close{cursor:pointer;color:#888;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:16px;line-height:1;transition:background .15s,color .15s}.settings-close:hover{color:#333;background:#f0f0f0}.settings-body{flex-direction:column;gap:24px;padding:18px;display:flex;overflow-y:auto}.settings-section{flex-direction:column;gap:10px;display:flex}.settings-section-title{text-transform:uppercase;letter-spacing:.8px;color:#888;border-bottom:1px solid #eee;margin:0 0 4px;padding-bottom:6px;font-size:11px;font-weight:700}.hotkeys-table{border-collapse:collapse;width:100%}.hotkeys-table td{vertical-align:middle;color:#333;padding:4px 8px 4px 0}.hotkeys-table td:first-child{width:160px}kbd{color:#333;white-space:nowrap;background:#f3f3f3;border:1px solid #ccc;border-bottom:2px solid #bbb;border-radius:4px;padding:2px 7px;font-family:system-ui,monospace;font-size:11px;display:inline-block}.settings-row{cursor:pointer;align-items:center;gap:10px;padding:3px 0;display:flex}.settings-row input[type=checkbox]{cursor:pointer;accent-color:#333;flex-shrink:0;width:14px;height:14px}.settings-label{color:#444;flex-shrink:0;min-width:170px}.settings-row select{cursor:pointer;color:#333;background:#fafafa;border:1px solid #ccc;border-radius:4px;padding:4px 8px;font-size:12px}.settings-row select:disabled{opacity:.45;cursor:not-allowed}.library-overlay{z-index:1000;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.library-modal{background:#fff;border-radius:8px;flex-direction:column;width:600px;max-width:95vw;height:70vh;max-height:85vh;font-size:13px;display:flex;overflow:hidden;box-shadow:0 8px 32px #00000038}.library-header{flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 18px 10px;display:flex}.library-title{color:#1a1a1a;letter-spacing:.1px;font-size:15px;font-weight:700}.library-close{cursor:pointer;color:#888;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:16px;line-height:1;transition:background .15s,color .15s}.library-close:hover{color:#333;background:#f0f0f0}.library-tabs{background:#fff;border-bottom:1px solid #e0e0e0;flex-wrap:wrap;flex-shrink:0;gap:6px;padding:0 18px 12px;display:flex}.library-tab{color:#333;cursor:pointer;background:#f7f7f7;border:1px solid #d0d0d0;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:500;transition:background .15s,color .15s,border-color .15s}.library-tab:hover{background:#eee;border-color:silver}.library-tab.active{color:#fff;background:#111;border-color:#111;font-weight:600}.library-body{background:#fafafa;flex-grow:1;padding:18px;overflow-y:auto}.level-group{margin-bottom:24px}.level-title{color:#111;border-bottom:1px solid #eaeaea;margin:0 0 8px;padding-bottom:4px;font-size:14px;font-weight:700}.lesson-list{flex-direction:column;gap:8px;display:flex}.lesson-item{cursor:pointer;background:#fff;border:1px solid #e0e0e0;border-radius:6px;flex-direction:column;gap:6px;padding:12px;transition:border-color .15s,box-shadow .15s;display:flex}.lesson-item:hover{border-color:#ccc;box-shadow:0 2px 4px #00000008}.lesson-item.selected{border-color:#111;box-shadow:0 0 0 1px #111}.lesson-header{justify-content:space-between;align-items:center;display:flex}.lesson-title{color:#222;font-size:13px;font-weight:600}.lesson-status{color:#555;background:#eee;border-radius:12px;padding:2px 6px;font-size:11px;font-weight:500}.lesson-status.completed{color:#2e7d32;background:#e8f5e9}.lesson-status.in-progress{color:#e65100;background:#fff3e0}.lesson-desc{color:#666;margin:0;font-size:12px;line-height:1.4}.checklist-item{align-items:flex-start;gap:8px;margin-bottom:10px;display:flex}.checklist-item input[type=checkbox]{margin-top:2px}.checklist-item label{color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:13px;line-height:1.4}.checklist-item label.completed{color:#888;text-decoration:line-through}.checklist-empty{color:#777;font-size:13px;font-style:italic}.video-list{flex-direction:column;gap:8px;display:flex}.video-item{background:#fff;border:1px solid #e0e0e0;border-radius:6px;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.video-info{flex-direction:column;gap:4px;display:flex}.video-title{color:#222;font-size:13px;font-weight:500}.video-badge{text-transform:uppercase;border-radius:4px;align-self:flex-start;padding:2px 6px;font-size:10px;font-weight:700}.video-badge.youtube{color:#d32f2f;background:#ffebee}.video-badge.rutube{color:#1976d2;background:#e3f2fd}.video-badge.mp4{color:#616161;background:#eee}.video-badge.external{color:#7b1fa2;background:#f3e5f5}.video-open-btn{color:#fff;cursor:pointer;background:#111;border:none;border-radius:4px;padding:6px 10px;font-size:11px;font-weight:600;transition:background .15s}.video-open-btn:hover{background:#333}.lesson-refs-grid{flex-direction:column;gap:8px;display:flex}.lesson-ref-card{background:#fff;border:1px solid #e0e0e0;border-radius:6px;align-items:center;gap:12px;padding:8px;display:flex}.lesson-ref-img{object-fit:cover;border:1px solid #eee;border-radius:4px;flex-shrink:0;width:60px;height:60px}.lesson-ref-info{flex-direction:column;flex-grow:1;gap:8px;min-width:0;display:flex}.lesson-ref-name{color:#222;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.lesson-ref-actions{gap:8px;display:flex}.ref-lesson-badge{color:#555;white-space:nowrap;text-overflow:ellipsis;background:#f0f0f0;border-radius:4px;max-width:100%;margin-bottom:6px;padding:2px 6px;font-size:10px;font-weight:500;display:inline-block;overflow:hidden}.refs-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:16px;display:grid}.ref-card{background:#fff;border:1px solid #ddd;border-radius:6px;flex-direction:column;display:flex;overflow:hidden}.ref-img-wrap{aspect-ratio:1;background:#f0f0f0;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.ref-img-wrap img{object-fit:cover;width:100%;height:100%}.ref-actions{flex-direction:column;gap:6px;padding:8px;display:flex}.ref-btn{cursor:pointer;text-align:center;background:#eee;border:1px solid #ccc;border-radius:4px;padding:4px;font-size:11px;transition:background .15s}.ref-btn.primary{color:#fff;background:#111;border-color:#111}.ref-btn.primary:hover{background:#333}.ref-btn:hover:not(.primary){background:#ddd}.ref-btn.danger{color:red;background:#fff5f5;border-color:#fbcbc8}.ref-btn.danger:hover{background:#ffebee}.upload-ref-btn{color:#fff;cursor:pointer;background:#111;border:none;border-radius:6px;padding:8px 12px;font-size:13px;font-weight:500;display:inline-block}.upload-ref-btn:hover{background:#333}.progress-stats{background:#fff;border:1px solid #e0e0e0;border-radius:6px;flex-direction:column;gap:12px;padding:16px;display:flex}.progress-stat-row{justify-content:space-between;font-size:13px;display:flex}.progress-stat-row strong{font-weight:600}.progress-history-table-wrap{background:#fff;border:1px solid #eee;border-radius:8px;width:100%;overflow-x:auto}.progress-history-table{border-collapse:collapse;table-layout:fixed;word-break:break-word;width:100%;font-size:13px}.progress-history-table th,.progress-history-table td{text-align:left;border-bottom:1px solid #eee;padding:1px 12px}.progress-history-table th{color:#555;background:#f9f9f9;font-size:12px;font-weight:600}.progress-history-table tbody tr:last-child td{border-bottom:none}.progress-history-date{color:#777;width:120px;font-size:11px}.progress-history-level{color:#666;width:120px;font-size:11px}.progress-history-lesson{color:#222;width:160px;font-weight:500}.progress-history-task{color:#333;width:auto}.progress-history-clickable{cursor:pointer;transition:color .15s}.progress-history-clickable:hover{color:#1976d2;text-decoration:underline}.edit-toggle-btn{cursor:pointer;color:#333;background:#f0f0f0;border:1px solid #d0d0d0;border-radius:6px;margin-left:auto;padding:4px 10px;font-size:12px;font-weight:600;transition:all .15s}.edit-toggle-btn.active{color:#fff;background:#111;border-color:#111}.edit-actions{gap:6px;margin-top:8px;display:flex}.edit-btn{cursor:pointer;color:#333;background:#fff;border:1px solid #ccc;border-radius:4px;padding:4px 8px;font-size:11px}.edit-btn:hover{background:#f0f0f0}.edit-btn.danger{color:red;border-color:#fbcbc8}.edit-btn.danger:hover{background:#fff5f5}.edit-form{background:#fff;border:1px solid #ddd;border-radius:6px;flex-direction:column;gap:12px;margin-top:16px;padding:16px;display:flex}.edit-form label{color:#333;flex-direction:column;gap:4px;font-size:12px;font-weight:600;display:flex}.edit-form input,.edit-form textarea{resize:vertical;border:1px solid #ccc;border-radius:4px;padding:8px;font-family:inherit;font-size:13px}.edit-form textarea{min-height:60px}.edit-form-actions{justify-content:flex-end;gap:8px;margin-top:8px;display:flex}.edit-form-btn{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:4px;padding:6px 12px;font-size:12px;font-weight:500}.edit-form-btn.primary{color:#fff;background:#111;border-color:#111}.edit-form-btn.primary:hover{background:#333}.edit-form-btn:hover:not(.primary){background:#f0f0f0}