*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}.container{max-width:800px;margin:0 auto}header{text-align:center;color:white;margin-bottom:40px}header h1{font-size:2.5rem;margin-bottom:10px}.subtitle{font-size:1.1rem;opacity:.9}.dev-mode-banner{display:flex;align-items:flex-start;gap:15px;padding:15px 20px;background:linear-gradient(135deg,#fff3cd,#ffe69c);border:2px solid #ffc107;border-radius:8px;margin-bottom:30px;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dev-mode-icon{font-size:1.5rem;flex-shrink:0}.dev-mode-content{display:flex;flex-direction:column;gap:5px}.dev-mode-content strong{color:#856404;font-size:1rem}.dev-mode-content span{color:#856404;font-size:.9rem;opacity:.9}.card{background:white;border-radius:12px;padding:30px;margin-bottom:30px;box-shadow:0 10px 30px rgba(0,0,0,.2)}.card h2{color:#333;font-size:1.5rem}.card h2,.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#555;font-weight:500}.form-group input,.form-group textarea{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .3s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea}.form-group input:disabled,.form-group textarea:disabled{background-color:#f5f5f5;cursor:not-allowed}button{background:linear-gradient(135deg,#667eea,#764ba2);color:white;border:none;padding:12px 30px;border-radius:8px;font-size:1rem;cursor:pointer;transition:transform .2s,box-shadow .2s}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px rgba(102,126,234,.4)}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.6;cursor:not-allowed}.message-list{max-height:500px;overflow-y:auto}.message-item{padding:15px;border-bottom:1px solid #f0f0f0;transition:background-color .2s}.message-item:hover{background-color:#f9f9f9}.message-item:last-child{border-bottom:none}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.message-username{font-weight:600;color:#667eea}.message-time{font-size:.85rem;color:#999}.message-content{color:#555;line-height:1.6}.loading{text-align:center;color:#999;padding:20px}.error{color:#e74c3c;padding:15px;background-color:#fee;border-radius:8px;margin-bottom:15px}footer{text-align:center;color:white;padding:20px 0;opacity:.8}.deployment-section{margin-top:30px}.deployment-info{background:white;border-radius:12px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,.2)}.deployment-info h2{color:#333;margin-bottom:30px;font-size:1.8rem;text-align:center}.info-section{margin-bottom:30px}.info-section h3{color:#667eea;margin-bottom:15px;font-size:1.3rem;padding-bottom:10px;border-bottom:2px solid #f0f0f0}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:15px;gap:15px}.info-item{display:flex;flex-direction:column;padding:12px;background:#f8f9fa;border-radius:8px;border-left:4px solid #667eea}.info-item .label{font-size:.85rem;color:#666;margin-bottom:5px;font-weight:500}.info-item .value{font-size:1rem;color:#333;font-weight:600}.info-item code{font-family:Courier New,monospace;background:#e8e8e8;padding:2px 6px;border-radius:4px;font-size:.9rem}.steps-list{display:flex;flex-direction:column;gap:15px}.step-item{padding:15px;background:#f8f9fa;border-radius:8px;border-left:4px solid #667eea;transition:transform .2s,box-shadow .2s}.step-item:hover{transform:translateX(5px);box-shadow:0 3px 10px rgba(0,0,0,.1)}.step-title{font-weight:600;color:#333;font-size:1.1rem}.step-command,.step-title{margin-bottom:8px}.step-command code{display:block;background:#2d2d2d;color:#f8f8f2;padding:10px 15px;border-radius:6px;font-family:Courier New,monospace;font-size:.9rem;overflow-x:auto}.step-description{color:#666;font-size:.95rem;line-height:1.5}.api-info{display:flex;flex-direction:column;gap:12px}.api-item{display:flex;align-items:center;padding:12px;background:#f8f9fa;border-radius:8px;border-left:4px solid #764ba2}.api-item .label{font-weight:600;color:#555;margin-right:10px;min-width:100px}.api-item .value{color:#333}.api-item code{font-family:Courier New,monospace;background:#e8e8e8;padding:2px 8px;border-radius:4px;font-size:.9rem}.workflow{flex-direction:column;gap:10px;padding:20px;background:#f8f9fa}.workflow,.workflow-step{display:flex;align-items:center;border-radius:8px}.workflow-step{gap:15px;padding:12px 20px;background:white;box-shadow:0 2px 8px rgba(0,0,0,.1);width:100%;max-width:400px}.step-number{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,#667eea,#764ba2);color:white;border-radius:50%;font-weight:600;font-size:1.1rem;flex-shrink:0}.step-content{color:#333;font-weight:500;font-size:1rem}.workflow-arrow{font-size:1.5rem;color:#667eea;font-weight:700}@media (max-width:600px){header h1{font-size:1.8rem}.card,.deployment-info{padding:20px}.deployment-info h2{font-size:1.5rem}.info-grid{grid-template-columns:1fr}.workflow-step{padding:10px 15px}.step-number{width:35px;height:35px;font-size:1rem}}