:root{--primary: #2563eb;--primary-hover: #1d4ed8;--danger: #dc2626;--danger-hover: #b91c1c;--border: #e5e7eb;--bg-secondary: #f9fafb;--text-primary: #111827;--text-secondary: #6b7280;--success: #16a34a;--error: #dc2626}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--text-primary);line-height:1.6}#app{min-height:100vh}.config-screen{max-width:600px;margin:0 auto;padding:40px 20px}.config-screen h1{font-size:28px;margin-bottom:20px;text-align:center}.config-notice{background:#fef3c7;border:1px solid #fbbf24;border-radius:8px;padding:16px;margin-bottom:30px}.config-notice p{font-size:14px;margin-bottom:8px}.config-notice p:last-child{margin-bottom:0}.config-section{margin-bottom:24px}.config-section h2{font-size:18px;margin-bottom:12px}.config-section label{display:block;margin-bottom:8px;cursor:pointer}.config-section input[type=radio]{margin-right:8px}.field{margin-bottom:16px}.field label{display:block;font-weight:500;margin-bottom:6px}.field input[type=text],.field input[type=password],.field textarea,.field select{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px}.field button{margin-left:8px;padding:6px 12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:4px;cursor:pointer;font-size:12px}.field-note{font-size:14px;color:var(--text-secondary);font-style:italic}.config-actions{display:flex;gap:12px;margin-top:24px}.config-actions button{flex:1;padding:10px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}#test-connection,#save-config{background:var(--primary);color:#fff}#test-connection:hover,#save-config:hover{background:var(--primary-hover)}.danger{background:var(--danger)!important;color:#fff!important}.danger:hover{background:var(--danger-hover)!important}#config-status{margin-top:16px;padding:12px;border-radius:6px;font-size:14px;text-align:center}#config-status.success{background:#d1fae5;color:var(--success)}#config-status.error{background:#fee2e2;color:var(--error)}.main-screen{display:flex;flex-direction:column;height:100vh}header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border);background:#fff}header h1{font-size:20px}header button{padding:8px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:14px}.content{display:flex;flex:1;overflow:hidden}.sidebar{width:280px;border-right:1px solid var(--border);padding:20px;overflow-y:auto;background:var(--bg-secondary)}.sidebar h2{font-size:16px;margin-bottom:12px}#new-project{width:100%;padding:10px;background:var(--primary);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;margin-bottom:16px}#new-project:hover{background:var(--primary-hover)}#project-list{list-style:none}#project-list li{padding:12px;margin-bottom:8px;background:#fff;border:1px solid var(--border);border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}#project-list li:hover{background:#f3f4f6}#project-list li.active{border-color:var(--primary);background:#eff6ff}.delete-project{padding:4px 8px;background:var(--danger);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px}#workspace{flex:1;padding:24px;overflow-y:auto}.welcome{text-align:center;padding:60px 20px}.welcome h2{font-size:24px;margin-bottom:12px}.input-form{max-width:600px;margin:0 auto}.input-form h2{font-size:22px;margin-bottom:20px}.input-form textarea{resize:vertical}#generate{width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:500;cursor:pointer;margin-top:20px}#generate:hover:not(:disabled){background:var(--primary-hover)}#generate:disabled{opacity:.6;cursor:not-allowed}#generate-status{margin-top:12px;font-size:14px;color:var(--text-secondary);text-align:center}.result-view{max-width:900px;margin:0 auto}.result-header{margin-bottom:30px}.result-header h2{font-size:26px;margin-bottom:16px}.result-actions{display:flex;gap:8px;flex-wrap:wrap}.result-actions button{padding:8px 16px;background:var(--primary);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px}.result-actions button:hover{background:var(--primary-hover)}.stages{display:flex;flex-direction:column;gap:24px}.stage{background:#fff;border:1px solid var(--border);border-radius:8px;padding:20px}.stage h3{font-size:20px;color:var(--primary);margin-bottom:12px}.stage>p{margin-bottom:16px;color:var(--text-secondary)}.activities{margin-bottom:16px}.activity{background:var(--bg-secondary);padding:12px;border-radius:6px;margin-bottom:12px}.activity h4{font-size:16px;margin-bottom:6px}.activity p{font-size:14px;color:var(--text-secondary)}.duration{display:inline-block;margin-top:6px;padding:2px 8px;background:#dbeafe;color:var(--primary);border-radius:4px;font-size:12px;font-weight:500}.materials h4{font-size:16px;margin-bottom:12px}.material{background:var(--bg-secondary);padding:12px;border-left:3px solid var(--primary);border-radius:4px;margin-bottom:8px}.material.image{border-left-color:#10b981}.material.video{border-left-color:#f59e0b}.material-image{margin-bottom:8px;border-radius:4px;overflow:hidden;background:#f3f4f6;position:relative;min-height:100px}.material-image img{width:100%;max-width:400px;height:auto;display:block;border-radius:4px;position:relative;z-index:2}.image-placeholder{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#f3f4f6;color:var(--text-secondary);font-size:14px;z-index:1}.material-image.loaded .image-placeholder{display:none}.material-image.error .image-error{display:flex!important;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:3}.material-image.error .image-placeholder{display:none}.image-error{padding:20px;text-align:center;color:var(--text-secondary);font-size:13px;display:none}.image-error small{font-size:11px;color:#9ca3af;display:block;margin-top:4px}.material strong{display:block;font-size:14px;margin-bottom:4px}.material p{font-size:13px;color:var(--text-secondary);margin-bottom:6px}.material a{font-size:13px;color:var(--primary);text-decoration:none}.material a:hover{text-decoration:underline}@media(max-width:768px){.content{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:200px}.result-actions{flex-direction:column}.result-actions button{width:100%}}