/* General Styles */
body { font-family: 'Roboto', sans-serif; background-color: #f8f9fa; }
main { flex-grow: 1; }
.navbar-brand .fa-palette { margin-right: 0.3em; color: #0d6efd; }
.card { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; border: none; }
.card:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1) !important; }
.color-preview-box { width: 100px; height: 100px; border: 1px solid #dee2e6; margin: 0 auto 1rem; transition: background-color 0.3s ease; }
.btn .fa-copy { margin-right: 0.3em; }
footer a.text-white-50:hover { color: #fff !important; text-decoration: underline; }
a:focus, button:focus, input[type="color"]:focus { outline: 2px solid #0d6efd !important; outline-offset: 2px; }
input[type="color"] { min-height: 48px; padding: 0.25rem;}
.table th { background-color: #e9ecef; }
.form-control-color { width: 100px; height: 50px; }