.calculator-container{max-width:1000px;margin:0 auto;padding:40px;font-family:'Inter','Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;background-color:#f8f9fa;min-height:100vh;box-sizing:border-box;color:#343a40}@media (max-width:768px){.calculator-container{padding:25px}}@media (max-width:480px){.calculator-container{padding:15px}}.patio-header{text-align:center;margin-bottom:50px;padding-bottom:20px;border-bottom:1px solid #e9ecef}.patio-header .h1-class{font-size:3.2rem;font-weight:800;color:#212529;margin:0 0 15px 0;display:flex;align-items:center;justify-content:center;gap:15px;letter-spacing:-.03em}@media (max-width:768px){.patio-header .h1-class{font-size:2.5rem;gap:10px}}@media (max-width:480px){.patio-header .h1-class{font-size:2rem;flex-direction:column;gap:10px}}.patio-header p{color:#6c757d;margin:0;font-size:1.2rem;line-height:1.7;max-width:600px;margin-left:auto;margin-right:auto}@media (max-width:480px){.patio-header p{font-size:1.1rem;padding:0 5px}}.main-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:40px}@media (max-width:1024px){.main-grid{grid-template-columns:1fr}}@media (max-width:768px){.main-grid{gap:30px;margin-bottom:30px}}.card{background:#fff;border-radius:18px;box-shadow:0 10px 30px rgb(0 0 0 / .05);overflow:hidden;border:1px solid #e0e0e0}.card-header{padding:25px 30px 20px 30px;border-bottom:1px solid #f0f0f0;background-color:#fcfcfc}@media (max-width:768px){.card-header{padding:20px 25px 15px 25px}}@media (max-width:480px){.card-header{padding:18px 20px 12px 20px}}.card-title{font-size:1.4rem;font-weight:700;color:#343a40;margin:0;display:flex;align-items:center;gap:10px}@media (max-width:480px){.card-title{font-size:1.25rem;gap:8px}}.card-content{padding:30px}@media (max-width:768px){.card-content{padding:25px}}@media (max-width:480px){.card-content{padding:20px}}.input-section{display:flex;flex-direction:column;gap:30px}@media (max-width:768px){.input-section{gap:25px}}.unit-tabs{display:grid;grid-template-columns:repeat(5,1fr);background:#e9ecef;border-radius:12px;padding:8px;gap:8px}@media (max-width:480px){.unit-tabs{grid-template-columns:repeat(5,1fr);gap:5px;padding:5px}}.unit-tab{padding:12px 16px;border:none;background:#fff0;border-radius:10px;cursor:pointer;font-size:.95rem;font-weight:600;color:#6c757d;transition:all 0.3s ease;white-space:nowrap;text-align:center}@media (max-width:480px){.unit-tab{padding:10px 8px;font-size:.85rem;border-radius:8px}}.unit-tab.active{background:#007bff;color:#fff;box-shadow:0 4px 12px rgb(0 123 255 / .2)}.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}@media (max-width:480px){.input-grid{gap:20px}}.input-group{display:flex;flex-direction:column;gap:12px}.input-label{font-size:1rem;font-weight:600;color:#495057}@media (max-width:480px){.input-label{font-size:.9rem}}.input-field{padding:15px 20px;border:1px solid #ced4da;border-radius:10px;font-size:1.1rem;transition:border-color 0.3s,box-shadow 0.3s;width:100%;box-sizing:border-box;color:#343a40}@media (max-width:480px){.input-field{padding:12px 15px;font-size:1rem}}.input-field:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 4px rgb(0 123 255 / .25)}.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-bottom:35px}@media (max-width:480px){.results-grid{gap:20px;margin-bottom:25px}}.result-box{text-align:center;padding:30px;border-radius:15px;border:1px solid}@media (max-width:480px){.result-box{padding:25px 20px}}.result-box.area{background:#e6f7ff;border-color:#a8d8ff}.result-box.slabs{background:#e6ffe6;border-color:#a8ffa8}.result-value{font-size:2.8rem;font-weight:800;margin:0 0 8px 0;word-break:break-all;line-height:1.2}@media (max-width:480px){.result-value{font-size:2.2rem}}.result-value.area{color:#007bff}.result-value.slabs{color:#28a745}.result-label{font-size:1rem;margin:0;font-weight:600;color:#495057}@media (max-width:480px){.result-label{font-size:.9rem}}.separator{height:1px;background:#e9ecef;margin:25px 0}.details-list{display:flex;flex-direction:column;gap:12px;font-size:.95rem;color:#6c757d}@media (max-width:480px){.details-list{font-size:.9rem;gap:10px}}.detail-row{display:flex;justify-content:space-between;word-break:break-word;padding-bottom:5px;border-bottom:1px dotted #e9ecef}.detail-row:last-child{border-bottom:none;padding-bottom:0}.visualization-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;flex-wrap:wrap;gap:15px}@media (max-width:480px){.visualization-header{flex-direction:column;align-items:flex-start;gap:20px}}.legend{display:flex;gap:20px;font-size:.9rem;flex-wrap:wrap;font-weight:500;color:#495057}@media (max-width:480px){.legend{gap:15px;font-size:.85rem}}.legend-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #ced4da;border-radius:8px;background:#fff;box-shadow:0 2px 5px rgb(0 0 0 / .05)}@media (max-width:480px){.legend-item{padding:6px 10px;gap:6px}}.legend-color{width:16px;height:16px;border-radius:4px;border:1px solid;flex-shrink:0}@media (max-width:480px){.legend-color{width:14px;height:14px}}.legend-color.full{background:#d4edda;border-color:#28a745}.legend-color.cut{background:#fff3cd;border-color:#ffc107}.grid-container{border:2px solid #ced4da;border-radius:15px;padding:25px;background:#fcfcfc;overflow:hidden;box-shadow:inset 0 1px 3px rgb(0 0 0 / .05)}@media (max-width:480px){.grid-container{padding:20px}}.patio-grid{display:grid;gap:2px;max-width:100%;margin:0 auto}.grid-cell{aspect-ratio:1;border:1px solid;min-height:16px}@media (max-width:480px){.grid-cell{min-height:12px}}.grid-cell.full{background:#d4edda;border-color:#28a745}.grid-cell.cut{background:#fff3cd;border-color:#ffc107}.grid-note{font-size:.85rem;color:#6c757d;text-align:center;margin-top:15px}@media (max-width:480px){.grid-note{font-size:.8rem}}.explanation-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}@media (max-width:768px){.explanation-grid{grid-template-columns:1fr;gap:30px}}.explanation-section h4{font-weight:700;color:#343a40;margin:0 0 20px 0;font-size:1.25rem}@media (max-width:480px){.explanation-section h4{font-size:1.1rem;margin:0 0 15px 0}}.explanation-list{list-style:decimal;padding-left:25px;margin:0;color:#6c757d;font-size:.95rem;line-height:1.7}@media (max-width:480px){.explanation-list{font-size:.9rem;padding-left:20px}}.explanation-list li{margin-bottom:8px}.example-text{font-size:.95rem;color:#6c757d;line-height:1.7}@media (max-width:480px){.example-text{font-size:.9rem}}*{box-sizing:border-box}.detail-row span:last-child{text-align:right;word-break:break-word}