/* ── tools-kit.css — ส่วนประกอบ UI ร่วมของ tools รุ่นใหม่ (คู่กับ tools-kit.js) ──
 * ใช้ตัวแปรสีจาก tools.css (--ink --accent --border --cat ...) ห้ามคิดสีใหม่
 */
.tk-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:26px 16px;border:2px dashed var(--border-strong);border-radius:14px;background:var(--bg-soft);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.tk-drop:hover,.tk-drop.is-over{border-color:var(--cat,var(--ink));background:color-mix(in srgb,var(--cat,#000) 5%,#fff)}
.tk-drop i{font-size:34px;color:var(--cat,var(--ink))}
.tk-drop b{font-size:14.5px}
.tk-drop small{font-size:12.5px;color:var(--text-3)}
.tk-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.tk-drop .tk-drop-name{font-size:13px;color:var(--text-2);word-break:break-all}

.tk-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tk-actions .btn{width:auto;flex:0 1 auto}
.tk-grid{display:grid;gap:12px;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr))}
@media (max-width:640px){.tk-grid{grid-template-columns:repeat(min(var(--cols,2),2),minmax(0,1fr))}.tk-grid.tk-stack{grid-template-columns:minmax(0,1fr)}.tk-actions .btn{flex:1 1 100%}}

.tk-status{display:none;margin-top:12px;padding:10px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;background:var(--bg-mute);color:var(--text-2)}
.tk-status.is-on{display:block}
.tk-status.ok{background:#ECFDF5;color:#047857}
.tk-status.err{background:#FEF2F2;color:#B91C1C}
.tk-status.warn{background:#FFFBEB;color:#B45309}

.tk-progress{height:8px;border-radius:100px;background:var(--bg-mute);overflow:hidden;margin-top:10px}
.tk-progress>span{display:block;height:100%;width:0;background:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-dark);transition:width .2s}

.tk-preview{display:block;max-width:100%;max-height:520px;margin:0 auto;border-radius:10px;border:1px solid var(--border);background:repeating-conic-gradient(#F4F5F7 0 25%,#fff 0 50%) 50%/18px 18px}
video.tk-preview,audio.tk-preview{width:100%;background:#000}
audio.tk-preview{background:transparent;border:none}
.tk-canvas-wrap{position:relative;overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg-soft);text-align:center}
.tk-canvas-wrap canvas{max-width:100%;height:auto;display:inline-block;vertical-align:top}

.tk-stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.tk-stat{padding:12px 14px;background:#fff;border:1px solid var(--border);border-radius:12px}
.tk-stat b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);word-break:break-word}
.tk-stat span{font-size:12.5px;color:var(--text-3)}

.tk-list{display:flex;flex-direction:column;gap:8px}
.tk-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--border);border-radius:12px;font-size:13.5px;min-width:0}
.tk-item>.tk-grow{flex:1;min-width:0;word-break:break-word}
.tk-item img{width:56px;height:56px;object-fit:cover;border-radius:8px;flex-shrink:0}
.tk-item .btn{width:auto;min-height:0;padding:8px 12px;flex:0 0 auto}

.tk-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:#fff}
.tk-table{width:100%;border-collapse:collapse;font-size:13.5px}
.tk-table th,.tk-table td{padding:9px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.tk-table th{background:var(--bg-soft);font-weight:700;color:var(--text-2);white-space:nowrap}
.tk-table tr:last-child td{border-bottom:none}
.tk-table td.num,.tk-table th.num{text-align:right;white-space:nowrap}

.tk-code{width:100%;min-height:160px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--bg-soft);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-all;color:var(--text);resize:vertical}
pre.tk-code{margin:0;overflow:auto;max-height:480px}

.tk-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tk-tabs button{padding:8px 14px;border-radius:100px;border:1px solid var(--border-strong);background:#fff;font-family:inherit;font-size:13px;cursor:pointer;color:var(--text-2)}
.tk-tabs button.is-on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}

.tk-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:12px;font-weight:600;background:var(--bg-mute);color:var(--text-2)}
.tk-badge.good{background:#ECFDF5;color:#047857}
.tk-badge.bad{background:#FEF2F2;color:#B91C1C}
.tk-badge.lime{background:var(--accent-soft);color:#4D5F00}

.tk-note{margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--text-3)}
.tk-big{font-size:clamp(40px,9vw,84px);font-weight:800;letter-spacing:-.03em;line-height:1.04;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums}
.tk-range{width:100%;accent-color:var(--ink)}
.tk-swatch{width:100%;height:120px;border-radius:12px;border:1px solid var(--border)}
.tk-media-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start}
.tk-media-card img{width:120px;border-radius:10px;border:1px solid var(--border)}
@media (max-width:520px){.tk-media-card{grid-template-columns:minmax(0,1fr)}.tk-media-card img{width:100%}}
.tk-print-only{display:none}