* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.6; color: #2d3748; background: #fafafa; }

.container { max-width: 1200px; margin: 0 auto; padding: 24px; }

.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.header h1 { font-size: 24px; font-weight: 700; }
.subtitle { color: #718096; font-size: 14px; margin-top: 2px; }
.subtitle code { background: rgba(139,127,199,0.1); color: #8b7fc7; padding: 2px 6px; border-radius: 4px; font-size: 13px; }

.info-banner { background: linear-gradient(135deg, rgba(139,127,199,0.08), rgba(157,214,197,0.08)); border: 1px solid #e8e4f0; border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; font-size: 13px; color: #4a5568; line-height: 1.7; }
.info-banner code { background: rgba(139,127,199,0.12); color: #8b7fc7; padding: 1px 5px; border-radius: 3px; font-size: 12px; }

.btn { padding: 10px 20px; font-size: 14px; font-weight: 500; border-radius: 8px; border: none; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.btn-primary { background: linear-gradient(135deg, #8b7fc7, #7c6fb8); color: white; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,127,199,0.3); }
.btn-primary:active { transform: scale(0.97); }

@keyframes spin { to { transform: rotate(360deg); } }
.spinning { animation: spin 0.8s linear infinite; display: inline-block; }

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

.card { background: #fff; border: 1px solid #e8e4f0; border-radius: 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139,127,199,0.08); }
.card.success { border-color: #c6f6d5; }
.card.error { border-color: #fed7d7; }

.card-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px 0; }
.card-icon { font-size: 20px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f7f5ff; border-radius: 8px; }
.card-title { font-weight: 600; font-size: 15px; flex: 1; }
.card-badge { font-size: 11px; padding: 3px 8px; border-radius: 6px; font-weight: 500; background: #f0f0f0; color: #718096; }
.card-badge.ok { background: rgba(104,211,145,0.15); color: #2f855a; }
.card-badge.live { background: rgba(139,127,199,0.15); color: #6b5fb5; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.card-badge.err { background: rgba(252,129,129,0.15); color: #c53030; }

.card-body { padding: 16px 20px; flex: 1; min-height: 100px; }

.card-footer { padding: 10px 20px; border-top: 1px solid #f0edf5; display: flex; justify-content: space-between; font-size: 12px; color: #a0aec0; }
.api-url { font-family: monospace; }
.latency { font-weight: 600; }
.latency.fast { color: #38a169; }
.latency.medium { color: #d69e2e; }
.latency.slow { color: #e53e3e; }

.skeleton { height: 18px; background: linear-gradient(90deg, #f0edf5 25%, #f7f5ff 50%, #f0edf5 75%); background-size: 200% 100%; border-radius: 6px; animation: shimmer 1.5s infinite; margin-bottom: 10px; }
.skeleton.short { width: 60%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.big-number { font-size: 28px; font-weight: 700; color: #2d3748; margin-bottom: 4px; }
.big-number .unit { font-size: 14px; font-weight: 400; color: #718096; margin-left: 4px; }
.data-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #f7f5ff; }
.data-row:last-child { border-bottom: none; }
.data-label { color: #718096; font-size: 13px; }
.data-value { font-weight: 600; font-size: 14px; }
.change.positive { color: #38a169; font-size: 12px; }
.change.negative { color: #e53e3e; font-size: 12px; }

.fact-text { font-size: 15px; line-height: 1.7; color: #4a5568; font-style: italic; }
.breed-name { margin-top: 8px; font-weight: 600; color: #8b7fc7; text-transform: capitalize; }

.error-msg { color: #c53030; font-size: 13px; }

.page-footer { text-align: center; margin-top: 32px; color: #a0aec0; font-size: 13px; }
.page-footer code { background: rgba(139,127,199,0.1); color: #8b7fc7; padding: 2px 6px; border-radius: 4px; }

@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  .header { flex-direction: column; gap: 12px; align-items: flex-start; }
}