/* HTML to PDF */
.hp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hp-grid > .field textarea { min-height: 380px; font: 400 13px/1.5 "SF Mono", Menlo, Consolas, monospace; resize: vertical; }
.hp-count { font: 400 12.5px/1.3 var(--sans); color: var(--muted); min-height: 16px; }
.hp-preview-wrap { display: grid; gap: 6px; }
.hp-preview-wrap > span { font: 500 13px/1 var(--sans); color: var(--muted); }
.hp-preview { width: 100%; height: 380px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.hp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hp-upload { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 13px 20px; font-size: 15px; }
.hp-upload svg { width: 18px; height: 18px; }
.hp-loaded { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); border-radius: 999px; font: 500 13px/1 var(--sans); background: var(--paper-2); }
.hp-loaded button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font: 500 15px/1 var(--sans); cursor: pointer; }
.hp-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; }
.hp-seg { justify-self: start; flex-wrap: wrap; }
.hp-seg button { padding: 10px 14px; font-size: 13.5px; }
@media (max-width: 760px) { .hp-settings { grid-template-columns: 1fr; } }
.tool-ui.is-over { outline: 2px dashed var(--ink); outline-offset: -8px; }
.hp-result-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.hp-result-row .file { font: 600 14px/1.3 var(--sans); overflow-wrap: anywhere; }
.hp-result-row .size { color: var(--muted); font: 400 13px/1.3 var(--sans); }
@media (max-width: 760px) { .hp-grid { grid-template-columns: 1fr; } .hp-grid > .field textarea, .hp-preview { min-height: 260px; height: 260px; } }