:root{--primary-color: #004367;--primary-color-light: #e6eef2;--red: #d9534f;--background-color: #f8f9fa;--card-background-color: #ffffff;--text-color: #333;--text-light: #ffffff;--text-color-light: #666;--border-color: #dee2e6;--border-radius: 8px;--box-shadow: 0 4px 12px rgba(0, 0, 0, .05)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Poppins,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.6;padding:1rem}.app-container{max-width:1200px;margin:0 auto;background-color:var(--card-background-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);padding:2rem;display:grid;grid-template-columns:1fr;gap:2rem}.header-top{display:flex;justify-content:space-between;align-items:center;width:100%}.brand-name{font-size:1.2rem;font-weight:500;color:var(--text-color-light)}.language-switcher{display:flex;gap:.5rem;flex-wrap:wrap}.language-switcher button{background:none;border:1px solid var(--border-color);color:var(--text-color-light);padding:.25rem .75rem;border-radius:var(--border-radius);cursor:pointer;font-family:Poppins,sans-serif;font-weight:500;transition:all .2s ease}.language-switcher button:hover{background-color:var(--primary-color-light);border-color:var(--primary-color)}.language-switcher button.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}header h1{font-size:2rem;font-weight:700;color:var(--primary-color);line-height:1.2;margin-top:1rem;margin-bottom:1rem}.main-content{display:grid;grid-template-columns:1fr;gap:2rem}.input-section,.output-section{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column}.form-group label{font-weight:500;margin-bottom:.5rem;color:var(--text-color)}.form-group select,.form-group input{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-family:Poppins,sans-serif;font-size:1rem;background-color:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px}.form-group input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.output-section h2{font-size:1.5rem;font-weight:600;color:var(--text-color);border-bottom:2px solid var(--primary-color-light);padding-bottom:.5rem}.results-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.result-box{background-color:var(--primary-color-light);padding:1rem;border-radius:var(--border-radius);text-align:center;display:flex;flex-direction:column;justify-content:center}.result-label{font-size:.9rem;font-weight:500;color:var(--text-color-light);margin-bottom:.5rem}.result-time{font-size:1.75rem;font-weight:700;color:var(--primary-color)}.result-rate{background-color:#f1f3f5}.result-rate .result-value{color:#495057}.result-grid-time{background-color:#f8d7da}.result-grid-time .result-label,.result-grid-time .result-time{color:#721c24}.chart-container{position:relative;width:100%;height:300px}.table-wrapper{margin-top:2rem}.table-wrapper h3{font-size:1.1rem;font-weight:600;margin-bottom:.75rem}.table-container{max-height:250px;overflow-y:auto;border:1px solid var(--border-color);border-radius:var(--border-radius)}table{width:100%;border-collapse:collapse}th,td{padding:.75rem;text-align:left;border-bottom:1px solid var(--border-color)}thead th{background-color:var(--primary-color-light);position:sticky;top:0;z-index:1;font-weight:600}tbody tr:nth-child(2n){background-color:#f8f9fa}tbody tr:last-child td{border-bottom:none}.disclaimer{grid-column:1 / -1;text-align:center;font-size:.8rem;color:#888;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}.error-message{background-color:#fff5f5;color:#c53030;padding:1rem;border-radius:var(--border-radius);border:1px solid #f5c6cb;text-align:center;font-weight:500}@media (min-width: 900px){.app-container{padding:3rem}.main-content{grid-template-columns:350px 1fr}.output-section{min-width:0}header h1{font-size:2.5rem}}
