* { margin: 0; padding: 0; box-sizing: border-box; }

/* DESKTOP STYLE */
.desktop-header {
    background: #1a1a2e;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    color: white;
}
.desktop-header nav a { color: white; margin: 0 10px; text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.desktop-footer { background: #1a1a2e; color: white; text-align: center; padding: 15px; margin-top: 30px; }

/* MOBILE STYLE */
.mobile-header {
    background: #1a1a2e;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    color: white;
    position: sticky;
    top: 0;
}
.mobile-menu {
    display: none;
    background: #1a1a2e;
    padding: 10px;
}
.mobile-menu a {
    display: block;
    color: white;
    padding: 10px;
    text-decoration: none;
}
.mobile-container { padding: 15px; padding-bottom: 70px; }
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a2e;
    display: flex;
    justify-content: space-around;
    padding: 10px;
    z-index: 99;
}
.bottom-nav a { color: white; text-decoration: none; font-size: 24px; }
.mobile-footer { text-align: center; padding: 10px; background: #1a1a2e; color: white; }

/* RESPONSIVE */
@media (min-width: 769px) {
    .mobile-header, .mobile-menu, .bottom-nav, .mobile-footer { display: none; }
}
@media (max-width: 768px) {
    .desktop-header, .desktop-footer { display: none; }
}