/* Utility Tools — multi tool widget */
.ut-widget {
	--ut-accent: #2563eb;
	--ut-accent-hover: #1d4ed8;
	--ut-accent-2: #4f46e5;
	--ut-bg: #ffffff;
	--ut-bg-soft: #f8fafc;
	--ut-border: #e2e8f0;
	--ut-text: #0f172a;
	--ut-muted: #64748b;
	--ut-danger: #b91c1c;
	--ut-ok: #16a34a;
	max-width: 640px;
	margin: 1.5rem auto;
	background: var(--ut-bg);
	border: 1px solid var(--ut-border);
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
	color: var(--ut-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	overflow: hidden;
}
.ut-widget *, .ut-widget *::before, .ut-widget *::after { box-sizing: inherit; }

/* Topbar: tabs + language */
.ut-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0.9rem;
	background: var(--ut-bg-soft);
	border-bottom: 1px solid var(--ut-border);
	flex-wrap: wrap;
}
.ut-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ut-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.8rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ut-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ut-tab:hover { background: rgba(37, 99, 235, 0.08); color: var(--ut-text); }
.ut-tab.is-active {
	background: var(--ut-accent);
	color: #fff;
	border-color: var(--ut-accent);
	box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}
.ut-tab-ico { font-size: 0.95rem; line-height: 1; }
.ut-lang-select {
	padding: 0.45rem 0.6rem;
	font-size: 0.85rem;
	border: 1px solid var(--ut-border);
	border-radius: 9px;
	background: #fff;
	color: var(--ut-text);
	cursor: pointer;
}

/* Panels */
.ut-panel { padding: 1.4rem; }
.ut-title {
	margin: 0 0 1.2rem;
	font-size: 1.3rem;
	font-weight: 700;
	text-align: center;
}

/* Fields */
.ut-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.ut-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (max-width: 480px) {
	.ut-grid-3, .ut-grid-2 { grid-template-columns: 1fr; }
	.ut-tab span:not(.ut-tab-ico) { display: none; }
}
.ut-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.6rem; }
.ut-label {
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--ut-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.ut-field input[type="number"],
.ut-field input[type="text"],
.ut-field textarea,
.ut-field select {
	width: 100%;
	padding: 0.6rem 0.7rem;
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--ut-border);
	border-radius: 10px;
	background: var(--ut-bg-soft);
	color: var(--ut-text);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.ut-field input:focus, .ut-field textarea:focus, .ut-field select:focus {
	outline: none;
	border-color: var(--ut-accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
	background: #fff;
}
.ut-field textarea { resize: vertical; min-height: 4.5rem; }
.ut-field input[type="color"] { padding: 0.25rem; height: 2.7rem; cursor: pointer; }

.ut-options { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0.9rem 0; }
.ut-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; cursor: pointer; user-select: none; }
.ut-check-pad { align-self: end; padding-bottom: 0.7rem; }
.ut-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--ut-accent); cursor: pointer; }
.num-sortdir, .let-case { padding: 0.4rem 0.6rem; font-size: 0.88rem; border: 1px solid var(--ut-border); border-radius: 8px; background: var(--ut-bg-soft); cursor: pointer; }
.num-sortdir:disabled { opacity: 0.45; cursor: not-allowed; }

/* Buttons */
.ut-btn {
	width: 100%;
	padding: 0.82rem 1rem;
	font-size: 1.02rem;
	font-weight: 700;
	font-family: inherit;
	color: #fff;
	background: var(--ut-accent);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.15s, transform 0.05s;
}
.ut-btn:hover { background: var(--ut-accent-hover); }
.ut-btn:active { transform: translateY(1px); }
.ut-btn-ghost {
	width: auto;
	color: var(--ut-accent);
	background: transparent;
	border: 1px solid var(--ut-accent);
	padding: 0.55rem 0.9rem;
	font-size: 0.9rem;
}
.ut-btn-ghost:hover { background: var(--ut-accent); color: #fff; }

.ut-error {
	margin-top: 0.9rem;
	padding: 0.7rem 0.9rem;
	font-size: 0.9rem;
	color: var(--ut-danger);
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 10px;
}
.ut-hint { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--ut-muted); text-align: center; }

/* Results */
.ut-result { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px dashed var(--ut-border); text-align: center; }
.ut-balls { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: 1rem; }
.ut-ball {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	height: 3rem;
	padding: 0 0.6rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, var(--ut-accent), var(--ut-accent-2));
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
	animation: ut-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ut-pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.ut-copy {
	padding: 0.5rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ut-accent);
	background: transparent;
	border: 1px solid var(--ut-accent);
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.ut-copy:hover { background: var(--ut-accent); color: #fff; }
.ut-copy.is-copied { color: var(--ut-ok); border-color: var(--ut-ok); background: transparent; }

/* Raffle winners */
.raf-out { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.raf-winner {
	padding: 0.7rem 1rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ut-text);
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(79, 70, 229, 0.1));
	border: 1px solid rgba(37, 99, 235, 0.3);
	border-radius: 12px;
	animation: ut-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.raf-winner .raf-rank { color: var(--ut-accent); margin-right: 0.4rem; }

/* QR */
.qr-out { display: inline-block; padding: 0.8rem; background: #fff; border-radius: 12px; margin-bottom: 1rem; }
.qr-out img, .qr-out canvas { display: block; border-radius: 6px; }

/* QR reader */
.ut-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: 1.8rem 1rem;
	border: 2px dashed var(--ut-border);
	border-radius: 14px;
	background: var(--ut-bg-soft);
	transition: border-color 0.15s, background 0.15s;
}
.ut-drop.is-drag { border-color: var(--ut-accent); background: rgba(37, 99, 235, 0.05); }
.ut-drop-text { margin: 0; font-size: 0.9rem; color: var(--ut-muted); }
.qrr-cam-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 1rem; }
.qrr-video { width: 100%; max-width: 360px; border-radius: 12px; background: #000; }
.qrr-preview { max-width: 200px; border-radius: 10px; margin: 0 auto 1rem; }
.ut-readout {
	word-break: break-all;
	padding: 0.8rem 1rem;
	margin-bottom: 1rem;
	font-size: 1rem;
	background: var(--ut-bg-soft);
	border: 1px solid var(--ut-border);
	border-radius: 10px;
	text-align: left;
}
.ut-readout a { color: var(--ut-accent); }

/* Business names */
.biz-out { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (max-width: 480px) { .biz-out { grid-template-columns: 1fr; } }
.biz-name {
	padding: 0.7rem 0.9rem;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--ut-text);
	background: var(--ut-bg-soft);
	border: 1px solid var(--ut-border);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, transform 0.05s;
	animation: ut-pop 0.3s ease both;
}
.biz-name:hover { border-color: var(--ut-accent); background: rgba(37, 99, 235, 0.05); }
.biz-name.is-copied { border-color: var(--ut-ok); color: var(--ut-ok); }

/* Theme toggle button */
.ut-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	margin-right: 0.35rem;
	font-size: 1rem;
	line-height: 1;
	color: var(--ut-muted);
	background: transparent;
	border: 1px solid var(--ut-border);
	border-radius: 9px;
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ut-theme-toggle:hover { color: var(--ut-accent); border-color: var(--ut-accent); }
.ut-lang { display: flex; align-items: center; }

/* Dark theme (JS toggles .ut-dark; "auto" mode resolves to this when the OS is dark) */
.ut-widget.ut-dark {
	--ut-bg: #1e293b;
	--ut-bg-soft: #0f172a;
	--ut-border: #334155;
	--ut-text: #f1f5f9;
	--ut-muted: #94a3b8;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.ut-widget.ut-dark .ut-lang-select { background: #0f172a; }
.ut-widget.ut-dark .ut-field input:focus,
.ut-widget.ut-dark .ut-field textarea:focus,
.ut-widget.ut-dark .ut-field select:focus { background: #1e293b; }

/* Match theme: şeffaf zemin + sayfa/tema renklerini miras al */
.ut-widget.ut-match {
	--ut-bg: transparent;
	--ut-bg-soft: rgba(127, 127, 127, 0.08);
	--ut-border: rgba(127, 127, 127, 0.28);
	--ut-text: inherit;
	--ut-muted: rgba(127, 127, 127, 0.95);
	background: transparent;
	box-shadow: none;
	color: inherit;
}
.ut-widget.ut-match .ut-topbar { background: rgba(127, 127, 127, 0.06); }