body { font-family: 'Segoe UI', sans-serif; background: #f4f7f6; margin: 0; padding: 20px; }
.container { max-width: 900px; margin: 0 auto; background: white; padding: 30px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
h1, h2 { text-align: center; }
textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #ccc; box-sizing: border-box; }
.buttons { display: flex; gap: 10px; margin: 10px 0; }
button { background: #2c3e50; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.demo-btn { background: #3498db; }
.metric-cards { display: flex; flex-wrap: wrap; gap: 15px; margin: 15px 0; }
.card { background: #ecf0f1; padding: 15px; border-radius: 12px; flex: 1; min-width: 100px; text-align: center; }
.class-card { background: #e8f8f5; border: 2px solid #1abc9c; }
.typology-section { margin: 15px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; }
.save-section { margin: 15px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; }
.save-section input { padding: 8px; border-radius: 6px; border: 1px solid #ccc; width: 60%; }
.save-section textarea { margin-top: 10px; }
.footer-nav { text-align: center; margin-top: 20px; }
.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: white; padding: 30px; border-radius: 16px; max-width: 600px; max-height: 80vh; overflow-y: auto; }
#recommendationBlock { transition: all 0.3s ease; }