/* Страница «Фонетика» */
.oe-ph { --blue: #008ada; --ink: #26323a; --mute: #6b808c; --line: #e6edf2; --bg: #f5f9fc; --vowel: #008ada; --diph: #7a5af8; --voiceless: #e8890c; --voiced: #158a56; margin-bottom: 20px; }
.oe-ph [hidden] { display: none !important; }
.oe-ph__hero { padding: 22px; border-radius: 16px; background: linear-gradient(135deg, #e8f4fd, #f5fbff); margin-bottom: 16px; }
.oe-ph__lead { margin-bottom: 14px; color: var(--mute); font-size: 15px; }
.oe-ph__lead strong { color: var(--ink); font-size: 22px; }
.oe-ph__search { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(0, 80, 130, .08); color: var(--mute); }
.oe-ph__search:focus-within { border-color: var(--blue); }
.oe-ph__search svg { width: 20px; height: 20px; flex: none; }
.oe-ph__search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 14px 0; font-size: 17px; background: none; color: var(--ink); }

.oe-ph__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.oe-ph__tabs button { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; cursor: pointer; transition: all .12s; }
.oe-ph__tabs button span { margin-left: 4px; color: var(--mute); font-size: 12px; }
.oe-ph__tabs button:hover { border-color: var(--blue); }
.oe-ph__tabs button.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.oe-ph__tabs button.is-active span { color: rgba(255, 255, 255, .8); }

.oe-ph__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 2px 12px; font-size: 13px; color: var(--mute); }
.oe-ph__dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--c, var(--blue)); }
.oe-ph__dot.is-vowel, .is-vowel { --c: var(--vowel); }
.oe-ph__dot.is-diph, .is-diph { --c: var(--diph); }
.oe-ph__dot.is-voiceless, .is-voiceless { --c: var(--voiceless); }
.oe-ph__dot.is-voiced, .is-voiced { --c: var(--voiced); }

.oe-ph__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-bottom: 8px; }
.oe-ph__tile { padding: 12px 4px; border: 1.5px solid var(--line); border-bottom: 3px solid var(--c); border-radius: 12px; background: #fff; color: var(--ink); font-size: 20px; font-family: "Lucida Sans Unicode", "Segoe UI", Arial, sans-serif; cursor: pointer; transition: transform .1s, box-shadow .1s, border-color .1s; }
.oe-ph__tile:hover { border-color: var(--c); box-shadow: 0 3px 12px rgba(0, 0, 0, .1); transform: translateY(-1px); }
.oe-ph__tile.is-active { background: var(--c); border-color: var(--c); color: #fff; }
.oe-ph__status { min-height: 22px; margin: 4px 2px 8px; color: var(--mute); font-size: 14px; }

.oe-ph__h { margin: 22px 0 12px; font-size: 22px; color: var(--ink); }
.oe-ph__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.oe-snd { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 14px; background: #fff; scroll-margin-top: 90px; transition: box-shadow .2s, border-color .2s; }
.oe-snd.is-flash { box-shadow: 0 0 0 3px var(--c), 0 8px 24px rgba(0, 0, 0, .12); }
.oe-snd__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.oe-snd__ipa { font-size: 30px; line-height: 1; color: var(--c); font-family: "Lucida Sans Unicode", "Segoe UI", Arial, sans-serif; }
.oe-snd__type { padding: 1px 8px; border-radius: 6px; background: var(--bg); color: var(--mute); font-size: 12px; }
.oe-snd__words { display: flex; flex-wrap: wrap; gap: 6px; }
.oe-snd__word { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 15px; cursor: pointer; transition: border-color .12s, background .12s; }
.oe-snd__word svg { width: 14px; height: 14px; color: var(--c); flex: none; }
.oe-snd__word small { color: var(--mute); font-size: 12px; }
.oe-snd__word:hover { border-color: var(--c); background: #fff; }
.oe-snd__word.is-playing { border-color: var(--c); background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }
.oe-snd__info { margin: 0; font-size: 14px; line-height: 1.45; }
.oe-snd__info dt { margin-top: 6px; color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.oe-snd__info dd { margin: 1px 0 0; color: var(--ink); }
.oe-ph__empty { padding: 20px; text-align: center; color: var(--mute); }

@media (max-width: 600px) {
	.oe-ph__hero { padding: 16px; }
	.oe-ph__tiles { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
	.oe-ph__grid { grid-template-columns: 1fr; }
}