/* Tokville downloader result/progress UI. The .download-card/.download-form base
   styles already come from the site's WPCode CSS; this file only adds the
   dynamic result list, progress bar, buttons, spinner and toasts. */
.tokville-results, #results { max-width: 780px; margin: 18px auto 0; display: flex; flex-direction: column; gap: 10px; }
.result-card { display: flex; gap: 14px; padding: 14px; background: #fff; border: 1px solid #E8E8EC; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.result-thumb { width: 120px; height: 72px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: #F8F8FA; position: relative; }
.result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result-thumb.loading { background: linear-gradient(90deg,#F8F8FA 25%,#ececf0 50%,#F8F8FA 75%); background-size: 200% 100%; animation: tokville-shimmer 1.4s infinite; }
@keyframes tokville-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.result-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.result-title { font-size: .95rem; font-weight: 600; color: #1A1A1F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-meta { font-size: .78rem; color: #76767F; }
.result-error { color: #dc2626; }
.result-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.progress { width: 100%; height: 4px; background: #F8F8FA; border-radius: 2px; overflow: hidden; margin-top: 6px; }
.progress-fill { height: 100%; background: linear-gradient(90deg,#E7617D 0%,#FF6B9D 100%); border-radius: 2px; transition: width .4s; }
.progress-indeterminate { position: relative; }
.progress-fill-indeterminate { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg,#E7617D 0%,#FF6B9D 100%); border-radius: 2px; animation: tokville-slide 1.2s ease-in-out infinite; }
@keyframes tokville-slide { 0% { left: -40%; } 100% { left: 100%; } }
.elapsed { color: #76767F; font-weight: 500; }
.pct { font-size: .78rem; font-weight: 600; color: #E7617D; }
.btn { padding: 7px 18px; border-radius: 8px; font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 0; }
.btn-primary { background: #E7617D; color: #fff; box-shadow: 0 4px 14px rgba(231,97,125,.25); }
.btn-primary:hover { background: #C8145A; }
.btn-ghost { background: transparent; color: #4A4A55; border: 1px solid #E8E8EC; }
.btn-ghost:hover { color: #E7617D; border-color: #E7617D; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tokville-spin .6s linear infinite; vertical-align: -2px; margin-right: 4px; }
@keyframes tokville-spin { to { transform: rotate(360deg); } }
#toasts { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 12px 18px; background: #fff; border: 1px solid #E8E8EC; border-radius: 10px; color: #1A1A1F; font-size: .88rem; font-weight: 500; box-shadow: 0 8px 32px rgba(0,0,0,.08); pointer-events: auto; }
.toast.success { border-color: #bbf7d0; color: #047857; }
.toast.error { border-color: #fecaca; color: #b91c1c; }