:root {
    --sidebar-width: 320px;
    --topbar-height: 60px;
    --menu-inner-width: 290px;
}

body, html {
    margin: 0; padding: 0; height: 100vh; width: 100vw;
    background: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1920&q=80') no-repeat center center fixed;
    background-size: cover;
    font-family: 'Century Gothic', sans-serif;
    display: grid;
    grid-template-areas: "topbar topbar" "aside main";
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--topbar-height) 1fr;
    overflow: hidden; 
}

header {
    grid-area: topbar;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; align-items: center; padding: 0 15px; color: white; z-index: 1000;
}

.search-container { width: var(--menu-inner-width); display: flex; align-items: center; }

#top-search {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1);
    color: #ffffff !important; font-family: 'Century Gothic', sans-serif; font-size: 15px; outline: none;
}

.top-content { display: flex; justify-content: space-between; flex-grow: 1; padding-left: 30px; align-items: center; }
.top-content a { color: white; text-decoration: none; font-size: 22px; }

.user-info { font-size: 16px; }

aside { grid-area: aside; overflow: hidden; }

main { grid-area: main; overflow: hidden; }

iframe { width: 100%; height: 100%; border: none; background: transparent; display: block; }