style.css

/* Shared styles across all pages */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Roboto:wght@400;500&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #05060A;
    color: #E0E0E0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
}

/* Button transitions */
button {
    transition: all 0.2s ease-in-out;
}

/* Input focus styles */
input:focus, select:focus {
    outline: none;
    ring: 2px;
    ring-color: rgba(95, 158, 160, 0.5);
    border-color: rgba(95, 158, 160, 0.8);
}

/* Glow animations */
@keyframes glow-primary {
    0% { box-shadow: 0 0 5px 0px rgba(95, 158, 160, 0.3); }
    50% { box-shadow: 0 0 15px 5px rgba(95, 158, 160, 0.6); }
    100% { box-shadow: 0 0 5px 0px rgba(95, 158, 160, 0.3); }
}

@keyframes glow-secondary {
    0% { box-shadow: 0 0 5px 0px rgba(255, 179, 71, 0.3); }
    50% { box-shadow: 0 0 15px 5px rgba(255, 179, 71, 0.7); }
    100% { box-shadow: 0 0 5px 0px rgba(255, 179, 71, 0.3); }
}

/* Animation for status messages */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
.status-message {
    animation: fadeIn 0.3s ease-out;
}

/* Material Icons */
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}