.gth-aspect-ratio-calculator .gth-ratio-display { text-align: center; margin-bottom: var(--gth-space-4); }
.gth-aspect-ratio-calculator .gth-ratio-value { display: block; font-size: var(--gth-text-3xl); font-weight: var(--gth-font-bold); color: var(--gth-primary); }
.gth-aspect-ratio-calculator .gth-ratio-label { font-size: var(--gth-text-sm); color: var(--gth-text-secondary); }
.gth-aspect-ratio-calculator .gth-ratio-preview { display: flex; justify-content: center; margin-bottom: var(--gth-space-4); }
.gth-aspect-ratio-calculator .gth-preview-box { background: var(--gth-primary-subtle); border: 2px solid var(--gth-primary); max-width: 200px; max-height: 150px; }
.gth-aspect-ratio-calculator .gth-resize-section, .gth-aspect-ratio-calculator .gth-common-ratios { margin-top: var(--gth-space-4); }
.gth-aspect-ratio-calculator .gth-resize-section h4, .gth-aspect-ratio-calculator .gth-common-ratios h4 { font-size: var(--gth-text-sm); color: var(--gth-text-secondary); margin-bottom: var(--gth-space-2); }
.gth-aspect-ratio-calculator .gth-ratio-buttons { display: flex; flex-wrap: wrap; gap: var(--gth-space-2); }
.gth-aspect-ratio-calculator .gth-ratio-btn { padding: var(--gth-space-2) var(--gth-space-3); background: var(--gth-bg-secondary); border: 1px solid var(--gth-border-color); border-radius: var(--gth-radius-md); cursor: pointer; font-size: var(--gth-text-sm); transition: all 0.2s; }
.gth-aspect-ratio-calculator .gth-ratio-btn:hover { background: var(--gth-primary); color: white; border-color: var(--gth-primary); }