.ratio-form{display:flex;flex-direction:column;gap:var(--space-4)}.dimension-row{display:flex;align-items:center;gap:var(--space-3)}.dimension-row .form-group{flex:1}.dimension-separator{font-size:var(--font-size-lg);color:var(--color-text-tertiary);margin-top:1.5rem}.ratio-result{text-align:center;padding:var(--space-6)}.ratio-value{font-size:2rem;font-weight:700;color:var(--color-accent)}.ratio-decimal{font-size:var(--font-size-sm);color:var(--color-text-tertiary);margin-top:var(--space-1)}.ratio-preview{margin:var(--space-4) auto;border:2px solid var(--color-accent);border-radius:var(--radius-sm);background:var(--color-accent-light);max-width:200px;max-height:150px;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs);color:var(--color-accent)}.presets-section{margin-top:var(--space-4)}.preset-category{margin-bottom:var(--space-4)}.preset-category-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);margin-bottom:var(--space-2)}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}@media(min-width:480px){.preset-grid{grid-template-columns:repeat(3,1fr)}}.preset-item{display:flex;flex-direction:column;align-items:center;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);background:var(--color-bg)}.preset-item:hover{border-color:var(--color-accent);background:var(--color-accent-light)}.preset-item .preset-name{font-size:var(--font-size-xs);font-weight:600;color:var(--color-text)}.preset-item .preset-size{font-size:var(--font-size-xs);color:var(--color-text-tertiary)}.lock-section{margin-top:var(--space-4);padding:var(--space-4);background:var(--color-bg-secondary);border-radius:var(--radius-md)}.lock-section .form-group{margin-bottom:var(--space-3)}.lock-section .form-group:last-child{margin-bottom:0}.lock-result{font-size:var(--font-size-lg);font-weight:600;color:var(--color-accent);text-align:center;padding:var(--space-3)}