/* Favicon Generator: previews at real size and a browser-tab mock-up. */
.fav-previews { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; }
.fav-previews figure { margin: 0; display: grid; justify-items: center; gap: 6px; }
.fav-previews figcaption { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.fav-previews canvas {
  display: block; image-rendering: auto; border-radius: 4px;
  background: repeating-conic-gradient(rgba(128, 128, 128, 0.22) 0% 25%, transparent 0% 50%) 50% / 8px 8px;
}
[data-fav-preview='apple-touch-icon.png'] canvas { width: 60px; height: 60px; border-radius: 13px; }
[data-fav-preview='android-chrome-192x192.png'] canvas { width: 64px; height: 64px; }
[data-fav-preview='android-chrome-512x512.png'] canvas { width: 96px; height: 96px; }
.fav-tab { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 9px 14px; border-radius: 12px 12px 0 0; background: var(--glass-strong); border: 1px solid var(--line); border-bottom: 0; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.fav-tab canvas { width: 16px; height: 16px; flex-shrink: 0; }
.fav-tab span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fav-x { margin-left: auto; padding-left: 12px; color: var(--muted); }
#fav-bg-field.is-muted input[type='color'] { opacity: 0.4; }
#fav-files td:last-child { text-align: right; }
/* Keep long file names from widening the panel on phones (grid tracks otherwise grow to min-content). */
#tool, #tool .stack, #tool .stack-sm, #tool .file-list { grid-template-columns: minmax(0, 1fr); }
#tool .hint, #tool .file-item .meta small { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  #fav-files th:nth-child(3), #fav-files td:nth-child(3) { display: none; }
  #fav-files td:first-child { overflow-wrap: anywhere; font-size: 0.86rem; }
  #fav-files td:nth-child(2) { white-space: nowrap; }
}