body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column; /* Egymás alá rakja: Nav, Grid, Footer */
}

 .grid-container {
     display: grid;
     grid-template-columns: 320px 1fr 350px;
     gap: 20px;
     max-width: 1400px;
     margin: 0 auto;
 }

 .panel {
     background: white;
     border-radius: 10px;
     padding: 20px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     display: flex;
     flex-direction: column;
 }

 h2 {
     margin-top: 0;
     font-size: 1.2em;
     border-bottom: 2px solid #3498db;
     padding-bottom: 10px;
     margin-bottom: 15px;
 }

 h3 {
     font-size: 1em;
     color: #7f8c8d;
     margin-bottom: 10px;
     margin-top: 20px;
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 #mini-3d-container {
     width: 100%;
     height: 200px;
     background: #a0d8ef;
     border-radius: 8px;
     overflow: hidden;
     margin-top: 10px;
     box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
 }

 .form-group {
     margin-bottom: 10px;
 }

 label {
     display: block;
     font-size: 0.85em;
     margin-bottom: 3px;
     font-weight: 600;
     color: #555;
 }

 select,
 input {
     width: 100%;
     padding: 8px;
     border: 1px solid #bdc3c7;
     border-radius: 4px;
     box-sizing: border-box;
     font-size: 14px;
     transition: 0.2s;
 }

 select:focus,
 input:focus {
     border-color: #3498db;
     outline: none;
     box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
 }

 .row {
     display: flex;
     gap: 10px;
 }

 .col {
     flex: 1;
 }

 .cost-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 8px;
     font-size: 0.9em;
     border-bottom: 1px solid #f0f0f0;
     padding-bottom: 5px;
 }

 .cost-row label {
     margin: 0;
     font-weight: normal;
 }

 .cost-row input {
     width: 90px;
     text-align: right;
     padding: 4px;
 }

 .cost-row span {
     color: #999;
     font-size: 0.8em;
     margin-left: 5px;
     width: 30px;
 }

 .total-price-box {
     background: #2c3e50;
     color: white;
     padding: 10px;
     border-radius: 5px;
     text-align: center;
     margin-top: 10px;
 }

 .total-price-val {
     font-size: 1.4em;
     font-weight: bold;
     color: #f1c40f;
 }

 .result-card {
     background: #f8f9fa;
     border-left: 5px solid #3498db;
     padding: 15px;
     margin-bottom: 10px;
     border-radius: 4px;
 }

 .result-card.success {
     border-color: #27ae60;
     background: #eafaf1;
 }

 .result-card.warning {
     border-color: #f39c12;
     background: #fef9e7;
 }

 .big-number {
     font-size: 1.8em;
     font-weight: bold;
     display: block;
     margin-top: 5px;
 }

 .unit {
     font-size: 0.5em;
     color: #7f8c8d;
     font-weight: normal;
 }

 .btn {
     width: 100%;
     padding: 12px;
     border: none;
     border-radius: 5px;
     font-weight: bold;
     cursor: pointer;
     transition: 0.2s;
     margin-bottom: 10px;
     margin-top: auto;
 }

 .btn-upload {
     background: #f39c12;
     color: white;
 }

 .btn-calc {
     background: #27ae60;
     color: white;
     font-size: 1.1em;
 }

 .btn-pdf {
     background: #e74c3c;
     color: white;
     font-size: 1em;
     margin-top: 15px;
 }

 .btn:hover {
     opacity: 0.9;
     transform: translateY(-1px);
 }

 #file-input {
     display: none;
 }

 #pdf-content {
     display: none;
     padding: 20px;
     background: white;
     font-family: Arial, sans-serif;
     color: #333;
 }

 .pdf-header {
     text-align: center;
     border-bottom: 2px solid #3498db;
     padding-bottom: 10px;
     margin-bottom: 20px;
 }

 .pdf-table {
     width: 100%;
     border-collapse: collapse;
     margin-bottom: 20px;
     font-size: 0.9em;
 }

 .pdf-table th,
 .pdf-table td {
     border: 1px solid #ddd;
     padding: 8px;
     text-align: left;
 }

 .pdf-table th {
     background-color: #f2f2f2;
     font-weight: bold;
 }

 footer {
     background-color: #333;
     color: white;
     text-align: center;
     padding: 5px;
     /* Kicsit kisebb, hogy ne foglaljon sok helyet */
     font-size: 0.8em;
     z-index: 100;
 }