.yle-page{max-width:100%;margin:0;padding:24px 32px}.yle-header{margin-bottom:24px}.yle-header-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;display:flex}.yle-title-row{align-items:center;gap:16px;display:flex}.yle-title-icon{background:linear-gradient(135deg,#ec4899 0%,#db2777 100%);border-radius:14px;justify-content:center;align-items:center;width:56px;height:56px;display:flex;box-shadow:0 4px 12px #ec48994d}.yle-title-emoji{font-size:28px}.yle-header h1{color:var(--text-primary);margin:0;font-size:28px;font-weight:700}.yle-header p{color:var(--text-secondary);margin:4px 0 0;font-size:14px}.yle-create-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ec4899 0%,#db2777 100%);border:none;border-radius:10px;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .2s;display:flex;box-shadow:0 2px 8px #ec48994d}.yle-create-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #ec489966}.yle-create-btn i{font-size:20px}.yle-main-layout{grid-template-columns:1fr 360px;align-items:start;gap:24px;display:grid}@media (width<=1200px){.yle-main-layout{grid-template-columns:1fr}.yle-analytics-panel{display:none}}.yle-accordion-container{border:1px solid var(--border-color);background:#fff;border-radius:14px;overflow:hidden}.yle-accordion{flex-direction:column;display:flex}.yle-loading{color:var(--text-secondary);justify-content:center;align-items:center;gap:12px;padding:60px;font-size:14px;display:flex}.yle-loading i{font-size:24px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.yle-level{border-bottom:1px solid var(--border-color)}.yle-level:last-child{border-bottom:none}.yle-level-header{cursor:pointer;background:#fff;border:none;justify-content:space-between;align-items:center;width:100%;padding:16px 20px;transition:background-color .2s;display:flex}.yle-level-header:hover{background:var(--bg-secondary)}.yle-level-header.expanded{background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.yle-level-info{align-items:center;gap:12px;display:flex}.yle-level-info i{color:var(--text-tertiary);font-size:18px;transition:transform .2s}.yle-level-header.expanded .yle-level-info i{transform:rotate(90deg)}.yle-level-badge{color:#fff;text-transform:uppercase;letter-spacing:.5px;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700}.yle-level-name{color:var(--text-primary);font-size:15px;font-weight:600}.yle-level-age{color:var(--text-tertiary);background:var(--bg-tertiary);border-radius:4px;padding:2px 8px;font-size:12px}.yle-level-count{color:var(--text-tertiary);font-size:13px}.yle-units{background:var(--bg-secondary)}.yle-unit{border-bottom:1px solid var(--border-color)}.yle-unit:last-child{border-bottom:none}.yle-unit-header{cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;width:100%;padding:12px 20px 12px 44px;transition:background-color .2s;display:flex}.yle-unit-header:hover,.yle-unit-header.expanded{background:#00000008}.yle-unit-header.empty{opacity:.6}.yle-unit-info{align-items:center;gap:10px;display:flex}.yle-unit-info i{color:var(--text-tertiary);font-size:16px}.yle-unit-number{color:var(--text-secondary);font-size:14px;font-weight:600}.yle-unit-name{color:var(--text-tertiary);font-size:13px}.yle-unit-name:before{content:":";margin-right:6px}.yle-unit-count{color:var(--text-tertiary);background:var(--bg-tertiary);border-radius:4px;padding:2px 8px;font-size:12px}.yle-lessons-list{border-top:1px solid var(--border-color);background:#fff}.yle-lesson-row{border-bottom:1px solid var(--border-color);cursor:pointer;justify-content:space-between;align-items:center;padding:12px 20px 12px 68px;transition:background-color .15s;display:flex}.yle-lesson-row:last-child{border-bottom:none}.yle-lesson-row:hover{background:var(--bg-secondary)}.yle-lesson-row.selected{background:#fdf2f8;border-left:3px solid #ec4899;padding-left:65px}.yle-lesson-main{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.yle-lesson-mascot{font-size:20px}.yle-lesson-number{color:var(--text-tertiary);background:var(--bg-tertiary);border-radius:4px;flex-shrink:0;padding:2px 6px;font-size:12px;font-weight:600}.yle-lesson-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.yle-theme-badge{flex-shrink:0;font-size:14px}.yle-lesson-actions{opacity:0;align-items:center;gap:4px;transition:opacity .15s;display:flex}.yle-lesson-row:hover .yle-lesson-actions{opacity:1}.yle-action-btn{border:1px solid var(--border-color);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:6px;justify-content:center;align-items:center;transition:all .15s;display:flex}.yle-action-btn:hover{background:var(--bg-secondary);border-color:var(--primary);color:var(--primary)}.yle-action-btn.yle-action-delete:hover{color:#ef4444;background:#fef2f2;border-color:#ef4444}.yle-empty-unit{color:var(--text-tertiary);justify-content:center;align-items:center;gap:16px;padding:20px;font-size:13px;display:flex}.yle-add-lesson-btn{border:1px dashed var(--border-color);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;transition:all .15s;display:flex}.yle-add-lesson-btn:hover{background:var(--bg-secondary);color:#ec4899;border-color:#ec4899}.yle-analytics-panel{position:sticky;top:24px}.yle-analytics{border:1px solid var(--border-color);background:#fff;border-radius:14px;padding:20px}.yle-analytics-header{border-bottom:1px solid var(--border-color);align-items:center;gap:10px;margin-bottom:20px;padding-bottom:16px;display:flex}.yle-analytics-header i{color:#ec4899;font-size:20px}.yle-analytics-header h3{color:var(--text-primary);flex:1;margin:0;font-size:16px;font-weight:600}.yle-analytics-close{background:var(--bg-secondary);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;transition:all .15s;display:flex}.yle-analytics-close:hover{background:var(--bg-tertiary)}.yle-progress-section{text-align:center;margin-bottom:24px}.yle-progress-circle{width:120px;height:120px;margin:0 auto 12px;position:relative}.yle-progress-circle svg{transform:rotate(-90deg)}.yle-progress-bg{fill:none;stroke:var(--bg-tertiary);stroke-width:8px}.yle-progress-fill{fill:none;stroke:#ec4899;stroke-width:8px;stroke-linecap:round;transition:stroke-dasharray .5s}.yle-progress-text{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.yle-progress-value{color:var(--text-primary);font-size:28px;font-weight:700;display:block}.yle-progress-label{color:var(--text-tertiary);font-size:12px}.yle-progress-detail{color:var(--text-secondary);margin:0;font-size:13px}.yle-stats-section{margin-bottom:20px}.yle-stats-section:last-child{margin-bottom:0}.yle-stats-section h4{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px;font-size:13px;font-weight:600}.yle-theme-bars{flex-direction:column;gap:12px;display:flex}.yle-theme-bar-item{flex-direction:column;gap:6px;display:flex}.yle-theme-bar-header{justify-content:space-between;align-items:center;display:flex}.yle-theme-bar-label{color:var(--text-primary);align-items:center;gap:6px;font-size:13px;display:flex}.yle-theme-icon-small{font-size:14px}.yle-theme-bar-value{color:var(--text-secondary);font-size:12px;font-weight:600}.yle-theme-bar-track{background:var(--bg-tertiary);border-radius:3px;height:6px;overflow:hidden}.yle-theme-bar-fill{border-radius:3px;height:100%;transition:width .3s}.yle-theme-bar-fill.animals{background:#f59e0b}.yle-theme-bar-fill.colors{background:#ec4899}.yle-theme-bar-fill.numbers{background:#3b82f6}.yle-theme-bar-fill.shapes{background:#8b5cf6}.yle-theme-bar-fill.family{background:#10b981}.yle-quick-stats{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.yle-quick-stat{background:var(--bg-secondary);border-radius:8px;align-items:center;gap:10px;padding:12px;display:flex}.yle-quick-stat i{color:#ec4899;font-size:20px}.yle-quick-stat-value{color:var(--text-primary);font-size:18px;font-weight:700;display:block}.yle-quick-stat-label{color:var(--text-tertiary);font-size:11px}.yle-recent-list{flex-direction:column;gap:8px;display:flex}.yle-recent-item{background:var(--bg-secondary);border-radius:8px;align-items:center;gap:10px;padding:8px 12px;display:flex}.yle-recent-mascot{font-size:16px}.yle-recent-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;overflow:hidden}.yle-recent-date{color:var(--text-tertiary);font-size:11px}.yle-empty-recent{text-align:center;color:var(--text-tertiary);margin:0;padding:20px;font-size:13px}.yle-lesson-info-card{text-align:center;background:linear-gradient(135deg,#fdf2f8 0%,#fce7f3 100%);border-radius:12px;margin-bottom:20px;padding:20px}.yle-lesson-info-mascot{margin-bottom:12px;font-size:48px}.yle-lesson-info-card h4{color:var(--text-primary);margin:0 0 4px;font-size:16px;font-weight:600}.yle-lesson-info-unit{color:var(--text-secondary);margin:0 0 12px;font-size:13px}.yle-lesson-info-meta{justify-content:center;align-items:center;gap:8px;display:flex}.yle-lesson-info-level{color:#fff;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600}.yle-lesson-info-theme{color:var(--text-secondary);font-size:13px}.yle-content-status{flex-direction:column;gap:8px;display:flex}.yle-status-item{background:var(--bg-secondary);border-radius:8px;align-items:center;gap:10px;padding:10px 12px;font-size:13px;display:flex}.yle-status-item.complete,.yle-status-item.complete i{color:#10b981}.yle-status-item.incomplete,.yle-status-item.incomplete i{color:var(--text-tertiary)}.yle-engagement-stats{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.yle-engagement-stat{text-align:center;background:var(--bg-secondary);border-radius:8px;padding:12px}.yle-engagement-value{color:var(--text-primary);font-size:20px;font-weight:700;display:block}.yle-engagement-label{color:var(--text-tertiary);font-size:11px}.yle-time-stats{flex-direction:column;gap:12px;display:flex}.yle-time-stat{background:var(--bg-secondary);border-radius:8px;align-items:center;gap:12px;padding:12px;display:flex}.yle-time-stat i{color:#ec4899;font-size:18px}.yle-time-value{color:var(--text-primary);font-size:14px;font-weight:600;display:block}.yle-time-label{color:var(--text-tertiary);font-size:11px}.yle-status-badge{border-radius:8px;align-items:center;gap:6px;padding:10px 16px;font-size:14px;font-weight:600;display:inline-flex}.yle-status-badge.draft{color:#92400e;background:#fef3c7}.yle-status-badge.published{color:#065f46;background:#d1fae5}.yle-modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.yle-modal{background:#fff;border-radius:16px;flex-direction:column;width:100%;max-width:640px;max-height:90vh;display:flex;overflow:hidden;box-shadow:0 20px 60px #0000004d}.yle-modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.yle-modal-header h2{color:var(--text-primary);margin:0;font-size:20px;font-weight:600}.yle-modal-close{background:var(--bg-secondary);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;transition:all .15s;display:flex}.yle-modal-close:hover{background:var(--bg-tertiary)}.yle-modal-body{flex:1;padding:24px;overflow-y:auto}.yle-modal-footer{border-top:1px solid var(--border-color);background:var(--bg-secondary);justify-content:flex-end;align-items:center;gap:12px;padding:16px 24px;display:flex}.yle-form-row{gap:16px;margin-bottom:20px;display:grid}.yle-form-row-3{grid-template-columns:repeat(3,1fr)}.yle-form-field{flex-direction:column;gap:8px;margin-bottom:20px;display:flex}.yle-form-field:last-child{margin-bottom:0}.yle-form-field label{color:var(--text-primary);font-size:13px;font-weight:600}.yle-locked-label{color:var(--text-tertiary);margin-left:8px;font-weight:400}.yle-form-field input,.yle-form-field select{border:1px solid var(--border-color);border-radius:8px;padding:10px 14px;font-size:14px;transition:border-color .15s,box-shadow .15s}.yle-form-field input:focus,.yle-form-field select:focus{border-color:#ec4899;outline:none;box-shadow:0 0 0 3px #ec48991a}.yle-form-field input:disabled{background:var(--bg-secondary);color:var(--text-tertiary)}.yle-warning{color:#92400e;background:#fef3c7;border:1px solid #fcd34d;border-radius:8px;align-items:center;gap:8px;margin-bottom:20px;padding:12px 16px;font-size:13px;display:flex}.yle-warning i{font-size:18px}.yle-theme-grid{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.yle-theme-btn{background:var(--bg-secondary);cursor:pointer;border:2px solid #0000;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;transition:all .15s;display:flex}.yle-theme-btn:hover{border-color:var(--border-color);background:#fff}.yle-theme-btn.selected{background:#fdf2f8;border-color:#ec4899}.yle-theme-icon{font-size:24px}.yle-theme-label{color:var(--text-secondary);font-size:11px}.yle-mascot-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.yle-mascot-btn{background:var(--bg-secondary);cursor:pointer;border:2px solid #0000;border-radius:10px;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;transition:all .15s;display:flex}.yle-mascot-btn:hover{border-color:var(--border-color);background:#fff}.yle-mascot-btn.selected{background:#fdf2f8;border-color:#ec4899}.yle-mascot-emoji{font-size:32px}.yle-mascot-name{color:var(--text-secondary);text-align:center;font-size:11px}.yle-preview-labels{background:linear-gradient(135deg,#fdf2f8 0%,#fce7f3 100%);border-radius:10px;align-items:center;gap:16px;margin-top:20px;padding:16px;display:flex}.yle-preview-mascot{font-size:48px}.yle-preview-text p{color:var(--text-secondary);margin:0 0 4px;font-size:13px}.yle-preview-text p:last-child{margin-bottom:0}.yle-btn-secondary{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;background:#fff;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .15s}.yle-btn-secondary:hover{background:var(--bg-secondary)}.yle-btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ec4899 0%,#db2777 100%);border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .15s}.yle-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ec48994d}.yle-btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}@media (width<=768px){.yle-page{padding:16px}.yle-header-content{flex-direction:column;align-items:flex-start}.yle-create-btn{justify-content:center;width:100%}.yle-form-row-3{grid-template-columns:1fr}.yle-theme-grid{grid-template-columns:repeat(3,1fr)}.yle-mascot-grid{grid-template-columns:repeat(2,1fr)}.yle-quick-stats,.yle-engagement-stats{grid-template-columns:1fr}}.yl-visual-editor{flex-direction:column;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;transition:background-color .3s;display:flex}.yl-loading{flex-direction:column;justify-content:center;align-items:center;gap:1rem;height:100vh;display:flex}.yl-loading-spinner{border:4px solid #e5e7eb;border-top-color:#6366f1;border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin}.yl-error{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;height:100vh;display:flex}.yl-error i{color:#ef4444;font-size:4rem}.yl-error h2{color:#1f2937;margin:0;font-size:1.5rem}.yl-error p{color:#6b7280;margin:0}.yl-editor-header{z-index:100;background:#fff;border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex;position:sticky;top:0;box-shadow:0 1px 3px #0000000d}.yl-header-left{align-items:center;gap:1rem;display:flex}.yl-back-btn{color:#374151;cursor:pointer;background:#f3f4f6;border:none;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}.yl-back-btn:hover{background:#e5e7eb;transform:translate(-2px)}.yl-header-info h1{color:#1f2937;align-items:center;gap:.5rem;margin:0;font-size:1.25rem;font-weight:600;display:flex}.yl-mascot-emoji{font-size:1.5rem}.yl-header-meta{color:#6b7280;align-items:center;gap:.75rem;font-size:.875rem;display:flex}.yl-status-badge{border-radius:9999px;padding:.25rem .75rem;font-size:.75rem;font-weight:500}.yl-status-badge.draft{color:#92400e;background:#fef3c7}.yl-status-badge.published{color:#065f46;background:#d1fae5}.yl-header-actions{align-items:center;gap:.75rem;display:flex}.yl-btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s;display:inline-flex;position:relative}.yl-btn.small{padding:.5rem .75rem;font-size:.8125rem}.yl-btn.primary{color:#fff;background:#6366f1}.yl-btn.primary:hover:not(:disabled){background:#4f46e5}.yl-btn.secondary{color:#374151;background:#f3f4f6}.yl-btn.secondary:hover:not(:disabled){background:#e5e7eb}.yl-btn.success{color:#fff;background:#10b981}.yl-btn.success:hover:not(:disabled){background:#059669}.yl-btn.warning{color:#fff;background:#f59e0b}.yl-btn.warning:hover:not(:disabled){background:#d97706}.yl-btn.danger{color:#fff;background:#ef4444}.yl-btn.danger:hover:not(:disabled){background:#dc2626}.yl-btn:disabled{opacity:.5;cursor:not-allowed}.yl-unsaved-dot{background:#fbbf24;border-radius:50%;width:8px;height:8px;animation:1.5s infinite pulse;position:absolute;top:4px;right:4px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.yl-editor-tabs{background:#fff;border-bottom:1px solid #e5e7eb;gap:.5rem;padding:.75rem 1.5rem;display:flex;overflow-x:auto}.yl-tab{color:#6b7280;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.yl-tab:hover{color:#374151;background:#f3f4f6}.yl-tab.active{color:#6366f1;background:#eef2ff}.yl-tab i{font-size:1.125rem}.yl-tab-badge{color:#fff;background:#6366f1;border-radius:10px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 6px;font-size:.75rem;font-weight:600;display:inline-flex}.yl-tab.active .yl-tab-badge{background:#4f46e5}.yl-editor-content{flex:1;padding:1.5rem;overflow-y:auto}.yl-empty-state{text-align:center;background:#fff;border:2px dashed #e5e7eb;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;padding:4rem 2rem;display:flex}.yl-empty-state i{color:#d1d5db;margin-bottom:1rem;font-size:4rem}.yl-empty-state h3{color:#374151;margin:0 0 .5rem;font-size:1.25rem}.yl-empty-state p{color:#6b7280;max-width:400px;margin:0 0 1.5rem}.yl-editor-section{background:#fff;border-radius:12px;margin-bottom:1rem;overflow:hidden;box-shadow:0 1px 3px #0000000d}.yl-section-header{cursor:pointer;-webkit-user-select:none;user-select:none;background:#f9fafb;justify-content:space-between;align-items:center;padding:1rem 1.25rem;transition:background .2s;display:flex}.yl-section-header:hover{background:#f3f4f6}.yl-section-title{color:#374151;align-items:center;gap:.75rem;font-weight:600;display:flex}.yl-section-title i{color:#6366f1;font-size:1.25rem}.yl-section-badge{color:#fff;background:#6366f1;border-radius:6px;padding:.25rem .5rem;font-size:.75rem;font-weight:500}.yl-section-content{border-top:1px solid #e5e7eb;padding:1.25rem}.yl-form-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;display:grid}.yl-input-group{flex-direction:column;gap:.5rem;display:flex}.yl-input-group label{color:#374151;font-size:.875rem;font-weight:500}.yl-input-group input,.yl-input-group select,.yl-input-group textarea{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:.75rem 1rem;font-family:inherit;font-size:.9375rem;transition:border-color .2s,box-shadow .2s}.yl-input-group input:focus,.yl-input-group select:focus,.yl-input-group textarea:focus{border-color:#6366f1;outline:none;box-shadow:0 0 0 3px #6366f11a}.yl-input-group textarea{resize:vertical;min-height:80px}.yl-json-textarea{font-family:Fira Code,Monaco,monospace;font-size:.8125rem}.yl-mascot-grid{flex-wrap:wrap;gap:.75rem;display:flex}.yl-mascot-btn{cursor:pointer;background:#fff;border:2px solid #e5e7eb;border-radius:12px;width:60px;height:60px;transition:all .2s}.yl-mascot-btn:hover{border-color:#d1d5db;transform:scale(1.05)}.yl-mascot-btn.active{background:#eef2ff;border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.yl-mascot-emoji-large{font-size:2rem}.yl-color-grid{flex-wrap:wrap;gap:.75rem;display:flex}.yl-color-btn{cursor:pointer;border:3px solid #0000;border-radius:10px;width:48px;height:48px;transition:all .2s;box-shadow:0 1px 3px #0000001a}.yl-color-btn:hover{transform:scale(1.1)}.yl-color-btn.active{border-color:#6366f1;box-shadow:0 0 0 3px #6366f14d}.yl-greeting-preview{border-radius:12px;align-items:flex-start;gap:1rem;margin-bottom:1.25rem;padding:1.5rem;display:flex}.yl-greeting-mascot{font-size:3rem}.yl-greeting-bubble{background:#fff;border-radius:0 12px 12px;max-width:400px;padding:1rem 1.25rem;box-shadow:0 2px 8px #00000014}.yl-greeting-bubble p{margin:0;line-height:1.5}.yl-greeting-jp{color:#6b7280;font-size:.875rem;margin-top:.5rem!important}.yl-image-upload{cursor:pointer;background:#f9fafb;border:2px dashed #e5e7eb;border-radius:12px;transition:all .2s;overflow:hidden}.yl-image-upload:hover{background:#eef2ff;border-color:#6366f1}.yl-image-upload.small{width:80px;height:80px}.yl-image-upload.medium{width:120px;height:120px}.yl-image-upload.large{width:100%;max-width:300px;height:200px}.yl-image-placeholder{color:#9ca3af;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;height:100%;display:flex}.yl-image-placeholder i{font-size:1.5rem}.yl-image-placeholder span{text-align:center;font-size:.75rem}.yl-image-preview{width:100%;height:100%;position:relative}.yl-image-preview img{object-fit:cover;width:100%;height:100%}.yl-image-remove{color:#fff;cursor:pointer;opacity:0;background:#ef4444e6;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;transition:opacity .2s;display:flex;position:absolute;top:4px;right:4px}.yl-image-preview:hover .yl-image-remove{opacity:1}.yl-image-loading{color:#6366f1;justify-content:center;align-items:center;height:100%;display:flex}.yl-panel-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.yl-panel-header h2{color:#1f2937;align-items:center;gap:.75rem;margin:0;font-size:1.25rem;display:flex}.yl-panel-header h2 i{color:#6366f1;font-size:1.5rem}.yl-vocab-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014}.yl-vocab-header{background:#f9fafb;border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.yl-vocab-number{color:#fff;background:#6366f1;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.875rem;font-weight:600;display:flex}.yl-vocab-actions{gap:.25rem;display:flex}.yl-vocab-actions button{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.yl-vocab-actions button:hover:not(:disabled){color:#374151;background:#f3f4f6}.yl-vocab-actions button:disabled{opacity:.3;cursor:not-allowed}.yl-vocab-actions button.danger:hover:not(:disabled){color:#ef4444;background:#fef2f2}.yl-vocab-content{gap:1rem;padding:1rem;display:flex}.yl-vocab-inputs{flex-direction:column;flex:1;gap:.75rem;display:flex}.yl-vocab-inputs .yl-input-group input{padding:.5rem .75rem;font-size:.875rem}.yl-song-content{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000000d}.yl-lyrics-section{margin-top:1.5rem}.yl-lyrics-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.yl-lyrics-header h3{color:#374151;margin:0;font-size:1rem}.yl-lyrics-list{flex-direction:column;gap:.5rem;display:flex}.yl-lyric-row{align-items:center;gap:.75rem;display:flex}.yl-lyric-number{color:#6b7280;background:#f3f4f6;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:.75rem;font-weight:500;display:flex}.yl-lyric-line{border:1px solid #e5e7eb;border-radius:8px;flex:2;padding:.625rem .875rem;font-size:.9375rem}.yl-lyric-translation{border:1px solid #e5e7eb;border-radius:8px;flex:1;padding:.625rem .875rem;font-size:.9375rem}.yl-lyric-delete{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.yl-lyric-delete:hover{color:#ef4444;background:#fef2f2}.yl-story-content{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000000d}.yl-pages-section{margin-top:1.5rem}.yl-pages-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.yl-pages-header h3{color:#374151;margin:0;font-size:1rem}.yl-pages-list{flex-direction:column;gap:1rem;display:flex}.yl-story-page{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}.yl-page-header{background:#fff;border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.yl-page-number{color:#6366f1;font-weight:600}.yl-page-actions{gap:.25rem;display:flex}.yl-page-actions button{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.yl-page-actions button:hover:not(:disabled){color:#374151;background:#f3f4f6}.yl-page-actions button:disabled{opacity:.3;cursor:not-allowed}.yl-page-actions button.danger:hover:not(:disabled){color:#ef4444;background:#fef2f2}.yl-page-content{gap:1rem;padding:1rem;display:flex}.yl-page-inputs{flex-direction:column;flex:1;gap:.75rem;display:flex}.yl-page-inputs textarea{resize:vertical;border:1px solid #e5e7eb;border-radius:8px;padding:.75rem;font-size:.9375rem}.yl-activities-grid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:1rem;display:grid}.yl-activity-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014}.yl-activity-header{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);align-items:center;gap:.75rem;padding:1rem;display:flex}.yl-activity-emoji{font-size:1.5rem}.yl-activity-type{flex:1;font-weight:600}.yl-activity-delete{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;transition:background .2s;display:flex}.yl-activity-delete:hover{background:#ffffff4d}.yl-activity-content{flex-direction:column;gap:1rem;padding:1rem;display:flex}@media (width<=768px){.yl-editor-header{flex-direction:column;align-items:flex-start;gap:1rem}.yl-header-actions{justify-content:flex-end;width:100%}.yl-editor-tabs{padding:.5rem 1rem}.yl-tab{padding:.625rem 1rem;font-size:.8125rem}.yl-editor-content{padding:1rem}.yl-vocab-grid,.yl-activities-grid{grid-template-columns:1fr}.yl-vocab-content,.yl-page-content{flex-direction:column}.yl-image-upload.medium,.yl-image-upload.large{width:100%;height:150px}.yl-lyric-row{flex-wrap:wrap}.yl-lyric-line,.yl-lyric-translation{flex:100%}}.yl-preview{flex-direction:column;min-height:100vh;font-family:Comic Neue,Nunito,Inter,-apple-system,sans-serif;display:flex;overflow-x:hidden}.yl-preview-loading{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;height:100vh;display:flex}.yl-bounce{font-size:5rem;animation:.6s ease-in-out infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.yl-preview-loading p{color:#6b7280;font-size:1.25rem}.yl-preview-error{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;height:100vh;padding:2rem;display:flex}.yl-error-icon{font-size:5rem}.yl-preview-error h2{color:#374151;margin:0;font-size:1.5rem}.yl-preview-error p{color:#6b7280;margin:0}.yl-preview-error button{color:#fff;cursor:pointer;background:#6366f1;border:none;border-radius:25px;margin-top:1rem;padding:.75rem 2rem;font-size:1rem;font-weight:600}.yl-preview-header{z-index:10;background:#fff;border-radius:0 0 24px 24px;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex;position:relative;box-shadow:0 4px 12px #00000014}.yl-close-btn{color:#6b7280;cursor:pointer;background:#f3f4f6;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.25rem;transition:all .2s;display:flex}.yl-close-btn:hover{color:#374151;background:#e5e7eb}.yl-lesson-info{text-align:center;flex:1}.yl-level-badge{color:#fff;text-transform:uppercase;letter-spacing:.5px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;padding:.25rem .75rem;font-size:.75rem;font-weight:600;display:inline-block}.yl-lesson-info h1{color:#1f2937;margin:.5rem 0 .25rem;font-size:1.25rem}.yl-unit-label{color:#6b7280;font-size:.875rem}.yl-header-mascot{font-size:2.5rem;animation:2s ease-in-out infinite wave}@keyframes wave{0%,to{transform:rotate(0)}25%{transform:rotate(20deg)}75%{transform:rotate(-10deg)}}.yl-preview-nav{-webkit-overflow-scrolling:touch;justify-content:center;gap:.5rem;padding:1rem;display:flex;overflow-x:auto}.yl-nav-pill{color:#4b5563;cursor:pointer;white-space:nowrap;background:#fff;border:2px solid #e5e7eb;border-radius:25px;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.9375rem;font-weight:600;transition:all .2s;display:flex}.yl-nav-pill:hover{border-color:#d1d5db;transform:translateY(-2px)}.yl-nav-pill.active{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:#0000;box-shadow:0 4px 12px #6366f14d}.yl-preview-content{flex:1;width:100%;max-width:800px;margin:0 auto;padding:1rem 1.5rem 2rem}.yl-section-header{text-align:center;margin-bottom:1.5rem}.yl-section-header h2{color:#1f2937;margin:0 0 .5rem;font-size:1.5rem}.yl-section-header p{color:#6b7280;margin:0}.yl-welcome-section{flex-direction:column;gap:2rem;display:flex}.yl-mascot-greeting{align-items:flex-start;gap:1rem;display:flex}.yl-mascot-large{flex-shrink:0;font-size:5rem;animation:1s ease-in-out infinite bounce}.yl-speech-bubble{background:#fff;border-radius:0 20px 20px;padding:1.5rem;position:relative;box-shadow:0 4px 16px #00000014}.yl-greeting-text{color:#1f2937;margin:0;font-size:1.25rem;line-height:1.5}.yl-greeting-jp{color:#6b7280;margin:.5rem 0 0;font-size:1rem}.yl-lesson-overview h2{text-align:center;color:#374151;margin:0 0 1rem;font-size:1.25rem}.yl-overview-cards{grid-template-columns:repeat(2,1fr);gap:1rem;display:grid}.yl-overview-card{cursor:pointer;background:#fff;border-radius:16px;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem 1rem;transition:all .2s;display:flex;box-shadow:0 2px 8px #0000000f}.yl-overview-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0000001a}.yl-card-icon{font-size:2.5rem}.yl-card-label{color:#4b5563;text-align:center;font-size:.9375rem;font-weight:600}.yl-vocabulary-section{padding-bottom:2rem}.yl-vocab-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;display:grid}.yl-preview-vocab-card{perspective:1000px;cursor:pointer}.yl-card-inner{width:100%;height:180px;transform-style:preserve-3d;transition:transform .6s;position:relative}.yl-preview-vocab-card.flipped .yl-card-inner{transform:rotateY(180deg)}.yl-card-front,.yl-card-back{backface-visibility:hidden;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:1rem;display:flex;position:absolute}.yl-card-front{background:#fff;box-shadow:0 4px 12px #00000014}.yl-card-back{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);transform:rotateY(180deg)}.yl-vocab-image{object-fit:cover;border-radius:12px;width:80px;height:80px;margin-bottom:.5rem}.yl-vocab-placeholder{background:#f3f4f6;border-radius:12px;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:.5rem;font-size:2rem;display:flex}.yl-vocab-word{color:#1f2937;text-align:center;margin:0;font-size:1rem;font-weight:700}.yl-audio-btn{cursor:pointer;background:#eef2ff;border:none;border-radius:50%;width:32px;height:32px;font-size:1rem;position:absolute;top:8px;right:8px}.yl-vocab-translation{text-align:center;font-size:1.5rem;font-weight:700}.yl-flip-hint{opacity:.8;font-size:.75rem;position:absolute;bottom:12px}.yl-song-section{padding-bottom:2rem}.yl-preview-song{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px #00000014}.yl-song-header{color:#fff;background:linear-gradient(135deg,#ec4899,#f472b6);align-items:center;gap:1rem;padding:1.5rem;display:flex}.yl-song-icon{font-size:2.5rem}.yl-song-header h2{flex:1;margin:0;font-size:1.25rem}.yl-play-btn{cursor:pointer;background:#fff;border:none;border-radius:50%;width:48px;height:48px;font-size:1.5rem;transition:transform .2s}.yl-play-btn:hover{transform:scale(1.1)}.yl-play-btn.playing{animation:1s ease-in-out infinite pulse}.yl-lyrics-container{max-height:300px;padding:1.5rem;overflow-y:auto}.yl-lyric-line{border-radius:8px;margin-bottom:.5rem;padding:.75rem 1rem;transition:all .2s}.yl-lyric-line.active{background:#fdf4ff}.yl-lyric-text{color:#1f2937;font-size:1.125rem;display:block}.yl-lyric-translation{color:#9ca3af;margin-top:.25rem;font-size:.875rem;display:block}.yl-story-section{padding-bottom:2rem}.yl-preview-story{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px #00000014}.yl-story-header{color:#fff;background:linear-gradient(135deg,#10b981,#34d399);align-items:center;gap:1rem;padding:1.5rem;display:flex}.yl-story-icon{font-size:2.5rem}.yl-story-header h2{margin:0;font-size:1.25rem}.yl-story-book{padding:1.5rem}.yl-story-page{min-height:300px}.yl-story-illustration{object-fit:contain;border-radius:12px;width:100%;max-height:250px;margin-bottom:1rem}.yl-story-text-container{background:#f9fafb;border-radius:12px;padding:1rem}.yl-story-text{color:#1f2937;margin:0;font-size:1.125rem;line-height:1.8}.yl-story-translation{color:#6b7280;margin:.75rem 0 0;font-size:.9375rem;line-height:1.6}.yl-story-navigation{border-top:1px solid #e5e7eb;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1rem;display:flex}.yl-nav-btn{color:#4b5563;cursor:pointer;background:#f3f4f6;border:none;border-radius:25px;padding:.75rem 1.5rem;font-size:.9375rem;font-weight:600;transition:all .2s}.yl-nav-btn:hover:not(:disabled){background:#e5e7eb}.yl-nav-btn:disabled{opacity:.4;cursor:not-allowed}.yl-page-indicator{color:#6b7280;font-weight:600}.yl-activities-section{padding-bottom:2rem}.yl-activities-list{flex-direction:column;gap:1rem;display:flex}.yl-preview-activity{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 12px #00000014}.yl-activity-header{background:linear-gradient(135deg,#f59e0b,#fbbf24);align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.yl-activity-icon{font-size:2rem}.yl-activity-info h3{color:#fff;margin:0;font-size:1rem;font-weight:700}.yl-activity-type{color:#ffffffd9;text-transform:capitalize;font-size:.75rem}.yl-activity-instruction{background:#fffbeb;border-bottom:1px solid #fef3c7;padding:1rem 1.25rem}.yl-activity-instruction p{color:#92400e;margin:0;font-size:.9375rem}.yl-instruction-jp{color:#b45309!important;margin-top:.5rem!important}.yl-activity-placeholder{color:#9ca3af;flex-direction:column;justify-content:center;align-items:center;padding:3rem;display:flex}.yl-activity-placeholder span{margin-bottom:.5rem;font-size:3rem}.yl-activity-placeholder p{margin:0;font-size:.875rem}.yl-preview-footer{justify-content:center;padding:1rem;display:flex}.yl-progress-dots{gap:.5rem;display:flex}.yl-dot{background:#00000026;border-radius:50%;width:10px;height:10px;transition:all .2s}.yl-dot.active{background:#6366f1;border-radius:5px;width:24px}@media (width<=640px){.yl-preview-header{padding:.75rem 1rem}.yl-lesson-info h1{font-size:1rem}.yl-header-mascot{font-size:2rem}.yl-preview-nav{justify-content:flex-start;padding:.75rem}.yl-nav-pill{padding:.625rem 1rem;font-size:.875rem}.yl-preview-content{padding:1rem}.yl-mascot-greeting{text-align:center;flex-direction:column;align-items:center}.yl-mascot-large{font-size:4rem}.yl-speech-bubble{border-radius:20px}.yl-overview-cards{grid-template-columns:1fr}.yl-vocab-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.yl-card-inner{height:150px}.yl-vocab-image,.yl-vocab-placeholder{width:60px;height:60px}.yl-vocab-word{font-size:.875rem}}