body { font-family: 'Pretendard', sans-serif; }
.server-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.panel-overlay { animation: fadeIn 0.2s ease-out; }
.panel-content { animation: scaleIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.dark .apexcharts-tooltip-title, .dark .apexcharts-tooltip-text { color: #1f2937; }
.draggable-item { cursor: grab; }
.dragging { opacity: 0.5; background-color: #3b82f6 !important; border: 2px dashed #93c5fd; }

#issue-tracker-panel {
    transition: transform 0.3s ease-in-out;
}
#issue-tracker-panel.is-open {
    transform: translateX(0);
}
@keyframes card-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.issue-card.animate-fade-in {
    animation: card-fade-in 0.4s ease-out forwards;
}

#loading-overlay {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}
.aurora-bg {
    background: radial-gradient(ellipse at top, #1e293b, #0f172a),
    radial-gradient(ellipse at bottom, #38bdf8, #0f172a);
    background-size: 200% 200%;
    animation: aurora 10s ease-in-out infinite;
}
@keyframes aurora {
    0% { background-position: 50% 0%; }
    50% { background-position: 50% 100%; }
    100% { background-position: 50% 0%; }
}
.modern-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid #67e8f9;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}
.animate-pulse-red {
    animation: pulse-red 2s infinite;
}

@keyframes pulse-blue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
    50% { box-shadow: 0 0 0 5px rgba(59, 130, 246, 0); }
}
.animate-pulse-blue {
    animation: pulse-blue 2s infinite;
}
.accordion-chevron {
    transition: transform 0.2s ease-in-out;
}
.animate-pulse-blue {
    animation: pulse-blue 2s infinite;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
}

details[open] > summary .accordion-chevron {
    transform: rotate(90deg);
}