/* ─── Copyright test — custom styles (same language as Radar) ─── */

:root { --ease: cubic-bezier(.22, .61, .36, 1); }

@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes riseIn  { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes rowIn   { from { opacity: 0; transform: translateY(8px) }  to { opacity: 1; transform: none } }
@keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }
@keyframes spin    { to { transform: rotate(360deg) } }
@keyframes grow    { from { width: 0 } }

.fade-in { animation: fadeIn .7s var(--ease) both; }
.rise-in { animation: riseIn .8s var(--ease) .1s both; }

/* ── Form ────────────────────────────────────────────────────── */
.field-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5F6368;
}
.url-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #DADCE0;
  border-radius: 4px;
  background: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: #111318;
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.url-input::placeholder { color: #C2C7CE; }
.url-input:hover { border-color: #C2C7CE; }
.url-input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, .10); }
.url-input.invalid { border-color: #ef4444; }

.submit-btn {
  padding: 10px 30px;
  border-radius: 4px;
  background: #111318;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: opacity .2s var(--ease), background-color .2s var(--ease);
}
.submit-btn:hover { background: #2a2d34; }
.submit-btn:disabled { opacity: .45; cursor: default; }

/* ── Loader ──────────────────────────────────────────────────── */
.spinner {
  width: 14px; height: 14px;
  border-radius: 9999px;
  border: 1.6px solid #DADCE0;
  border-top-color: #2563EB;
  animation: spin .8s linear infinite;
  flex-shrink: 0;
}
.skeleton {
  background: linear-gradient(90deg, #ECEEF1 0px, #F6F7F9 120px, #ECEEF1 240px);
  background-size: 800px 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: 4px;
}

/* ── Result ──────────────────────────────────────────────────── */
.card { animation: rowIn .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
.metric-col + .metric-col { border-left: 1px solid #ECEEF1; }
.bar { height: 3px; background: #ECEEF1; border-radius: 9999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: #2563EB; border-radius: 9999px;
         animation: grow 1s var(--ease) .25s both; }

/* ── Video picker ────────────────────────────────────────────── */
.picker-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 14px;
  border: 1px solid #DADCE0; border-radius: 4px; background: #fff;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; text-align: left;
  transition: border-color .2s var(--ease);
}
.picker-btn:hover { border-color: #C2C7CE; }
.picker-btn:disabled { cursor: default; }
.chevron { transition: transform .2s var(--ease); }
#picker.open .chevron { transform: rotate(180deg); }

.picker-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  max-height: 340px; overflow-y: auto;
  background: #fff; border: 1px solid #DADCE0; border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: 4px 0;
  animation: riseIn .22s var(--ease) both;
}
.picker-menu li {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 12px; cursor: pointer;
  transition: background-color .15s var(--ease);
}
.picker-menu li:hover { background: #F6F7F9; }

.vthumb {
  width: 30px; height: 44px; border-radius: 3px; flex-shrink: 0;
  background: #ECEEF1; object-fit: cover; display: block;
}
.vthumb.lg { width: 46px; height: 68px; }

.scroll-area { scrollbar-width: thin; scrollbar-color: #d6d9de transparent; }

.links-off { opacity: .4; pointer-events: none; transition: opacity .2s var(--ease); }