/* Shared look: homepage polkadot + gradient, Saira, glass cards from the manager */
:root { --gold: #F5A413; --gold-line: #FFC000; --accent: #00ffd0; --glass: rgba(255,255,255,0.1); }
* { box-sizing: border-box; }
html {
    background-image: radial-gradient(rgba(234,234,234,0.2) 3%, transparent 20%), radial-gradient(rgba(250,250,250,0.1) 3%, transparent 20%);
    background-color: #000;
    background-position: 0 0, 25px 25px;
    background-size: 50px 50px;
    font-family: 'Saira', sans-serif;
    min-height: 100%;
}
body {
    background: linear-gradient(174deg, rgba(62,62,194,0.75) 0%, rgba(39,156,138,0.75) 100%);
    margin: 0; padding: 40px; color: #fff; min-height: 100vh;
}
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--gold-line); outline-offset: 3px; }

.header-box {
    background: rgba(0,0,0,0.4); padding: 20px 24px; border-radius: 12px; margin-bottom: 30px;
    border-left: 5px solid var(--gold-line); backdrop-filter: blur(10px);
}
.header-box h1 { margin: 0 0 6px; color: var(--gold-line); }
.header-box p { margin: 0; opacity: .8; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.filters button {
    font: inherit; font-weight: 700; padding: 8px 18px; border-radius: 8px; cursor: pointer;
    background: rgba(0,0,0,0.4); color: #fff; border: 1px solid rgba(255,255,255,0.15);
}
.filters button:hover { border-color: var(--gold-line); }
.filters button.on { background: var(--gold); color: #1a1200; border-color: var(--gold-line); }

h1.cat-title {
    color: var(--gold-line); margin: 50px 0 20px; padding-bottom: 10px;
    border-bottom: 2px solid rgba(255,192,0,0.35);
}
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }

.card {
    background: var(--glass); backdrop-filter: blur(10px); border-radius: 12px; padding: 20px;
    text-align: center; border: 3px solid transparent; color: #fff; text-decoration: none; display: block;
    transition: border-color .2s, box-shadow .2s;
}
a.card:hover, a.card:focus-visible { border-color: var(--gold-line); box-shadow: 0 0 25px rgba(255,192,0,0.45); }
.img-container {
    width: 256px; height: 256px; max-width: 100%; margin: 0 auto 15px;
    background: rgba(0,0,0,0.4); border-radius: 8px; overflow: hidden; pointer-events: none;
}
.img-container img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folder-name { font-weight: 700; font-size: 1.15em; display: block; overflow-wrap: anywhere; }

@media (max-width: 600px) { body { padding: 16px; } }