.favicon-source-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.favicon-source-tab {
  min-height: 46px;
  border: 1px solid var(--gt-line);
  border-radius: 12px;
  color: var(--gt-muted);
  background: rgba(15, 31, 51, .6);
  cursor: pointer;
  font-weight: 700;
}

.favicon-source-tab[aria-selected="true"],
.favicon-source-tab:hover,
.favicon-source-tab:focus-visible {
  border-color: var(--gt-accent);
  color: var(--gt-text);
  background: var(--gt-accent-soft);
  outline: 0;
}

.favicon-source-panel[hidden] { display: none; }

.favicon-settings {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
  align-items: end;
  margin-top: 16px;
}

.favicon-color-field input[type="color"] {
  width: 100%;
  min-height: 48px;
  padding: 5px;
  cursor: pointer;
}

.favicon-range-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.favicon-range-row input { flex: 1; accent-color: var(--gt-accent); }
.favicon-range-value { min-width: 48px; color: var(--gt-text); font-weight: 700; text-align: right; }

.favicon-preview-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.favicon-preview {
  min-height: 150px;
  padding: 16px;
  border: 1px solid var(--gt-line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(20, 184, 166, .11), rgba(79, 70, 229, .08));
  text-align: center;
}

.favicon-preview__stage {
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(2, 6, 23, .45);
}

.favicon-preview canvas { display: block; image-rendering: auto; }
.favicon-preview__stage canvas[data-preview="tab"] { width: 32px; height: 32px; }
.favicon-preview__stage canvas[data-preview="apple"] { width: 72px; height: 72px; border-radius: 16px; }
.favicon-preview__stage canvas[data-preview="pwa"] { width: 92px; height: 92px; border-radius: 20px; }
.favicon-preview__label { color: var(--gt-muted); font-size: .82rem; font-weight: 700; }

.favicon-downloads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.favicon-downloads button { min-height: 40px; }

.favicon-snippet {
  width: 100%;
  min-height: 152px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--gt-line);
  border-radius: 12px;
  color: #c4b5fd;
  background: rgba(2, 6, 23, .6);
  font: .78rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}

.favicon-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.favicon-actions .gt-button { flex: 1 1 180px; }

.favicon-file-note { margin-top: 8px; color: var(--gt-muted); font-size: .82rem; }
.favicon-privacy-note { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; padding: 12px 14px; border: 1px solid rgba(52, 211, 153, .25); border-radius: 12px; color: #a7f3d0; background: var(--gt-success-soft); font-size: .82rem; line-height: 1.55; }

@media (max-width: 720px) {
  .favicon-settings, .favicon-preview-rail { grid-template-columns: 1fr; }
  .favicon-preview { min-height: 132px; }
}

@media (max-width: 420px) {
  .favicon-source-tabs, .favicon-downloads { grid-template-columns: 1fr; }
}