/* Фонограм — стиль
   Санаа: тайзны дууны пульт. Мөр бүр нь пультын суваг шиг: статусын гэрэл (LED),
   нэр, урт, үйлдэл. Нүүрний долгион: доод хэсэг нь хөгжим, дээд тасархай хэсэг нь
   арилгасан хоолой. */

@font-face { font-family: "Oswald"; font-weight: 600; font-display: swap;
  src: url(fonts/oswald-cyrillic-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Oswald"; font-weight: 600; font-display: swap;
  src: url(fonts/oswald-cyrillic-600-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-weight: 600; font-display: swap;
  src: url(fonts/oswald-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Golos"; font-weight: 400; font-display: swap;
  src: url(fonts/golos-text-cyrillic-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Golos"; font-weight: 400; font-display: swap;
  src: url(fonts/golos-text-cyrillic-400-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos"; font-weight: 400; font-display: swap;
  src: url(fonts/golos-text-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Golos"; font-weight: 600; font-display: swap;
  src: url(fonts/golos-text-cyrillic-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Golos"; font-weight: 600; font-display: swap;
  src: url(fonts/golos-text-cyrillic-600-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos"; font-weight: 600; font-display: swap;
  src: url(fonts/golos-text-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --paper: #f4f6fb;
  --surface: #ffffff;
  --ink: #15172a;
  --muted: #565c78;
  --line: #d9ddea;
  --cobalt: #2340c9;
  --cobalt-deep: #172c8f;
  --on-cobalt: #ffffff;
  --amber: #e2930a;
  --ready: #15905b;
  --off: #a2a7bb;
  --focus: #f2b134;
  --radius: 6px;
  --display: "Oswald", "Arial Narrow", sans-serif;
  --body: "Golos", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #11142b;
    --surface: #191d3a;
    --ink: #eceefa;
    --muted: #a6abc7;
    --line: #2c3159;
    --cobalt: #3a5bf0;
    --cobalt-deep: #1c2c86;
    --amber: #f0a92a;
    --ready: #2fbf80;
    --off: #5d6283;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.55 var(--body); min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
img, svg { display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

/* --- Дээд мөр --- */
.topbar { border-bottom: 1px solid var(--line); background: var(--surface); }
.home .topbar { background: var(--cobalt); border-color: transparent; color: var(--on-cobalt); }
.topbar-in { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none;
  font: 600 1.35rem/1 var(--display); letter-spacing: .01em; }
.wordmark-mark { width: 26px; height: 26px; fill: currentColor; }
.wordmark-mark .cut { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 2 1.6; }
.toplinks { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.toplink { font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.toplink:hover { text-decoration: underline; }
.toplinks + .topsearch { margin-left: 0; }
.topsearch { margin-left: auto; flex: 0 1 340px; }
.topsearch input { width: 100%; }

input[type="search"], textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
}
input[type="search"]:focus, textarea:focus { border-color: var(--cobalt); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 25%, transparent); }

/* --- Нүүр: hero --- */
.hero { background: var(--cobalt); color: var(--on-cobalt); padding: 56px 0 0; overflow: hidden; }
.hero-title {
  font: 600 clamp(3.2rem, 11vw, 8.5rem)/.92 var(--display);
  letter-spacing: -.01em; margin: 0 0 20px; max-width: 12ch;
}
.hero-sub { font-size: 1.15rem; max-width: 42ch; margin: 0 0 28px; opacity: .9; }
.bigsearch { display: flex; gap: 8px; max-width: 640px; }
.bigsearch input {
  flex: 1; min-width: 0; font-size: 1.1rem; padding: 15px 16px;
  background: var(--surface); border-color: transparent;
}
.bigsearch button, .btn-primary {
  font: 600 1rem/1 var(--body); border: 0; border-radius: var(--radius); cursor: pointer;
}
.bigsearch button { padding: 0 26px; background: var(--ink); color: var(--paper); }
.bigsearch button:hover { background: #000; }
.hero-count { margin: 16px 0 0; font-size: .95rem; opacity: .8; }
.hero-count a { color: inherit; font-weight: 600; }

.wave { width: 100%; height: 120px; margin-top: 40px; }
.wave .w-music { fill: var(--on-cobalt); opacity: .92; transform-origin: bottom; transform-box: fill-box; }
.wave .w-voice { fill: none; stroke: var(--on-cobalt); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .wave .w-music { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .wave rect:nth-child(4n) { animation-delay: .06s; } .wave rect:nth-child(4n+1) { animation-delay: .12s; }
  .wave rect:nth-child(4n+2) { animation-delay: .18s; }
  @keyframes rise { from { transform: scaleY(.05); } to { transform: scaleY(1); } }
}

/* --- Жагсаалт (пультын сувгууд) --- */
.home-lists { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); padding: 48px 0 64px; }
.sec-title { font: 600 1.6rem/1.1 var(--display); margin: 0 0 14px; }
.about { max-width: 60ch; color: var(--muted); }
.about .sec-title { color: var(--ink); }
.about ul { padding-left: 1.1em; margin: 0 0 12px; }
.about li { margin: 0 0 4px; }
.track-latin { margin: -8px 0 14px; color: var(--muted); font-size: .9rem; }
.track-artist a { text-decoration: none; }
.track-artist a:hover { text-decoration: underline; }
.track-kind { font: 600 .35em/1 var(--body); color: var(--muted); letter-spacing: .02em; vertical-align: middle;
  white-space: nowrap; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 10px 52px minmax(0, 1fr) auto auto 40px;
  padding: 10px 4px; border-bottom: 1px solid var(--line);
}
.row:hover { background: color-mix(in srgb, var(--cobalt) 5%, transparent); }
.row-cover img { width: 52px; height: 52px; border-radius: 4px; }
.row-main { text-decoration: none; min-width: 0; display: flex; flex-direction: column; }
.row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-artist { color: var(--muted); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-dur { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .92rem; }
.row-state { color: var(--muted); font-size: .85rem; min-width: 88px; text-align: right; }
.row-go { font-size: .9rem; font-weight: 600; color: var(--cobalt); text-decoration: none; justify-self: end; }
.row-go:hover { text-decoration: underline; }

.led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--off); flex: none; }
.led-ready { background: var(--ready); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ready) 22%, transparent); }
.led-listed { background: var(--amber); }
.led-queued, .led-processing { background: var(--cobalt); }
@media (prefers-reduced-motion: no-preference) {
  .led-queued, .led-processing { animation: blink 1.2s ease-in-out infinite; }
  @keyframes blink { 50% { opacity: .25; } }
}

.play {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--cobalt);
  background: transparent; color: var(--cobalt); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.play svg { width: 16px; height: 16px; fill: currentColor; }
.play .i-pause { display: none; }
.play.is-playing { background: var(--cobalt); color: var(--on-cobalt); }
.play.is-playing .i-play { display: none; }
.play.is-playing .i-pause { display: inline; }

/* --- Хуудас --- */
.page { padding: 40px 0 72px; }
.page-title { font: 600 clamp(2rem, 5vw, 3rem)/1.05 var(--display); margin: 0 0 20px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.legend .led { margin-right: 8px; vertical-align: 0; }
.note { color: var(--muted); font-size: .95rem; }
.empty { padding: 24px 0; max-width: 60ch; }
.also { margin: 18px 0 0; color: var(--muted); font-size: .85rem; max-width: 60ch; }
.more { margin: 14px 0 0; font-weight: 600; }
.more a { color: var(--cobalt); text-decoration: none; }
.more a:hover { text-decoration: underline; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 0; font-variant-numeric: tabular-nums; }
.pager a, .pager b { min-width: 40px; padding: 9px 10px; text-align: center; border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; }
.pager a:hover { border-color: var(--cobalt); }
.pager b { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* --- Дууны хуудас --- */
.track { display: grid; gap: 40px; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
.track-cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--radius); }
.track-artist { margin: 0; color: var(--muted); font-size: 1.1rem; }
.track-title { font: 600 clamp(2.4rem, 6vw, 4.2rem)/1 var(--display); margin: 4px 0 16px; }
.track-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 0 0 28px; }
.track-dur { font-variant-numeric: tabular-nums; }
.track-dur::before { content: ""; display: inline-block; width: 1px; height: 14px; background: var(--line); margin-right: 10px; vertical-align: -2px; }

.shift { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; }
.shift-label { font-weight: 600; }
.shift-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface);
  color: var(--ink); font: 600 1.3rem/1 var(--body); cursor: pointer;
}
.shift-btn:hover { border-color: var(--ink); }
.shift-btn[disabled] { opacity: .35; cursor: default; }
.shift-value { min-width: 2.6em; text-align: center; font: 600 1.4rem/1 var(--display); font-variant-numeric: tabular-nums; }
.shift-hint { color: var(--muted); font-size: .85rem; }
.shift-help { margin: -6px 0 18px; max-width: 60ch; font-size: .9rem; }
.dl { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.dl-status { margin: 0; }

/* --- Тайрах --- */
.btn-s { min-height: 38px; padding: 0 14px; font-size: .9rem; }
.trim { margin: 0 0 20px; max-width: 560px; }
.trim summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.trim[open] { padding: 0 0 4px; }
.trim .note { margin: 6px 0 14px; }
.player.trim-player { display: block; margin: 0 0 14px; max-width: none; }
.trim-top { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; }
.trim-top-label { font-weight: 600; }
/* Долгион: гүйлгэх мөрийн өндөр хувилбар. Тоглосон хэсэг өнгөөр будагдаж, босоо зураас байрлалыг заана. */
.player-bar.wave { height: 88px; margin-top: 0; width: auto; /* нүүр хуудасны .wave-тэй нэр давхцдаг */ border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line); overflow: hidden; }
.player-bar.wave::before { inset: 0; }
.wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; color: var(--muted); }
.player-bar.wave span { position: absolute; left: 0; top: 0; bottom: 0; height: auto; border-radius: 0; box-sizing: content-box;
  background: color-mix(in srgb, var(--cobalt) 24%, transparent); border-right: 2px solid var(--cobalt); }
.player-bar.wave span::after { display: none; }
.player-bar.wave .trim-cut { border-radius: 0; background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--paper) 92%, transparent) 0 4px, color-mix(in srgb, var(--paper) 70%, transparent) 4px 8px); }
.player-bar.wave .trim-cut-a { border-right: 2px solid var(--amber); }
.player-bar.wave .trim-cut-b { border-left: 2px solid var(--amber); }
.trim-cut { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; border-radius: 4px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 55%, transparent) 0 3px,
    color-mix(in srgb, var(--ink) 25%, transparent) 3px 6px); }
.trim-cut-a { left: 0; } .trim-cut-b { right: 0; }
.trim-edges { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 10px; }
.trim-edge { display: flex; align-items: center; gap: 6px; }
.trim-val { min-width: 3.2em; text-align: center; font: 600 1.1rem/1 var(--display); font-variant-numeric: tabular-nums; }
.trim-nudge { min-width: 40px; height: 34px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: 600 .8rem/1 var(--body); cursor: pointer; }
.trim-nudge:hover { border-color: var(--ink); }
.trim-summary { margin: 0 0 10px; }
.trim-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Төлбөр (QPay) --- */
.buy { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.buy-note { margin: 0; max-width: 52ch; }
.pay { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 560px; }
.pay-qr { width: 220px; height: 220px; background: #fff; border-radius: 4px; padding: 6px; }
.pay-side { flex: 1; min-width: 200px; }
.pay-amount { font: 600 1.4rem/1.2 var(--display); margin: 0 0 8px; }
.pay-help { margin: 0 0 10px; color: var(--muted); font-size: .95rem; }
.pay-banks { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pay-banks a { display: inline-block; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; font-size: .9rem; background: var(--paper); }
.pay-banks a:hover { border-color: var(--ink); }
.pay-status { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pay-status { animation: blink 1.6s ease-in-out infinite; }
}

.player { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; max-width: 520px; }
.play-lg { width: 56px; height: 56px; }
.play-lg svg { width: 20px; height: 20px; }
/* Гүйлгэх мөр: дарж эсвэл чирж дурын хэсгээс сонсоно. Барихад хялбар байхаар дарах талбай өндөр. */
.player-bar { flex: 1; min-width: 80px; height: 8px; background: var(--line); border-radius: 4px; position: relative;
  cursor: pointer; touch-action: none; }
.player-bar::before { content: ""; position: absolute; inset: -14px 0; }
.player-bar span { display: block; position: relative; height: 100%; width: 0; background: var(--cobalt); border-radius: 4px; }
.player-bar span::after { content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 3px var(--paper); }
.player-bar:hover span::after { transform: scale(1.15); }
.player-time { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-time:empty { display: none; }
.player-label { color: var(--muted); font-size: .85rem; white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 0 22px; border-radius: var(--radius); border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); font: 600 1rem/1 var(--body); text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-cobalt); }
.btn-primary:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }
.btn[disabled] { opacity: .6; cursor: progress; }
/* Сервер бэлтгэж байх үеийн явц: эргэлддэг дугуй */
.btn.is-busy { cursor: progress; opacity: .85; }
.btn.is-busy::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::before { animation-duration: 2.4s; } }
.dl-wait { margin: 0; max-width: 52ch; }

.listen { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 0 0 22px; }
.listen .player { margin: 0; width: 100%; }
.listen-status, .listen-note { margin: 0; }
/* --- Үнэгүй MP3 --- */
.free { margin: 0 0 8px; }
.free .cf-turnstile { margin: 0 0 12px; }
.free-status, .free-again, .free .form-error { margin: 0 0 8px; max-width: 60ch; }
.mp3-lead { max-width: 52ch; margin: -8px 0 20px; color: var(--muted); font-size: 1.05rem; }
.mp3-search { margin: 0 0 14px; max-width: 720px; }
.mp3-search input { font: inherit; font-size: 1.1rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); }
.mp3-search input:focus { border-color: var(--cobalt); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cobalt) 25%, transparent); }
.mp3-search button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  background: var(--cobalt); color: var(--on-cobalt); }
.mp3-search button:hover { background: var(--cobalt-deep); }
.mp3-search button.is-busy { cursor: progress; opacity: .85; }
.mp3-search button.is-busy::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mp3-search button.is-busy::before { animation-duration: 2.4s; } }
.mp3-about { margin: 36px 0 0; }
.mp3-recent { margin: 28px 0 0; }
.row.row-mp3 { grid-template-columns: 52px minmax(0, 1fr) auto auto; }
/* сангийн дууг хоолойтой нь татах хуудас */
.songdl { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin: 0 0 12px; }
.songdl .cf-turnstile { margin: 0; }
.songdl-status, .songdl .form-error { margin: 0; max-width: 52ch; }
.songdl-note { margin: 0 0 22px; max-width: 52ch; }
.songdl-alt { margin: 18px 0; }
.track-body > .player + .songdl { margin-top: 18px; }
.mp3-about ol { padding-left: 1.3em; margin: 0 0 18px; }
.mp3-about ol li { margin: 0 0 6px; }
.prepare p { max-width: 52ch; margin: 0 0 16px; }
.cf-turnstile { margin: 0 0 16px; }
.form-error { color: #c0392b; margin: 12px 0 0; }
.form-ok { color: var(--ready); margin: 12px 0 0; }

.progress { max-width: 560px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 14px; }
.step { font-size: .8rem; color: var(--muted); padding-top: 10px; border-top: 4px solid var(--line); }
.step.is-done { border-color: var(--cobalt); color: var(--ink); }
.step.is-current { border-color: var(--cobalt); color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .step.is-current { animation: blink 1.2s ease-in-out infinite; }
}
.progress-label { font-weight: 600; margin: 0 0 6px; }

.report { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 16px; max-width: 560px; }
.report summary { cursor: pointer; color: var(--muted); font-size: .95rem; }
.report form { display: grid; gap: 12px; margin-top: 14px; }
.report fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.report label { display: flex; gap: 8px; align-items: center; }
.report .btn { justify-self: start; min-height: 40px; }

.prose { max-width: 68ch; }
.prose h2 { font: 600 1.4rem/1.2 var(--display); margin: 32px 0 8px; }

.foot { border-top: 1px solid var(--line); padding: 20px 0; color: var(--muted); font-size: .9rem; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.foot p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.social { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--ink); }
.social svg { width: 20px; height: 20px; fill: #1877f2; }
.social:hover { text-decoration: underline; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.install-btn { font: 600 .9rem/1 var(--body); padding: 8px 12px; border-radius: var(--radius); cursor: pointer;
  border: 1.5px solid var(--cobalt); background: var(--cobalt); color: var(--on-cobalt); }

/* --- Түгээмэл асуулт (ТТА) --- */
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; font-weight: 600; padding: 12px 34px 12px 0; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: 400 1.5rem/1 var(--body); color: var(--muted); }
.faq details[open] > summary::after { content: "−"; }
.faq summary:hover { color: var(--cobalt); }
.faq details p { margin: 0 0 14px; }
.faq h2 { margin-top: 36px; }

@media (max-width: 720px) {
  .topbar-in { gap: 12px; }
  .topsearch { flex-basis: 200px; }
  .hero { padding-top: 36px; }
  .bigsearch { flex-direction: column; }
  .bigsearch button { min-height: 50px; }
  .row { grid-template-columns: 10px 44px minmax(0, 1fr) 40px; gap: 10px; }
  .row-cover img { width: 44px; height: 44px; }
  .row-dur, .row-state { display: none; }
  .row.row-mp3 { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .topbar-in { flex-wrap: wrap; row-gap: 8px; min-height: 0; padding: 12px 0; }
  .toplinks { gap: 12px; }
  .toplink { font-size: .85rem; }
  .toplinks + .topsearch { order: 3; flex: 1 0 100%; margin: 0; }
  .track { grid-template-columns: 1fr; gap: 24px; }
  .track-cover { max-width: 220px; }
}