.gth-ratio-calculator .gth-tabs { display: flex; gap: var(--gth-space-2); margin-bottom: var(--gth-space-4); flex-wrap: wrap; }
.gth-ratio-calculator .gth-tab { padding: var(--gth-space-2) var(--gth-space-3); border: 1px solid var(--gth-border); background: var(--gth-bg-secondary); border-radius: var(--gth-radius-md); cursor: pointer; font-size: var(--gth-text-sm); }
.gth-ratio-calculator .gth-tab-active { background: var(--gth-primary); color: white; border-color: var(--gth-primary); }
.gth-ratio-calculator .gth-tab-content { display: none; }
.gth-ratio-calculator .gth-tab-content-active { display: block; }
.gth-ratio-calculator .gth-help { font-size: var(--gth-text-sm); color: var(--gth-text-muted); margin-bottom: var(--gth-space-4); }
.gth-ratio-calculator .gth-help-small { font-size: var(--gth-text-xs); color: var(--gth-text-muted); margin-bottom: var(--gth-space-4); }
.gth-ratio-calculator .gth-ratio-input { display: flex; align-items: center; gap: var(--gth-space-2); margin-bottom: var(--gth-space-4); }
.gth-ratio-calculator .gth-ratio-input .gth-input { width: 100px; text-align: center; }
.gth-ratio-calculator .gth-ratio-colon { font-size: 1.5rem; font-weight: 700; }
.gth-ratio-calculator .gth-proportion-input { display: flex; align-items: center; gap: var(--gth-space-4); justify-content: center; margin-bottom: var(--gth-space-4); }
.gth-ratio-calculator .gth-fraction { display: flex; flex-direction: column; align-items: center; gap: var(--gth-space-1); }
.gth-ratio-calculator .gth-fraction .gth-input { width: 80px; text-align: center; }
.gth-ratio-calculator .gth-fraction-line { width: 100%; height: 2px; background: var(--gth-text-primary); }
.gth-ratio-calculator .gth-equals { font-size: 1.5rem; font-weight: 700; }
.gth-ratio-calculator .gth-result-box { margin-top: var(--gth-space-4); padding: var(--gth-space-4); background: var(--gth-primary); color: white; border-radius: var(--gth-radius-lg); text-align: center; font-size: 1.5rem; font-weight: 600; }