:root { --primary-color: #3498db; --secondary-color: #2980b9; --light-bg: #f8f9fa; --dark-bg: #343a40; --border-radius: 8px; --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
a { text-decoration: none; }
body { background-color: #f5f5f5; overflow: hidden; }

.main-container { min-height: 100vh; padding: 20px; }

.category-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0; }

.category-sidebar { background-color: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow); height: calc(100vh - 40px); overflow-y: auto; }

.category-item { padding: 6px 8px; cursor: pointer; border-left: 4px solid transparent; transition: all 0.3s ease; }

.category-item:hover { background-color: var(--light-bg); }

.category-item.active { border-left-color: var(--primary-color); background-color: rgba(52, 152, 219, 0.1); font-weight: 600; }

.category-icon { margin-right: 10px; color: var(--primary-color); }

.content-area { background-color: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow); height: calc(100vh - 40px); overflow-y: auto; }

.subcategory-nav { padding: 15px; border-bottom: 1px solid #eee; background-color: #f8f9fa; border-top-right-radius: var(--border-radius); }

.subcategory-btn { margin-right: 10px; margin-bottom: 10px; }

.websites-container { padding: 20px; }

.website-card { height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #eee; border-radius: var(--border-radius); overflow: hidden; }

.website-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }

.website-card .card-body { padding: 10px 15px; }

.website-title { font-weight: 600; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.website-desc { font-size: 0.85rem; color: #6c757d; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.favorite-btn { color: #aaa; transition: color 0.3s ease; cursor: pointer; background: none; border: none; padding: 0; }

.favorite-btn.active { color: #ffc107; }

.pagination-container { padding: 20px; }

.loading-spinner { display: flex; justify-content: center; align-items: center; height: 200px; }

.category-title { font-weight: 700; margin-bottom: 20px; color: var(--dark-bg); padding-bottom: 10px; border-bottom: 2px solid var(--primary-color); }

.website-icon { width: 24px; height: 24px; margin-right: 10px; object-fit: contain; }

.empty-state { text-align: center; padding: 50px 20px; color: #6c757d; }

@media (max-width: 768px) {
    .category-sidebar { height: auto; margin-bottom: 20px; }

    .content-area { height: auto; }
}