/* image tool page: page-specific styles for the design-system migration. Scoped under #image-page.ffp. */
#image-page.ffp .password-area{gap:var(--space-3)}
/* labels and hints (ff-field structure) */
#image-page.ffp .password-area label,#image-page.ffp .password-area p.helper-text{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);font:500 var(--text-sm)/1.3 var(--font-sans);color:var(--text-primary);margin:0}
#image-page.ffp .password-area p.helper-text{display:block;font-weight:500}
#image-page.ffp .password-area .compress-preview p.helper-text,#image-page.ffp #crop-options p.helper-text{font-weight:400;font-size:var(--text-xs);color:var(--text-secondary)}
#image-page.ffp .password-area label span{display:inline-block;min-width:3ch;padding:2px 8px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);font:500 12px/1.4 var(--font-mono);text-align:center}
/* inputs and selects */
#image-page.ffp .password-area input[type=text],#image-page.ffp .password-area input[type=number],#image-page.ffp .password-area select{height:44px;min-width:0;border-radius:var(--radius-md);font:400 var(--text-base)/1 var(--font-sans);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
#image-page.ffp .password-area input[type=text],#image-page.ffp .password-area input[type=number]{text-align:left}
#image-page.ffp .password-area input::placeholder{color:var(--text-muted)}
#image-page.ffp .password-area select{-webkit-appearance:none;appearance:none;padding-right:36px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238A8A8A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
/* range sliders */
#image-page.ffp .password-area input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
#image-page.ffp .password-area input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--border-default)}
#image-page.ffp .password-area input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--border-default)}
#image-page.ffp .password-area input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-panel);box-shadow:0 0 0 1px var(--accent),0 1px 3px rgba(0,0,0,.2)}
#image-page.ffp .password-area input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-panel);box-shadow:0 0 0 1px var(--accent)}
#image-page.ffp .password-area input[type=range]:focus-visible{outline:none;box-shadow:none}
#image-page.ffp .password-area input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--accent),0 0 0 4px var(--focus-ring)}
/* width x height and other inline groups */
#image-page.ffp .resize-inputs{display:flex;align-items:center;gap:var(--space-2);width:100%}
#image-page.ffp #input-dimensions{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
#image-page.ffp .resize-inputs.hidden{display:none}
#image-page.ffp #input-percentage{flex-direction:column;align-items:stretch;gap:var(--space-3)}
#image-page.ffp .resize-inputs .separator{font:500 var(--text-sm) var(--font-mono);color:var(--text-muted)}
/* preview image block */
#image-page.ffp .compress-preview{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);padding:var(--space-3);background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
#image-page.ffp .compress-preview.hidden{display:none}
#image-page.ffp .compress-preview img{display:block;max-width:100%;max-height:180px;margin:0 auto;object-fit:contain;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-panel)}
#image-page.ffp .compress-preview p{text-align:center}
/* crop editor */
#image-page.ffp .crop-editor-container{margin:0;max-height:none;width:100%;overflow:hidden;background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
#image-page.ffp .crop-editor-container.hidden{display:none}
#image-page.ffp #crop-image-preview{display:block;max-width:100%;max-height:420px;margin:0 auto}
#image-page.ffp .crop-editor-container .cropper-container{max-width:100%}
#image-page.ffp .crop-editor-container .cropper-view-box{outline-color:var(--accent)}
#image-page.ffp .crop-editor-container .cropper-line,#image-page.ffp .crop-editor-container .cropper-point{background-color:var(--accent)}
#image-page.ffp .password-area .primary-btn{margin-top:var(--space-1)}
@media (max-width:640px){#image-page.ffp .password-area{padding:16px}}