@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.param-card:hover {
    border-color: var(--fb-blue) !important;
    background: rgba(58, 111, 140, 0.05);
}
.param-card.active {
    border-color: var(--fb-blue) !important;
    background: rgba(58, 111, 140, 0.1);
    box-shadow: 0 0 0 3px rgba(58, 111, 140, 0.15);
}

/* Mobile responsive */
@media (max-width: 768px) {
    /* Hero section */
    .spot-hero-section { padding: 24px 0 !important; }
    .spot-hero-section h1 { font-size: 28px !important; letter-spacing: -0.5px !important; margin-bottom: 16px !important; }
    .spot-hero-section .spot-breadcrumb { font-size: 12px !important; margin-bottom: 10px !important; }
    .spot-hero-section .spot-badges { gap: 12px !important; }

    /* Main content: collapse 2-column to single column */
    .spot-main-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .spot-main-content { padding: 24px 16px !important; }

    /* Param grid: 2 columns instead of 3 */
    #param-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .param-card { padding: 12px !important; }
    .param-card .param-value { font-size: 20px !important; }

    /* Fish type grid */
    .fish-type-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* AI guide fish detail card */
    #fish-detail-card > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    /* Section headings */
    .spot-section-title { font-size: 20px !important; margin-bottom: 20px !important; }

    /* Weather card grid */
    #weather-card .weather-grid-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }

    /* Share modal */
    #share-modal > div { width: 95% !important; padding: 16px !important; }
}