:root {
    --primary: #007bff;
    --dark: #002752;
    --text: #121416;
    --light: #f8f9fa;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); line-height: 1.6; margin: 0; }
a { color: var(--primary); text-decoration: none; }
.navbar { background: var(--dark); padding: 1rem; display: flex; align-items: center; color: white; flex-wrap: wrap; }
.navbar-brand { font-size: 1.5rem; font-weight: bold; color: white; display: flex; align-items: center; gap: 10px; }
.navbar-nav { list-style: none; display: flex; gap: 15px; margin: 0; padding: 0; }
.nav-link { color: #fff; padding: 0.5rem; font-size: 0.9rem; }
.jumbotron { background: linear-gradient(135deg, #004085, #007bff); color: white; padding: 4rem 2rem; text-align: center; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 2rem; }
.col-md-4, .col-md-5, .col-md-3 { flex: 1; min-width: 280px; }
.emoji-list { padding: 0; list-style: none; }
.emoji-list li { padding: 8px 0; border-bottom: 1px solid #eee; }
.emoji { font-size: 1.5rem; margin-right: 10px; vertical-align: middle; }
footer { background: #eee; padding: 2rem 0; margin-top: 3rem; text-align: center; font-size: 0.8rem; }
@media (max-width: 768px) { .row { flex-direction: column; } .navbar-nav { display: none; } }