/* 友情链接样式 */

/* ---------- 友情链接列表 ---------- */
.fl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--fl-cols, 4), 1fr);
  gap: 1rem;
}

.fl-col-1 { --fl-cols: 1; }
.fl-col-2 { --fl-cols: 2; }
.fl-col-3 { --fl-cols: 3; }
.fl-col-4 { --fl-cols: 4; }
.fl-col-5 { --fl-cols: 5; }
.fl-col-6 { --fl-cols: 6; }

.fl-item {
  margin: 0;
  padding: 0;
}

.fl-link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text-primary);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.fl-link:hover,
.fl-link:focus {
  color: var(--color-text-primary);
  border-color: var(--color-primary);
  box-shadow: 0 6px 20px rgba(74, 140, 94, 0.12);
  transform: translateY(-3px);
}

.fl-favicon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  background-color: var(--color-primary-light);
  overflow: hidden;
  flex-shrink: 0;
}

.fl-favicon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}

.fl-favicon-fallback,
.fl-favicon-placeholder {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  background: transparent;
}

.fl-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  word-break: break-word;
  margin-bottom: 0.25rem;
}

.fl-rating {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 0.25rem;
}

.fl-star {
  width: 12px;
  height: 12px;
  background-color: var(--color-border);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.401 8.169L12 18.896l-7.335 3.86 1.4-8.169L.132 9.21l8.2-1.192z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.401 8.169L12 18.896l-7.335 3.86 1.4-8.169L.132 9.21l8.2-1.192z'/></svg>") center/contain no-repeat;
}

.fl-star-on {
  background-color: #f5a623;
}

.fl-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: auto;
  padding-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 不可访问链接：灰色显示 */
.fl-item.fl-invalid .fl-link,
.fl-link.fl-invalid {
  background-color: var(--color-bg-card);
  border-color: var(--color-border-light);
  opacity: 0.55;
  filter: grayscale(1);
  cursor: not-allowed;
}

.fl-item.fl-invalid .fl-link:hover,
.fl-link.fl-invalid:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border-light);
}

/* 网站响应速度（ping 值）标签，显示在卡片右上角 */
.fl-ping {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 2px 7px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  background-color: var(--color-border-light);
  color: var(--color-text-muted);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.fl-ping-fast {
  color: #2e8b57;
  background-color: rgba(46, 139, 87, 0.12);
}

.fl-ping-normal {
  color: #d97706;
  background-color: rgba(217, 119, 6, 0.12);
}

.fl-ping-slow {
  color: #dc2626;
  background-color: rgba(220, 38, 38, 0.12);
}

/* 不可访问时隐藏 ping */
.fl-item.fl-invalid .fl-ping {
  display: none;
}

/* 深色模式 */
html.dark-theme .fl-ping-fast {
  color: #6ee7a3;
  background-color: rgba(110, 231, 163, 0.15);
}

html.dark-theme .fl-ping-normal {
  color: #fbbf24;
  background-color: rgba(251, 191, 36, 0.15);
}

html.dark-theme .fl-ping-slow {
  color: #fca5a5;
  background-color: rgba(252, 165, 165, 0.15);
}

.fl-status-tag {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
  border-radius: 4px;
  align-self: flex-start;
}

.fl-list-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  background-color: var(--color-bg-card);
  border: 1px dashed var(--color-border);
  border-radius: 10px;
}

/* ---------- 申请表单 ---------- */
.fl-submit-form-wrap {
  max-width: 640px;
  margin: 1.5rem auto;
  padding: 1.5rem;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.fl-submit-form .fl-form-row {
  margin-bottom: 1rem;
}

.fl-submit-form .fl-form-row:last-of-type {
  margin-bottom: 1.25rem;
}

.fl-submit-form label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.fl-required {
  color: var(--color-danger);
  margin-left: 2px;
}

.fl-submit-form input[type="text"],
.fl-submit-form input[type="url"],
.fl-submit-form input[type="email"],
.fl-submit-form textarea,
.fl-submit-form select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fl-submit-form input:focus,
.fl-submit-form textarea:focus,
.fl-submit-form select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(74, 140, 94, 0.12);
}

.fl-submit-form textarea {
  resize: vertical;
}

.fl-form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fl-submit-btn {
  padding: 0.55rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background-color: var(--color-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.fl-submit-btn:hover {
  background-color: var(--color-primary-hover);
}

.fl-submit-btn:active {
  transform: translateY(1px);
}

.fl-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fl-form-message {
  margin-top: 0.75rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  border-radius: 6px;
  min-height: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.3s ease;
}

.fl-form-message.show {
  opacity: 1;
  max-height: 200px;
  margin-top: 0.75rem;
  padding: 0.55rem 0.85rem;
}

.fl-form-message.success {
  color: var(--color-success);
  background-color: var(--color-success-bg);
}

.fl-form-message.error {
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .fl-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .fl-col-4,
  .fl-col-5,
  .fl-col-6 {
    --fl-cols: 3;
  }
}

@media (max-width: 480px) {
  .fl-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .fl-col-1,
  .fl-col-2,
  .fl-col-3,
  .fl-col-4,
  .fl-col-5,
  .fl-col-6 {
    --fl-cols: 2;
  }
  .fl-link {
    padding: 0.75rem;
  }
  .fl-name {
    font-size: 0.85rem;
  }
  .fl-desc {
    font-size: 0.75rem;
    -webkit-line-clamp: 1;
  }
  .fl-submit-form-wrap {
    padding: 1rem;
    margin: 1rem auto;
  }
}

/* ---------- 深色模式 ---------- */
html.dark-theme .fl-link:hover,
html.dark-theme .fl-link:focus {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}