@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700;900&display=swap');
:root { --bg-body: #f4f4f0; --bg-card: #ffffff; --primary: #facc15; --accent: #8b5cf6; --text-main: #000000; --border: #000000; --shadow: 5px 5px 0px #000000; }
* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
body { background-color: var(--bg-body); color: var(--text-main); font-family: 'Lexend', sans-serif; min-height: 100vh; }
.container { max-width: 1400px; margin: 0 auto; padding: 50px 20px; }
.top-bar { text-align: center; margin-bottom: 50px; }
.logo { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: -2px; background: var(--primary); display: inline-block; padding: 5px 15px; border: 3px solid var(--border); box-shadow: var(--shadow); transform: rotate(-2deg); }
.logo span { color: #fff; -webkit-text-stroke: 1px black; }
.search-wrapper { display: flex; justify-content: center; margin-bottom: 50px; }
#searchInput { width: 100%; max-width: 600px; padding: 18px; background: #fff; border: 3px solid var(--border); font-size: 1.1rem; font-weight: bold; box-shadow: var(--shadow); border-radius: 0; }
#searchInput:focus { background: var(--primary); }
.card { background: var(--bg-card); border: 3px solid var(--border); padding: 20px; margin-bottom: 25px; box-shadow: var(--shadow); border-radius: 0; transition: 0.2s; }
.card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0px #000; }
.card-header { display: flex; align-items: center; margin-bottom: 15px; border-bottom: 3px solid var(--border); padding-bottom: 10px; }

/* FIX: Image Sizing */
.cat-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: white; border: 2px solid var(--border); margin-right: 15px; }
.cat-icon i { font-size: 1.2rem; }
.cat-icon svg, .cat-icon img { width: 20px; height: 20px; object-fit: contain; }

.card-header h2 { font-weight: 900; font-size: 1.2rem; text-transform: uppercase; }
.link-btn { display: block; background: #fff; padding: 12px; text-decoration: none; color: var(--text-main); border: 2px solid var(--border); transition: 0.2s; margin-bottom: 10px; font-weight: 700; }
.link-btn:hover { background: var(--primary); box-shadow: 3px 3px 0px #000; }
.link-name { display: block; }
.link-desc { font-weight: 400; font-size: 0.85rem; color: #444; margin-top: 2px; }
.btn-action, .btn-admin { background: var(--accent); color: #fff; padding: 10px 20px; border: 3px solid var(--border); font-weight: 900; cursor: pointer; text-transform: uppercase; box-shadow: 3px 3px 0px #000; }
.btn-del { background: #ff4757; }
.form-input { padding: 12px; border: 3px solid var(--border); margin-bottom: 10px; width: 100%; font-weight: bold; font-family: 'Lexend', sans-serif; }
.site-footer { display: block; width: 100%; text-align: center; margin-top: 50px; padding: 20px 0; font-size: 0.9rem; color: var(--text-main); font-weight: 900; text-transform: uppercase; }

/* --- CATEGORY PAGE SPECIFIC --- */

.nav-back {
    background: #fff;
    border: 3px solid var(--border);
    padding: 10px 20px;
    font-weight: 900;
    box-shadow: var(--shadow);
    color: var(--text-main);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.nav-back:hover {
    background: var(--primary);
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0px #000;
}

.cat-hero {
    background: #fff !important;
    border: 3px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow) !important;
}
.cat-hero-icon {
    background: var(--accent) !important;
    border: 3px solid var(--border) !important;
    color: #fff !important;
    border-radius: 0 !important; /* Brutalist shape */
}
.cat-hero-text h1 { color: #000 !important; text-transform: uppercase; }

.link-card {
    background: #fff !important;
    border: 3px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow) !important;
}
.link-card:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 8px 8px 0px #000 !important;
    border-color: #000 !important;
    background: var(--primary) !important; /* Yellow hover */
}
.link-card::before { display: none !important; }

.review-badge {
    background: var(--accent) !important;
    border: 2px solid #000;
    color: #fff !important;
}