.labeled-calculator .title {
text-align: center !important;
font-size: 20px !important;
font-weight: 700 !important;
color: #1864ab !important;
margin: 0 0 20px 0 !important;
padding: 8px !important;
}
@media (prefers-color-scheme: dark) {
.labeled-calculator .title {
color: #74c0fc !important;
}
}
.labeled-calculator * {
box-sizing: border-box !important;
margin: 1px !important;
padding: 0 !important;
}
.labeled-calculator {
max-width: 1000px !important;
margin: 20px auto !important;
padding: 25px !important;
background: #f8f9fa;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: system-ui, -apple-system, sans-serif !important;
} .param-grid {
display: grid !important;
grid-template-columns: 60% 40% !important;
gap: 8px !important;
align-items: center !important;
}
.vertical-group {
display: contents !important;
}
.input-label {
font-size: 13px !important;
color: #495057 !important;
font-weight: 600 !important;
margin-bottom: 4px !important;
padding-right: 8px !important;
}
.input-field {
width: 100% !important;
padding: 8px 12px !important;
border: 2px solid #dee2e6 !important;
border-radius: 6px;
font-size: 14px !important;
background: white !important;
color: #212529 !important;
}
select.input-field {
appearance: none !important;
background: 
url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%236c757d' d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") 
no-repeat right 10px center/14px !important;
padding-right: 35px !important;
}
.params-section {
margin: 20px 0 !important;
padding: 15px !important;
border-radius: 8px;
}
.basic-params {
background: #e8f4fc;
border: 2px solid #b8d4f0;
}
.advanced-params {
background: #e9faf0;
border: 2px solid #2ecb70;
}
.section-title {
font-size: 15px !important;
font-weight: 700 !important;
margin: -5px 0 10px !important;
padding-bottom: 5px !important;
border-bottom: 2px solid #cacaca !important;
}
.calc-button {
width: 100% !important;
padding: 12px !important;
background: #228be6 !important;
color: white !important;
border: none !important;
border-radius: 6px !important;
font-size: 16px !important;
cursor: pointer !important;
transition: opacity 0.2s !important;
margin-top: 10px !important;
}
.calc-button:hover {
opacity: 0.9 !important;
}
.result-field {
width: 100% !important;
border: none !important;
background: transparent !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #494949 !important;
pointer-events: none !important;
text-align: right;
}
@media (prefers-color-scheme: dark) {
.labeled-calculator {
background: #2d3436 !important;
color: #f8f9fa !important;
}
.input-field {
background: #454d55 !important;
border-color: #495057 !important;
color: #f8f9fa !important;
}
.basic-params { 
background: #2b3d4e !important;
border-color: #406384 !important;
}
.advanced-params { 
background: #3e2b4e !important;
border-color: #634784 !important;
}
.result-field {
color: #74c0fc !important;
}
}