.gth-px-rem-converter .gth-converter-row { display: flex; align-items: flex-end; gap: var(--gth-space-2); margin-bottom: var(--gth-space-4); }
.gth-px-rem-converter .gth-flex-1 { flex: 1; }
.gth-px-rem-converter .gth-converter-equals { font-size: var(--gth-text-2xl); font-weight: var(--gth-font-bold); color: var(--gth-text-muted); padding-bottom: var(--gth-space-2); }
.gth-px-rem-converter .gth-input-lg { font-size: var(--gth-text-xl); text-align: center; }
.gth-px-rem-converter .gth-common-sizes h4 { font-size: var(--gth-text-sm); color: var(--gth-text-secondary); margin-bottom: var(--gth-space-2); }
.gth-px-rem-converter .gth-sizes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--gth-space-2); }
.gth-px-rem-converter .gth-size-item { padding: var(--gth-space-2); background: var(--gth-bg-secondary); border-radius: var(--gth-radius-sm); text-align: center; cursor: pointer; transition: all 0.2s; }
.gth-px-rem-converter .gth-size-item:hover { background: var(--gth-primary-subtle); }
.gth-px-rem-converter .gth-size-px { font-weight: var(--gth-font-bold); color: var(--gth-text-primary); }
.gth-px-rem-converter .gth-size-rem { font-size: var(--gth-text-sm); color: var(--gth-text-secondary); }