.html-tool .tool-heading { margin-block-end: 3.5rem; }
.html-workspace { max-inline-size: min(100%, 920px); }
.html-drop.is-over { background: var(--cyan-tint); border-color: var(--brand); }
.html-drop-hint { margin: 1.25rem 0 0; color: #4b5563; font-size: .9rem; line-height: 1.5; }
.html-file-info { margin-block-start: 1.5rem; overflow-wrap: anywhere; }
.html-settings { margin-block-start: var(--space-lg); padding: clamp(1.25rem, 3vw, 2rem); border: 2px solid var(--navy); border-radius: var(--radius-md); background: var(--paper); }
.html-settings h2 { margin: 0 0 1.25rem; color: var(--brand-ink); font: 800 clamp(1.35rem, 2.5vw, 1.7rem)/1.2 var(--display-font); }
.html-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.html-mode { display: flex; flex-direction: column; gap: .8rem; min-height: 11.5rem; position: relative; padding: 1.25rem; border: 2px solid var(--navy); border-radius: var(--radius-md); background: #fff; cursor: pointer; }
.html-mode:has(input:checked) { background: var(--cyan-tint); box-shadow: 3px 3px 0 var(--navy); }
.html-mode:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }
.html-mode input { position: absolute; inset-block-start: 1.15rem; inset-inline-end: 1rem; width: 1.1rem; height: 1.1rem; accent-color: var(--brand); }
.html-mode-top { display: flex; flex-direction: column; gap: .35rem; padding-inline-end: 1.5rem; }
.html-mode-top b { color: #08736e; font-size: .8rem; letter-spacing: .06em; }
.html-mode-top strong { color: var(--brand-ink); font: 850 1.35rem/1.2 var(--display-font); }
.html-mode > span:last-child { line-height: 1.5; font-size: .97rem; }
.html-mode-note { margin: 1.5rem 0 0; color: #354451; line-height: 1.55; }
.html-go { display: flex; justify-content: center; margin-block-start: var(--space-lg); }
.html-button { min-height: 3.25rem; padding: .8rem 1.5rem; border: 2px solid var(--navy); border-radius: var(--radius-pill); box-shadow: var(--shadow-md); font: 800 1.05rem/1.2 var(--display-font); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.html-button:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--navy); }
.html-button:disabled { background: #e5e7eb; color: #6b7280; border-color: #9ca3af; box-shadow: none; cursor: not-allowed; }
.html-button-convert { width: 100%; min-height: 4rem; background: #fde047; color: var(--navy); font-size: 1.3rem; }
.html-button-primary { background: var(--brand); color: #fff; }
.html-button-secondary { background: var(--paper); color: var(--navy); }
.html-status { min-height: 1.4rem; margin: 1rem 0 0; color: #305651; font-weight: 650; text-align: center; }
.html-error { margin: 1rem 0 0; padding: .8rem 1rem; border: 2px solid #b91c1c; border-radius: var(--radius-sm); background: #fff0ef; color: #8b1c1c; font-weight: 700; }
.html-result { padding: clamp(1.25rem, 4vw, 2.5rem); border: 2px solid var(--navy); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-md); scroll-margin-top: 1rem; }
.html-result:focus { outline: none; }
.html-result-head { display: flex; align-items: center; gap: 1rem; }
.html-result-check { display: inline-grid; place-items: center; flex: none; width: 3rem; height: 3rem; border: 2px solid var(--navy); border-radius: 50%; background: #dcfce7; color: #14532d; font-size: 1.6rem; font-weight: 900; }
.html-eyebrow { color: #08736e; font-size: .8rem; font-weight: 800; letter-spacing: .1em; }
.html-result h2 { margin: .2rem 0 0; color: var(--brand-ink); font: 850 clamp(1.6rem, 3vw, 2.2rem)/1.15 var(--display-font); }
.html-receipt { margin: 1.5rem 0; padding: 1rem; border: 2px solid var(--navy); border-radius: var(--radius-sm); background: #dbeafe; font-weight: 700; overflow-wrap: anywhere; }
.html-result-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.html-preview { margin-block-start: 2rem; border-block-start: 1px solid #9bb0ad; padding-block-start: 1.25rem; }
.html-preview h3 { margin: 0; color: var(--brand-ink); font: 800 1.25rem/1.2 var(--display-font); }
.html-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block-start: 1.25rem; }
.html-preview-grid figure { min-width: 0; margin: 0; }
.html-preview-grid figcaption { margin-block-end: .5rem; font-weight: 800; }
.html-preview-paper, .html-preview-grid iframe { width: 100%; height: 340px; border: 1px solid #97aaa8; background: #e9ecef; overflow: auto; }
.html-preview-paper { display: flex; justify-content: center; align-items: start; padding: 1rem; }
.html-preview-paper canvas { display: block; max-width: 100%; height: auto; box-shadow: 0 2px 12px #0002; }
.html-preview-grid iframe { background: #fff; }
.html-preview-note { margin: .8rem 0 0; color: #495c60; font-size: .9rem; }
@media (max-width: 760px) {
  .html-modes, .html-preview-grid { grid-template-columns: 1fr; }
  .html-mode { min-height: 0; }
  .html-preview-paper, .html-preview-grid iframe { height: 300px; }
  .html-result-actions .html-button { width: 100%; }
}