:root{--color-primary:#3498db;--color-primary-hover:#2980b9;--color-secondary:#95a5a6;--color-secondary-hover:#7f8c8d;--color-success:#27ae60;--color-success-hover:#219a52;--color-warning:#f39c12;--color-warning-hover:#d68910;--color-error:#e74c3c;--color-error-hover:#c0392b;--color-text:#2c3e50;--color-text-secondary:#666;--color-text-muted:#999;--color-text-inverse:#fff;--color-bg:#fff;--color-bg-secondary:#f8f9fa;--color-bg-hover:#ecf0f1;--color-border:#ddd;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px #0000001a;--shadow-lg:0 10px 15px #0000001a;--font-size-xs:12px;--font-size-sm:14px;--font-size-md:16px;--font-size-lg:18px;--font-size-xl:24px;--font-size-2xl:32px;--focus-ring:0 0 0 3px #3498db66;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.5}[data-theme=senior]{--color-primary:#06c;--color-text:#000;--color-bg:#fff;--color-border:#333;--font-size-md:20px;--font-size-lg:24px;--space-md:20px;--space-lg:32px;--senior-touch-target:48px}[data-high-contrast]{--color-text:#000;--color-bg:#fff;--color-border:#000;--color-primary:#00c;--color-error:#c00;--color-success:#060}*,:before,:after{box-sizing:border-box}body{color:var(--color-text);background-color:var(--color-bg);font-size:var(--font-size-md);min-height:100vh;margin:0}:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:var(--focus-ring);outline:none}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.skip-link{background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-sm)var(--space-md);z-index:100;transition:top .2s;position:absolute;top:-40px;left:0}.visually-hidden{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}button{font-family:inherit;font-size:inherit;cursor:pointer}input,select,textarea{font-family:inherit;font-size:inherit}.lesson-interface{gap:20px;height:calc(100vh - 200px);display:flex}.panel{flex-direction:column;flex:1;gap:10px;min-width:0;display:flex}.tabs{border-bottom:2px solid #ecf0f1;display:flex}.tab-button{cursor:pointer;color:#7f8c8d;background:0 0;border:none;border-bottom:3px solid #0000;padding:10px 20px;font-size:16px;font-weight:700}.tab-button:hover{color:#2c3e50}.tab-button.active{color:#2c3e50;border-bottom-color:#3498db}.tab-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.tab-content>*{height:100%}.actions{justify-content:flex-end;display:flex}.submit-button{color:#fff;cursor:pointer;background-color:#2ecc71;border:none;border-radius:4px;padding:10px 20px;font-size:16px;transition:background-color .2s}.submit-button:hover{background-color:#27ae60}.submit-button:disabled{cursor:not-allowed;background-color:#95a5a6}.hint-button{color:#fff;cursor:pointer;border:none;border-radius:4px;padding:10px 20px;font-size:16px;transition:background-color .2s}.hint-button:hover{background-color:#e67e22!important}.hint-button:disabled{cursor:not-allowed;background-color:#95a5a6!important}@media (width<=768px){.lesson-interface{flex-direction:column;height:auto}}.app-container{color:#333;background-color:#f4f4f9;flex-direction:column;min-height:100vh;font-family:Inter,sans-serif;display:flex}.skip-link{color:#fff;z-index:100;background:#000;padding:8px;transition:top .2s;position:absolute;top:-40px;left:0}.skip-link:focus{top:0}.app-header{color:#ecf0f1;background-color:#2c3e50;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex}.app-header h1{margin:0;font-size:1.5rem}.app-main{box-sizing:border-box;flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem}.app-footer{color:#bdc3c7;text-align:center;background-color:#2c3e50;padding:1rem;font-size:.9rem}.code-editor-container{color:#d4d4d4;background-color:#1e1e1e;border:1px solid #ccc;border-radius:4px;height:400px;font-family:Fira Code,monospace;display:flex;overflow:hidden}.line-numbers{color:#858585;text-align:right;-webkit-user-select:none;user-select:none;background-color:#252526;flex-direction:column;min-width:2rem;padding:10px 5px;font-size:14px;line-height:1.5;display:flex}.code-input{color:inherit;resize:none;white-space:pre;background-color:#0000;border:none;outline:none;flex:1;padding:10px;font-family:inherit;font-size:14px;line-height:1.5}.code-input:focus{outline-offset:-2px;outline:2px solid #007acc}.lesson-manager{max-width:800px;margin:0 auto;padding:20px}.manager-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.create-button{color:#fff;cursor:pointer;background-color:#3498db;border:none;border-radius:4px;padding:10px 20px}.lessons-list{gap:15px;display:grid}.lesson-card{background-color:#fff;border-radius:8px;justify-content:space-between;align-items:center;padding:15px;display:flex;box-shadow:0 2px 4px #0000001a}.lesson-card.active{border:2px solid #2ecc71}.lesson-info{align-items:center;gap:15px;display:flex}.lesson-number{color:#7f8c8d;background-color:#ecf0f1;border-radius:4px;padding:5px 10px;font-weight:700}.play-button{color:#fff;cursor:pointer;background-color:#2ecc71;border:none;border-radius:4px;padding:8px 16px}.edit-button{color:#fff;cursor:pointer;background-color:#3498db;border:none;border-radius:4px;padding:8px 16px}.play-button:hover{background-color:#27ae60}.edit-button:hover{background-color:#2980b9}.delete-button{color:#fff;cursor:pointer;background-color:#e74c3c;border:none;border-radius:4px;margin-left:10px;padding:8px 16px}.delete-button:hover{background-color:#c0392b}.lesson-builder{flex-direction:column;height:calc(100vh - 100px);padding:20px;display:flex}.builder-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.back-button{cursor:pointer;background:0 0;border:1px solid #ccc;border-radius:4px;padding:5px 10px}.builder-content{flex:1;gap:20px;min-height:0;display:flex}.builder-chat,.builder-preview{background-color:#fff;border:1px solid #ddd;border-radius:8px;flex-direction:column;flex:1;padding:15px;display:flex}.chat-messages{flex-direction:column;flex:1;gap:10px;margin-bottom:15px;display:flex;overflow-y:auto}.message{border-radius:4px;padding:10px}.message.user{background-color:#e3f2fd;align-self:flex-end}.message.assistant{background-color:#f5f5f5;align-self:flex-start}.draft-button{color:#fff;cursor:pointer;background-color:#3498db;border:none;border-radius:4px;margin-top:5px;padding:5px 10px;font-size:12px}.chat-input-area{gap:10px;display:flex}.chat-input-area input{border:1px solid #ccc;border-radius:4px;flex:1;padding:8px}.form-group{margin-bottom:15px}.form-group label{margin-bottom:5px;font-weight:700;display:block}.form-group input{border:1px solid #ccc;border-radius:4px;width:100%;padding:8px}.form-group textarea{resize:vertical;border:1px solid #ddd;border-radius:4px;width:100%;padding:8px;font-family:inherit}.code-input{background-color:#f4f4f4;font-family:Courier New,Courier,monospace}.save-button{color:#fff;cursor:pointer;background-color:#2ecc71;border:none;border-radius:4px;width:100%;margin-top:20px;padding:10px 20px}.placeholder{color:#999;text-align:center;margin-top:50px}.default-prompt-details{color:#666;margin-bottom:8px;font-size:.9em}.default-prompt-details summary{cursor:pointer;margin-bottom:4px}.read-only-textarea{color:#555;background-color:#f9f9f9;border-color:#eee}.label-row{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.text-button{color:#3498db;cursor:pointer;background:0 0;border:none;padding:0;font-size:.85em;text-decoration:underline}.code-input.locked{color:#666;cursor:not-allowed;background-color:#eee}.lesson-view{background-color:#fff;border-radius:8px;height:100%;padding:20px;overflow-y:auto;box-shadow:0 2px 4px #0000001a}.lesson-title{color:#2c3e50;border-bottom:2px solid #ecf0f1;margin-top:0;padding-bottom:10px}.lesson-content{color:#34495e;line-height:1.6}.lesson-objectives{background-color:#f9f9f9;border-left:4px solid #27ae60;border-radius:4px;margin-top:20px;padding:15px}.lesson-objectives h3{color:#27ae60;margin-top:0}.lesson-objectives ul{padding-left:20px}.lesson-objectives li{margin-bottom:5px}
