/* Speaker Tools — compact interface modelled on fixmyspeakers.com */
.st-tool {
	--st-accent: #0d7bff;
	--st-line: #dcdcdc;
	--st-gray: #f4f4f4;
	max-width: 340px;
	margin: 16px auto;
	color: #222;
	text-align: center;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.3;
}
.st-tool *, .st-tool *::before, .st-tool *::after { box-sizing: border-box; font-family: inherit; }
.st-tool[data-st-tool="surround-test"] { max-width: 560px; }
.st-tool[data-st-tool="tone-generator"] { max-width: 400px; }
.st-tool[hidden], .st-tool [hidden] { display: none !important; }
.st-foot { margin: 14px 0 0; color: #222; font-size: 12px; }

/* Buttons (beats theme button styles incl. hover/focus) */
.st-tool .st-b, .st-tool .st-b:hover, .st-tool .st-b:focus {
	background: var(--b-bg, #fff);
	color: var(--b-fg, #222);
	border: 1px solid var(--b-bd, var(--st-line));
	border-radius: var(--b-r, 6px);
	box-shadow: none; text-shadow: none; text-transform: none; letter-spacing: normal;
	font: inherit; line-height: 1.2; margin: 0; width: auto; min-width: 0; min-height: 0; transform: none; cursor: pointer;
}
.st-tool .st-b:hover { --b-bd: #9fc4f5; }
.st-tool .st-b:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }

/* Toolbar */
.st-bar { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.st-bar select.st-b { height: 36px; padding: 0 8px; font-size: 14px; text-align: left; -webkit-appearance: menulist; appearance: menulist; }
.st-bar .st-sound { flex: 1 1 auto; min-width: 0; }
.st-bar .st-layout { flex: 0 0 auto; }
.st-tool .st-iconbtn { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.st-iconbtn svg { width: 20px; height: 20px; }
.st-tool .st-loop { --b-bd: var(--st-accent); --b-fg: var(--st-accent); font-size: 24px; font-weight: 700; }
.st-tool .st-loop:hover { --b-bd: var(--st-accent); }
.st-tool .st-iconbtn.is-on { --b-bg: #e3f0ff; --b-bd: var(--st-accent); }

/* Stereo cards */
.st-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-tool .st-card { --b-r: 4px; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 8px; }
.st-card .st-ico { display: block; line-height: 0; }
.st-card .st-ico svg { width: 40px; height: 35px; }
.st-card.st-c-l .st-ico svg { transform: scaleX(-1); }
.st-cap { font-size: 10px; letter-spacing: 0; text-transform: uppercase; color: #555; }
.st-tool .st-card.is-active { --b-bg: #eaf3ff; --b-bd: var(--st-accent); }

/* Surround grid */
.st-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 62px; grid-auto-rows: 72px; gap: 8px; background: #fff; border-radius: 8px; overflow: hidden; }
.st-top { grid-column: 1 / 3; grid-row: 1 / 3; background: var(--st-gray); border-radius: 8px 8px 0 0; }
.st-vline { grid-column: 1 / 3; grid-row: 2; justify-self: center; align-self: stretch; width: 8px; background: #fff; z-index: 1; }
.st-tool .st-cell { --b-bg: var(--st-gray); --b-bd: transparent; --b-r: 0; display: flex; align-items: center; justify-content: center; padding: 4px; position: relative; z-index: 2; }
.st-tool .st-cell:hover { --b-bd: transparent; --b-bg: #e9f2ff; }
.st-tool .st-cell.is-active, .st-tool .st-cell.is-active:hover { --b-bg: #cfe4ff; }
.st-cell.st-c-l { grid-column: 1; }
.st-cell.st-c-r { grid-column: 2; }
.st-tool .st-cell.st-c-c, .st-tool .st-cell.st-c-c:hover, .st-tool .st-cell.st-c-c:focus { grid-column: 1 / 3; grid-row: 1; justify-self: center; width: 62%; height: 54px; box-shadow: 0 0 0 7px #fff; }
.st-tool .st-cell.st-c-sub, .st-tool .st-cell.st-c-sub:hover, .st-tool .st-cell.st-c-sub:focus { grid-column: 1 / 3; grid-row: 1; justify-self: end; width: 19%; height: 32px; margin-right: 3%; box-shadow: 0 0 0 7px #fff; z-index: 3; }
.st-tool .st-cell.st-r2 { grid-row: 2; z-index: 0; }
.st-tool .st-cell.st-r3 { grid-row: 3; }
.st-tool .st-cell.st-r4 { grid-row: 4; }
.st-tool .st-cell.st-r3.st-c-l, .st-tool .st-cell.st-r4.st-c-l { border-radius: 0 0 0 8px; }
.st-tool .st-cell.st-r3.st-c-r, .st-tool .st-cell.st-r4.st-c-r { border-radius: 0 0 8px 0; }
.st-grid[data-layout="7.1"] .st-cell.st-r3 { border-radius: 0 !important; }
.st-cell .st-cap { color: #000; font-size: 11px; }

/* Tone generator */
.st-tonecard { background: #fff; border: 1px solid var(--st-line); border-radius: 6px; padding: 14px; }
.st-tool select.st-wide { width: 100%; height: 36px; padding: 0 8px; font-size: 14px; text-align: left; -webkit-appearance: menulist; appearance: menulist; }
.st-readout { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 8px 0 2px; }
.st-freq-input { width: 5ch; padding: 0; border: 0; background: transparent; color: #222; font-size: 34px; font-weight: 700; text-align: right; line-height: 1.1; -moz-appearance: textfield; box-shadow: none; }
.st-freq-input::-webkit-outer-spin-button, .st-freq-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-freq-input:focus { outline: none; box-shadow: none; }
.st-unit { font-size: 16px; color: #555; }
.st-freq-range, .st-vol { width: 100%; accent-color: var(--st-accent); margin: 2px 0; }
.st-range-labels { display: flex; justify-content: space-between; font-size: 10px; color: #888; }
.st-presets { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 10px 0; }
.st-tool .st-chip { --b-bg: var(--st-gray); --b-r: 999px; padding: 3px 8px; font-size: 12px; }
.st-tool .st-chip.is-active, .st-tool .st-chip.is-active:hover { --b-bg: #fff; --b-bd: var(--st-accent); }
.st-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; text-align: left; }
.st-row .st-label { flex: 0 0 auto; font-size: 12px; color: #555; }
.st-row .st-vol { flex: 1; }
.st-tool .st-playcard { --b-r: 4px; width: 100%; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.st-play-ico { width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #000; }
.st-playcard.is-active .st-play-ico { width: 20px; height: 20px; border: 0; background: #000; }
.st-tool .st-playcard.is-active { --b-bg: #eaf3ff; --b-bd: var(--st-accent); }
.st-tool select.st-select, .st-tool input.st-select { padding: 4px 6px; border: 1px solid var(--st-line); border-radius: 6px; background: #fff; color: #222; font: inherit; font-size: 12px; }

/* Water ejector */
.st-tool[data-st-tool="ejector"] { max-width: 680px; background: #243240; border-radius: 10px; color: #fff; padding: 28px 20px 24px; }
.st-ejector { display: flex; flex-direction: column; min-height: 480px; }
.st-ej-title { margin: 0; color: #fff; font-size: 28px; font-weight: 700; line-height: 1.2; }
.st-ej-sub { margin: 12px 0 0; color: #f0f4f8; font-size: 16px; }
.st-ej-stage { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; align-items: center; }
.st-tool .st-big-btn, .st-tool .st-big-btn:hover, .st-tool .st-big-btn:focus {
	width: unset; padding: 20px 42px; background: #fff; color: inherit; border: none; outline: none;
	box-shadow: 0 0 5px #0000001a; border-radius: 100px; font-size: 52px; line-height: 1; margin: 0 0 12px; cursor: pointer;
}
.st-tool .st-big-btn:hover { box-shadow: 0 0 12px rgba(255, 255, 255, 0.35); }
.st-tool .st-big-btn:active { transform: scale(0.97); }
.st-tool .st-big-btn:focus-visible { outline: 2px solid #7cc0ff; outline-offset: 3px; }
.st-big-icon { display: block; font-size: 52px; line-height: 1; }
.st-big-label { margin: 0; font-size: 12px; color: #cdd7e1; }
.st-tool .st-big-btn.is-active, .st-tool .st-big-btn.is-active:hover { background: #fee2e2; animation: st-pulse 1s infinite; }
@keyframes st-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); } 70% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.st-progress { height: 4px; margin: 8px auto 0; width: 100%; max-width: 320px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.st-progress-bar { height: 100%; width: 0; background: #5cc8ff; transition: width 0.1s linear; }
.st-ejector .st-row .st-label { color: #e6edf4; }
.st-note.st-warn { padding: 8px; background: #fff7e6; border: 1px solid #ffd591; border-radius: 6px; color: #7a4a00; font-size: 12px; }

@media (max-width: 480px) {
	.st-tool { margin: 12px auto; }
	.st-ejector { min-height: 400px; }
	.st-ej-title { font-size: 24px; }
	.st-tool .st-big-btn, .st-tool .st-big-btn:hover, .st-tool .st-big-btn:focus { padding: 16px 32px; font-size: 44px; }
	.st-big-icon { font-size: 44px; }
	.st-grid { grid-template-rows: 56px; grid-auto-rows: 64px; }
	.st-tool .st-cell.st-c-c { height: 48px; }
	.st-tool .st-cell.st-c-sub { width: 24%; height: 30px; }
	.st-cell .st-cap { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .st-tool .st-big-btn.is-active { animation: none; } }