.image-tool { max-width: 1120px; margin: 0 auto; }
.image-header { padding-top: 1rem; }
.image-chip { padding: .35rem .7rem; border: 1px solid var(--bs-border-color); border-radius: 2rem; color: var(--bs-secondary-color); }
.image-panel { padding: 1.65rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-body-bg); }
.image-step { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; margin-right: .4rem; border-radius: 50%; font-size: .9rem; color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle); }
.image-upload { padding: 1.6rem; border: 1px dashed var(--bs-primary); border-radius: .8rem; background: var(--bs-tertiary-bg); text-align: center; }
.image-upload-icon { font-size: 2rem; color: var(--bs-primary); margin-bottom: .6rem; }
.image-preview { padding: 1rem; min-height: 120px; text-align: center; border: 1px solid var(--bs-border-color); border-radius: .6rem; background-color: #f1f3f5; background-image: linear-gradient(45deg,#dce0e4 25%,transparent 25%),linear-gradient(-45deg,#dce0e4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dce0e4 75%),linear-gradient(-45deg,transparent 75%,#dce0e4 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }
.image-preview img { max-width: 100%; max-height: 240px; object-fit: contain; }
.image-preview p { padding: .7rem; background: var(--bs-body-bg); border-radius: .4rem; }
.image-result { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem; border: 1px solid var(--bs-success-border-subtle); border-radius: .8rem; background: var(--bs-success-bg-subtle); }
.image-tool [hidden] { display: none !important; }
@media (max-width: 575px) { .image-panel { padding: 1rem; } .image-upload { padding: 1rem; } .image-result { flex-direction: column; align-items: stretch; } }