/* JSON URL Extractor — tool-specific styles (≤ 5KB) */

/* ── Settings Bar (between toolbar and editor) ── */
.settings-bar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-light);
  display: flex; flex-direction: column; gap: 8px;
  background: #fafaf7;
  flex-shrink: 0;
}
.settings-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.checkbox-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--color-text-secondary);
  cursor: pointer; user-select: none;
  padding: 3px 10px 3px 6px;
  border-radius: 14px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  transition: var(--transition);
  font-weight: 500;
}
.checkbox-pill:hover { border-color: var(--color-accent); }
.checkbox-pill input { accent-color: var(--color-accent); width: 13px; height: 13px; cursor: pointer; }
.filter-input {
  flex: 1; min-width: 130px;
  font-size: 12px; padding: 5px 11px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-panel);
  color: var(--color-text);
  font-family: var(--font-mono);
  outline: none; transition: var(--transition);
}
.filter-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }
.filter-input::placeholder { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 11px; }
.filter-label { font-size: 11px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; min-width: 50px; }

/* ── Result Tabs ── */
.result-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  background: #fafaf7;
  flex-shrink: 0;
}
.result-tab {
  padding: 11px 16px;
  font-size: 12.5px; font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex; align-items: center; gap: 6px;
}
.result-tab:hover { color: var(--color-text-secondary); }
.result-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.result-tab .tab-count {
  font-size: 10px; font-weight: 700;
  background: var(--color-border);
  color: var(--color-text-secondary);
  padding: 1px 7px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.result-tab.active .tab-count { background: var(--color-accent); color: white; }

/* ── URL List ── */
.url-list { padding: 0; }
.url-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--color-border-light);
  transition: background 80ms ease;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
}
.url-row:hover { background: var(--color-accent-light); }
.url-row:nth-child(even) { background: var(--color-zebra); }
.url-row:nth-child(even):hover { background: var(--color-accent-light); }
.url-num {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  color: var(--color-text-muted);
  width: 32px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.url-type-badge {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 1px 6px; border-radius: 3px;
  min-width: 36px; text-align: center;
}
.url-type-badge.image { background: #DBEAFE; color: #1D4ED8; }
.url-type-badge.video { background: #EDE9FE; color: #6D28D9; }
.url-type-badge.other { background: #F1F5F9; color: #64748B; }
.url-text {
  flex: 1; min-width: 0;
  color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.url-text:hover { color: var(--color-accent); text-decoration: underline; }

/* ── Free Badge ── */
.free-badge {
  display: inline-block;
  font-size: 9px; font-weight: 800;
  color: #7a5c00;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.4;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 1px 3px rgba(245,158,11,0.4);
  position: relative;
  overflow: hidden;
}
.free-badge::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  animation: shine 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%   { transform: translateX(-100%) skewX(-20deg); }
  20%  { transform: translateX(100%) skewX(-20deg); }
  100% { transform: translateX(100%) skewX(-20deg); }
}

/* ── Media Preview ── */
.media-preview {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
  max-height: 340px;
  overflow-y: auto;
}
.media-preview.visible { display: block; }
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  padding: 10px;
}
.media-cell {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-editor-bg);
  border-radius: 6px;
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.media-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.media-cell.error {
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: 12px; font-weight: 600;
  border-style: dashed;
}
.media-cell.video-card {
  background: linear-gradient(135deg, #1F2937, #111827);
  color: white;
  font-size: 10px; font-weight: 600; font-family: var(--font-mono);
  cursor: pointer;
  text-align: center;
  padding: 4px;
  word-break: break-all;
}
.media-cell.video-card::before {
  content: "▶";
  display: block;
  font-size: 20px;
  margin-bottom: 4px;
}
.media-cell.video-card:hover { opacity: 0.85; }

.show-more-bar {
  padding: 8px 10px;
  text-align: center;
  border-top: 1px solid var(--color-border-light);
}
.show-more-bar button {
  font-size: 12px; color: var(--color-accent);
  background: none; border: 1px solid var(--color-accent);
  padding: 5px 14px; border-radius: 14px;
  font-weight: 500; cursor: pointer;
  font-family: var(--font-sans);
}
.show-more-bar button:hover { background: var(--color-accent-light); }

@media (max-width: 1024px) {
  .panel-left { width: 100%; height: auto; min-height: 300px; min-width: auto; }
}
@media (max-width: 640px) {
  .media-grid { grid-template-columns: repeat(3, 1fr); }
}