.image-converter-tool-page { background: radial-gradient(circle at 46% 10%, rgba(48, 91, 211, .2), transparent 28%), radial-gradient(circle at 87% 48%, rgba(42, 104, 198, .13), transparent 30%), linear-gradient(180deg, #020615, #04091a 72%, #06102a); }.image-converter-page-icon { color: #5c87ff; border-color: rgba(77, 126, 244, .42); background: linear-gradient(145deg, rgba(46, 91, 205, .25), rgba(25, 48, 112, .42)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 36px rgba(66, 116, 238, .15); font-size: 39px; }.image-converter-page-hero .eyebrow { color: #638eff; }
.image-converter-workspace { border: 1px solid rgba(92, 119, 186, .25); border-radius: 18px; background: linear-gradient(145deg, rgba(17, 28, 55, .96), rgba(6, 14, 34, .98)); box-shadow: 0 25px 70px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.025); overflow: hidden; }.image-drop-zone { min-height: 420px; margin: 25px; padding: 45px 25px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px dashed rgba(87, 130, 238, .52); border-radius: 14px; background: radial-gradient(circle at 50% 40%, rgba(46, 87, 198, .13), transparent 38%), rgba(7, 15, 35, .72); text-align: center; transition: .2s ease; }.image-drop-zone.is-dragging { border-color: #6b92ff; background-color: rgba(43, 83, 180, .14); transform: scale(.995); }.image-drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.image-drop-icon { width: 72px; height: 72px; display: grid; place-items: center; color: #6591ff; border: 1px solid rgba(93, 139, 248, .35); border-radius: 18px; background: rgba(50, 91, 201, .13); font-size: 37px; }.image-drop-zone h2 { margin: 19px 0 6px; font-size: 20px; }.image-drop-zone p { margin: 0; color: #8d95ab; font-size: 12px; }.image-drop-zone button { height: 42px; margin: 22px 0 14px; padding: 0 25px; color: white; border: 0; border-radius: 9px; background: linear-gradient(135deg, #477cf4, #6859e7); box-shadow: 0 9px 24px rgba(69, 99, 218, .25); font-size: 11px; font-weight: 750; cursor: pointer; }.image-drop-zone small { color: #697289; font-size: 9px; }
.image-converter-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.05fr) minmax(0, .9fr); }.image-source-panel, .image-options-panel, .image-output-panel { min-width: 0; padding: 23px; }.image-source-panel, .image-options-panel { border-right: 1px solid rgba(96, 115, 162, .17); }.image-panel-heading { min-height: 31px; margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }.image-panel-heading > div { display: flex; align-items: center; gap: 10px; }.image-panel-heading > div > span { width: 29px; height: 29px; display: grid; place-items: center; color: #84a3ff; border: 1px solid rgba(84, 130, 238, .3); border-radius: 8px; background: rgba(49, 88, 190, .12); font-size: 9px; font-weight: 800; }.image-panel-heading h2 { margin: 0; font-size: 14px; }.image-panel-heading > button { height: 29px; padding: 0 10px; color: #9eacd0; border: 1px solid rgba(99, 119, 166, .28); border-radius: 7px; background: rgba(15, 27, 53, .7); font-size: 9px; cursor: pointer; }.image-ready-badge { padding: 5px 8px; color: #79dda3; border: 1px solid rgba(77, 201, 131, .26); border-radius: 999px; background: rgba(52, 174, 105, .09); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.checkerboard { background-color: #111a31; background-image: linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.045) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.045) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.045) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }.image-preview-frame { height: 224px; padding: 12px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(93, 113, 160, .22); border-radius: 11px; }.image-preview-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }.image-file-details { margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.image-file-details > div { min-width: 0; padding: 9px; border: 1px solid rgba(93, 110, 151, .16); border-radius: 7px; background: rgba(9, 18, 39, .6); }.image-file-details dt { color: #747d94; font-size: 8px; }.image-file-details dd { margin: 4px 0 0; overflow: hidden; color: #d5d9e7; font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.image-file-details dd.positive { color: #70db9f; }.image-file-details dd.negative { color: #ff9b76; }
.image-converter-field { display: grid; gap: 7px; }.image-converter-field > span, .image-size-heading > span { color: #aeb5ca; font-size: 10px; }.image-converter-field select, .image-size-controls input { width: 100%; height: 41px; padding: 0 11px; color: #edf0fb; border: 1px solid #34415f; border-radius: 8px; outline: 0; background: #081126; font-size: 10px; }.image-converter-field select:focus, .image-size-controls input:focus { border-color: #5e88f2; box-shadow: 0 0 0 3px rgba(74, 119, 230, .1); }.image-size-heading { margin: 19px 0 7px; display: flex; align-items: center; justify-content: space-between; }.image-size-heading button { padding: 0; color: #7897e8; border: 0; background: transparent; font-size: 9px; cursor: pointer; }.image-size-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; }.image-size-controls label { display: grid; gap: 6px; }.image-size-controls label span { color: #788197; font-size: 8px; }.image-size-controls > span { padding-bottom: 12px; color: #647087; font-size: 11px; }.image-ratio-control { min-height: 49px; margin-top: 12px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(94, 112, 155, .18); border-radius: 8px; background: rgba(8, 17, 38, .58); cursor: pointer; }.image-ratio-control input { width: 15px; height: 15px; accent-color: #5c82ef; }.image-ratio-control > span { display: grid; gap: 3px; }.image-ratio-control strong { color: #cdd2e1; font-size: 9px; }.image-ratio-control small { color: #747e95; font-size: 8px; }.image-quality-control { margin-top: 18px; }.image-quality-control > div:first-child, .image-quality-labels { display: flex; align-items: center; justify-content: space-between; }.image-quality-control label { color: #afb6cb; font-size: 10px; }.image-quality-control strong { color: #83a1fa; font-size: 10px; }.image-quality-control input { width: 100%; margin: 12px 0 7px; accent-color: #5f83ee; }.image-quality-labels span { color: #677187; font-size: 8px; }.image-quality-control.is-disabled { opacity: .55; }.image-convert-button { width: 100%; height: 42px; margin-top: 20px; color: white; border: 0; border-radius: 9px; background: linear-gradient(135deg, #477cf4, #6a59e7); box-shadow: 0 9px 24px rgba(69, 99, 218, .22); font-size: 11px; font-weight: 750; cursor: pointer; }.image-convert-button:disabled { opacity: .55; cursor: wait; }
.image-output-empty { min-height: 365px; padding: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px dashed rgba(94, 115, 164, .23); border-radius: 11px; background: rgba(7, 15, 34, .54); text-align: center; }.image-output-empty > span { color: #465b91; font-size: 38px; }.image-output-empty h3 { max-width: 190px; margin: 15px 0 7px; color: #9ba4bb; font-size: 12px; line-height: 1.45; }.image-output-empty p { margin: 0; color: #646e85; font-size: 9px; }.image-output-details { margin-bottom: 13px; }.image-download-button { width: 100%; height: 40px; color: #dce6ff; border: 1px solid rgba(88, 132, 239, .44); border-radius: 8px; background: rgba(52, 92, 199, .14); font-size: 10px; font-weight: 750; cursor: pointer; }.image-download-button:hover { border-color: #668ef4; background: rgba(63, 103, 211, .22); }.image-converter-footer { min-height: 49px; padding: 9px 23px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(95, 113, 158, .16); background: rgba(5, 13, 31, .64); }.image-converter-footer > div { min-width: 0; }.image-converter-status, .image-converter-error { margin: 0; font-size: 9px; }.image-converter-status { color: #83a1f5; }.image-converter-error { margin-top: 3px; color: #ff788c; }.image-converter-footer > button { height: 31px; padding: 0 11px; color: #aab2c8; border: 1px solid rgba(101, 118, 158, .26); border-radius: 7px; background: rgba(17, 28, 52, .72); font-size: 9px; cursor: pointer; }.image-converter-information article > span { color: #5c86f4; }
@media (max-width: 980px) { .image-converter-grid { grid-template-columns: 1fr 1fr; }.image-source-panel { border-bottom: 1px solid rgba(96, 115, 162, .17); }.image-options-panel { border-right: 0; border-bottom: 1px solid rgba(96, 115, 162, .17); }.image-output-panel { grid-column: 1 / -1; }.image-output-panel .image-preview-frame { height: 300px; }.image-output-empty { min-height: 220px; } }
@media (max-width: 560px) { .image-drop-zone { min-height: 350px; margin: 14px; padding: 32px 18px; }.image-converter-grid { grid-template-columns: 1fr; }.image-source-panel, .image-options-panel, .image-output-panel { padding: 18px; border-right: 0; }.image-source-panel { border-bottom: 1px solid rgba(96, 115, 162, .17); }.image-output-panel { grid-column: auto; }.image-preview-frame, .image-output-panel .image-preview-frame { height: 220px; }.image-file-details { grid-template-columns: 1fr 1fr; }.image-converter-footer { padding: 11px 18px; align-items: stretch; flex-direction: column; }.image-converter-footer > button { width: 100%; } }