*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    padding: 0;
    margin: 0;
}
:root {
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50:  #f5f5f7;
    --color-gray-100: #e8e8ed;
    --color-gray-200: #d2d2d7;
    --color-gray-300: #c7c7cc;
    --color-gray-400: #aeaeb2;
    --color-gray-500: #8e8e93;
    --color-gray-600: #6e6e73;
    --color-gray-700: #48484a;
    --color-gray-800: #3a3a3c;
    --color-gray-900: #1d1d1f;
    --color-indigo-400: #1d1d1f;
    --color-indigo-600: #1d1d1f;
    --color-indigo-700: #000000;
    --color-red-500: #ef4444;
    --color-blue-600: #2563eb;
    --color-yellow-bg-light:   #fef3c7;
    --color-yellow-text-light: #92400e;
    --color-yellow-bg-dark:    #451a03;
    --color-yellow-text-dark:  #fcd34d;
    --color-green-bg-light:    #dcfce7;
    --color-green-text-light:  #065f46;
    --color-green-bg-dark:     #052e16;
    --color-green-text-dark:   #6ee7b7;
    --color-text-primary:      #1d1d1f;
    --color-text-secondary:    #6e6e73;
    --color-bg-primary:        #ffffff;
    --color-bg-secondary:      #f5f5f7;
    --color-header-bg:         rgba(255, 255, 255, 0.82);
    --color-border-subtle:     rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.dark {
    --color-text-primary:   #f5f5f7;
    --color-text-secondary: #98989d;
    --color-bg-primary:     #000000;
    --color-bg-secondary:   #111111;
    --color-header-bg:      rgba(0, 0, 0, 0.82);
    --color-border-subtle:  rgba(255, 255, 255, 0.1);
    --color-indigo-600: #f5f5f7;
    --color-indigo-700: #ffffff;
    --color-indigo-400: #f5f5f7;
}

body {
    line-height: 1.5;
    overflow-x: hidden; 
}

#app {
    min-height: 100vh;
    width: 100%; 
    margin: 0; 
    color: var(--color-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Utilities */
.hidden { display: none !important; }
.flex-items-center { display: flex; align-items: center; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.text-indigo { color: var(--color-indigo-600); }
.dark .text-indigo { color: var(--color-indigo-400); }
.text-dark-gray { color: var(--color-gray-700); }
.dark .text-dark-gray { color: var(--color-white); }
.icon-20 { width: 1.25rem; height: 1.25rem; }
.icon-32 { width: 2rem; height: 2rem; }

/* Background Animations ... */
#animated-background {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    background-color: var(--color-bg-primary);
    transition: background-color 0.4s ease;
}
.color-blob { display: none; }

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