:root {
  color-scheme: light;
  --bg: #f5f4ef;
  --panel: #fffefa;
  --text: #11110f;
  --muted: #74736d;
  --line: #d8d6ce;
  --soft: #eceae2;
  --focus: #11110f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  display: grid;
  grid-template-rows: 1fr auto;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 13vh 0 64px; }
.hero { text-align: center; }
.brand { font-size: 12px; font-weight: 800; letter-spacing: .2em; margin-bottom: 22px; }
h1 { margin: 0; font-size: clamp(38px, 8vw, 72px); letter-spacing: -.055em; line-height: .98; font-weight: 780; }
.sub { max-width: 580px; margin: 18px auto 34px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.url-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; max-width: 700px; margin: 0 auto; }
.input-wrap { position: relative; }
input {
  width: 100%; height: 54px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text);
  padding: 0 74px 0 16px; outline: none; box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(17,17,15,.08); }
.paste { position: absolute; right: 8px; top: 8px; height: 38px; border: 0; border-radius: 9px; padding: 0 11px; background: var(--soft); color: var(--text); cursor: pointer; }
.primary {
  height: 54px; border: 1px solid #11110f; border-radius: 14px; background: #11110f; color: white; font-weight: 700; padding: 0 22px; cursor: pointer; min-width: 126px;
}
.primary:disabled { opacity: .45; cursor: wait; }
.status { min-height: 24px; margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.status.error { color: #9d2b22; }
.results { display: grid; gap: 14px; margin-top: 34px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; text-align: left; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-title { font-size: 15px; font-weight: 750; }
.badge { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; }
.qualities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.quality {
  border: 1px solid var(--line); border-radius: 12px; background: transparent; padding: 11px; text-align: left; cursor: pointer; color: var(--text); min-height: 72px;
}
.quality:hover { border-color: #aaa79e; }
.quality.selected { border-color: var(--text); background: var(--soft); }
.quality strong { display: block; font-size: 14px; margin-bottom: 3px; }
.meta { color: var(--muted); font-size: 12px; line-height: 1.4; }
.download { width: 100%; height: 48px; margin-top: 12px; border: 0; border-radius: 12px; background: var(--text); color: white; font-weight: 750; cursor: pointer; }
.download:disabled { opacity: .5; cursor: not-allowed; }
footer { color: var(--muted); font-size: 12px; text-align: center; padding: 20px 16px 30px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 620px) {
  .shell { width: min(100% - 22px, 760px); padding-top: 10vh; }
  .url-form { grid-template-columns: 1fr; }
  .primary { width: 100%; }
  .qualities { grid-template-columns: 1fr; }
  .quality { min-height: 60px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .quality strong { margin: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .card { animation: enter .22s ease both; }
  @keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}