:root {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1f232c;
  --line: #2a2f3a;
  --text: #e8eaed;
  --muted: #9aa3b2;
  --accent: #4f8cff;
  --accent-ink: #ffffff;
  --good: #3fb950;
  --warn: #d29922;
  --bad: #f85149;
  --radius: 12px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #f0f2f5;
    --line: #dfe3ea;
    --text: #14171c;
    --muted: #5b6472;
    --accent: #2563eb;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 680px;
  margin: 0 auto;
  /* Safe-area insets keep content clear of the notch and home indicator when
     launched standalone from the iOS home screen. */
  padding:
    calc(92px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
    calc(64px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}

.head {
  text-align: center;
}

.logo {
  margin: 0 0 30px;
}

.logo-img {
  display: block;
  width: 257px;
  /* Never overflow a narrow phone; height follows to preserve the ratio. */
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.form {
  display: flex;
  gap: 10px;
}

.field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

.paste {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  /* 36px tall inside a 48px field: the largest target that still sits
     comfortably within the input's rounded border. */
  height: 36px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.paste-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.paste:hover { color: var(--accent); border-color: var(--accent); }
.paste:active { transform: translateY(-50%) scale(.96); }

.input {
  flex: 1;
  min-width: 0;
  /* Right padding clears the Paste button. */
  padding: 13px 92px 13px 15px;
  font-size: 16px; /* 16px stops iOS Safari zooming on focus */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.btn {
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter .15s;
}

.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:disabled { opacity: .55; cursor: default; }

.status {
  min-height: 22px;
  margin: 14px 2px 0;
  font-size: 14px;
  color: var(--muted);
}

.status[data-tone="error"] { color: var(--bad); }
.status[data-tone="good"]  { color: var(--good); }

.result { margin-top: 26px; }

.meta {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.thumb {
  width: 64px;
  height: 96px;
  flex: 0 0 auto;
  object-fit: cover;
  background: var(--surface-2);
  border-radius: 8px;
}

.thumb:not([src]) { visibility: hidden; }

.meta-text { min-width: 0; }
.author { margin: 2px 0 4px; font-weight: 600; }
/* Descriptions run long, so clamp to two lines and let the toggle below open
   them. -webkit-line-clamp is the only cross-browser clamp that reflows
   properly on rotation. */
.title {
  margin: 0 0 2px;
  color: var(--muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.title.expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.title-toggle {
  margin: 0 0 6px;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.title-toggle[hidden] { display: none; }
.specs  { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.norm {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.norm input { margin-top: 2px; accent-color: var(--accent); }
.norm strong { display: block; font-weight: 600; }
.norm em { font-style: normal; font-size: 13px; color: var(--muted); }

.variants {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.variants li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.variants li[data-preferred="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

.v-label { font-weight: 600; }
.v-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }

.tag {
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
}

.tag[data-kind="best"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.tag[data-kind="warn"] { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }

.v-spacer { flex: 1; }
.v-size { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.dl {
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.dl:hover { border-color: var(--accent); color: var(--accent); }
.dl[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Standalone PWAs have no reload or back control, so clearing state has to be
   reachable from inside the page itself. */
.btn-ghost {
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}

.btn-ghost:hover { color: var(--text); border-color: var(--muted); }
.btn-ghost:active { background: var(--surface-2); }

/* Fetch and Clear stack, so Clear sits directly under Fetch in both layouts. */
.form-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-buttons .btn,
.form-buttons .btn-ghost {
  white-space: nowrap;
}

.foot {
  margin-top: 40px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 520px) {
  .wrap { padding-top: calc(72px + env(safe-area-inset-top)); }
  .form { flex-direction: column; }
  .variants li { flex-wrap: wrap; }
  .v-spacer { display: none; }
  .dl { width: 100%; text-align: center; }
}