:root {
            --primary: #007B8A; --secondary: #00A896; --accent: #F5A623;
            --background: #F0F4F8; --surface: #FFFFFF; --text: #1A202C; --text-muted: #718096;
            --solar-color: #F5A623; --wind-color: #4A90E2; --nuclear-color: #27AE60;
            --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem;
            --radius-md: 8px; --radius-lg: 12px;
        }
        body { background-color: var(--background); color: var(--text); font-family: 'Inter', sans-serif; }
        .font-display { font-family: 'Exo 2', sans-serif; }
        .calculator-layout { max-width: 1200px; margin: 2rem auto; padding: var(--space-xl); }
        .panel { background-color: var(--surface); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
        .panel-title { font-family: 'Exo 2', sans-serif; font-size: 1.5rem; color: var(--primary); margin-bottom: 1.5rem; border-bottom: 2px solid var(--secondary); padding-bottom: 0.5rem; }

        .control-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
        @media (min-width: 768px) { .control-grid { grid-template-columns: 2fr 1fr; } }
        .control-group { margin-bottom: 1rem; }
        .control-label { font-weight: 700; color: var(--text); display: block; margin-bottom: 0.75rem; }
        .population-display { font-size: 2.5rem; font-weight: 800; color: var(--primary); font-family: 'Exo 2'; }
        input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; height: 10px; background: #E2E8F0; border-radius: 5px; outline: none; }
        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--secondary); cursor: pointer; border: 4px solid var(--surface); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
        
        .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
        .result-card { background: #F9FAFB; border-radius: var(--radius-md); padding: var(--space-lg); border-top: 4px solid; transition: all 0.2s; }
        .result-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
        .card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
        .card-icon { font-size: 2rem; }
        .card-title { font-size: 1.25rem; font-weight: 700; }
        .land-area { font-size: 2rem; font-weight: 800; }
        .land-comparison { font-size: 0.9rem; color: var(--text-muted); }
        
        .visualizer { margin-top: 2rem; padding: 2rem; background: #F9FAFB; border-radius: var(--radius-lg); }
        .viz-svg { width: 100%; height: auto; }
        .viz-bar { transition: all 0.5s ease-out; }
        .viz-label { font-size: 12px; font-weight: 600; fill: var(--text-muted); }
        .viz-not-to-scale { font-size: 9px; fill: white; font-weight: bold; }
        
        .share-modal-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
        @media (min-width: 768px) { .share-modal-layout { grid-template-columns: 2fr 1fr; } }
        .share-preview-container { background: var(--background); padding: 1rem; border-radius: var(--radius-md); }
        .share-preview-image { width: 100%; height: auto; border-radius: var(--radius-md); }
        .share-actions { display: flex; flex-direction: column; gap: 1rem; }
        .share-action-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 0.75rem; border-radius: var(--radius-md); font-weight: 600; transition: all 0.2s; border: none; cursor: pointer; }
        .share-action-btn.primary { background-color: var(--secondary); color: white; }
        .share-action-btn.primary:hover { background-color: var(--primary); }
        .share-action-btn.secondary { background-color: #E2E8F0; color: var(--text); }
        .share-action-btn.secondary:hover { background-color: #CBD5E0; }