:root{
  --cgg-bg:#1D2733;
  --cgg-card:#223140;
  --cgg-text:#F6F8FB;
  --cgg-muted:#a9b4c2;
  --cgg-live:#1dd75b;
  --cgg-demo:#7F24FF; /* purple-blue accent */
  --cgg-border:#2c3a4a;
  --cgg-shadow: 0 8px 24px rgba(0,0,0,.25);
  --cgg-radius:18px;
  --cgg-font:'Urbanist',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
}

.cgg-section{
  background:var(--cgg-bg);
  padding:18px 16px 28px;
  border-radius:14px;
}

.cgg-container{max-width:1600px;margin:0 auto}

.cgg-tabs{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px
}

.cgg-tab{
  background:#243447;border:1px solid var(--cgg-border);
  color:var(--cgg-text);padding:8px 12px;border-radius:999px;
  font-family:var(--cgg-font);font-weight:600;cursor:pointer;
  transition:.2s transform,.2s background;
  user-select:none
}
.cgg-tab:hover{transform:translateY(-1px)}
.cgg-tab.is-active{background:#2b3a4d;border-color:#3a516a}

.cgg-grid{
  display:grid;
  gap:14px;
}

/* 9 columns on very wide screens, 8 on large, fallbacks down */
@media (min-width:1700px){ .cgg-grid{ grid-template-columns: repeat(9, 1fr); } }
@media (min-width:1480px) and (max-width:1699.98px){ .cgg-grid{ grid-template-columns: repeat(8, 1fr); } }
@media (min-width:1200px) and (max-width:1479.98px){ .cgg-grid{ grid-template-columns: repeat(6, 1fr); } }
@media (min-width:900px) and (max-width:1199.98px){ .cgg-grid{ grid-template-columns: repeat(5, 1fr); } }
@media (min-width:700px) and (max-width:899.98px){ .cgg-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (min-width:520px) and (max-width:699.98px){ .cgg-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:519.98px){ .cgg-grid{ grid-template-columns: repeat(2, 1fr); } }

.cgg-card{
  background:var(--cgg-card);
  border:1px solid var(--cgg-border);
  border-radius:var(--cgg-radius);
  box-shadow: var(--cgg-shadow);
  overflow:hidden;
  transform:translateZ(0);
  transition:.25s box-shadow,.25s transform,.25s border-color;
  display:flex;flex-direction:column
}
.cgg-card:hover{
  transform:translateY(-3px);
  border-color:#3a516a;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.cgg-imgwrap{position:relative;aspect-ratio:16/9;overflow:hidden}
.cgg-imgwrap img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.0);transition:transform .35s ease;
}
.cgg-card:hover .cgg-imgwrap img{transform:scale(1.05)}
.cgg-placeholder{
  width:100%;height:100%;display:grid;place-items:center;color:var(--cgg-muted);
  background:#2a3a4b
}

.cgg-title{
  margin:10px 12px 4px;
  color:var(--cgg-text);
  font:700 15px/1.25 var(--cgg-font);
  text-align:center;
  min-height:1.8em;
}

.cgg-meta{
  display:flex;align-items:center;justify-content:center;
  gap:8px;margin:0 0 10px;color:var(--cgg-muted);font:600 12px/1 var(--cgg-font);
}
.cgg-dot{
  width:8px;height:8px;border-radius:50%;background:var(--cgg-live);box-shadow:0 0 0 3px rgba(29,215,91,.15)
}

.cgg-actions{
  display:flex;gap:8px;justify-content:center;
  margin:0 10px 14px;
}

/* Buttons look */
.cgg-btn{
  border-radius:999px;
  padding:10px 14px;
  font:700 13px/1 var(--cgg-font);
  cursor:pointer;
  border:0;
  transition:.2s transform,.2s opacity,.2s box-shadow;
  white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:92px;
}
.cgg-btn:hover{transform:translateY(-1px)}
.cgg-btn:active{transform:translateY(0)}
.cgg-btn-disabled{opacity:.5;cursor:not-allowed}

/* Live (Luaj) = green */
.cgg-btn-live{
  background:linear-gradient(135deg, #18c94d, #26df6a);
  color:#06210f;
  box-shadow:0 4px 12px rgba(24,201,77,.35);
}
.cgg-btn-live:hover{box-shadow:0 6px 16px rgba(24,201,77,.45)}

/* Demo (Provoje) = purple/blue */
.cgg-btn-demo{
  background:linear-gradient(135deg, var(--cgg-demo), #5A8BFF);
  color:#fff;
  box-shadow:0 4px 12px rgba(127,36,255,.35);
}
.cgg-btn-demo:hover{box-shadow:0 6px 16px rgba(127,36,255,.45)}

.cgg-empty{
  color:var(--cgg-muted);
  font-family:var(--cgg-font);
  text-align:center;padding:28px 12px
}

/* Filter animation (fade/slide) */
.cgg-card{opacity:1;transform:translateY(0);transition:opacity .25s ease, transform .25s ease}
.cgg-card.cgg-hide{opacity:0;transform:translateY(6px);pointer-events:none}