/* Main Content Area */
.content { 
    flex: 1; 
    overflow-y: auto; 
    padding: 2rem 3rem; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

/* Top Navigation Bar */
.topbar { 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 2.5rem; 
}

.search-bar { 
    background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 12px; 
    padding: 0.8rem 1.2rem; 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    width: 400px; 
}

.search-bar input { 
    background: transparent; 
    border: none; 
    outline: none; 
    color: white; 
    width: 100%; 
    font-family: var(--font); 
}

/* Glass Panels & Modals Base */
.glass-panel {
    background: var(--card); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
    padding: 1.2rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

.modal { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.6); 
    backdrop-filter: blur(5px); 
    z-index: 1000; 
    justify-content: center; 
    align-items: center; 
}

.modal.active { display: flex; }

.modal-content { 
    width: 90%; 
    max-width: 800px; 
    max-height: 85vh; 
    overflow-y: auto; 
    background: var(--bg); 
}

/* UI Utility Components */
.spinner { 
    width: 40px; 
    height: 40px; 
    border: 4px solid rgba(255,255,255,0.1); 
    border-top: 4px solid var(--accent); 
    border-radius: 50%; 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.primary-btn { 
    background: var(--accent); 
    color: #0f172a; 
    font-weight: 700; 
    border: none; 
    padding: 0.5rem 1.2rem; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: background 0.2s; 
}

.primary-btn:hover { background: var(--accent-hover); }

.action-btn { 
    background: rgba(0,0,0,0.4); 
    border: none; 
    border-radius: 4px; 
    padding: 5px 10px; 
    cursor: pointer; 
    color: white; 
    transition: background 0.2s; 
    font-weight: bold; 
}

.action-btn:hover { background: rgba(184, 59, 94, 0.8); }
.ai-btn:hover { background: var(--ai-accent); color: white; }