/* WBG Tool UI. Inherits theme vars when present; falls back to its own. */
.wbg-tool{
	--wbg-ink:var(--ink,#16181d);
	--wbg-muted:var(--muted,#5a6170);
	--wbg-accent:var(--accent,#2554e0);
	--wbg-line:var(--line,#e8eaee);
	--wbg-check:repeating-conic-gradient(#f1f2f5 0 25%,#fff 0 50%) 0 0/16px 16px;
	max-width:640px;margin:0 auto;font-size:15px;color:var(--wbg-ink);
}
.wbg-tool__heading{margin:0 0 10px;font-weight:600}
.wbg-bar{display:flex;justify-content:center;margin-bottom:12px}
.wbg-mode{display:inline-flex;border:1px solid var(--wbg-line);border-radius:999px;padding:3px;background:#fff}
.wbg-mode__btn{border:0;background:transparent;padding:6px 18px;border-radius:999px;cursor:pointer;font:inherit;color:var(--wbg-muted)}
.wbg-mode__btn.is-on{background:var(--wbg-accent);color:#fff}
.wbg-drop{
	border:1.5px dashed var(--wbg-line);border-radius:14px;padding:44px 20px;text-align:center;
	background:var(--wbg-check);color:var(--wbg-muted);transition:border-color .15s;
}
.wbg-drop.is-over{border-color:var(--wbg-accent)}
.wbg-drop svg{color:var(--wbg-accent);margin-bottom:6px}
.wbg-drop__title{margin:0;font-weight:600;color:var(--wbg-ink)}
.wbg-drop__or{margin:6px 0 12px;font-size:13px}
.wbg-privacy{margin:10px 0 0;text-align:center;font-size:13px;color:var(--wbg-muted)}
.wbg-btn{
	display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;cursor:pointer;
	background:var(--wbg-accent);color:#fff;padding:11px 22px;font:inherit;font-weight:600;
}
.wbg-btn:hover{filter:brightness(1.08)}
.wbg-btn--ghost{background:#fff;color:var(--wbg-ink);border:1px solid var(--wbg-line)}
.wbg-btn--ghost:hover{border-color:var(--wbg-accent);color:var(--wbg-accent);filter:none}
.wbg-prog{margin-top:16px;text-align:center}
.wbg-prog__bar{height:8px;border-radius:99px;background:var(--wbg-line);overflow:hidden}
.wbg-prog__bar span{display:block;height:100%;width:4%;background:var(--wbg-accent);border-radius:99px;transition:width .25s}
.wbg-prog__txt{margin:10px 0 2px;font-weight:600}
.wbg-prog__hint{margin:0;font-size:12.5px;color:var(--wbg-muted)}
.wbg-stage{margin-top:8px}
.wbg-canvas{display:block;max-width:100%;height:auto;margin:0 auto;border:1px solid var(--wbg-line);border-radius:12px}
.wbg-canvas.is-alpha{background:var(--wbg-check)}
.wbg-controls{margin-top:16px;display:grid;gap:14px}
.wbg-group__label{display:block;font-size:12.5px;font-weight:600;color:var(--wbg-muted);margin-bottom:6px}
.wbg-chips{display:flex;flex-wrap:wrap;gap:8px}
.wbg-chip{
	position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--wbg-line);
	background:#fff;border-radius:999px;padding:7px 14px;cursor:pointer;font:inherit;font-size:13.5px;color:var(--wbg-ink);
}
.wbg-chip.is-on{border-color:var(--wbg-accent);box-shadow:inset 0 0 0 1px var(--wbg-accent)}
.wbg-chip__dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--wbg-line);display:inline-block}
.wbg-chip__dot--alpha{background:var(--wbg-check)}
.wbg-color-input{position:absolute;inset:0;opacity:0;cursor:pointer}
.wbg-actions{display:flex;flex-wrap:wrap;gap:10px;padding-top:2px}
.wbg-error{color:#b3261e;text-align:center;margin-top:12px}

/* color download grid */
.wbg-colors{display:grid;gap:14px;margin:8px 0}
.wbg-colors__swatch{height:120px;border:1px solid var(--line,#e8eaee);border-radius:12px}
.wbg-colors__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:-4px}
.wbg-colors__hex{font-size:13.5px;background:#f6f7f9;border:1px solid var(--line,#e8eaee);border-radius:7px;padding:5px 10px}
.wbg-colors__meta .wbg-btn{padding:6px 12px;font-size:13px;font-weight:500}
.wbg-colors__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.wbg-colors__grid .wbg-btn{justify-content:center}
.wbg-colors__grid .wbg-btn span{font-weight:400;opacity:.85}

@media (prefers-reduced-motion:reduce){
	.wbg-prog__bar span,.wbg-drop{transition:none}
}

/* v1.5: batch grid + effects */
.wbg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:6px}
.wbg-grid.is-single{grid-template-columns:1fr}
.wbg-cell{min-width:0}
.wbg-drop__hintline{margin:2px 0 0;font-size:12.5px;color:var(--wbg-muted)}
.wbg-chip__dot--blur{background:linear-gradient(135deg,#cdd6e4 20%,#f2f5fa 80%);filter:blur(0.6px)}

/* v1.6: contrast checker */
.wbg-contrast{max-width:640px;margin:0 auto;display:grid;gap:14px}
.wbg-contrast__io{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.wbg-contrast__field{display:grid;gap:6px;flex:1;min-width:180px}
.wbg-contrast__field>span:first-child{font-size:12.5px;font-weight:600;color:var(--wbg-muted)}
.wbg-contrast__pick{display:flex;gap:8px;align-items:center;border:1px solid var(--wbg-line);border-radius:10px;padding:6px 8px;background:#fff}
.wbg-contrast__pick input[type=color]{width:34px;height:30px;border:0;background:none;padding:0;cursor:pointer}
.wbg-contrast__pick input[type=text]{border:0;outline:none;font:inherit;font-size:14.5px;width:90px;text-transform:uppercase}
.wbg-contrast__swap{padding:9px 13px}
.wbg-contrast__sample{border:1px solid var(--wbg-line);border-radius:14px;padding:22px;transition:background .15s,color .15s}
.wbg-contrast__big{margin:0 0 6px;font-size:24px;font-weight:700}
.wbg-contrast__small{margin:0;font-size:15px}
.wbg-contrast__ratio{text-align:center;font-size:15px;color:var(--wbg-muted)}
.wbg-contrast__ratio b{font-size:30px;color:var(--wbg-ink)}
.wbg-contrast__verdicts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.wbg-contrast__verdicts span{border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;border:1px solid var(--wbg-line)}
.wbg-contrast__verdicts .is-pass{background:#e7f6ec;color:#1a7f37;border-color:#bfe6cb}
.wbg-contrast__verdicts .is-fail{background:#fdecea;color:#b3261e;border-color:#f5c6c0}