/* UTIL-030 Tạo ảnh thẻ — dùng font và màu của bộ giao diện Tiện ích; không ghi đè font icon. */
.idp-device{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:6px 12px;border-radius:999px;background:var(--sou-ok-bg);color:var(--sou-ok);font-weight:700;font-size:14px}
.idp-disclaimer{display:flex;gap:8px;align-items:flex-start;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--sou-warn-bg);color:var(--sou-warn);font-weight:700}
.idp-disclaimer .fa{margin-top:3px}
.idp-drop.is-compact{min-height:96px;padding:14px;flex-direction:row;flex-wrap:wrap;gap:6px 12px}
.idp-drop.is-compact .fa{font-size:24px}
.idp-source-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.idp-camera{margin-top:12px;padding:12px;border:1px solid var(--sou-line);border-radius:14px;background:#f7f9fd}
.idp-video-wrap{position:relative;max-width:520px;margin:0 auto;border-radius:12px;overflow:hidden;background:#10245e}
.idp-video-wrap video{display:block;width:100%;height:auto;max-height:60vh;transform:scaleX(-1)}
.idp-video-guide{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:10 8;opacity:.9;pointer-events:none}
.idp-help{display:block;margin-top:6px;color:var(--sou-muted);font-size:14px}
.idp-columns{margin-top:18px}
.sou-page .idp-h{font-size:18px;margin:0 0 10px}
.idp-stage{display:flex;align-items:center;justify-content:center;min-height:240px;padding:12px;border:1px solid var(--sou-line);border-radius:14px;background:#eef2f9}
.idp-canvas{display:block;max-width:100%;max-height:62vh;width:auto;height:auto;margin:0 auto;cursor:grab;touch-action:none;box-shadow:0 4px 18px rgba(16,36,94,.18);background:#fff}
.idp-canvas:active{cursor:grabbing}
.idp-canvas:focus-visible{outline:3px solid #3869ed;outline-offset:3px}
.idp-original{display:block;max-width:100%;max-height:62vh;width:auto;height:auto;margin:0 auto}
.idp-empty{margin:0;color:var(--sou-muted);text-align:center}
.sou-page .idp-range output{display:inline;padding:0;font-size:inherit;line-height:inherit;font-weight:700;color:var(--sou-primary)}
.idp-range input[type=range]{min-height:44px;accent-color:var(--sou-primary)}
.idp-tools{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.idp-tools .sou-button{min-height:44px;padding:8px 14px;font-size:15px}
.idp-tools .sou-button[aria-pressed=true]{background:var(--sou-soft);border-color:var(--sou-primary)}
.idp-warnings{list-style:none;margin:8px 0 0;padding:0}
.idp-warnings li{margin:6px 0;padding:8px 12px;border-radius:10px;background:var(--sou-warn-bg);color:var(--sou-warn);font-size:14px;font-weight:700}
.idp-sizes{border:0;padding:0;min-width:0}
.idp-pills{display:flex;flex-wrap:wrap;gap:8px}
.idp-pills label{position:relative;display:inline-flex;cursor:pointer}
.sou-page .idp-pills input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0!important;cursor:pointer}
.idp-pills span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--sou-line);border-radius:999px;background:var(--sou-soft);color:var(--sou-ink);font-weight:700;font-size:15px}
.idp-pills input:checked+span{background:var(--sou-primary);border-color:var(--sou-primary);color:#fff}
.idp-pills input:focus-visible+span{outline:2px solid #3869ed;outline-offset:2px}
.idp-settings .sou-row>.sou-field{flex-basis:140px}
.idp-size-info{margin:12px 0 8px;padding:10px 12px;border-radius:10px;background:var(--sou-soft);color:var(--sou-ink);font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.idp-quality{margin:0 0 12px;padding:10px 12px;border-radius:10px;font-size:15px;font-weight:700}
.idp-quality.is-ok{background:var(--sou-ok-bg);color:var(--sou-ok)}
.idp-quality.is-soft{background:var(--sou-warn-bg);color:var(--sou-warn)}
.idp-quality.is-low{background:var(--sou-err-bg);color:var(--sou-err)}
.idp-bg{padding:12px 14px;border:1px solid var(--sou-line);border-radius:12px;background:#f7f9fd}
.sou-page .idp-bg h3{margin:0 0 4px;font-size:16px}
.idp-bg p{margin:0;color:var(--sou-text);font-size:15px}
.idp-sheet{margin-top:22px;padding-top:18px;border-top:1px solid var(--sou-line)}
.idp-sheet .sou-row>.sou-field{flex-basis:120px}
.idp-sheet-info{margin:8px 0 0;color:var(--sou-ink);font-weight:700;overflow-wrap:anywhere}
.sou-page .idp-sheet-preview{display:block;max-width:100%;margin:0;text-align:center}
.idp-sheet-preview canvas{display:block;max-width:100%;height:auto;margin:0 auto;border:1px solid #cfdcf2;box-shadow:0 6px 18px rgba(16,36,94,.12);background:#fff}
.idp-sheet-preview figcaption{margin-top:8px;color:var(--sou-muted);font-size:14px}
.idp-actions{margin:22px 0 10px}
.idp-result{margin-top:12px}
.idp-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px;margin:8px 0}
.sou-page .idp-result-grid figure{display:block;width:100%;max-width:100%;margin:0;min-width:0}
.idp-result-grid figcaption{margin-top:6px;color:var(--sou-muted);font-size:14px;overflow-wrap:anywhere}
.idp-result-px{max-width:100%;max-height:520px;overflow:auto;padding:8px;border:1px solid var(--sou-line);border-radius:12px;background:#fff}
.idp-result-px img{display:block;max-width:none;height:auto}
.idp-print-sim{padding:8px;border:1px solid var(--sou-line);border-radius:12px;background:#fff}
.idp-print-sim img{display:block;max-width:100%;height:auto;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.idp-result-note{margin:0 0 4px;color:var(--sou-muted);font-size:14px}
@media(max-width:600px){.idp-canvas,.idp-original{max-height:50vh}.idp-stage{min-height:180px;padding:8px}}