/* ===== BeeProton tool workspace ===== */
.tool-shell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden; }
.tool-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.tool-head .ti { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); }
.tool-head h1 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0; }
.tool-head p { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
.tool-body { padding: 24px; }
@media (max-width: 600px) { .tool-body { padding: 16px; } .tool-head { padding: 16px; } }

.dropzone { position: relative; display: grid; place-items: center; text-align: center; gap: 10px; padding: 44px 20px; border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg); background: repeating-linear-gradient(45deg, transparent 0 12px, color-mix(in srgb, var(--accent) 3%, transparent) 12px 24px), var(--surface);
  cursor: pointer; transition: .2s var(--ease); }
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background-color: var(--accent-bg); }
.dropzone .dz-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--brand-grad); color: #1a1203; display: grid; place-items: center; box-shadow: 0 12px 30px -12px rgba(245,165,36,.8); }
.dropzone strong { font-size: 1.1rem; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .dz-sub { color: var(--muted); font-size: .86rem; }
.dropzone.compact { padding: 18px; grid-template-columns: auto 1fr; text-align: left; }
.dropzone.compact .dz-icon { width: 44px; height: 44px; border-radius: 12px; }

.opts-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 18px; border-radius: var(--radius); background: var(--surface-2); margin: 18px 0; align-items: end; }
.opts-panel .full { grid-column: 1 / -1; }
.opts-panel label { margin-bottom: 6px; }
.opts-panel .val { float: right; color: var(--accent); font-weight: 700; font-family: var(--mono); font-size: .82rem; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font: 600 .86rem var(--font); color: var(--text-2); cursor: pointer; }
.seg button.on { background: var(--text); color: var(--bg); }

.tool-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0 0; }
.tool-actions .grow { flex: 1; }

.file-list { display: grid; gap: 8px; margin-top: 16px; }
.file-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.file-row .thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; flex-shrink: 0; color: var(--muted); overflow: hidden; }
.file-row .thumb img, .file-row .thumb canvas { width: 100%; height: 100%; object-fit: cover; }
.file-row .meta { flex: 1; min-width: 0; }
.file-row .meta b { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .meta small { color: var(--muted); font-size: .78rem; }
.file-row .saving { color: var(--ok); font-weight: 700; }
.file-row .up { color: var(--warn); font-weight: 700; }
.file-row .row-btns { display: flex; gap: 4px; }

.results { margin-top: 22px; }
.results:empty { display: none; }
.results-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.results-head h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.results-head h3 .ic { color: var(--ok); }
.out-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.out-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.out-card .prev { aspect-ratio: 4/3; background: conic-gradient(var(--surface-2) 25%, var(--surface) 0 50%, var(--surface-2) 0 75%, var(--surface) 0) 0 0/18px 18px; display: grid; place-items: center; overflow: hidden; }
.out-card .prev img, .out-card .prev canvas { max-width: 100%; max-height: 100%; object-fit: contain; }
.out-card .info { padding: 10px 12px; font-size: .8rem; }
.out-card .info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.out-card .btn { margin: 0 10px 10px; }

.progress-wrap { margin-top: 16px; }
.progress-wrap .progress { height: 10px; }
.progress-wrap .pl { display: flex; justify-content: space-between; font-size: .82rem; color: var(--muted); margin-top: 6px; }

.two-pane { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two-pane textarea { min-height: 320px; }
@media (max-width: 800px) { .two-pane { grid-template-columns: 1fr; } }
.pane-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; flex-wrap: wrap; }
.pane-label label { margin: 0; }
.out-box { min-height: 320px; padding: 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); overflow: auto; }
.out-box.prose { font-size: .95rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.stat-grid .stat { padding: 16px; }
.stat-grid .stat .v { font-size: 1.5rem; }

.preview-table { max-height: 460px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.preview-table table { border-collapse: collapse; width: 100%; font-size: .84rem; }
.preview-table th, .preview-table td { padding: 7px 11px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.preview-table th { position: sticky; top: 0; background: var(--surface-2); font-weight: 700; z-index: 1; cursor: pointer; }
.preview-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.preview-table tr:hover td { background: var(--accent-bg); }

.crop-stage { position: relative; display: inline-block; max-width: 100%; user-select: none; touch-action: none; line-height: 0; }
.crop-stage img { max-height: 60vh; width: auto; max-width: 100%; }
.crop-box { position: absolute; border: 2px solid var(--amber-400); box-shadow: 0 0 0 9999px rgba(6,11,22,.55); cursor: move; }
.crop-box .h { position: absolute; width: 14px; height: 14px; background: var(--amber-400); border: 2px solid #fff; border-radius: 4px; }
.crop-box .h.nw { left: -8px; top: -8px; cursor: nwse-resize; } .crop-box .h.ne { right: -8px; top: -8px; cursor: nesw-resize; }
.crop-box .h.sw { left: -8px; bottom: -8px; cursor: nesw-resize; } .crop-box .h.se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.stage-wrap { text-align: center; background: conic-gradient(var(--surface-2) 25%, var(--surface) 0 50%, var(--surface-2) 0 75%, var(--surface) 0) 0 0/20px 20px; border-radius: var(--radius); padding: 16px; border: 1px solid var(--border); overflow: hidden; }
.stage-wrap canvas, .stage-wrap img { max-height: 60vh; margin: 0 auto; }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; background: var(--surface); }
.swatch i { display: block; height: 70px; }
.swatch span { display: block; padding: 8px 10px; font: 600 .8rem var(--mono); }

.page-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.page-thumb { border: 2px solid var(--border); border-radius: 12px; padding: 8px; background: var(--surface); text-align: center; position: relative; cursor: grab; transition: border-color .15s; }
.page-thumb.sel { border-color: var(--err); opacity: .5; }
.page-thumb.dragging { opacity: .4; }
.page-thumb.over { border-color: var(--accent); }
.page-thumb canvas { width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow-sm); background: #fff; }
.page-thumb .pn { font-size: .78rem; font-weight: 700; margin-top: 6px; display: flex; justify-content: space-between; align-items: center; }
.page-thumb .pn button { border: 0; background: var(--surface-2); border-radius: 6px; cursor: pointer; padding: 2px 6px; color: var(--text); }

.diff-out { font-family: var(--mono); font-size: .86rem; white-space: pre-wrap; word-break: break-word; line-height: 1.7; }
.diff-out ins { background: var(--ok-bg); color: var(--ok); text-decoration: none; border-radius: 3px; }
.diff-out del { background: var(--err-bg); color: var(--err); border-radius: 3px; }
.regex-out mark { background: var(--amber-300); color: #1a1203; border-radius: 3px; padding: 0 1px; }
.hist { display: flex; align-items: flex-end; gap: 2px; height: 60px; margin-top: 8px; }
.hist i { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.col-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--surface); }
.col-card h4 { font-size: .95rem; margin: 0 0 4px; display: flex; justify-content: space-between; gap: 8px; }
.col-card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: .8rem; margin: 8px 0 0; }
.col-card dt { color: var(--muted); } .col-card dd { margin: 0; text-align: right; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; }
.corr { border-collapse: collapse; font-size: .75rem; }
.corr td, .corr th { padding: 6px 8px; text-align: center; border: 1px solid var(--border); font-family: var(--mono); }
.sent-bar { height: 12px; border-radius: 99px; overflow: hidden; display: flex; background: var(--surface-3); }
.sent-bar i { display: block; height: 100%; }
.qr-out { display: grid; place-items: center; padding: 24px; background: #fff; border-radius: 16px; border: 1px solid var(--border); }
.qr-out canvas, .qr-out img { image-rendering: pixelated; }
.mini-note { font-size: .82rem; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.mini-note .ic { color: var(--accent); margin-top: 2px; }