/* Favicon Fetcher Tool Styles */

.favicon-fetcher-container {
  max-width: 900px;
  margin: 0 auto;
}

/* 输入区域 */
.input-section {
  margin-bottom: 2rem;
}

.input-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #e7e7ea;
}

.url-input-wrapper {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.url-input {
  flex: 1;
  min-width: 0;
}

.input-hint {
  font-size: 0.85rem;
  color: #a6a6b2;
  margin: 0.5rem 0 0;
}

/* 加载状态 */
.loading-section {
  text-align: center;
  padding: 3rem 1rem;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #24242a;
  border-top: 4px solid #7aa2ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-section p {
  color: #a6a6b2;
  margin: 0;
}

/* 错误区域 */
.error-section {
  text-align: center;
  padding: 2rem 1rem;
  background: #2a1a1a;
  border: 1px solid #4a2a2a;
  border-radius: 0.75rem;
}

.error-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

.error-message {
  color: #ff7b7b;
  font-size: 1rem;
  margin: 0;
}

/* 结果区域 */
.results-section {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.results-section h3 {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: #e7e7ea;
}

/* Favicon 显示 */
.favicon-display {
  display: flex;
  gap: 2rem;
  padding: 1.5rem;
  background: #111116;
  border: 1px solid #24242a;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
  align-items: center;
}

.favicon-preview {
  flex-shrink: 0;
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a20;
  border: 2px solid #2a2a33;
  border-radius: 0.5rem;
  padding: 1rem;
}

.favicon-preview img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.favicon-info {
  flex: 1;
  min-width: 0;
}

.info-item {
  margin: 0.75rem 0;
  font-size: 0.95rem;
  word-break: break-all;
}

.info-item strong {
  display: block;
  color: #a6a6b2;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.info-item span,
.info-item a {
  color: #e7e7ea;
}

.info-item a {
  color: #7aa2ff;
  text-decoration: none;
}

.info-item a:hover {
  text-decoration: underline;
}

/* Favicon 来源列表 */
.favicon-sources {
  margin-bottom: 2rem;
}

.favicon-sources h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #e7e7ea;
}

.sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.source-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: #111116;
  border: 1px solid #24242a;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.source-card:hover {
  border-color: #3a3a44;
  background: #1a1a20;
}

.source-card.selected {
  border-color: #7aa2ff;
  background: #1a1a2a;
}

.source-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}

.source-info {
  flex: 1;
  min-width: 0;
}

.source-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #e7e7ea;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-size {
  font-size: 0.75rem;
  color: #a6a6b2;
}

.btn-small {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  background: #1b1b22;
  border: 1px solid #2a2a33;
  color: #e7e7ea;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-small:hover {
  background: #24242a;
  border-color: #3a3a44;
}

.source-card.selected .btn-small {
  background: #2a335b;
  border-color: #3b4781;
  color: #fff;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* 下载提示 */
.download-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #1a1a20;
  border: 1px solid #2a2a33;
  border-radius: 0.5rem;
  margin-top: 1rem;
}

.tip-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  opacity: 0.8;
}

.download-tip p {
  margin: 0;
  font-size: 0.9rem;
  color: #c7c7ca;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .url-input-wrapper {
    flex-direction: column;
  }
  
  .favicon-display {
    flex-direction: column;
    text-align: center;
  }
  
  .sources-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .action-buttons .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .input-section h2 {
    font-size: 1.2rem;
  }
  
  .favicon-preview {
    width: 96px;
    height: 96px;
  }
  
  .results-section h3 {
    font-size: 1.1rem;
  }
}