/* Generated by tools/split-subpage-css.php. Edit assets/css/source/subpage-modern.full.css instead. */
.imgtext-heading { margin-bottom: 2rem; }
.imgtext-eyebrow { margin: 0 0 .65rem; color: #087f72; font-size: .88rem; font-weight: 800; }
.imgtext-heading h1 { margin-bottom: .8rem; }
.imgtext-heading > p:last-child { max-width: 760px; margin: 0; color: #53657d; line-height: 1.8; }
.imgtext-tool { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(230px, .75fr); gap: 1rem; align-items: stretch; }
.imgtext-panel,
.imgtext-result-section,
.imgtext-guide { border: 1px solid #d7e1ee; border-radius: 8px; background: #fff; }
.imgtext-panel { padding: 1.3rem; }
.imgtext-panel h2,
.imgtext-result-section h2,
.imgtext-guide h2 { margin: 0; font-size: 1.25rem; }
.imgtext-panel p { margin: .35rem 0 0; color: #6c7d94; font-size: .9rem; line-height: 1.6; }
.imgtext-panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.imgtext-panel-head input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.imgtext-file-button,
.imgtext-primary,
.imgtext-secondary,
.imgtext-result-actions button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; border: 1px solid #cbd8e8; border-radius: 7px; padding: .72rem 1rem; background: #fff; color: #233650; font-weight: 800; cursor: pointer; white-space: nowrap; }
.imgtext-file-button,
.imgtext-primary { border-color: #087f72; background: #087f72; color: #fff; }
.imgtext-dropzone { min-height: 300px; margin-top: 1.15rem; display: grid; place-items: center; overflow: hidden; border: 1px dashed #a9bfd7; border-radius: 8px; background: #f7fafc; cursor: pointer; transition: border-color .2s, background .2s; }
.imgtext-dropzone[data-dragging="true"] { border-color: #087f72; background: #edf9f6; }
.imgtext-empty-preview { display: grid; justify-items: center; gap: .55rem; padding: 2rem; text-align: center; color: #6b7e96; }
.imgtext-empty-preview strong { color: #243852; font-size: 1.05rem; }
.imgtext-file-mark { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 8px; background: #e1f3ef; color: #087f72; font-weight: 900; }
.imgtext-dropzone img { display: block; width: 100%; max-height: 440px; object-fit: contain; padding: .75rem; }
.imgtext-file-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; margin-top: .9rem; }
.imgtext-file-info div { min-width: 0; }
.imgtext-file-info span { display: block; color: #7a8aa0; font-size: .78rem; }
.imgtext-file-info strong { display: block; overflow: hidden; color: #263b55; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.imgtext-control-panel { display: flex; flex-direction: column; gap: .85rem; background: #f7fafc; }
.imgtext-control-panel label { color: #31455f; font-weight: 800; }
.imgtext-control-panel select { width: 100%; min-height: 48px; margin-top: .45rem; padding: 0 2.5rem 0 .9rem; border: 1px solid #cbd8e8; border-radius: 7px; background-color: #fff; color: #1f334d; line-height: normal; }
.imgtext-primary,
.imgtext-secondary { width: 100%; }
.imgtext-panel button:disabled,
.imgtext-result-actions button:disabled { cursor: not-allowed; opacity: .48; }
.imgtext-progress-wrap { padding-top: .2rem; }
.imgtext-progress-track { height: 9px; overflow: hidden; border-radius: 5px; background: #dfe7f0; }
.imgtext-progress-track span { display: block; width: 0; height: 100%; background: #087f72; transition: width .2s; }
.imgtext-progress-wrap p { margin-top: .45rem; font-size: .82rem; }
.imgtext-status { margin-top: auto !important; padding: .9rem; border-radius: 7px; background: #edf2f7; color: #53677f !important; }
.imgtext-status[data-type="success"] { background: #eaf7f2; color: #176a55 !important; }
.imgtext-status[data-type="warning"] { background: #fff7df; color: #7a5a08 !important; }
.imgtext-status[data-type="error"] { background: #fff0ef; color: #a53b34 !important; }
.imgtext-result-section { margin-top: 1rem; padding: 1.3rem; }
.imgtext-result-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.imgtext-result-head p { margin: .35rem 0 0; color: #6c7d94; }
.imgtext-result-head > strong { color: #087f72; font-size: .88rem; }
.imgtext-result-section textarea { display: block; width: 100%; min-height: 280px; margin-top: 1rem; resize: vertical; border: 1px solid #cbd8e8; border-radius: 7px; padding: 1rem; background: #fbfcfe; color: #1d3049; line-height: 1.7; }
.imgtext-result-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .8rem; }
.imgtext-result-actions button:first-child { border-color: #087f72; background: #087f72; color: #fff; }
.imgtext-guide { margin-top: 1rem; padding: 1.45rem; }
.imgtext-guide > header > p { margin: .65rem 0 0; color: #5f7188; line-height: 1.75; }
.imgtext-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 1.1rem; }
.imgtext-guide-grid section { padding: 1rem; border: 1px solid #dbe4ee; border-radius: 7px; background: #f8fafc; }
.imgtext-guide-grid h3 { margin: 0 0 .45rem; font-size: 1rem; }
.imgtext-guide-grid p { margin: 0; color: #63758b; font-size: .9rem; line-height: 1.7; }
.imgtext-note { margin: 1rem 0 0; padding: .9rem 1rem; border-left: 3px solid #087f72; background: #f0f8f6; color: #536b66; font-size: .88rem; }
.imgtext-file-button:focus-visible,
.imgtext-dropzone:focus-visible,
.imgtext-tool button:focus-visible,
.imgtext-result-section button:focus-visible { outline: 3px solid rgba(8, 127, 114, .25); outline-offset: 2px; }
@media screen and (max-width: 980px) {
.imgtext-tool { grid-template-columns: 1fr; }
}
@media screen and (max-width: 640px) {
.imgtext-panel-head { align-items: stretch; flex-direction: column; }
.imgtext-file-button { width: 100%; }
.imgtext-dropzone { min-height: 230px; }
.imgtext-file-info { grid-template-columns: 1fr; }
.imgtext-guide-grid { grid-template-columns: 1fr; }
.imgtext-result-head { align-items: flex-start; flex-direction: column; }
.imgtext-result-actions { display: grid; grid-template-columns: 1fr; }
.imgtext-result-actions button { width: 100%; }
}