*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #2c3e50;--secondary-color: #3498db;--accent-color: #e74c3c;--success-color: #27ae60;--border-color: #bdc3c7;--bg-light: #ecf0f1;--bg-dark: #34495e;--text-dark: #2c3e50;--text-light: #ecf0f1;--transition: all .3s ease}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-light);color:var(--text-dark);line-height:1.6}html,body{height:100%}#app{display:flex;flex-direction:column;min-height:100vh}header{background:linear-gradient(135deg,var(--primary-color),var(--bg-dark));color:var(--text-light);padding:2rem;text-align:center;box-shadow:0 2px 8px #0000001a}header h1{font-size:2.5rem;margin-bottom:.5rem;letter-spacing:1px}header .subtitle{font-size:1rem;opacity:.9;font-style:italic}main{flex:1;padding:2rem;max-width:1600px;margin:0 auto;width:100%}.container{display:grid;grid-template-columns:1fr 2fr;gap:2rem;margin-bottom:3rem}.panel{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 8px #0000001a}.panel h2{margin-bottom:1.5rem;color:var(--primary-color);border-bottom:2px solid var(--secondary-color);padding-bottom:.5rem}.panel h4{margin-top:1.5rem;margin-bottom:.75rem;color:var(--text-dark)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--text-dark)}.form-group input,.form-group select{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:4px;font-size:.95rem;transition:var(--transition)}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--secondary-color);box-shadow:0 0 4px #3498db4d}.city-search-wrapper{position:relative}.city-suggestions{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border-color);border-top:none;border-radius:0 0 4px 4px;max-height:240px;overflow-y:auto;z-index:100;display:none;box-shadow:0 4px 12px #00000026}.city-suggestions.active{display:block}.city-suggestion{padding:.6rem .75rem;cursor:pointer;font-size:.9rem;border-bottom:1px solid #f0f0f0;transition:background .15s}.city-suggestion:hover,.city-suggestion.highlighted{background-color:var(--bg-light)}.city-suggestion .city-name{font-weight:600;color:var(--text-dark)}.city-suggestion .city-detail{font-size:.8rem;color:#888;margin-top:2px}.geo-info{background:#f0f7ff;border:1px solid #c8ddf0;border-radius:4px;padding:.6rem .8rem;margin-bottom:1rem;font-size:.85rem}.geo-detail{display:flex;justify-content:space-between;padding:.15rem 0}.geo-label{color:#5a7da0;font-weight:600}.city-loading{padding:.75rem;text-align:center;color:#888;font-size:.9rem}.btn{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);text-transform:uppercase;letter-spacing:.5px}.btn-primary{background-color:var(--secondary-color);color:#fff;width:100%;margin-top:1rem}.btn-primary:hover{background-color:#2980b9;box-shadow:0 4px 12px #3498db66}.btn-secondary{background-color:var(--accent-color);color:#fff;width:100%;margin-top:1rem}.btn-secondary:hover{background-color:#c0392b;box-shadow:0 4px 12px #e74c3c66}.bodygraph-container{width:100%;background:#fff;border:1px solid var(--border-color);border-radius:8px;padding:1rem;display:flex;justify-content:center;align-items:center;min-height:600px}#bodygraph,#compositeBodygraph{width:100%;max-width:500px;height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.legend{display:flex;gap:2rem;margin-top:1rem;font-size:.9rem;justify-content:center}.legend div{display:flex;align-items:center;gap:.5rem}.legend-red{width:16px;height:16px;background-color:#ff6b6b;border-radius:2px}.legend-black{width:16px;height:16px;background-color:#000;border-radius:2px}.legend-striped{width:16px;height:16px;background:repeating-linear-gradient(45deg,#ff6b6b,#ff6b6b 4px,#000 4px,#000 8px);border-radius:2px}.chart-info{margin-top:2rem;padding:1.5rem;background-color:var(--bg-light);border-radius:8px}.chart-info h3{margin-bottom:1rem;color:var(--primary-color)}.details-box{max-height:none;overflow-y:visible}.detail-row{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--border-color)}.detail-row .label{font-weight:600;color:var(--primary-color)}.detail-row .value{color:var(--text-dark)}.badge{display:inline-block;background-color:var(--secondary-color);color:#fff;padding:.4rem .8rem;border-radius:20px;font-size:.85rem;margin:.25rem}.centers-list,.channels-list,.gates-list,.planets-list{padding:.5rem 0}.channel-item{padding:.5rem 0;font-size:.9rem;border-bottom:1px solid var(--border-color)}.gate-badge{display:inline-block;padding:.4rem .6rem;margin:.2rem;border-radius:4px;font-weight:700;font-size:.85rem}.gate-badge.personality{background-color:#000;color:#fff}.gate-badge.design{background-color:#ff6b6b;color:#fff}.gate-badge.both{background-color:#333;color:#fff;border:2px solid #ff6b6b}.planet-item{padding:.5rem 0;font-size:.9rem;border-bottom:1px solid var(--border-color)}.planet-table{width:100%;border-collapse:collapse;font-size:.85rem;margin-bottom:.5rem}.planet-table th{text-align:left;padding:.5rem .4rem;border-bottom:2px solid var(--primary-color);color:var(--primary-color);font-weight:600}.planet-table td{padding:.4rem;border-bottom:1px solid var(--border-color)}.planet-table tr:hover{background-color:var(--bg-light)}.message{padding:1.5rem;background-color:var(--bg-light);border-left:4px solid var(--secondary-color);border-radius:4px;text-align:center;color:var(--text-dark)}.composite-section{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 8px #0000001a;margin-bottom:2rem}.composite-section h2{margin-bottom:1.5rem;color:var(--primary-color);border-bottom:2px solid var(--secondary-color);padding-bottom:.5rem}.composite-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}.composite-left,.composite-right{padding:1.5rem;background-color:var(--bg-light);border-radius:8px}.composite-left h3,.composite-right h3{margin-bottom:1rem;color:var(--text-dark)}#compositeResults{margin-top:2rem;padding:1.5rem;background-color:var(--bg-light);border-radius:8px}.synergy-details{padding:1rem}.synergy-details h4{margin-bottom:1rem;color:var(--primary-color)}.insight{padding:.5rem 0;font-size:.95rem;color:var(--text-dark)}.insight:before{content:"✓ ";color:var(--success-color);font-weight:700;margin-right:.5rem}footer{background:var(--primary-color);color:var(--text-light);text-align:center;padding:1.5rem;margin-top:auto;font-size:.9rem}@media (max-width: 1400px){.container{grid-template-columns:1fr}.left-panel,.center-panel,.right-panel{grid-column:1}}@media (max-width: 768px){header h1{font-size:1.8rem}main{padding:1rem}.panel{padding:1.5rem}.container,.composite-container{grid-template-columns:1fr;gap:1.5rem}.legend{flex-direction:column;gap:1rem}.bodygraph-container{min-height:400px}.btn{font-size:.9rem;padding:.6rem 1.2rem}}.details-box::-webkit-scrollbar{width:6px}.details-box::-webkit-scrollbar-track{background:var(--bg-light);border-radius:10px}.details-box::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:10px}.details-box::-webkit-scrollbar-thumb:hover{background:var(--secondary-color)}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.panel,.composite-section{animation:slideIn .3s ease-out}.gate-badge:hover{transform:scale(1.1);cursor:pointer}.badge:hover{transform:scale(1.05);cursor:pointer}.astro-extras{margin:.5rem 0}.astro-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem}.astro-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid var(--border-color);border-radius:8px;padding:.75rem;text-align:center;transition:var(--transition)}.astro-card:hover{box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}.astro-card-label{font-size:.75rem;font-weight:600;color:var(--primary-color);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem}.astro-card-value{font-size:1.1rem;font-weight:700;color:var(--text-dark);margin-bottom:.15rem}.astro-card-detail{font-size:.8rem;color:#666}.astro-loading{text-align:center;padding:.5rem;color:#888;font-size:.85rem;font-style:italic}.retro-mark{color:var(--accent-color);font-weight:700;font-size:.9em}.retro-summary{padding:.5rem .75rem;background:#fff3f3;border:1px solid #fdd;border-radius:4px;font-size:.85rem;color:var(--accent-color);text-align:center}.zodiac-col{white-space:nowrap;font-size:.85rem}@media (max-width: 768px){.astro-grid{grid-template-columns:1fr}}