/* ============================================================
   Hays Tone Generator v4.2.0 – tone-generator.css
   Fullwidth, no external fonts, Kiosko-compatible.
   ============================================================ */

.htg-wrap {
	--htg-bg:     #ffffff;
	--htg-border: #e8e8e8;
	--htg-text:   #111111;
	--htg-muted:  #888888;
	--htg-subtle: #f7f7f7;
	--htg-chakra: #c0392b;

	font-family:  inherit;
	font-size:    14px;
	color:        var(--htg-text);
	background:   var(--htg-bg);
	width:        100%;
	box-sizing:   border-box;
}
.htg-wrap *, .htg-wrap *::before, .htg-wrap *::after {
	box-sizing: border-box;
}

.htg-theme-dark {
	--htg-bg:     #0e0e0e;
	--htg-border: #222;
	--htg-text:   #f0f0f0;
	--htg-muted:  #666;
	--htg-subtle: #181818;
}

/* ── Preset pill row ──────────────────────────────────────── */
.htg-preset-row {
	display:        flex;
	border-bottom:  1px solid var(--htg-border);
	overflow-x:     auto;
	scrollbar-width: none;
}
.htg-preset-row::-webkit-scrollbar { display: none; }

.htg-preset-pill {
	flex:           1;
	min-width:      80px;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            3px;
	padding:        16px 8px 13px;
	background:     transparent;
	border:         none;
	border-right:   1px solid var(--htg-border);
	border-bottom:  3px solid transparent;
	cursor:         pointer;
	font-family:    inherit;
	transition:     border-color .2s, color .2s;
	white-space:    nowrap;
}
.htg-preset-pill:last-child { border-right: none; }

.htg-pill-hz {
	font-size:      13px;
	font-weight:    700;
	letter-spacing: .01em;
	color:          var(--htg-pill);
	opacity:        .45;
	transition:     opacity .2s;
}
.htg-pill-name {
	font-size:      10px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color:          var(--htg-muted);
	transition:     color .2s;
}

.htg-preset-pill:hover .htg-pill-hz { opacity: .8; }
.htg-preset-pill.htg-active .htg-pill-hz { opacity: 1; }
.htg-preset-pill.htg-active {
	border-bottom-color: var(--htg-pill);
}
.htg-preset-pill.htg-active .htg-pill-name { color: var(--htg-text); }

/* ── Info card ────────────────────────────────────────────── */
.htg-info {
	padding:       24px 0 20px;
	border-bottom: 1px solid var(--htg-border);
}

.htg-info-top {
	display:       flex;
	align-items:   flex-start;
	gap:           28px;
	margin-bottom: 20px;
}

.htg-info-hz {
	font-size:      64px;
	font-weight:    700;
	line-height:    1;
	letter-spacing: -.04em;
	color:          var(--htg-chakra);
	flex-shrink:    0;
	min-width:      130px;
	transition:     color .3s;
}

.htg-info-titles { padding-top: 6px; }
.htg-info-title-pl {
	font-size:      16px;
	font-weight:    600;
	margin-bottom:  3px;
}
.htg-info-title-en {
	font-size:      12px;
	color:          var(--htg-muted);
	letter-spacing: .05em;
	margin-bottom:  8px;
}
.htg-info-chakra {
	display:        inline-block;
	font-size:      10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          var(--htg-chakra);
	border:         1px solid var(--htg-chakra);
	padding:        3px 10px;
	transition:     color .3s, border-color .3s;
}

.htg-info-desc {
	font-size:   14px;
	line-height: 1.7;
	color:       var(--htg-muted);
	margin:      0 0 16px;
	max-width:   780px;
}

.htg-info-rows p {
	font-size:   13px;
	line-height: 1.6;
	color:       var(--htg-muted);
	margin:      0 0 6px;
}
.htg-info-rows b { color: var(--htg-text); font-weight: 600; }

/* ── Player ───────────────────────────────────────────────── */
.htg-player {
	padding:       28px 0 28px;
	border-bottom: 1px solid var(--htg-border);
}

.htg-display {
	display:       flex;
	align-items:   baseline;
	gap:           8px;
	margin-bottom: 24px;
}
.htg-freq-value {
	font-size:      64px;
	font-weight:    700;
	line-height:    1;
	letter-spacing: -.04em;
	color:          var(--htg-text);
	min-width:      4ch;
}
.htg-freq-unit {
	font-size:  22px;
	color:      var(--htg-muted);
}

/* Slider */
.htg-slider-row {
	display:       flex;
	align-items:   center;
	gap:           14px;
	margin-bottom: 14px;
}
.htg-octave-btn {
	background:  transparent;
	border:      1px solid var(--htg-border);
	color:       var(--htg-muted);
	cursor:      pointer;
	font-family: inherit;
	font-size:   12px;
	padding:     6px 12px;
	transition:  border-color .15s, color .15s;
	white-space: nowrap;
}
.htg-octave-btn:hover { border-color: var(--htg-chakra); color: var(--htg-chakra); }

.htg-slider {
	flex:               1;
	-webkit-appearance: none;
	appearance:         none;
	height:             2px;
	background:         linear-gradient(to right, var(--htg-chakra) var(--htg-pct,50%), var(--htg-border) var(--htg-pct,50%));
	outline:            none;
	cursor:             pointer;
	border-radius:      0;
}
.htg-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width:       18px;
	height:      18px;
	background:  var(--htg-chakra);
	border:      none;
	border-radius: 0;
	cursor:      pointer;
	transition:  transform .1s;
}
.htg-slider::-moz-range-thumb {
	width: 18px; height: 18px;
	background: var(--htg-chakra);
	border: none; border-radius: 0;
}
.htg-slider:hover::-webkit-slider-thumb { transform: scale(1.2); }

/* Fine steps */
.htg-fine-row {
	display:       flex;
	gap:           6px;
	margin-bottom: 28px;
}
.htg-step-btn {
	background:  transparent;
	border:      1px solid var(--htg-border);
	color:       var(--htg-muted);
	cursor:      pointer;
	font-family: inherit;
	font-size:   12px;
	padding:     5px 12px;
	transition:  border-color .15s, color .15s;
}
.htg-step-btn:hover { border-color: var(--htg-chakra); color: var(--htg-chakra); }

/* Bottom row */
.htg-bottom-row {
	display:     flex;
	align-items: center;
	gap:         24px;
	flex-wrap:   wrap;
}

.htg-wave-selector { display: flex; gap: 6px; }
.htg-wave-btn {
	background:  transparent;
	border:      1px solid var(--htg-border);
	color:       var(--htg-muted);
	cursor:      pointer;
	padding:     7px 9px;
	display:     flex;
	align-items: center;
	transition:  border-color .15s, color .15s;
}
.htg-wave-btn svg { width: 40px; height: 20px; display: block; }
.htg-wave-btn:hover,
.htg-wave-btn.htg-active { border-color: var(--htg-chakra); color: var(--htg-chakra); }

.htg-volume-wrap {
	display:     flex;
	align-items: center;
	gap:         10px;
	flex:        1;
	min-width:   140px;
	color:       var(--htg-muted);
}
.htg-volume {
	flex:               1;
	-webkit-appearance: none;
	appearance:         none;
	height:             2px;
	background:         linear-gradient(to right, var(--htg-muted) var(--htg-vol-pct,50%), var(--htg-border) var(--htg-vol-pct,50%));
	outline:            none;
	cursor:             pointer;
	border-radius:      0;
}
.htg-volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px; height: 14px;
	background: var(--htg-muted);
	border: none; border-radius: 0; cursor: pointer;
}
.htg-volume::-moz-range-thumb {
	width: 14px; height: 14px;
	background: var(--htg-muted);
	border: none; border-radius: 0;
}

.htg-play-btn {
	width:           64px;
	height:          64px;
	border:          2px solid var(--htg-text);
	background:      transparent;
	color:           var(--htg-text);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border-radius:   50%;
	flex-shrink:     0;
	transition:      background .2s, color .2s, border-color .2s;
}
.htg-play-btn svg { width: 26px; height: 26px; }
.htg-play-btn:hover { background: var(--htg-text); color: var(--htg-bg); }
.htg-play-btn.htg-playing {
	background:   var(--htg-chakra);
	border-color: var(--htg-chakra);
	color:        #fff;
	animation:    htg-pulse 2s ease-in-out infinite;
}
@keyframes htg-pulse {
	0%,100% { opacity: 1; }
	50%      { opacity: .7; }
}

/* ── Footer: warning + instructions ──────────────────────── */
.htg-footer {
	padding:    28px 0 32px;
	background: var(--htg-subtle);
	border-top: 1px solid var(--htg-border);
}

.htg-instructions ul {
	margin:      0;
	padding:     0;
	list-style:  none;
	display:     grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap:         6px 32px;
}
.htg-instructions li {
	font-size:   13px;
	line-height: 1.6;
	color:       var(--htg-muted);
	padding-left: 16px;
	position:    relative;
}
.htg-instructions li::before {
	content:  '–';
	position: absolute;
	left:     0;
	color:    var(--htg-chakra);
	transition: color .3s;
}
.htg-instructions b { color: var(--htg-text); font-weight: 600; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
	.htg-info-hz, .htg-freq-value { font-size: 44px; }
	.htg-info-hz { min-width: 90px; }
	.htg-pill-name { display: none; }
	.htg-preset-pill { min-width: 52px; }
	.htg-wave-btn svg { width: 30px; height: 15px; }
	.htg-instructions ul { grid-template-columns: 1fr; }
}

/* ── iOS banner ───────────────────────────────────────────── */
.htg-ios-banner {
	display:     flex;
	gap:         10px;
	align-items: flex-start;
	padding:     14px 0;
	border-bottom: 1px solid var(--htg-border);
	color:       var(--htg-muted);
	font-size:   13px;
	line-height: 1.55;
}
.htg-ios-banner svg { flex-shrink: 0; margin-top: 2px; }

/* ── iOS MP3 preset player ────────────────────────────────── */
.htg-ios-player {
	padding:       0;
	border-bottom: 1px solid var(--htg-border);
}
.htg-ios-row {
	border-bottom: 1px solid var(--htg-border);
}
.htg-ios-row:last-child { border-bottom: none; }

.htg-ios-play-btn {
	width:          100%;
	display:        flex;
	align-items:    center;
	gap:            16px;
	padding:        16px 0;
	background:     transparent;
	border:         none;
	cursor:         pointer;
	font-family:    inherit;
	text-align:     left;
	transition:     background .15s;
}
.htg-ios-play-btn:active { background: var(--htg-subtle); }

.htg-ios-hz {
	font-size:   15px;
	font-weight: 700;
	color:       var(--htg-pill);
	min-width:   68px;
	flex-shrink: 0;
}
.htg-ios-name {
	font-size:      11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color:          var(--htg-muted);
	flex:           1;
}
.htg-ios-icon {
	flex-shrink: 0;
	width:       36px;
	height:      36px;
	border:      1px solid var(--htg-border);
	border-radius: 50%;
	display:     flex;
	align-items: center;
	justify-content: center;
	color:       var(--htg-muted);
	transition:  border-color .15s, color .15s;
}
.htg-ios-icon svg { width: 18px; height: 18px; }

.htg-ios-play-btn.htg-ios-playing .htg-ios-icon {
	border-color: var(--htg-pill);
	color:        var(--htg-pill);
}
.htg-ios-play-btn.htg-ios-playing .htg-ios-hz {
	color: var(--htg-pill);
}

/* ── iOS notice ───────────────────────────────────────────── */
.htg-ios-notice {
	font-size:   12px;
	color:       var(--htg-muted);
	margin:      12px 0 0;
	font-style:  italic;
}