.ccch4-wrap{max-width:1220px;margin:0 auto;color:#fff}.ccch4-hero{background:radial-gradient(circle at top left,rgba(88,101,242,.5),transparent 36%),radial-gradient(circle at bottom right,rgba(239,68,68,.22),transparent 30%),linear-gradient(135deg,#0f172a,#111827 48%,#1f2937);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:38px 30px;margin-bottom:22px;box-shadow:0 14px 40px rgba(0,0,0,.28);overflow:hidden}.ccch4-kicker{display:inline-block;background:rgba(88,101,242,.24);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 13px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}.ccch4-hero h1{color:#fff;font-size:clamp(34px,5.5vw,64px);line-height:.96;margin:0 0 13px}.ccch4-hero p{max-width:800px;font-size:18px;line-height:1.45;opacity:.88;margin:0}.ccch4-grid-main,.ccch4-grid-bottom{display:grid;gap:20px;margin-bottom:20px}.ccch4-grid-main{grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr)}.ccch4-grid-bottom{grid-template-columns:minmax(0,1fr) minmax(300px,.55fr)}.ccch4-panel{background:linear-gradient(135deg,#111827,#1f2937);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:20px;box-shadow:0 9px 26px rgba(0,0,0,.22);min-width:0}.ccch4-panel h2{color:#fff;font-size:24px;margin:0}.ccch4-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.ccch4-pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 10px;font-size:12px;opacity:.88;white-space:nowrap}.ccch4-card,.ccch4-event-card,.ccch4-loading,.ccch4-empty,.ccch4-error{background:rgba(15,23,42,.75);border:1px solid rgba(255,255,255,.09);border-radius:15px;padding:16px}.ccch4-error{border-left:5px solid #ef4444}.ccch4-card{border-left:5px solid #5865F2;margin-bottom:14px;overflow:hidden}.ccch4-card:last-child{margin-bottom:0}.ccch4-card-head{display:flex;align-items:center;gap:12px;margin-bottom:13px}.ccch4-avatar{width:42px;height:42px;border-radius:999px;object-fit:cover;flex:0 0 auto}.ccch4-avatar-fallback{background:#5865F2;display:grid;place-items:center}.ccch4-author{font-weight:800;line-height:1.2}.ccch4-date{font-size:13px;opacity:.7;margin-top:2px}.ccch4-content{font-size:16px;line-height:1.55;overflow-wrap:anywhere}.ccch4-content a{color:#93c5fd}.ccch4-images{display:grid;gap:10px;margin-top:14px}.ccch4-discord-image{max-width:100%;border-radius:10px;display:block}.ccch4-live-count{margin-bottom:12px;font-size:14px;opacity:.84}.ccch4-streamer-list{display:grid;gap:13px}.ccch4-streamer{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;background:rgba(15,23,42,.75);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:11px;color:#fff;text-decoration:none!important;transition:transform .15s ease,border-color .15s ease;min-width:0}.ccch4-streamer:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.24)}.ccch4-streamer-media{position:relative;min-width:0}.ccch4-streamer img,.ccch4-placeholder{width:150px;height:84px;border-radius:12px;object-fit:cover;background:#0f172a;display:grid;place-items:center}.ccch4-live-badge,.ccch4-offline-badge{position:absolute;top:7px;left:7px;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:900;line-height:1}.ccch4-live-badge{background:#ef4444;color:#fff}.ccch4-offline-badge{background:rgba(0,0,0,.72);color:rgba(255,255,255,.82)}.ccch4-streamer-name{font-size:18px;font-weight:900;overflow-wrap:anywhere}.ccch4-streamer p{margin:6px 0 0;opacity:.9;line-height:1.3;overflow-wrap:anywhere}.ccch4-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}.ccch4-meta small{opacity:.7}.ccch4-offline{margin-top:14px}.ccch4-offline summary{cursor:pointer;opacity:.84;margin-bottom:12px}.ccch4-events{display:grid;gap:13px}.ccch4-event-card{border-left:5px solid #f59e0b}.ccch4-event-date{display:inline-block;background:rgba(245,158,11,.17);border:1px solid rgba(245,158,11,.24);border-radius:999px;padding:5px 9px;font-size:13px;margin-bottom:10px}.ccch4-event-card h3{color:#fff;margin:0 0 7px;font-size:20px}.ccch4-event-card p{margin:0 0 12px;opacity:.86;line-height:1.45}.ccch4-button{display:inline-block;background:#5865F2;color:#fff!important;border-radius:999px;padding:8px 13px;text-decoration:none!important;font-weight:800}.ccch4-link-list{display:grid;gap:10px}.ccch4-link-list a{background:rgba(15,23,42,.75);border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:13px 14px;color:#fff;text-decoration:none!important}.ccch4-link-list a:hover{border-color:rgba(255,255,255,.24)}@media(max-width:980px){.ccch4-grid-main,.ccch4-grid-bottom{grid-template-columns:1fr}}@media(max-width:620px){.ccch4-hero{padding:28px 20px}.ccch4-panel{padding:16px}.ccch4-streamer{grid-template-columns:1fr}.ccch4-streamer img,.ccch4-placeholder{width:100%;height:auto;aspect-ratio:16/9}.ccch4-panel-head{align-items:flex-start;flex-direction:column}}

/* v4.2 layout upgrade: Twitch live/offline on top, info sections underneath */
.ccch4-live-row {
  margin-bottom: 20px;
}

.ccch4-live-panel {
  border-top: 1px solid rgba(239,68,68,.28);
}

.ccch4-info-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 20px;
  margin-bottom: 20px;
}

.ccch4-info-row .ccch4-panel:last-child {
  align-self: start;
}

.ccch4-live-panel .ccch4-streamer-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ccch4-live-panel .ccch4-streamer {
  grid-template-columns: 120px minmax(0, 1fr);
}

.ccch4-live-panel .ccch4-streamer img,
.ccch4-live-panel .ccch4-placeholder {
  width: 120px;
  height: 68px;
}

.ccch4-offline {
  background: rgba(15,23,42,.42);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
}

.ccch4-offline summary {
  font-weight: 800;
}

.ccch4-offline-grid .ccch4-streamer {
  opacity: .86;
}

.ccch4-announcements-panel .ccch4-card {
  margin-bottom: 12px;
}

@media (max-width: 980px) {
  .ccch4-info-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .ccch4-live-panel .ccch4-streamer {
    grid-template-columns: 1fr;
  }

  .ccch4-live-panel .ccch4-streamer img,
  .ccch4-live-panel .ccch4-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}


/* v4.4 polish */
.ccch4-hero {
  position: relative;
}

.ccch4-hero::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(88,101,242,.34), transparent 68%);
  pointer-events: none;
}

.ccch4-hero-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}

.ccch4-hero-badges span {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  backdrop-filter: blur(6px);
}

.ccch4-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ccch4-stat {
  background: rgba(15,23,42,.75);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
}

.ccch4-stat strong {
  display: block;
  font-size: 30px;
  line-height: 1;
}

.ccch4-stat span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .74;
  margin-top: 6px;
}

.ccch4-mini-note {
  font-size: 13px;
  opacity: .72;
  margin-bottom: 12px;
}

.ccch4-panel {
  position: relative;
  overflow: hidden;
}

.ccch4-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events: none;
}

.ccch4-event-card,
.ccch4-card,
.ccch4-streamer {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

@media (max-width: 620px) {
  .ccch4-stat-row {
    grid-template-columns: 1fr;
  }
}

/* v4.5 usability upgrades */
.ccch4-mini-button,
.ccch4-filter {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  padding: 7px 11px;
}

.ccch4-mini-button:hover,
.ccch4-filter:hover,
.ccch4-filter.is-active {
  background: rgba(88,101,242,.45);
  border-color: rgba(255,255,255,.32);
}

.ccch4-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 16px;
  align-items: center;
}

.ccch4-search {
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #fff;
  min-height: 34px;
  padding: 7px 13px;
  flex: 1 1 180px;
}

.ccch4-search::placeholder { color: rgba(255,255,255,.62); }

.ccch4-updated {
  font-size: 12px;
  opacity: .62;
  margin-top: 12px;
  text-align: right;
}

.ccch4-event-card.is-featured {
  border-color: rgba(245,158,11,.78);
  background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(15,23,42,.78));
}

.ccch4-event-card.is-featured::before {
  content: "Featured";
  display: inline-block;
  background: rgba(245,158,11,.2);
  border: 1px solid rgba(245,158,11,.28);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 9px;
}

.ccch4-event-icon { margin-right: 5px; }

.ccch4-link-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.ccch4-link-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(88,101,242,.22);
}

.ccch4-link-arrow { opacity: .55; }

/* v5.0 customization system */
.ccch4-wrap { --ccch4-accent: #5865F2; }
.ccch4-section-stack { display: grid; gap: 20px; }
.ccch4-welcome {
  margin-top: 14px;
  max-width: 850px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px 14px;
  line-height: 1.5;
}
.ccch4-footer {
  margin-top: 18px;
  text-align: center;
  opacity: .72;
  font-size: 14px;
}
.ccch4-kicker,
.ccch4-button,
.ccch4-mini-button:hover,
.ccch4-filter:hover,
.ccch4-filter.is-active,
.ccch4-avatar-fallback { background: var(--ccch4-accent); }
.ccch4-card { border-left-color: var(--ccch4-accent); }
.ccch4-link-icon { background: color-mix(in srgb, var(--ccch4-accent) 32%, transparent); }
.ccch4-pill { border-color: color-mix(in srgb, var(--ccch4-accent) 35%, rgba(255,255,255,.1)); }
.ccch4-hero { background: radial-gradient(circle at top left, color-mix(in srgb, var(--ccch4-accent) 45%, transparent), transparent 36%), radial-gradient(circle at bottom right, rgba(239,68,68,.22), transparent 30%), linear-gradient(135deg,#0f172a,#111827 48%,#1f2937); }
.ccch4-theme-pirate-gold .ccch4-hero { background: radial-gradient(circle at top left, rgba(245,158,11,.46), transparent 38%), linear-gradient(135deg,#171008,#27180a 52%,#0f172a); }
.ccch4-theme-dbd-fog .ccch4-hero { background: radial-gradient(circle at top left, rgba(148,163,184,.34), transparent 36%), linear-gradient(135deg,#09090b,#17202a 52%,#0f172a); }
.ccch4-theme-horror-red .ccch4-hero { background: radial-gradient(circle at top left, rgba(239,68,68,.45), transparent 36%), linear-gradient(135deg,#120507,#1f0a0d 52%,#111827); }
.ccch4-theme-discord-dark .ccch4-hero { background: radial-gradient(circle at top left, rgba(88,101,242,.5), transparent 36%), linear-gradient(135deg,#111827,#1e1f2e 52%,#0f172a); }
.ccch4-theme-purple-neon .ccch4-hero { background: radial-gradient(circle at top left, rgba(168,85,247,.48), transparent 36%), radial-gradient(circle at bottom right, rgba(236,72,153,.24), transparent 34%), linear-gradient(135deg,#10051d,#17112a 52%,#0f172a); }
.ccch4-theme-coffee-cream .ccch4-hero { background: radial-gradient(circle at top left, rgba(192,132,87,.42), transparent 36%), linear-gradient(135deg,#1c120c,#2a1b11 52%,#111827); }
.ccch4-bg-gradient .ccch4-panel { background: linear-gradient(135deg, rgba(17,24,39,.94), rgba(31,41,55,.82)); }
.ccch4-bg-glass .ccch4-panel,
.ccch4-cardstyle-glass .ccch4-panel,
.ccch4-cardstyle-glass .ccch4-card,
.ccch4-cardstyle-glass .ccch4-event-card,
.ccch4-cardstyle-glass .ccch4-streamer,
.ccch4-cardstyle-glass .ccch4-link-list a {
  background: rgba(15,23,42,.58);
  backdrop-filter: blur(10px);
}
.ccch4-cardstyle-square .ccch4-hero,
.ccch4-cardstyle-square .ccch4-panel,
.ccch4-cardstyle-square .ccch4-card,
.ccch4-cardstyle-square .ccch4-event-card,
.ccch4-cardstyle-square .ccch4-streamer,
.ccch4-cardstyle-square .ccch4-link-list a,
.ccch4-cardstyle-square .ccch4-button,
.ccch4-cardstyle-square .ccch4-mini-button,
.ccch4-cardstyle-square .ccch4-filter { border-radius: 4px; }
.ccch4-cardstyle-neon .ccch4-panel,
.ccch4-cardstyle-neon .ccch4-streamer,
.ccch4-cardstyle-neon .ccch4-card,
.ccch4-cardstyle-neon .ccch4-event-card,
.ccch4-cardstyle-neon .ccch4-link-list a {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ccch4-accent) 20%, transparent), 0 0 24px color-mix(in srgb, var(--ccch4-accent) 18%, transparent);
}
.ccch4-buttonstyle-rounded .ccch4-button,
.ccch4-buttonstyle-rounded .ccch4-mini-button,
.ccch4-buttonstyle-rounded .ccch4-filter { border-radius: 10px; }
.ccch4-buttonstyle-square .ccch4-button,
.ccch4-buttonstyle-square .ccch4-mini-button,
.ccch4-buttonstyle-square .ccch4-filter { border-radius: 3px; }
.ccch4-has-fog { position: relative; }
.ccch4-has-fog::before {
  content: "";
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.08), transparent 20%), radial-gradient(circle at 75% 30%, rgba(255,255,255,.06), transparent 24%), radial-gradient(circle at 45% 80%, rgba(255,255,255,.05), transparent 28%);
  pointer-events: none;
  filter: blur(16px);
  opacity: .75;
}
.ccch4-has-fog > * { position: relative; z-index: 1; }
.ccch4-has-pulse .ccch4-live-badge { animation: ccch4Pulse 1.5s ease-in-out infinite; }
@keyframes ccch4Pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 rgba(239,68,68,0); } 50% { transform: scale(1.06); box-shadow: 0 0 18px rgba(239,68,68,.55); } }