:root {
    --bg-color: #ffffff;
    --text-color: #2D2D2D;
    --card-bg: #ffffff;
    --gray-bg: #F4F4F4;
    --border-color: #e5e7eb;
}

[data-theme='dark'] {
    --bg-color: #0f1115;
    --text-color: #ffffff;
    --card-bg: #181a20;
    --gray-bg: #131519;
    --border-color: #2a2d35;
}

html {
    scroll-behavior: smooth;
}

body { 
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 0;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.pink-btn { 
    transition: transform 0.2s ease, box-shadow 0.2s ease; 
}
.pink-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px -5px rgba(255, 0, 131, 0.4); 
}

.theme-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}
.theme-section {
    background-color: var(--gray-bg);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.dock-item {
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dock-item:hover {
    transform: translateY(-5px) scale(1.1);
}

@keyframes wave {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-40deg); }
}

#mascot-arm-r {
    transform-origin: 30px 36px;
    animation: wave 1s ease-in-out infinite alternate;
}

@keyframes floatBubble {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.speech-bubble {
    animation: floatBubble 3s ease-in-out infinite;
}

#root { animation: fadeIn 0.8s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }