/* Оформление веб-версии Audio Clipper.
   Палитра и все правила самого редактора взяты из extension/app.css, чтобы
   интерфейс на сайте и в боковой панели выглядел одинаково. Страница вокруг
   редактора оформлена отдельно: крупный заголовок, одна кнопка выбора файла
   и сетка карточек под ней. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --border: #e8e8ed;
  --text: #0f1115;
  --text-soft: #60646c;
  --accent: #4f46e5;
  --accent-soft: #eef2ff;
  /* Приглушённый синий: тот же тон, что у акцента, но ненасыщенный. Контраст
     с фоном 4,9 — выше порога 4,5, при котором мелкий текст читается. */
  --accent-muted: #5d6aa8;
  --error: #b91c1c;
  --radius: 14px;
}

* { box-sizing: border-box; }

/* Атрибут hidden обязан прятать элемент, какие бы display-правила ни были ниже. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Шапка ---------- */
.site-head .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.site-head .mark { border-radius: 8px; }
.brand { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
/* На страницах форматов название в шапке ведёт на главную. Цвет не меняется:
   ссылка узнаётся по месту, а синий заголовок спорил бы с кнопкой выбора
   файла, стоящей ниже. */
.site-head .home-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}
.site-head .home-link:hover { text-decoration: none; }

/* ---------- Заголовок страницы ---------- */
/* Под заголовком сразу идёт редактор, поэтому снизу отступ меньше, чем
   сверху: заголовок и дорожка читаются как один блок. */
#screen-pick {
  max-width: 1060px;
  margin: 0 auto;
  padding: 72px 24px 30px;
  text-align: center;
}
#screen-pick h1 {
  font-size: 68px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.045em;
  margin: 0 0 18px;
}
#screen-pick .lead {
  font-size: 19px;
  color: var(--text-soft);
  margin: 0 auto;
  max-width: 520px;
}

/* ---------- Выбор файла поверх дорожки ---------- */
/* Наложение закрывает дорожку целиком и исчезает вместе с классом idle.
   Уровень ниже, чем у наложения экспорта: пока файл не выбран, экспорту
   взяться неоткуда, а порядок на случай их встречи задан явно. */
#pick-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}
#screen-crop:not(.idle) #pick-overlay { display: none; }
#pick-overlay .error { max-width: 560px; }

#drop-zone { display: block; }

/* Одна кнопка на весь первый экран. Пунктирной области для перетаскивания
   нет: файл принимается броском на любое место страницы, и рамка под него
   только отнимала бы внимание у кнопки. */
#btn-open {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px 17px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.28);
  transition: background .15s, box-shadow .15s, transform .12s;
}
#btn-open:hover { background: #4338ca; box-shadow: 0 12px 34px rgba(79, 70, 229, 0.34); }
#btn-open:active { transform: translateY(1px); }
#btn-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#btn-open .plus {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
#btn-open .plus svg { width: 15px; height: 15px; }

/* Подсветка всей страницы, пока на неё тащат файл. */
body.dragover #btn-open { background: #4338ca; }
body.dragover::after {
  content: "";
  position: fixed;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  border: 2px dashed var(--accent);
  border-radius: 20px;
  pointer-events: none;
  z-index: 50;
}

.drop-line { font-size: 15px; color: var(--text-soft); margin: 20px 0 0; }
.limits { font-size: 13px; color: #9a9ea6; margin: 8px 0 0; }

.hint { color: var(--text-soft); font-size: 15px; }
.error { color: var(--error); font-size: 15px; margin: 20px 0 0; }

/* Лоадер: кольцо с одним закрашенным сегментом, крутится на transform.
   Анимация transform выполняется в потоке композитора, поэтому кольцо
   вращается и тогда, когда основной поток занят декодированием. */
#loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
}
#loading-text { font-size: 16px; }
#loading-hint { font-size: 14px; }
.spinner {
  display: inline-block;
  width: 34px;
  height: 34px;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  will-change: transform;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Редактор ---------- */
/* Редактор стоит прямо на фоне страницы, без карточки, рамки и тени: он не
   гость на странице, а сама страница. Ширина и боковые отступы те же, что у
   сетки карточек под ним, поэтому дорожка и карточки стоят по одной линии. */
#screen-crop {
  max-width: 1060px;
  margin: 0 auto 8px;
  padding: 0 24px;
}

/* ---------- Редактор до выбора файла ---------- */
/* Выключенное состояние. Дорожка выше обычной: в ней стоит кнопка выбора
   файла с двумя строками под ней. Шапка с именем файла спрятана — показывать
   в ней нечего, подписи времени тоже сняты: рамка здесь ничего не выделяет,
   а только показывает, как выглядит выделение. */
.idle .crop-header { display: none; }
.idle #wave-wrap { height: 300px; pointer-events: none; }
.idle #wave { cursor: default; }
.idle .time-label { display: none; }
.idle #frame {
  left: 18%;
  width: 64%;
  border-color: #d7d9e0;
  background: rgba(15, 17, 21, 0.015);
}
.idle .handle::after { background: #d7d9e0; }

.crop-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
#file-name {
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
#file-duration { color: var(--text-soft); font-size: 15px; }

#wave-wrap {
  position: relative;
  height: 200px;
  background: #fafafb;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
#wave { display: block; width: 100%; height: 100%; cursor: text; }

#frame {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 2px solid var(--accent);
  border-radius: 4px;
  background: rgba(79, 70, 229, 0.07);
  cursor: grab;
}
#frame:active { cursor: grabbing; }
.handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  cursor: ew-resize;
}
.handle::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 36px;
  border-radius: 2px;
  background: var(--accent);
}
#handle-l { left: -8px; } #handle-l::after { left: 5px; }
#handle-r { right: -8px; } #handle-r::after { right: 5px; }

/* Подписи времени на дорожке: мелкие, на полупрозрачной подложке,
   сквозь них проходят клики. */
.time-label {
  position: absolute;
  top: 6px;
  font-size: 12px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
#t-cursor { color: var(--text); z-index: 3; }
#t-len { top: auto; bottom: 6px; }

/* Наложение на дорожку: лоадер кодирования и сообщение о готовом файле. */
#wave-area { position: relative; }
#wave-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 17, 21, 0.12);
}
.overlay-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 44px;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
}
.overlay-row { display: flex; align-items: center; gap: 8px; }
.overlay-check { width: 20px; height: 20px; flex: none; }
.overlay-soft { font-size: 15px; color: var(--text-soft); max-width: 100%; overflow-wrap: anywhere; }
#export-busy .spinner { width: 28px; height: 28px; }
#export-done-again { margin-top: 4px; padding: 10px 20px; font-weight: 500; }
/* Start over: текстовая кнопка без рамки и заливки, внимание не перетягивает. */
/* Два класса в селекторе обязательны: правило .overlay-box button ниже имеет
   такой же вес, как один класс с именем тега, и перебило бы рамку и заливку. */
.overlay-box .overlay-quiet {
  border: 0;
  background: transparent;
  color: var(--text-soft);
  padding: 4px 8px;
}
.overlay-box .overlay-quiet:hover { border: 0; background: transparent; color: var(--text); text-decoration: underline; }
#export-done-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
}
#export-done-close svg { width: 16px; height: 16px; }
#export-done-close:hover { color: var(--text); background: #f4f4f6; }

/* ---------- Кнопки и поля редактора ---------- */
.controls button, #format {
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 15px;
  cursor: pointer;
}
.controls button:hover { border-color: #d6d6dd; background: #fafafb; }
.overlay-box button {
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 15px;
  cursor: pointer;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 500;
}
button.primary:hover { background: #4338ca; border-color: #4338ca; }
button:disabled, select:disabled { opacity: .55; cursor: default; }
button.primary:disabled { background: var(--accent); border-color: var(--accent); }

.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
#controls-play { flex-wrap: wrap; }
.controls .spacer { flex: 1; }
.controls svg { width: 18px; height: 18px; display: block; }
#btn-play { padding: 10px; }
#btn-play-clip { white-space: nowrap; }
/* Громкость прижата к правому краю строки. */
#volume {
  flex: 0 1 140px;
  min-width: 60px;
  margin-left: auto;
  accent-color: var(--accent);
}

/* Поля ввода времени: та же рамка, скругление, отступы и цвет, что у кнопок
   и у выпадающего списка форматов. Подпись Start или End стоит внутри рамки
   слева, само время — набирается. */
.time-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 15px;
  cursor: text;
}
.time-field:hover { border-color: #d6d6dd; }
/* Поля времени до выбора файла выключены вместе с остальным управлением.
   Браузер гасит в них только цифры, поэтому рамка и подпись гасятся правилом.
   Доля непрозрачности та же, что у выключенных кнопок. */
.idle .time-field { opacity: .55; }
.idle .time-field:hover { border-color: var(--border); }
.time-field:focus-within { border-color: var(--accent); }
.time-field .tf-label {
  font-size: 13px;
  color: var(--text-soft);
  white-space: nowrap;
}
/* Ячейки времени и двоеточия между ними образуют одну строку цифр. */
.tf-segments {
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.tf-colon { color: var(--text-soft); }
/* Ширину ячейки задаёт скрипт по числу знаков, здесь — только запас на случай
   пустой ячейки. */
.tf-seg {
  width: 2ch;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  text-align: center;
  outline: none;
}
.tf-seg::selection { background: var(--accent); color: #fff; }

/* Собственный тултип: тёмная плашка над кнопкой, появляется сразу при наведении. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #0f1115;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.3;
  padding: 7px 11px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s;
  pointer-events: none;
  z-index: 10;
}
[data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #0f1115;
  border-bottom: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s;
  pointer-events: none;
  z-index: 10;
}
[data-tip]:hover::after, [data-tip]:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Подсказка о сохранении: стоит в обычном потоке под строкой управления и
   прижата к правому краю — там стоит кнопка Save clip, на которую показывает
   стрелка. */
#export-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 10px 2px 0;
  color: var(--accent-muted);
  font-size: 13px;
  line-height: 1.3;
  /* Строка занимает место всегда, а скрывается и показывается видимостью, а не
     атрибутом hidden: иначе при её появлении всё, что ниже, сдвигалось бы. */
  visibility: hidden;
}
#export-hint.on { visibility: visible; }
/* Отступ справа подводит стрелку к середине кнопки Save clip. */
#export-hint svg { width: 16px; height: 16px; flex: none; margin-right: 32px; }
/* Стрелка дважды поднимается к кнопке и остаётся на месте. */
#export-hint.nudge svg { animation: nudge-up .9s ease-in-out 2; }
@keyframes nudge-up {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  #export-hint.nudge svg { animation: none; }
}

/* ---------- Карточки ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.card {
  padding: 26px 24px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: #dcdce3; box-shadow: 0 6px 24px rgba(15, 17, 21, 0.05); }
/* Значок стоит в мягком цветном квадрате. Цвет у каждой карточки свой: он
   различает их издали, но берётся с малой насыщенностью, чтобы не спорить с
   текстом. Сам значок — тонкая линия того же оттенка. */
.card > svg {
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 10px;
  display: block;
}
.card h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 18px 0 8px;
}
.card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}
.card:nth-child(2) > svg { color: #0d9488; background: #effcf9; }
.card:nth-child(3) > svg { color: #c2410c; background: #fff4ed; }
.card:nth-child(4) > svg { color: #be185d; background: #fdf2f8; }
.card:nth-child(5) > svg { color: #7c3aed; background: #f5f3ff; }
.card:nth-child(6) > svg { color: #4d7c0f; background: #f7fee7; }

/* Страницы /mp3-cutter и /wav-cutter. Карточки расширения на них нет, поэтому
   сетка начинается сразу с белой карточки, и цвета значков раздаются с
   первой, а не со второй. Оттенки те же, что на главной. */
.cards-sub .card:nth-child(1) > svg { color: #0d9488; background: #effcf9; }
.cards-sub .card:nth-child(2) > svg { color: #c2410c; background: #fff4ed; }
.cards-sub .card:nth-child(3) > svg { color: #be185d; background: #fdf2f8; }
.cards-sub .card:nth-child(4) > svg { color: #7c3aed; background: #f5f3ff; }
.cards-sub .card:nth-child(5) > svg { color: #4d7c0f; background: #f7fee7; }

/* Карточка с призывом поставить расширение. Отличается от пяти белых соседок
   заливкой, но заливка еле заметная: тот же оттенок, что у кнопки «Choose
   file» на первом экране, взятый с прозрачностью шесть процентов. Так
   карточку видно среди белых, и при этом она не спорит за внимание с самой
   кнопкой — у той тот же цвет в полную силу.

   Текста в карточке намеренно меньше, чем в остальных: её читают ради решения
   нажать, а не ради сведений. */
.card-ext {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border-color: rgba(79, 70, 229, 0.16);
  background: rgba(79, 70, 229, 0.06);
}
.card-ext:hover {
  border-color: rgba(79, 70, 229, 0.3);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.1);
}
/* Значок расширения — тот же, что на панели браузера и в карточке магазина:
   человек узнаёт по нему, что именно он ставит. Подложка не нужна, у самого
   значка синий фон, и на светлой заливке он читается. */
.ext-logo {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 11px;
}
.card-ext h3 {
  font-size: 19px;
  line-height: 1.25;
  margin: 20px 0 8px;
}
/* Отступ снизу задаёт наименьший просвет до кнопки; сама кнопка прижата к
   низу правилом margin-top: auto, и без этого отступа в самой высокой
   карточке ряда она прилипала бы к последней строке. */
.card-ext p { margin-bottom: 24px; }
/* Кнопка белая с синей надписью: на светлой заливке она светлее фона и потому
   читается как кнопка, не перетягивая внимание сплошным цветом. */
.ext-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: auto;
  padding: 13px 18px;
  border: 1px solid rgba(79, 70, 229, 0.28);
  border-radius: 10px;
  background: #ffffff;
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.08);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.ext-btn svg { width: 18px; height: 18px; flex: none; }
/* Ссылкой служит вся карточка: невидимый слой кнопки растянут на всю
   карточку, и щелчок в любом её месте ведёт в магазин через ту же ссылку,
   так что событие ext_cta_click считается как прежде. Сдвига кнопки вверх
   при наведении нет намеренно: transform сделал бы кнопку опорным блоком
   для этого слоя, и слой сжался бы до размеров кнопки. */
.ext-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.ext-btn:hover,
.card-ext:hover .ext-btn {
  text-decoration: none;
  border-color: rgba(79, 70, 229, 0.5);
  box-shadow: 0 5px 14px rgba(79, 70, 229, 0.16);
}

/* ---------- Текст под карточками ---------- */
.text { padding-top: 32px; padding-bottom: 8px; max-width: 760px; }
.text h2 { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; margin: 44px 0 14px; }
.text p { margin: 0 0 12px; }
.text ol { margin: 0 0 16px; padding-left: 22px; }
.text li { margin: 7px 0; }
.faq .q { font-weight: 600; margin: 20px 0 4px; }
.faq .a { margin: 0; color: var(--text-soft); }

/* Селектор с именем тега и классом обязателен: у подвала стоит класс wrap,
   и его правило padding: 0 24px перебило бы вертикальные отступы, заданные
   одним только именем тега. */
footer.wrap {
  padding: 40px 24px 60px;
  margin-top: 40px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.9;
}
footer a { color: inherit; }

/* ---------- Узкие экраны ---------- */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* Пять элементов первой строки управления в один ряд не помещаются. Порядок
   задан так, чтобы вниз уходили поля времени, а не громкость: кнопки и
   громкость остаются первой строкой, поля времени встают второй. Без этого
   правила вниз съезжала бы одна громкость — она стоит в разметке последней. */
@media (max-width: 560px) {
  /* Перенос строки считается по базовой ширине, а не по итоговой, поэтому
     базовая ширина громкости здесь занижена: иначе она не помещается за
     кнопками и уезжает вниз. */
  #volume { order: 1; flex: 1 1 60px; }
  .time-field { order: 2; flex: 1 1 auto; justify-content: space-between; }
  .controls button, #format { padding-left: 10px; padding-right: 10px; }
  .controls button { white-space: nowrap; }
}

/* На устройстве с пальцем вместо мыши файл на страницу не бросишь, поэтому
   строка про перетаскивание убрана: она занимает место под кнопкой выбора и
   обещает то, чего на телефоне нет. Признак берётся по способу указания, а не
   по ширине окна: узкое окно на настольном компьютере перетаскивание
   поддерживает. */
@media (hover: none) and (pointer: coarse) {
  .drop-line { display: none; }
}

@media (max-width: 700px) {
  .wrap { padding: 0 18px; }
  #screen-pick { padding: 44px 18px 24px; }
  #screen-pick h1 { font-size: 42px; letter-spacing: -0.035em; }
  #screen-pick .lead { font-size: 17px; margin-bottom: 32px; }
  #btn-open { font-size: 17px; padding: 15px 28px 15px 22px; }
  #screen-crop { padding: 0 18px; }
  #wave-wrap { height: 150px; }
  .idle #wave-wrap { height: 270px; }
  .overlay-box { padding: 18px 20px; }
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .text h2 { font-size: 21px; margin-top: 34px; }
}