/* ToolWorld plugin: barcode-decoder */
.barcode-decoder-container { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 auto; container-type: inline-size; font-size: 14px; color: var(--text, #333); }
.barcode-decoder-container input, .barcode-decoder-container select, .barcode-decoder-container textarea, .barcode-decoder-container button { box-sizing: border-box; }
.barcode-decoder-container img, .barcode-decoder-container canvas, .barcode-decoder-container pre { max-width: 100%; }

.barcode-decoder-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 14px; align-items: start; }
.barcode-decoder-main { min-width: 0; }
.barcode-decoder-side { min-width: 0; position: static; }
.barcode-decoder-card { border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius, 10px); padding: 12px 14px; margin-bottom: 10px; background: var(--card-bg, #fff); }
.barcode-decoder-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.barcode-decoder-head-t { font-size: 14px; font-weight: 600; color: var(--text, #333); }
.barcode-decoder-head-s { display: block; font-size: 12px; color: var(--muted, #777); font-weight: 400; margin-top: 2px; }
.barcode-decoder-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.barcode-decoder-field { min-width: 0; }
.barcode-decoder-field-full { grid-column: 1 / -1; }
.barcode-decoder-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted, #666); margin-bottom: 4px; }
.barcode-decoder-sel, .barcode-decoder-inp { width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 13.5px; border: 1px solid var(--border, #d7dbe0); border-radius: var(--radius, 8px); background: var(--card-bg, #fff); color: var(--text, #333); }
.barcode-decoder-sel { appearance: none; -webkit-appearance: none; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, var(--muted, #888) 50%), linear-gradient(135deg, var(--muted, #888) 50%, transparent 50%); background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.barcode-decoder-sel:focus-visible, .barcode-decoder-inp:focus-visible, .barcode-decoder-ta:focus-visible { outline: 2px solid var(--primary, #1a56b0); outline-offset: 1px; }
.barcode-decoder-ta { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 13px; line-height: 1.6; border: 1px solid var(--border, #d7dbe0); border-radius: var(--radius, 8px); background: var(--card-bg, #fff); color: var(--text, #333); resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; }
.barcode-decoder-ta-plain { font-family: inherit; }
.barcode-decoder-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; padding-top: 4px; }
.barcode-decoder-check input { width: 15px; height: 15px; accent-color: var(--primary, #1a56b0); }
.barcode-decoder-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.barcode-decoder-btn { padding: 7px 14px; font-size: 13.5px; border-radius: var(--radius, 8px); border: 1px solid var(--border, #d7dbe0); background: var(--card-bg, #fff); color: var(--text, #333); cursor: pointer; }
.barcode-decoder-btn-primary { background: var(--primary, #1a56b0); border-color: var(--primary, #1a56b0); color: var(--text-on-accent, #fff); }
.barcode-decoder-btn-primary:hover { background: var(--primary-hover, #16489a); }
.barcode-decoder-btn:disabled { opacity: .5; cursor: not-allowed; }
.barcode-decoder-status { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius, 10px); font-size: 13px; line-height: 1.6; background: var(--muted-bg, #f5f6f8); color: var(--muted, #666); }
.barcode-decoder-status.is-ok { background: var(--bg-btn, #f0faf3); color: var(--success, #1a7f37); }
.barcode-decoder-status.is-err { background: var(--bg-btn, #fef2f2); color: var(--danger, #b91c1c); }
.barcode-decoder-status.is-loading { background: var(--bg-btn, #f0f7ff); color: var(--primary, #1a56b0); }
.barcode-decoder-empty { padding: 16px 12px; text-align: center; font-size: 12.5px; color: var(--muted, #888); border: 1px dashed var(--border, #d7dbe0); border-radius: var(--radius, 10px); }
.barcode-decoder-hint { margin-top: 6px; font-size: 12.5px; color: var(--muted, #777); line-height: 1.6; }
.barcode-decoder-drop { border: 2px dashed var(--border, #d7dbe0); border-radius: var(--radius, 10px); padding: 18px 12px; text-align: center; font-size: 13px; color: var(--muted, #777); cursor: pointer; background: var(--card-bg, #fff); }
.barcode-decoder-drop.is-over { border-color: var(--primary, #1a56b0); background: var(--bg-btn, #f0f7ff); }
.barcode-decoder-list { margin-top: 10px; max-height: 320px; overflow: auto; border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius, 10px); }
.barcode-decoder-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--border, #eef0f3); font-size: 12.5px; }
.barcode-decoder-row:last-child { border-bottom: none; }
.barcode-decoder-row-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barcode-decoder-row-s { color: var(--muted, #777); font-size: 12px; flex: none; }
.barcode-decoder-row-ok { color: var(--success, #1a7f37); }
.barcode-decoder-row-err { color: var(--danger, #b91c1c); }
.barcode-decoder-row-del { border: none; background: none; color: var(--danger, #b91c1c); cursor: pointer; font-size: 14px; padding: 0 4px; flex: none; }
.barcode-decoder-prev { margin-top: 10px; text-align: center; }
.barcode-decoder-prev canvas, .barcode-decoder-prev img { max-width: 100%; border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius, 10px); }
.barcode-decoder-kv { display: flex; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.barcode-decoder-k { color: var(--muted, #777); min-width: 7em; flex: none; }
.barcode-decoder-v { word-break: break-all; }
.barcode-decoder-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12.5px; }
.barcode-decoder-bar { height: 6px; border-radius: var(--radius-sm, 3px); background: var(--muted-bg, #eef0f3); overflow: hidden; margin-top: 8px; }
.barcode-decoder-bar > i { display: block; height: 100%; background: var(--primary, #1a56b0); width: 0%; transition: width .2s; }

@container (max-width: 1039px) { .barcode-decoder-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 759px)  { .barcode-decoder-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 519px)  { .barcode-decoder-fields { grid-template-columns: 1fr; } }
@container (max-width: 899px)  { .barcode-decoder-grid { grid-template-columns: 1fr; } .barcode-decoder-side { position: static; } }

@media (max-width: 899px) { .barcode-decoder-grid { grid-template-columns: 1fr; } }
@media (max-width: 519px) { .barcode-decoder-fields { grid-template-columns: 1fr; } .barcode-decoder-meta { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .barcode-decoder-actions { flex-direction: column; align-items: stretch; } .barcode-decoder-actions .barcode-decoder-btn { width: 100%; } }

/* --- 表单控件增强：勾选对齐 / 滑块 / 文件按钮 --- */
.barcode-decoder-field-check { display: flex; flex-direction: column; }
.barcode-decoder-field-check .barcode-decoder-check { flex: 1 1 auto; display: flex; align-items: center; padding-top: 0; }
.barcode-decoder-ta { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 13px; line-height: 1.6; border: 1px solid var(--border, #d7dbe0); border-radius: var(--radius, 8px); background: var(--card-bg, #fff); color: var(--text, #333); resize: vertical; min-height: 84px; font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; }
.barcode-decoder-ta-plain { font-family: inherit; }
input[type=range].barcode-decoder-inp { -webkit-appearance: none; appearance: none; width: 100%; height: 31px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
input[type=range].barcode-decoder-inp::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius, 8px); background: var(--border, #d7dbe0); }
input[type=range].barcode-decoder-inp::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: var(--primary, #1a56b0); border: 2px solid var(--card-bg, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .12s ease; }
input[type=range].barcode-decoder-inp::-webkit-slider-thumb:hover { transform: scale(1.18); }
input[type=range].barcode-decoder-inp:active::-webkit-slider-thumb { transform: scale(1.05); }
input[type=range].barcode-decoder-inp::-moz-range-track { height: 6px; border-radius: var(--radius, 8px); background: var(--border, #d7dbe0); }
input[type=range].barcode-decoder-inp::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--primary, #1a56b0); border: 2px solid var(--card-bg, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .12s ease; }
input[type=range].barcode-decoder-inp:focus-visible { outline: 2px solid var(--primary, #1a56b0); outline-offset: 2px; border-radius: var(--radius, 8px); }
input[type=file].barcode-decoder-file { width: 100%; box-sizing: border-box; font-size: 12.5px; color: var(--muted, #666); padding: 3px 0; }
input[type=file].barcode-decoder-file::file-selector-button { padding: 6px 12px; margin-right: 10px; font-size: 12.5px; border: 1px solid var(--border, #d7dbe0); border-radius: var(--radius, 8px); background: var(--muted-bg, #f5f6f8); color: var(--text, #333); cursor: pointer; transition: background .12s ease; }
input[type=file].barcode-decoder-file::file-selector-button:hover { background: var(--bg-btn-hover, #e8eaed); }
input[type=file].barcode-decoder-file::-webkit-file-upload-button { -webkit-appearance: none; padding: 6px 12px; margin-right: 10px; font-size: 12.5px; border: 1px solid var(--border, #d7dbe0); border-radius: var(--radius, 8px); background: var(--muted-bg, #f5f6f8); color: var(--text, #333); cursor: pointer; }
input[type=file].barcode-decoder-file::-webkit-file-upload-button:hover { background: var(--bg-btn-hover, #e8eaed); }

/* ==== 控件对齐与交互美化 ==== */
.barcode-decoder-check input[type=checkbox] { width:16px; height:16px; margin:0; flex:none; accent-color:var(--primary,#1a56b0); cursor:pointer; }
.barcode-decoder-field-check { display:flex; flex-direction:column; }
.barcode-decoder-field-check .barcode-decoder-check { flex:1 1 auto; display:flex; align-items:center; gap:8px; min-height:31px; padding:0; margin:0; }
.barcode-decoder-field-check .barcode-decoder-check > span { line-height:1.35; }
.barcode-decoder-ta { width:100%; max-width:100%; min-width:0; box-sizing:border-box; display:block; }
input[type=range].barcode-decoder-inp { --v:50%; }
input[type=range].barcode-decoder-inp::-webkit-slider-runnable-track { background:linear-gradient(to right, var(--primary,#1a56b0) 0 var(--v,50%), var(--border,#d7dbe0) var(--v,50%) 100%); }
input[type=range].barcode-decoder-inp::-moz-range-track { background:linear-gradient(to right, var(--primary,#1a56b0) 0 var(--v,50%), var(--border,#d7dbe0) var(--v,50%) 100%); }
input[type=range].barcode-decoder-inp::-webkit-slider-thumb { transition:transform .12s ease, box-shadow .12s ease; }
.barcode-decoder-filebtn { display:flex; align-items:center; gap:8px; min-height:31px; }
.barcode-decoder-filebtn > .barcode-decoder-btn { flex:none; }
.barcode-decoder-fn { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--muted,#666); }
.barcode-decoder-field-hide { display:none !important; }


/* 滑块实时数值徽标 */
.barcode-decoder-val{display:inline-block;margin-left:6px;padding:0 6px;font-size:12px;line-height:18px;color:var(--text-secondary,#6b7281);background:var(--bg-btn,#f3f4f6);border-radius:4px;font-variant-numeric:tabular-nums;vertical-align:middle;}

/* 颜色选择器与下拉/滑块等高，保证同行控件水平一致 */
input[type=color].barcode-decoder-inp { height: 31px; padding: 2px 4px; }