:root{
  --sc:#441752; --ink:#1f1f1f; --mut:#6e647b; --fx:#F6F1FB; --bd:#E7DDF1; --r:16px;
}
.gc-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

.gc-app{font-family:Rubik,system-ui,sans-serif;color:var(--ink);max-width:1200px;margin:0 auto;padding:16px 20px 32px}

/* Bar */
.gc-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.gc-search{flex:1 1 420px;position:relative}
.gc-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:#7f7094}
.gc-search input{width:100%;padding:12px 38px 12px 36px;border:1px solid var(--bd);border-radius:12px;outline:none}
.gc-search input:focus{border-color:#d9c7ee;box-shadow:0 0 0 4px #f2ebff}
.gc-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;width:28px;height:28px;border-radius:8px;color:#8a8197;cursor:pointer}
.gc-clear:hover{background:#f4eefb}
.gc-filters{display:flex;gap:8px;align-items:center}
.gc-filters select{padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:#fff}
.gc-refresh{padding:10px 14px;border-radius:10px;border:1px solid var(--bd);background:var(--fx);color:var(--sc);font-weight:700;cursor:pointer}

.gc-status{margin:6px 2px 10px;color:var(--mut);font-size:.95rem}

/* Grid (square tiles) */
.gc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:1280px){.gc-grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:1100px){.gc-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){ .gc-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){ .gc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){ .gc-grid{grid-template-columns:1fr}}

.gc-tile{display:block;position:relative;border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:#fff;transition:transform .15s ease,box-shadow .15s ease}
.gc-tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.gc-thumb{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#f6f2fb}

/* Floating date (bottom-left) */
.gc-date{
  position:absolute;left:8px;bottom:8px;
  background:rgba(255,255,255,.92);color:#36294b;border:1px solid rgba(231,221,241,.9);
  padding:6px 8px;border-radius:10px;font-size:.82rem;font-weight:800;letter-spacing:.15px;
}

/* Skeletons */
.gc-skel{border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:#fff}
.gc-skel .s-img{
  aspect-ratio:1/1;
  background:linear-gradient(90deg,#f4effa 25%,#efe6fb 37%,#f4effa 63%);
  background-size:400% 100%; animation:gc-sh 1.2s infinite;
}
@keyframes gc-sh{0%{background-position:100% 0}100%{background-position:-100% 0}}

.gc-more{text-align:center;margin-top:12px}
.gc-load{padding:12px 18px;border-radius:12px;border:1px solid var(--bd);background:var(--fx);color:var(--sc);font-weight:800;cursor:pointer}
/* Grid (square tiles) — 3 per row desktop */
.gc-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

/* Tablet: 2 columns */
@media (max-width: 900px){
  .gc-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* Mobile: 1 column */
@media (max-width: 520px){
  .gc-grid{ grid-template-columns:1fr; }
}