html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html, body { overflow-x: clip; }

html {
  scrollbar-width: thin;
  scrollbar-color: #3a3a44 transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2f2f36;
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 5px;
  transition: background-color .2s;
}
::-webkit-scrollbar-thumb:hover { background: #4a4a54; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

.cc-pagecard {
  position: relative;
  padding: 32px 40px;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(43, 45, 57, 0.93) 0%, rgba(26, 27, 35, 0.96) 100%),
    radial-gradient(ellipse 120% 90% at 15% 0%, rgba(100, 120, 255, 0.08), transparent 60%);
  border: 1px solid rgba(150, 160, 200, 0.18);
  box-shadow:
    0 32px 80px -28px rgba(0, 0, 0, 0.85),
    0 4px 14px -6px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.07) inset;
}
@media (max-width: 640px) { .cc-pagecard { padding: 24px 20px; } }

.cc-sectioncard {
  width: 100%;
  padding-top: 16px;
  box-shadow:
    0 40px 90px -24px rgba(0, 0, 0, 0.9),
    0 8px 24px -8px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.07) inset;
}
.cc-sectioncard + .cc-sectioncard { margin-top: 34px; }
@media (max-width: 640px) { .cc-sectioncard { padding-top: 14px; } }
.cc-sectioncard:has(.cc-browse-more) { padding-bottom: 20px; }
.cc-sectioncard .cc-browse-more { margin-bottom: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
}

.font-display { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; }
.font-mono { font-family: var(--font-data); }

.bg-bg { background: var(--bg); }
.bg-surface { background: var(--surface); }
.bg-surface-2 { background: var(--surface-2); }

.text-text { color: var(--text); }
.text-text-dim { color: var(--text-dim); }
.text-text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-ok { color: var(--ok); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }

.border-border { border-color: var(--border); }
.border-accent { border-color: var(--accent); }

.hover\:text-accent:hover { color: var(--accent); }
.hover\:text-text:hover { color: var(--text); }
.hover\:bg-surface-2:hover { background: var(--surface-2); }

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  z-index: 40;
}

.app-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
}

@media (max-width: 767px) {
  .app-sidebar { display: none; }
  .app-main {
    margin-left: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px));
  }
}
.cc-topfade { display: none; }
@media (max-width: 767px) {
  .cc-topfade { display: block; position: fixed; z-index: 39; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top, 0px) + 18px); pointer-events: none; background: linear-gradient(180deg, var(--bg) 0%, rgba(6, 7, 12, 0.92) calc(100% - 18px), rgba(6, 7, 12, 0) 100%); }
}

.sb-logo {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--accent);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 120ms;
  overflow: hidden;
}
.sb-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.sb-logo:hover { background: var(--surface-2); }

.sb-nav {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
  align-items: center;
}

.sb-item {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-decoration: none;
  position: relative;
  transition: color 120ms, background 120ms;
}
.sb-item:hover { color: var(--text); background: var(--surface-2); }
.sb-item.active { color: var(--accent); }
.sb-item svg { width: 20px; height: 20px; }

.sb-nav__ind {
  position: absolute;
  right: -7px;
  top: 0;
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(100, 120, 255, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms;
}
.sb-nav__ind.is-visible { opacity: 1; }
.sb-nav:not(.is-ready) .sb-item.active::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 8px;
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(100, 120, 255, 0.55);
  pointer-events: none;
}
.sb-nav__ind.is-returning { transition: transform 1100ms cubic-bezier(0.45, 0, 0.25, 1) 250ms, opacity 400ms 250ms; }

.sb-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
}
.sb-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.sb-social__link {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 120ms, transform 120ms, filter 120ms;
}
.sb-social__link svg { width: 18px; height: 18px; display: block; }
.sb-social__link--discord { color: #5865f2; }
.sb-social__link--reddit { color: #ff4500; }
.sb-social__link:hover { background: var(--surface-2); transform: translateY(-1px); filter: brightness(1.15); }

.sb-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: block;
}
.sb-badge, .mnav-badge, .sb-menu__count {
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f2484b 0%, #d62c30 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--surface, #121318), 0 2px 4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.sb-badge, .mnav-badge { position: absolute; }
.sb-badge { top: -6px; right: -7px; }
.sb-menu__count { margin-left: auto; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.sb-menu__item--unread { color: var(--text); }
.mnav-item { position: relative; }
.mnav-badge { top: 3px; left: 50%; margin-left: 3px; }

.mnav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}
.mnav-item {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color 120ms;
}
.mnav-item:hover, .mnav-item:focus { color: var(--text); }
.mnav-item.active { color: var(--accent); }
.mnav-item svg { width: 24px; height: 24px; }
.mnav-item img { width: 25px !important; height: 25px !important; }

button.mnav-item { background: none; border: 0; padding: 0; cursor: pointer; }

@media (max-width: 767px) {
  .mnav { display: block; }
}

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sb-item:focus-visible, .mnav-item:focus-visible {
  outline-offset: -2px;
}

.cc-card {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(43, 45, 57, 0.9) 0%, rgba(33, 35, 44, 0.94) 100%),
    radial-gradient(ellipse 120% 90% at 15% 0%, rgba(100, 120, 255, 0.08), transparent 60%);
  border: 1px solid rgba(150, 160, 200, 0.18);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  position: relative;
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.85), 0 2px 6px -3px rgba(0, 0, 0, 0.5);
}
.cc-card:hover .cc-card__name { color: var(--accent); }

.cc-card { cursor: pointer; }
.cc-card__link {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
.cc-card__banner,
.cc-card__body { position: relative; z-index: 1; }
.cc-card__tabs,
.cc-card__social { position: relative; z-index: 2; }

.cc-card__banner {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 4.4;
  background: linear-gradient(135deg, var(--surface-2), var(--surface), var(--surface-3));
  overflow: hidden;
  flex-shrink: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.6) 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.6) 62%, transparent 100%);
}
.cc-card__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cc-card__banner-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(24, 26, 33, 0.4) 100%);
  pointer-events: none;
}
.cc-card__body {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.cc-card__row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
  margin-top: -30px;
  position: relative;
  z-index: 2;
}
.cc-card__logo {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim, #4a5ad4));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.cc-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cc-card__logo--img {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.cc-card__logo--img img {
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.cc-card__ident {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cc-card__name {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--text);
  transition: color 140ms;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 0 #000, 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 0, 0, 0.7);
}
.cc-card__namerow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cc-card__namerow .cc-card__name { flex: 0 1 auto; }
.cc-card__games { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--text-muted); }
.cc-card__game { width: 17px; height: 17px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)); }
.cc-card__tagline {
  font-family: var(--font-read);
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1.1;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 0 #000, 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.6);
}

.cc-card__tabs {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 13px;
  padding: 0 0 2px;
  margin-top: -2px;
  align-self: stretch;
}
.cc-card__tab {
  padding: 2px 2px 1px;
  line-height: 1.15;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms;
  text-shadow: 0 1px 0 #000, 0 2px 6px rgba(0, 0, 0, 0.85);
}
.cc-card__tab:hover:not(.is-active) { color: var(--text); }
.cc-card__tab.is-active { color: var(--accent); }
.cc-card__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.cc-card__tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), width 260ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.cc-card__panels {
  min-width: 0;
  position: relative;
  overflow: hidden;
  height: 100px;
  flex: 0 0 auto;
}
.cc-card__panel {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}
.cc-card__panel[hidden] { display: none; }
.cc-card__panel.is-sliding-out {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.cc-card__panel.is-slide-from-right { transform: translateX(24px); opacity: 0; }
.cc-card__panel.is-slide-from-left { transform: translateX(-24px); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .cc-card__panel,
  .cc-card__tab-indicator { transition: none; }
  .cc-card__panel.is-slide-from-right,
  .cc-card__panel.is-slide-from-left { transform: none; }
}

.cc-card__desc {
  color: var(--text-dim);
  font-family: var(--font-read);
  font-size: 20px;
  line-height: 0.82;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cc-card__empty {
  color: var(--text-muted);
  font-family: var(--font-read);
  font-size: 20px;
  line-height: 0.9;
  margin: 0;
  padding-top: 4px;
  text-align: center;
}

.cc-card__reqs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
  padding-top: 4px;
  text-align: center;
}
.cc-card__reqs-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: 100%;
  gap: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--carved);
  box-shadow: var(--carved-shadow);
}
.cc-card__req {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  padding: 5px 8px 6px;
  border-left: 1px solid rgba(0, 0, 0, 0.35);
}
.cc-card__req:first-child { border-left: 0; }
.cc-card__req-val {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  font-family: var(--font-game);
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cc-card__req-ico { width: 18px; height: 18px; flex: none; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
.cc-card__req-val--text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-card__req-key {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.cc-card__reqs-text {
  color: var(--text-dim);
  font-family: var(--font-read);
  font-size: 20px;
  line-height: 0.9;
  margin: 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.cc-card__weblinks {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  height: 100%;
  padding-top: 4px;
  min-width: 0;
}
.cc-card .cc-card__social { align-self: center; max-width: 100%; }

.cc-card__stats-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 4px 0 5px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cc-card__stat-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-left: 1px solid var(--border);
}
.cc-card__stat-cell:first-child { border-left: 0; }
.cc-card__stat-label {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-card__stat-value {
  font-family: var(--font-game);
  font-size: 26px;
  font-weight: 400;
  color: var(--accent);
  line-height: 0.8;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75), 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-card__info-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px 8px;
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-muted);
}
.cc-card__info-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.cc-card__info-item svg {
  width: 14px;
  height: 14px;
  color: var(--text-dim);
  stroke-width: 2.2;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.8));
}
.cc-card__types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  height: 24px;
  overflow: hidden;
  padding: 0;
  flex: 0 0 auto;
}
.cc-card__allyclans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding-top: 4px; }
.cc-card__allyclan { position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; border-radius: 4px; background: var(--carved); box-shadow: var(--carved-shadow); text-decoration: none; }
.cc-card__allyclan:hover { background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%); }
.cc-card__allyclan-logo { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-family: var(--font-ui); font-size: 12px; }
.cc-card__allyclan-logo img { width: 100%; height: 100%; object-fit: cover; }
.cc-card__allyclan-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: 14px; color: var(--text); text-shadow: var(--carved-text); }
.cc-card__allymore { margin: 4px 0 0; text-align: center; font-family: var(--font-ui); font-size: 13px; color: var(--text-muted); }
.cc-type-pill.cc-type-pill--alliance { color: var(--accent); }
.cc-card__info-ico { width: 14px; height: 14px; object-fit: contain; image-rendering: pixelated; margin-right: 1px; }
.cc-card__info-ico--members { width: 18px; height: 14px; margin-right: 2px; }
.cc-card__info-line .cc-card__info-ico, .cc-card__info-line .cc-card__info-item svg, .cc-card__info-line .cc-card__flag, .cc-card__info-line .cc-card__flag-emoji, .cc-card__home-ico { position: relative; top: -1px; }
.cc-card__types .cc-type-pill { line-height: 16px; font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.03em; }
.cc-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cc-type-pill__ico { font-size: 12px; line-height: 1; }
img.cc-type-pill__ico { width: 14px; height: 14px; object-fit: contain; image-rendering: pixelated; }
.cc-card__info-region {
  color: var(--text-dim);
}
.cc-card__home-link {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
  text-decoration: none;
  transition: gap 160ms ease, color 140ms;
  position: relative;
  z-index: 3;
}
.cc-card__home-ico { width: 13px; height: 11px; flex-shrink: 0; image-rendering: pixelated; transition: transform 160ms ease; }
.cc-card__home-link:hover { color: var(--text); }
.cc-card__home-link:hover .cc-card__home-ico { transform: translateX(3px); }
.cc-card__flag {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  background-size: cover;
  background-position: center;
}
.cc-card__flag-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

.cc-search {
  position: relative;
  margin-bottom: 4px;
}
.cc-search input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  font-size: 18px;
  font-family: var(--font-field);
  box-shadow: var(--well-shadow);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.cc-search input::placeholder { color: var(--text-muted); }
.cc-search input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: var(--well-focus);
}
.cc-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}
.cc-search .indicator {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-family: var(--font-data);
  font-size: 11px;
}

.cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

.cc-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 20px;
  text-align: center;
  color: var(--text-dim);
}
.cc-empty .mark {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.7;
  margin: 0 auto 8px;
}

body.landing-page {
  background: var(--bg);
}
body.landing-page .app-main {
  background: transparent;
  position: relative;
  z-index: 1;
}
body.landing-page .app-sidebar {
  background: linear-gradient(180deg, rgba(43, 45, 57, 0.95) 0%, rgba(30, 31, 39, 0.97) 100%);
  border-right: 1px solid rgba(120, 135, 255, 0.16);
}

.cc-bg-fx {
  position: fixed;
  top: -160px;
  right: 0;
  left: 0;
  height: calc(100vh + 320px);
  height: calc(100lvh + 320px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
  transform: translateZ(0);
  will-change: transform;
}
.cc-bg-image {
  position: absolute;
  inset: -40px;
  background-image: var(--bg-image-url, url('/static/img/index-bg.jpg'));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: saturate(1.2) brightness(0.68) contrast(1.04) blur(3px);
  transform: scale(1.06);
  opacity: 0.8;
}
.cc-bg-video,
.cc-bg-poster {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  max-width: none;
  transform: scale(1.06);
  opacity: 1;
  filter: saturate(1.45) contrast(1.08);
  pointer-events: none;
}
.cc-bg-poster {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transition: opacity 700ms ease;
}
.cc-bg-fx.has-video .cc-bg-poster { opacity: 0; }
.cc-bg-video {
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 700ms ease;
}
.cc-bg-video.is-playing { opacity: 1; }
.cc-bg-video::-webkit-media-controls,
.cc-bg-video::-webkit-media-controls-panel,
.cc-bg-video::-webkit-media-controls-overlay-play-button,
.cc-bg-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .cc-bg-video { display: none; }
}
.cc-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 95% at 50% 18%, transparent 50%, rgba(6, 7, 14, 0.48) 100%),
    linear-gradient(180deg, rgba(8, 10, 22, 0.14) 0%, rgba(6, 7, 14, 0.32) 55%, rgba(6, 7, 14, 0.7) 85%, var(--bg) 100%);
}
.cc-bg-fx--landing .cc-bg-overlay { opacity: calc(0.85 + var(--bg-fade, 1) * 0.15); }
.cc-bg-fx::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: var(--bg-dim, 0); pointer-events: none; will-change: opacity; }
.cc-bg-overlay { will-change: opacity; }
.cc-bg-image { will-change: transform; }
.cc-bg-radial {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 600px at 18% 6%, rgba(110, 125, 255, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 700px 500px at 88% 92%, rgba(110, 125, 255, 0.07) 0%, transparent 55%);
}

.cc-landing-hero {
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 44px 24px 12px;
  position: relative;
  z-index: 1;
}
@media (min-width: 901px) {
  .cc-landing-hero { min-height: 100vh; min-height: 100svh; box-sizing: border-box; }
}
.cc-landing-hero__inner {
  width: 100%;
  max-width: 820px;
  text-align: center;
  position: relative;
}

.cc-match-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 44px 32px 30px;
  border-radius: 4px;
  border: 1px solid rgba(150, 160, 200, 0.18);
  background:
    linear-gradient(180deg, rgba(43, 45, 57, 0.92) 0%, rgba(30, 31, 39, 0.94) 100%),
    radial-gradient(ellipse 130% 80% at 50% -12%, rgba(100, 120, 255, 0.16), transparent 62%);
  box-shadow:
    0 50px 100px -24px rgba(0, 0, 0, 0.95),
    0 16px 44px -14px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.07) inset;
}
@media (min-width: 640px) {
  .cc-match-card { padding: 52px 40px 34px; gap: 12px; }
}

.cc-match-field {
  display: flex;
  flex-direction: column;
}

.cc-chip-input--labelled {
  position: relative;
  background: linear-gradient(180deg, #06070d 0%, #0a0d16 100%);
  border: 1px solid #1c2130;
  border-radius: 4px;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.6),
    inset 0 10px 20px -12px rgba(0, 0, 0, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color 120ms, box-shadow 120ms;
}
.cc-match-field--floating {
  position: relative;
}
.cc-chip-input--labelled .cc-chip-input__row {
  padding: 6px 12px;
  min-height: 22px;
  border: 0;
}
.cc-chip-input--labelled:focus-within {
  border-color: var(--accent);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.6),
    inset 0 10px 20px -12px rgba(0, 0, 0, 0.85),
    0 0 0 3px rgba(100, 120, 255, 0.16),
    0 2px 10px -2px rgba(100, 120, 255, 0.22);
}
.cc-chip-input--labelled.cc-chip-input--suggest-open {
  border-color: rgba(100, 120, 255, 0.5);
  box-shadow: var(--well-shadow);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.cc-chip-input--labelled .cc-chip-input__row,
.cc-chip-input--labelled .cc-chip-input__row:focus-within {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.cc-chip-input__field::placeholder { color: rgba(158, 160, 176, 0.82); }

.cc-chip-input {
  position: relative;
}
.cc-chip-input__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  background: #0d0d10;
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 2px rgba(0, 0, 0, 0.55),
    inset 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: border-color 120ms, box-shadow 120ms;
}
.cc-chip-input__row:focus-within {
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 2px rgba(0, 0, 0, 0.55),
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    0 0 0 3px rgba(100, 120, 255, 0.12);
}
.cc-chip-input__chips {
  display: contents;
}
.cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 4px 0 11px;
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: var(--raised-shadow);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  color: #e4e6ee;
  text-shadow: var(--raised-text);
}
.cc-chip__label {
  line-height: 1;
  padding-top: 1px;
}
.cc-chip__remove {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms, color 100ms;
}
.cc-chip__remove:hover {
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
}
.cc-chip-input__field {
  flex: 1;
  min-width: 140px;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  color: var(--text);
  font-family: var(--font-field);
  font-size: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  outline: none;
}
.cc-chip-input__field::placeholder {
  color: rgba(158, 160, 176, 0.82);
}

.cc-chip-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: -2px;
  right: -2px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 6px;
  z-index: 40;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cc-chip-suggestions::-webkit-scrollbar { display: none; }
.cc-chip-suggestions.is-open {
  opacity: 1;
  transform: translateY(0);
}
.cc-chip-suggest {
  position: relative;
  padding: 8px 12px 8px 16px;
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 80ms, color 80ms;
  font-family: var(--font-ui);
}

.cc-chip-suggest::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cc-chip-suggest:hover,
.cc-chip-suggest.is-active {
  background: var(--surface-2);
  color: var(--text);
}
.cc-chip-suggest.is-active::before {
  transform: translateY(-50%) scaleY(1);
}

.cc-match-games {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.cc-match-game {
  position: relative;
  display: block;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
}
.cc-match-game input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cc-gicon {
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--gicon) center / contain no-repeat;
  mask: var(--gicon) center / contain no-repeat;
}
.cc-match-game { color: var(--text-muted); }
.cc-match-game__logo {
  display: block;
  width: 46px;
  height: 46px;
  transition: transform 140ms, filter 140ms;
}
.cc-match-game:hover { color: var(--text); }
.cc-match-game:hover .cc-match-game__logo { transform: translateY(-1px); }
.cc-match-game:focus-within .cc-match-game__logo { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.cc-match-game.is-active { color: var(--accent); }
.cc-match-game.is-active .cc-match-game__logo { filter: drop-shadow(0 0 8px rgba(100, 120, 255, 0.55)); }

.cc-match-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin-top: 4px;
}
.cc-match-submit {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border: 1px solid #3d49ac;
  border-radius: 4px;
  background: linear-gradient(180deg, #5665dd 0%, #4552c4 100%);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  box-shadow:
    0 18px 38px -10px rgba(60, 78, 210, 0.55),
    0 10px 20px -8px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
  transition: background 120ms, transform 100ms, box-shadow 120ms;
}
.cc-match-submit::before,
.cc-match-secondary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.cc-match-submit:hover::before,
.cc-match-secondary:hover::before {
  animation: cc-btn-sweep 0.8s ease-out;
}
.cc-match-submit:hover {
  background: linear-gradient(180deg, #6472e8 0%, #5360d6 100%);
  transform: translateY(-1px);
  box-shadow:
    0 22px 44px -10px rgba(60, 78, 210, 0.7),
    0 12px 24px -8px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.22) inset;
}
.cc-match-submit:active {
  transform: translateY(0);
}
.cc-match-submit svg,
.cc-match-secondary svg {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}
.cc-match-secondary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  padding: 10px 26px;
  border: 1px solid rgba(120, 135, 255, 0.28);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(90, 105, 210, 0.14) 0%, rgba(70, 82, 180, 0.07) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  transition: color 120ms, border-color 120ms, background 120ms, transform 100ms;
}
.cc-match-secondary::before {
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.11) 50%, transparent 100%);
}
.cc-match-secondary:hover {
  color: #fff;
  border-color: rgba(120, 135, 255, 0.5);
  background: linear-gradient(180deg, rgba(100, 115, 220, 0.22) 0%, rgba(78, 92, 195, 0.12) 100%);
  transform: translateY(-1px);
}
@keyframes cc-btn-sweep {
  0% { left: -60%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 160%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-match-submit:hover::before,
  .cc-match-secondary:hover::before { animation: none; }
}

.cc-hero-owner-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px 8px 11px;
  background: linear-gradient(180deg, rgba(104, 122, 255, 0.26) 0%, rgba(58, 70, 200, 0.34) 100%);
  border: 1px solid rgba(126, 146, 255, 0.65);
  border-radius: var(--radius-md);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  box-shadow:
    0 4px 14px -8px rgba(60, 78, 210, 0.55),
    0 0 14px -8px rgba(104, 122, 255, 0.45),
    0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
  transition: border-color .2s, transform .2s, background .2s, box-shadow .2s;
}
.cc-hero-owner-pill:hover {
  border-color: rgba(150, 168, 255, 0.9);
  background: linear-gradient(180deg, rgba(120, 138, 255, 0.34) 0%, rgba(72, 84, 220, 0.42) 100%);
  box-shadow:
    0 6px 18px -8px rgba(60, 78, 210, 0.6),
    0 0 18px -6px rgba(104, 122, 255, 0.55),
    0 1px 0 0 rgba(255, 255, 255, 0.12) inset;
  transform: translateY(-1px);
}
.cc-hero-owner-pill__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
@media (max-width: 640px) {
  .cc-hero-owner-pill {
    padding: 9px 16px 9px 12px;
    font-size: 16px;
  }
  .cc-hero-owner-pill__icon { width: 18px; height: 18px; }
}

.cc-landing-footer {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.cc-btn-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 5px;
  background: #5865F2;
  color: white;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: background 100ms, transform 100ms;
}
.cc-btn-discord:hover {
  background: #4752c4;
}
.cc-btn-discord:active {
  transform: translateY(1px);
}
.cc-btn-discord__icon {
  width: 16px;
  height: 16px;
}

@media (max-height: 720px) {
  .cc-landing-hero { padding-top: 40px; padding-bottom: 12px; }
}

.cc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1280px) {
  .cc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cc-grid { grid-template-columns: 1fr; gap: 16px; }
}

.cc-hero-card-shell {
  position: relative;
  max-width: 520px;
  margin: 52px auto 0;
}

.cc-hero-card-shell .cc-match-card {
  padding: 52px 22px 22px;
  gap: 7px;
}
@media (min-width: 640px) {
  .cc-hero-card-shell .cc-match-card { padding: 56px 26px 26px; gap: 8px; }
}

.cc-hero-header {
  text-align: center;
  margin-bottom: 12px;
}
.cc-hero-title-inline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 4vw, 1.62rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  word-spacing: -0.08em;
  color: var(--text);
  margin: 0 0 6px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  display: block;
  text-align: center;
  width: 100%;
}
.cc-hero-title-accent {
  color: var(--accent-hover);
  text-shadow: 0 0 11px rgba(100, 120, 255, 0.28), 0 2px 12px rgba(0, 0, 0, 0.5);
}

.cc-hero-sub {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  margin: 0 auto;
  max-width: 560px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .cc-hero-title-inline { white-space: normal; flex-wrap: wrap; }
  .cc-hero-sub { -webkit-line-clamp: unset; }
}

.cc-hero-logo {
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.7))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 28px rgba(100, 120, 255, 0.28));
}
.cc-hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cc-hero-logo__mono {
  display: none;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.cc-hero-logo--fallback .cc-hero-logo img { display: none; }
.cc-hero-logo--fallback .cc-hero-logo__mono { display: flex; }

@media (max-width: 640px) {
  .cc-landing-hero { padding-top: 6px; }
  .cc-hero-card-shell { margin-top: 52px; }
  .cc-hero-card-shell .cc-match-card { padding-top: 48px; }
  .cc-landing-footer { margin-top: 12px; }
  .cc-hero-logo {
    top: -48px;
    width: 94px;
    height: 94px;
  }
  .cc-hero-logo__mono { font-size: 28px; border-radius: 6px; }
}

.cc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cc-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: #e4e6ee;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: var(--raised-shadow);
  text-shadow: var(--raised-text);
  transition: color 120ms, background 120ms;
}
.cc-toolbar__btn:hover {
  background: var(--raised-hover);
  color: #fff;
}
.cc-toolbar__btn[aria-expanded="true"],
.cc-toolbar__btn.is-active {
  border-color: transparent;
  background: var(--carved);
  box-shadow: var(--carved-shadow);
  color: var(--accent);
}
.cc-toolbar__btn svg {
  width: 14px;
  height: 14px;
}
.cc-toolbar__chev {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cc-toolbar__btn[aria-expanded="true"] .cc-toolbar__chev {
  transform: rotate(180deg);
}
.cc-toolbar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-data);
}
.cc-toolbar__count[hidden] { display: none; }
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }

.cc-panel-wrap {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 240ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 180ms ease,
              margin-bottom 240ms cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 0;
}
.cc-panel-wrap.open {
  max-height: 800px;
  opacity: 1;
  margin-bottom: 20px;
}

.cc-filter-panel {
  background: rgba(20, 20, 24, 0.92);
  border: 1px solid rgba(150, 160, 200, 0.24);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.85);
}
.cc-filter-panel__inner {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 16px 36px;
  align-items: start;
}
.cc-filter-panel__head,
.cc-filter-panel__foot { display: none; }
.cc-filter-panel__title {
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--text);
}
.cc-filter-panel__close {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--text-dim); cursor: pointer;
}
.cc-filter-panel__close svg { width: 18px; height: 18px; }
.cc-filter-panel__close:hover { color: var(--text); border-color: var(--accent); }
.cc-applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
}
.cc-applied[hidden] { display: none; }
.cc-applied__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: var(--carved);
  box-shadow: var(--carved-shadow);
  color: var(--accent);
  text-shadow: var(--carved-text);
  font-family: var(--font-ui);
  font-size: 14px;
  cursor: pointer;
}
.cc-applied__chip:hover { border-color: var(--accent); }
.cc-applied__x { font-size: 15px; line-height: 1; color: var(--text-muted); padding: 0 2px; }
.cc-applied__chip:hover .cc-applied__x { color: var(--text); }
.cc-applied__clear {
  background: none; border: 0; padding: 4px 6px;
  color: var(--text-muted); font-family: var(--font-ui); font-size: 14px;
  text-decoration: underline; cursor: pointer;
}
.cc-applied__clear:hover { color: var(--danger); }
.cc-filter-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cc-filter-col--wide {
  grid-column: 1 / -1;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cc-filter-tagshead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cc-filter-tagshead .cc-filter-clear { padding: 5px 12px; }
.cc-filter-taggroups {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 16px;
  align-items: center;
}
.cc-filter-taggroup { display: contents; }
.cc-filter-sublabel {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-muted);
  min-width: 72px;
}
@media (max-width: 1180px) and (min-width: 1024px) {
  .cc-filter-panel__inner { grid-template-columns: repeat(2, auto); justify-content: start; }
}
@media (max-width: 720px) {
  .cc-filter-panel__inner { grid-template-columns: 1fr 1fr; }
  .cc-filter-col--wide { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .cc-filter-panel__inner { grid-template-columns: 1fr; }
}

.cc-filter-label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

.cc-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cc-filter-pill {
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--raised);
  border: 1px solid transparent;
  box-shadow: var(--raised-shadow);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.2;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
  text-shadow: var(--raised-text);
  cursor: pointer;
  user-select: none;
  transition: color 120ms, background 120ms;
}
.cc-filter-pill:hover { color: var(--text); background: var(--raised-hover); }
.cc-filter-pill.active {
  color: var(--accent);
  background: var(--carved);
  box-shadow: var(--carved-shadow);
  text-shadow: var(--carved-text);
}
.cc-filter-pill input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.cc-filter-pill--game { display: inline-flex; align-items: center; gap: 5px; }
.cc-filter-pill__game { width: 15px; height: 15px; }

.cc-filter-combat {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-filter-number {
  width: 100%;
  max-width: 130px;
  flex: 0 0 auto;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-field);
  font-size: 16px;
}
.cc-filter-number:focus {
  border-color: var(--accent);
  outline: none;
}

.cc-filter-combat .cc-filter-clear {
  white-space: nowrap;
}
.cc-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cc-filter-tag {
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--raised);
  border: 1px solid transparent;
  box-shadow: var(--raised-shadow);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.2;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
  text-shadow: var(--raised-text);
  cursor: pointer;
  user-select: none;
  transition: color 120ms, background 120ms;
}
.cc-filter-tag:hover { color: var(--text); background: var(--raised-hover); }
.cc-filter-tag.active {
  color: var(--accent);
  background: var(--carved);
  box-shadow: var(--carved-shadow);
  text-shadow: var(--carved-text);
}
.cc-filter-tag input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.cc-filter-pill:has(input:focus-visible),
.cc-filter-tag:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.cc-filter-clear {
  padding: 6px 12px;
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: var(--raised-shadow);
  text-shadow: var(--raised-text);
  color: var(--text-dim);
  line-height: 1.2;
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 120ms, border-color 120ms;
}
.cc-filter-clear:hover {
  color: var(--danger);
  background: var(--raised-hover);
}

@media (max-width: 1023px) {
  .cc-panel-wrap {
    max-height: none;
    overflow: visible;
    opacity: 1;
    margin-bottom: 0;
    transition: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 90vw);
    z-index: 60;
    transform: translateX(100%);
    background: var(--bg);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    padding: 20px 16px 0;
  }
  .cc-panel-wrap:not(.open) { transform: translateX(100%); }
  .cc-panel-wrap.open {
    transform: translateX(0);
    transition: transform 220ms ease;
    margin-bottom: 0;
    max-height: none;
  }
  .cc-filter-panel {
    background: transparent;
    border: 0;
    padding: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  .cc-filter-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .cc-filter-panel__inner {
    grid-template-columns: 1fr;
    flex: 1;
  }
  .cc-filter-panel__foot {
    display: flex;
    position: sticky;
    bottom: 0;
    margin: 16px -16px 0;
    padding: 12px 16px 16px;
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  .cc-filter-panel__show { width: 100%; justify-content: center; }
  .cc-filter-taggroups { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cc-filter-sublabel { margin-top: 4px; }
  .cc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms;
  }
  .cc-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  body.cc-drawer-open { overflow: hidden; }
}
@media (max-width: 767px) {
  .cc-panel-wrap { bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px)); }
  .cc-backdrop { bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px)); }
  .cc-filter-col--wide {
    grid-column: span 1;
  }
}

.cc-about {
  position: relative;
  z-index: 1;
}
.cc-about__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 0;
}
.cc-about-card {
  padding: 20px 40px 36px;
}
@media (max-width: 640px) { .cc-about-card { padding: 16px 20px 24px; } }
.cc-about-card > section { margin: 0; }
.cc-about-card > section + section {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid rgba(150, 160, 200, 0.1);
}

.cc-slide {
  position: relative;
}

.cc-intro-card { position: relative; margin: 0; }
.cc-intro-card > :not(.cc-intro-card__bg) { position: relative; z-index: 1; }
.cc-intro-card__bg { position: absolute; z-index: 0; inset: -20px -40px -30px; border-radius: 5px 5px 0 0; overflow: hidden; pointer-events: none; }
.cc-intro-card__scene { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; background: var(--scene) center / cover no-repeat; opacity: 0.55; filter: saturate(0.9) brightness(0.8); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 50%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 50%, transparent 100%); mask-composite: intersect; }
@media (max-width: 820px) {
  .cc-about-card { overflow: hidden; }
  .cc-intro-card__bg { display: none; }
  .cc-intro-card > .cc-intro-card__title { z-index: 2; }
  .cc-intro-scene::before { content: ""; position: absolute; z-index: 0; top: -160px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--scene) center / cover no-repeat; opacity: 0.4; filter: saturate(0.9) brightness(0.8); -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 95px), rgba(0, 0, 0, 0.35) calc(100% - 34px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 95px), rgba(0, 0, 0, 0.35) calc(100% - 34px), transparent 100%); pointer-events: none; }
}
@media (max-width: 640px) { .cc-intro-card__bg { inset: -16px -20px -24px; } }
.cc-intro-card:first-of-type { margin-top: 0; }

.cc-intro-card__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 820px) {
  .cc-intro-card__grid { grid-template-columns: 1fr; gap: 0; }
  .cc-intro-card__logo-wrap { order: -1; }
}

.cc-intro-card__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0 0 22px;
  color: var(--text);
  text-transform: uppercase;
}
@media (min-width: 821px) {
  .cc-intro-card__title { white-space: nowrap; }
}
.cc-intro-card__body p {
  font-family: var(--font-read);
  font-size: 22px;
  line-height: 1.35;
  color: var(--text-dim);
  margin: 0 0 24px;
  max-width: 735px;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.cc-intro-card__body strong { color: var(--text); font-weight: 400; }

.cc-intro-card__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.cc-intro-card__cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: background .18s, border-color .18s, color .18s, transform .1s, box-shadow .18s;
}
.cc-intro-card__cta svg { width: 24px; height: 24px; }
.cc-intro-card__cta--primary {
  color: #fff;
}
.cc-intro-card__cta--primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.cc-intro-card__cta--primary:hover::before { animation: cc-btn-sweep 0.8s ease-out; }
.cc-intro-card__cta--primary:hover {
  background: linear-gradient(180deg, #6472e8 0%, #5360d6 100%);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 14px 30px -10px rgba(60, 78, 210, 0.65);
}
.cc-intro-card__cta--ghost {
  color: var(--text);
}
.cc-intro-card__cta--ghost:hover {
  color: #fff;
  border-color: rgba(120, 135, 255, 0.5);
  background: linear-gradient(180deg, rgba(100, 115, 220, 0.22) 0%, rgba(78, 92, 195, 0.12) 100%);
  transform: translateY(-1px);
}

.cc-intro-card__logo-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 300px;
}
@media (min-width: 821px) {
  .cc-intro-card__grid { align-items: start; }
  .cc-intro-card__logo-wrap { min-height: 0; margin-top: -70px; }
}

/* About intro scene — clerk fading into the card */
.cc-intro-scene {
  position: relative;
  display: block;
  min-height: 360px;
  place-items: stretch;
}
.cc-intro-scene__glow {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 78%;
  height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(100, 120, 255, 0.26), transparent 65%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}
.cc-intro-scene__img {
  position: absolute;
  bottom: 0;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, 0.35) 88%, transparent 100%);
}
.cc-intro-scene__clerk {
  right: 0;
  width: min(100%, 380px);
  z-index: 2;
  filter: url(#cc-art-depth-soft) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.16));
}
.cc-intro-scene__chat { z-index: 3; filter: none; transform: scale(0.74); transform-origin: 46% 9%; }
@media (min-width: 821px) {
  .cc-intro-card__grid { align-items: start; }
  .cc-intro-scene { align-self: stretch; margin-top: -78px; min-height: 300px; }
  .cc-intro-scene__clerk { bottom: -56px; }
}
@media (max-width: 820px) {
  .cc-intro-scene { min-height: 0; aspect-ratio: 1; width: 100%; max-width: 280px; justify-self: center; margin-bottom: -16px; }
  .cc-intro-scene__clerk { width: 100%; }
}

.cc-pillars-sec { margin: 24px 0; }
.cc-pillars-sec__head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 18px;
  padding: 0 8px;
}
.cc-pillars-sec__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--text);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
@media (max-width: 620px) {
  .cc-pillars-sec__title { white-space: normal; }
}

.cc-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1000px) { .cc-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cc-pillars { grid-template-columns: 1fr; } }

.cc-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  min-height: 230px;
  background:
    linear-gradient(180deg, rgba(43, 45, 57, 0.78) 0%, rgba(28, 29, 37, 0.84) 100%);
  border: 1px solid rgba(150, 160, 200, 0.18);
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 12px 28px -18px rgba(0, 0, 0, 0.85),
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
}
.cc-pillar__bg {
  position: absolute;
  top: -18px;
  right: -14px;
  width: 150px;
  height: 150px;
  background-image: var(--pillar-img);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: var(--pillar-pos, top right);
  image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 74%);
  mask-image: linear-gradient(180deg, #000, transparent 74%);
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}
.cc-pillars--icons .cc-pillar { padding-top: 84px; min-height: 0; border-color: transparent; }
.cc-pillars--icons .cc-pillar__title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 22px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.6);
}
.cc-pillars--icons .cc-pillar__bg {
  top: var(--pillar-top, -14px);
  right: var(--pillar-right, -8px);
  width: var(--pillar-w, 180px);
  height: var(--pillar-h, 190px);
  background-size: var(--pillar-size, contain);
  image-rendering: var(--pillar-render, auto);
  -webkit-mask-image: linear-gradient(180deg, #000 var(--pillar-solid, 32%), transparent var(--pillar-clear, 86%));
  mask-image: linear-gradient(180deg, #000 var(--pillar-solid, 32%), transparent var(--pillar-clear, 86%));
  opacity: var(--pillar-opacity, 0.42);
}
.cc-pillar__title {
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.cc-pillar__body {
  font-family: var(--font-read);
  font-size: 20px;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 0;
  letter-spacing: 0.01em;
}

.cc-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 36px 24px 22px;
  margin-top: 40px;
}
.cc-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.cc-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 900px) {
  .cc-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .cc-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .cc-footer__grid { grid-template-columns: 1fr; gap: 24px; }
}
.cc-footer__wordmark {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: 0 0 12px -4px;
}
.cc-footer__tag {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 12px;
  line-height: 1.4;
  max-width: 280px;
}
.cc-footer__col h4 {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 10px;
}
.cc-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cc-footer__col a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.3;
  transition: color 120ms ease;
}
.cc-footer__col a:hover { color: var(--accent); }
.cc-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  flex-wrap: wrap;
}
.cc-footer__legal {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 720px;
}

.cc-btn-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: #5865f2;
  color: #fff;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
  transition: background 120ms ease, transform 120ms ease;
}
.cc-btn-discord:hover { background: #4752c4; transform: translateY(-1px); }
.cc-btn-discord__icon { width: 16px; height: 16px; }

.cc-wizard-page {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px 32px;
}
.cc-ico {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.125em;
}
.cc-arrow { width: 0.9em; height: 0.9em; vertical-align: -0.1em; }
.cc-arrow--right { margin-left: 0.35em; }
.cc-arrow--left { margin-right: 0.35em; }
.cc-wizard-page__header {
  margin-bottom: 18px;
}
.cc-wizard-page__titlerow {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cc-wizard-page__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  margin: 0;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.75), 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 30px rgba(110, 130, 255, 0.22);
}

.cc-wizard {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: visible;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85), 0 2px 0 rgba(255, 255, 255, 0.02) inset;
}
@media (max-width: 860px) {
  .cc-wizard { grid-template-columns: minmax(0, 1fr); }
}

.cc-wizard__nav {
  background: linear-gradient(180deg, #0e1017 0%, #0b0c12 100%);
  border-right: 1px solid var(--border);
  border-radius: 8px 0 0 8px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 860px) {
  .cc-wizard__nav { display: none; }
}

.cc-wizard__step-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  text-align: left;
  transition: background 140ms, border-color 140ms, color 140ms;
  font-family: var(--font-ui);
  width: 100%;
}
.cc-wizard__step-btn:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}
.cc-wizard__step-btn.is-active {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--text);
}
.cc-wizard__step-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cc-wizard__step-title {
  display: block;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin: 2px 0 3px;
}
.cc-wizard__step-desc {
  display: block;
  font-family: var(--font-read);
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.1;
}
.cc-wizard__step-btn.is-active .cc-wizard__step-desc,
.cc-wizard__step-btn:hover .cc-wizard__step-desc { color: var(--text-dim); }

.cc-wizard__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cc-wizard__panel {
  flex: 1;
  padding: 20px 26px 22px;
  overflow: visible;
}
@media (max-width: 640px) {
  .cc-wizard__panel { padding: 16px 18px; }
}
.cc-wizard__panel-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cc-wizard__panel-title {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 3px;
}
.cc-wizard__panel-hint {
  font-family: var(--font-read);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}

.cc-wizard__subhead {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 22px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cc-wizard__subhead span {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cc-wizard__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
@media (max-width: 640px) {
  .cc-wizard__grid { grid-template-columns: 1fr; }
}
.cc-wizard__grid--thirds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 18px;
}
@media (max-width: 640px) {
  .cc-wizard__grid--thirds { grid-template-columns: 1fr; }
}
.cc-wizard__col-span-2 { grid-column: 1 / -1; }
.cc-wizard .cc-wizard__grid { gap: 14px 16px; }
.cc-wizard__grid--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cc-wizard__grid--six > .cc-field--w2 { grid-column: span 2; }
.cc-wizard__grid--six > .cc-field--w3 { grid-column: span 3; }
.cc-wizard__grid--six > .cc-field--w4 { grid-column: span 4; }
.cc-wizard__grid--six > .cc-field--w6 { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .cc-wizard__grid--six { grid-template-columns: 1fr; }
  .cc-wizard__grid--six > .cc-field { grid-column: 1 / -1; }
}
.cc-wizard__grid--gap { margin-top: 14px; }
.cc-upload-grid.cc-wizard__uploads { margin-top: 18px; grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) { .cc-upload-grid.cc-wizard__uploads { grid-template-columns: 1fr; } }
.cc-wizard__uploads .form-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cc-wizard__uploads .upload-widget { display: flex; flex-direction: column; height: 100%; }
.cc-wizard__uploads .dropzone {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius-lg);
}
.cc-wizard__uploads .empty .text-sm,
.cc-wizard__uploads .empty .text-xs,
.cc-wizard__uploads .uploading .text-sm,
.cc-wizard__uploads summary {
  font-family: var(--font-read);
  font-size: 16px;
  line-height: 1.15;
}
.cc-wizard__uploads .empty .text-sm { margin-bottom: 6px; }

.cc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-field__label,
.form-label {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-field__label .req { color: var(--danger); margin-left: 4px; }
.form-label { display: block; margin-bottom: 6px; }
.cc-field__input,
.cc-field__textarea,
.cc-field__select,
.form-input,
.form-textarea {
  width: 100%;
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 11px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  box-shadow: var(--well-shadow);
  transition: border-color 120ms, box-shadow 120ms;
}
.cc-field__textarea,
.form-textarea {
  min-height: 72px;
  resize: vertical;
  font-family: var(--font-sans);
}
.cc-field__input:focus,
.cc-field__textarea:focus,
.cc-field__select:focus,
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--well-focus);
}
select option,
select optgroup {
  background-color: var(--surface);
  color: var(--text);
}
.cc-field__input::placeholder,
.cc-field__textarea::placeholder,
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-muted); }
.cc-field__help {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.cc-field__error {
  font-size: 12px;
  color: var(--danger);
}
.cc-field__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cc-field__count {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cc-field__count.is-short,
.cc-field__count.is-near { color: var(--warning); }

.cc-wizard .cc-field { gap: 6px; }
.cc-wizard .cc-field__label { color: var(--text-dim); }
.cc-wizard .cc-field__input,
.cc-wizard .cc-field__textarea,
.cc-wizard .cc-field__select {
  font-family: var(--font-field);
  font-size: 18px;
  line-height: 1.2;
  border-radius: var(--radius-lg);
}
.cc-wizard .cc-field__input,
.cc-wizard .cc-field__select {
  height: 42px;
  padding: 0 14px;
}
.cc-wizard .cc-field__textarea {
  min-height: 110px;
  padding: 10px 14px;
  line-height: 1.3;
}
.cc-wizard .cc-field__input::placeholder,
.cc-wizard .cc-field__textarea::placeholder { color: #6c7085; }
.cc-wizard .cc-field__help,
.cc-wizard .cc-field__error {
  font-family: var(--font-read);
  font-size: 16px;
  line-height: 1;
  margin-top: -1px;
}

.cc-choice {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1000px) { .cc-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-wizard__grid--lead { margin-bottom: 14px; }
.cc-wizard__grid--six > .cc-field--w3 > .cc-field__textarea {
  flex: 1;
  min-height: 0;
  height: 0;
  resize: none;
  overflow-y: auto;
}
@media (max-width: 640px) {
  .cc-wizard__grid--six > .cc-field--w3 > .cc-field__textarea { flex: none; height: 140px; }
}
.cc-choice__opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 12px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
  user-select: none;
  transition: background 130ms, border-color 130ms, box-shadow 130ms;
}
.cc-choice__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.cc-choice__title {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}
.cc-choice__desc {
  font-family: var(--font-read);
  font-size: 16px;
  line-height: 1.1;
  color: var(--text-muted);
}
.cc-choice__opt:hover {
  border-color: #4a5270;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
}
.cc-choice__opt:hover .cc-choice__title { color: var(--text); }
.cc-choice__opt:has(input:checked) {
  background: linear-gradient(180deg, rgba(100, 120, 255, 0.2), rgba(100, 120, 255, 0.08));
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(100, 120, 255, 0.25), 0 4px 14px -6px rgba(100, 120, 255, 0.5);
}
.cc-choice__opt:has(input:checked) .cc-choice__title { color: #dfe4ff; }
.cc-choice__opt:has(input:checked) .cc-choice__desc { color: var(--text-dim); }
.cc-choice__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.cc-tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--well-shadow);
}
.cc-tag-picker--types { min-height: 0; }
.cc-tag-picker__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 130ms, border-color 130ms, color 130ms, box-shadow 130ms;
  user-select: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.cc-tag-picker__chip:hover {
  border-color: #4a5270;
  color: var(--text);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
}
.cc-tag-picker__ico {
  width: 15px;
  height: 15px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
  opacity: 0.9;
}
.cc-tag-picker__chip.is-active {
  background: linear-gradient(180deg, rgba(100, 120, 255, 0.24), rgba(100, 120, 255, 0.12));
  border-color: var(--accent);
  color: #dfe4ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(100, 120, 255, 0.25), 0 4px 14px -6px rgba(100, 120, 255, 0.5);
}
.cc-tag-picker__chip.is-active .cc-tag-picker__ico { opacity: 1; }
.cc-tag-picker__chip input { display: none; }
.cc-game-logo { width: 20px; height: 20px; }

.cc-wizard .cc-field .csel { width: 100%; }
.cc-wizard__panel-header--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.cc-womquick__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  color: var(--text);
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.cc-womquick__btn:hover,
.cc-womquick__btn[aria-expanded="true"] { border-color: var(--accent); background: linear-gradient(180deg, rgba(100, 120, 255, 0.24), rgba(100, 120, 255, 0.1)); }
.cc-womquick__logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.cc-womquick__title { font-family: var(--font-ui); font-size: 16px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
.cc-womquick__panel { margin: 0 0 16px; padding: 14px; border-radius: var(--radius-md); background: var(--well); border: 1px solid var(--border); box-shadow: var(--well-shadow); }
.cc-womquick__hint { margin: 0 0 12px; color: var(--text-dim); font-family: var(--font-read); font-size: 16px; line-height: 1.15; }
.cc-womquick__row { display: flex; gap: 8px; }
.cc-womquick__row .cc-field__input { flex: 1; min-width: 0; }
.cc-womquick__go {
  flex-shrink: 0;
  padding: 0 18px;
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 16px;
  cursor: pointer;
}
.cc-womquick__go:disabled { opacity: 0.6; cursor: progress; }
.cc-womquick__msg { margin: 10px 0 0; font-family: var(--font-read); font-size: 16px; line-height: 1.15; color: var(--ok); }
.cc-womquick__msg:empty { display: none; }
.cc-womquick__msg.is-error { color: var(--danger); }

.cc-wizard .cc-field .csel__trigger {
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0 14px;
  height: 42px;
  font-family: var(--font-field);
  font-size: 18px;
  color: var(--text);
  box-shadow: var(--well-shadow);
}
.cc-wizard .cc-field .csel.is-open .csel__trigger {
  border-color: var(--accent);
  box-shadow: var(--well-focus);
}
.cc-wizard .cc-field .csel__caret { color: var(--text-muted); }
.cc-wizard .cc-field .csel__menu {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.6);
  padding: 5px;
}
.cc-wizard .cc-field .csel__opt { padding: 9px 12px; font-family: var(--font-field); font-size: 18px; line-height: 1.1; border-radius: 4px; }

.cc-intg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
@media (max-width: 640px) { .cc-intg { grid-template-columns: 1fr; } }
.cc-intg__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.cc-intg__card--full { grid-column: 1 / -1; }
.cc-intg__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cc-intg__logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  image-rendering: auto;
}
.cc-intg__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cc-intg__name {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.1;
}
.cc-intg__sub {
  font-family: var(--font-read);
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.1;
}

.cc-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .cc-upload-grid { grid-template-columns: 1fr; } }

.cc-card-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.cc-card-toggle input { accent-color: var(--accent); cursor: pointer; }
.cc-card-toggle:hover { border-color: var(--border-strong); color: var(--text); }

.cc-wizard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 26px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, #0d0e14 0%, #0a0b10 100%);
  border-radius: 0 0 8px 0;
}
@media (max-width: 860px) {
  .cc-wizard__footer { border-radius: 0 0 8px 8px; }
}
.cc-wizard__step-counter {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.cc-wizard__actions { display: flex; gap: 10px; }
.cc-wizard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-width: 104px;
  padding: 0 22px;
  border-radius: var(--radius-lg);
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 400;
  cursor: pointer;
  color: var(--text-dim);
  transition: background 120ms, border-color 120ms, color 120ms, transform 120ms;
}
.cc-wizard__btn:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.cc-wizard__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cc-wizard__btn--primary {
  background: linear-gradient(180deg, #5665dd 0%, #4552c4 100%);
  color: #fff;
  border-color: #3d49ac;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 6px 16px -8px rgba(60, 78, 210, 0.5);
}
.cc-wizard__btn--primary:hover:not(:disabled) {
  color: #fff;
  background: linear-gradient(180deg, #6472e8 0%, #5360d6 100%);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 10px 22px -8px rgba(60, 78, 210, 0.6);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.cc-toolbar--merged {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cc-toolbar--merged .cc-search--inline {
  flex: 1 1 320px;
  min-width: 240px;
  margin-bottom: 0;
}
.cc-toolbar--merged .cc-search--inline input {
  height: 42px;
  box-sizing: border-box;
  padding: 0 14px 0 40px;
  font-family: var(--font-field);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  background: var(--well);
  border: 1px solid var(--border);
  box-shadow: var(--well-shadow);
}
.cc-toolbar--merged .cc-search--inline input::placeholder { font-family: var(--font-field); letter-spacing: 0.02em; }
.cc-toolbar--merged .cc-search--inline input:focus {
  border-color: var(--accent);
  box-shadow: var(--well-focus);
}
.cc-toolbar--merged .cc-search--inline svg {
  left: 13px;
  width: 16px;
  height: 16px;
  z-index: 2;
}
.cc-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cc-toolbar--merged .cc-toolbar__btn { height: 40px; box-sizing: border-box; }
.cc-toolbar--merged .cc-toolbar__compare { padding: 0 12px; gap: 6px; }
.cc-landing-browse .cc-grid-count { display: none; }

.cc-toolbar--merged .cc-toolbar__tag {
  height: 40px;
  min-width: 118px;
  justify-content: center;
  padding: 0 14px;
  gap: 8px;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}
.cc-toolbar--merged .cc-toolbar__tag .cc-toolbar__compare-label { display: inline; }
.cc-toolbar__sort { display: contents; }
@media (max-width: 640px) {
  .cc-toolbar--merged .cc-toolbar__tag { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 1281px) {
  .cc-toolbar--merged .cc-toolbar__right .cc-toolbar__tag { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 640px) {
  .cc-toolbar__right { width: 100%; justify-content: space-between; }
}
@media (min-width: 1281px) {
  .cc-toolbar--merged {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
  }
  .cc-toolbar--merged .cc-search--inline {
    grid-column: 1 / 4;
    flex: none;
    min-width: 0;
  }
  .cc-toolbar--merged .cc-toolbar__right {
    grid-column: 4 / 5;
    min-width: 0;
    gap: 8px;
    justify-content: flex-start;
  }
}

.cc-browse-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 12px;
  flex-wrap: wrap;
}
.cc-browse-meta__link {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
  transition: color 120ms, border-color 120ms;
}
.cc-browse-meta__link:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.cc-browse-meta--count { margin-bottom: 16px; }
.cc-browse-meta--count .cc-grid-count { margin: 0; }
.cc-landing-browse .cc-browse-meta--count { display: none; }

.cc-landing-browse {
  position: relative;
  z-index: 1;
  padding: 20px 0 20px;
  background: rgba(10, 10, 11, 0.2);
}
.cc-landing-browse__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.cc-landing-browse__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 5px;
}
.cc-landing-browse__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.75), 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 30px rgba(110, 130, 255, 0.22);
}

.cc-browse-clip { position: relative; }
.cc-browse-fade { display: none; }
.cc-browse-more {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 8px;
}
.cc-browse-more__btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--btn-lg-pad);
  border-radius: var(--radius-lg);
  font-family: var(--font-ui);
  font-size: var(--btn-lg-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: transform 120ms, background 150ms, box-shadow 150ms;
}
.cc-browse-more__btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, #6472e8, #5360d6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 14px 28px -14px rgba(0, 0, 0, 0.75); }

.cc-browse-more__btn::before,
.cc-wall__post::before,
.cc-wall__all::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.cc-browse-more__btn:hover::before,
.cc-wall__post:hover::before,
.cc-wall__all:hover::before { animation: cc-btn-sweep 0.8s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .cc-browse-more__btn:hover::before,
  .cc-wall__post:hover::before,
  .cc-wall__all:hover::before { animation: none; }
}

html { scroll-behavior: smooth; }
#home, #about, #news, #index, #wall { scroll-margin-top: 24px; }

.cc-landing-news {
  position: relative;
  z-index: 1;
  padding: 24px 0 20px;
  background: linear-gradient(180deg,
    rgba(10, 10, 11, 0) 0,
    rgba(10, 10, 11, 0.2) 90px,
    rgba(10, 10, 11, 0.2) 100%);
}
.cc-landing-news__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.cc-landing-news__head,
.cc-landing-ally__head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 5px;
}
.cc-sectionrule {
  flex: 1 1 auto;
  height: 3px;
  min-width: 40px;
  border-radius: 2px;
  background: rgba(170, 180, 210, 0.28);
}
.cc-landing-news__title,
.cc-landing-ally__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.75), 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 30px rgba(110, 130, 255, 0.22);
}

.cc-landing-news__empty {
  color: var(--text-muted);
  font-size: 14px;
  padding: 20px 0;
}

.cc-landing-wall {
  position: relative;
  z-index: 1;
  padding: 20px 0 44px;
  background: linear-gradient(180deg,
    rgba(10, 10, 11, 0.2) 0,
    rgba(10, 10, 11, 0.2) calc(100% - 90px),
    rgba(10, 10, 11, 0) 100%);
}
.cc-landing-events { position: relative; z-index: 1; padding: 0; }
.cc-landing-ally { position: relative; z-index: 1; padding: 22px 0 80px; }
.cc-landing-ally__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.cc-landing-ally .cc-ally-list { padding-top: 56px; }
.cc-allyhome__bar { margin-bottom: 0; }
.cc-allyhome .cc-panel-wrap.open { margin: 14px 0 0; }

.cc-footer {
  position: relative;
  z-index: 2;
}

.cc-grid-count {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.cc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 28px 0 4px;
}
.cc-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.cc-pagination__btn:hover { border-color: var(--accent); background: var(--surface-2); }
.cc-pagination__btn.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.cc-pagination__status {
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

body.auth-page {
  background: var(--bg);
}
body.auth-page .app-main {
  background: transparent;
  position: relative;
  z-index: 1;
}
body.auth-page .app-sidebar {
  background: rgba(20, 20, 22, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cc-auth-wrap {
  min-height: calc(100vh - 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 40px;
  position: relative;
  z-index: 1;
}
.cc-auth-inner {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.cc-auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 32px 28px 24px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  max-width: 420px;
  width: 100%;
}
.cc-auth-card__head {
  text-align: center;
  margin-bottom: 22px;
}
.cc-auth-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 20px rgba(100, 120, 255, 0.15));
}
.cc-auth-card__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cc-auth-card__mark--ok { width: 60px; height: 48px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55)); }
.cc-auth-card__mark--ok img { image-rendering: pixelated; }
.cc-auth-card__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cc-auth-card__note a { color: var(--clan-accent, var(--accent)); text-decoration: none; }
.cc-auth-card__note a:hover { text-decoration: underline; }
.cc-auth-card__title {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 30px;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
  color: var(--text);
}
.cc-auth-card__sub {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}
.cc-auth-card__discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 5px;
  background: #5865F2;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
}
.cc-auth-card__discord:hover {
  background: #4752C4;
  transform: translateY(-1px);
}
.cc-auth-card__discord svg { width: 18px; height: 18px; }
.cc-auth-card__note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  text-align: center;
}

.ch-page {
  --clan-amount: color-mix(in srgb, var(--clan-accent, var(--accent)) 62%, #fff);
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px 80px;
  position: relative;
  z-index: 1;
}
.ch-page--bg { padding-top: 18px; }
.ch-bg {
  position: fixed;
  top: -160px;
  right: -40px;
  left: -40px;
  height: calc(100vh + 320px);
  height: calc(100lvh + 320px);
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  filter: blur(var(--bg-blur, 0px));
}
.ch-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, var(--bg-dim, 0.6));
}
body.has-clan-bg { background: transparent; }
body.has-clan-bg .app-main {
  position: relative;
  z-index: 1;
  background: transparent;
}

.ch-hero {
  position: relative;
  margin-bottom: 20px;
}

.ch-hero--attached {
  background: var(--surface);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.7);
}
body.has-clan-bg .ch-hero--attached {
  background: rgba(12, 12, 14, 0.86);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 48px -6px rgba(0, 0, 0, 0.75),
    0 32px 80px -24px rgba(0, 0, 0, 0.95);
}
.ch-hero__banner {
  position: relative;
  aspect-ratio: 16 / 3.4;
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface-2), var(--surface), var(--surface-3));
}
.ch-hero__banner--empty {
  aspect-ratio: auto;
  height: 76px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--clan-accent, var(--accent)) 18%, var(--surface-2)),
      var(--surface));
}
.ch-hero--attached .ch-hero__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 52%, color-mix(in srgb, var(--surface) 18%, transparent) 66%, color-mix(in srgb, var(--surface) 50%, transparent) 80%, color-mix(in srgb, var(--surface) 82%, transparent) 92%, var(--surface) 100%);
}
body.has-clan-bg .ch-hero--attached:has(+ .ch-panel) {
  margin-bottom: 0;
  border-radius: calc(var(--radius-lg) + 6px) calc(var(--radius-lg) + 6px) 0 0;
  background: rgba(6, 7, 12, 0.82);
  box-shadow: none;
}
body.has-clan-bg .ch-hero--attached + .ch-panel {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 4px;
}
body.has-clan-bg .ch-hero--attached .ch-hero__banner::after {
  background: linear-gradient(to bottom, transparent 52%, rgba(12,12,14,0.18) 66%, rgba(12,12,14,0.5) 80%, rgba(12,12,14,0.82) 92%, rgb(12,12,14) 100%);
}
body.has-clan-bg .ch-hero__ident::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(12,12,14,1);
}
.ch-hero__ident {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-top: 0;
  padding: 14px 20px 22px;
  position: relative;
  z-index: 2;
}
.ch-hero__lead {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.ch-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}
.ch-hero__metatop {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 6px;
  background: var(--well);
  box-shadow: var(--well-shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ch-hero__metatop .ch-join--cta {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
}
.ch-hero__meta .ch-join--edit {
  width: 100%;
  justify-content: center;
}
.ch-hero__recruit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border-radius: 5px;
  font-family: var(--font-ui);
  font-size: 18px;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  background: none;
  border: none;
  box-shadow: none;
  white-space: nowrap;
}
.ch-hero__recruit--open { color: var(--ok); }
.ch-hero__recruit--application { color: var(--clan-accent, var(--accent)); }
.ch-hero__recruit--closed { color: var(--danger); }
.ch-hero__recruit--invite_only { color: var(--warning); }
.ch-hero__recruit--ally { color: var(--clan-accent, var(--accent)); }
.ch-hero__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ch-logo {
  width: 96px;
  height: 96px;
  min-width: 96px;
  margin-top: 6px;
  border-radius: 6px;
  border: 3px solid var(--surface);
  box-shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  background: linear-gradient(135deg, var(--clan-accent, var(--accent)), var(--accent-dim));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-family: var(--font-ui);
  font-size: 44px;
  line-height: 1;
}
.ch-logo img { width: 100%; height: 100%; object-fit: cover; }
.ch-logo--img {
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.ch-logo--img img {
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}
.ch-ident__text {
  min-width: 0;
  text-align: left;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  min-height: 96px;
}
.ch-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.02;
  color: var(--text);
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  overflow-wrap: break-word;
}
.ch-tagline-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ch-tagline {
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.2;
  color: var(--text-dim);
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.ch-join {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 5px;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--clan-accent, var(--accent));
  border: 1px solid var(--clan-accent, var(--accent));
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.7);
  transition: filter 140ms, transform 140ms, box-shadow 140ms;
}
.ch-join:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ch-join--cta {
  border: 1px solid color-mix(in srgb, var(--clan-accent, var(--accent)) 70%, #000);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--clan-accent, var(--accent)) 88%, #fff) 0%,
    var(--clan-accent, var(--accent)) 55%,
    color-mix(in srgb, var(--clan-accent, var(--accent)) 82%, #000) 100%);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  box-shadow:
    0 8px 20px -14px color-mix(in srgb, var(--clan-accent, var(--accent)) 40%, transparent),
    0 6px 14px -8px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.ch-join--cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.ch-join--cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 12px 26px -14px color-mix(in srgb, var(--clan-accent, var(--accent)) 55%, transparent),
    0 8px 16px -8px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
.ch-join--cta:hover::before { animation: cc-btn-sweep 0.8s ease-out; }
.ch-join--edit {
  overflow: hidden;
  gap: 8px;
  padding: 0 16px;
  color: var(--text);
  cursor: pointer;
}
.ch-join--edit svg { width: 15px; height: 15px; }
.ch-join__ico { width: 18px; height: 18px; margin-right: 9px; flex-shrink: 0; }
.ch-join--edit:hover { background: rgba(255, 255, 255, 0.14); filter: none; }
@media (prefers-reduced-motion: reduce) {
  .ch-join--cta:hover::before { animation: none; }
}

@media (max-width: 640px) {
  .ch-hero__ident { flex-direction: column; align-items: stretch; }
  .ch-hero__lead {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    align-items: center;
  }
  .ch-hero__lead .ch-logo { grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px; min-width: 64px; margin-top: 0; font-size: 30px; }
  .ch-ident__text { display: contents; }
  .ch-name { grid-column: 2; grid-row: 1; align-self: end; font-size: clamp(0.85rem, 4.4vw, 1.4rem); text-wrap: balance; overflow-wrap: break-word; }
  .ch-tagline-row { grid-column: 2; grid-row: 2; align-self: start; }
  .ch-tagline { font-size: 14px; line-height: 1.25; }
  .ch-ident__bars { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
  .ch-hero__meta { align-items: flex-start; padding-top: 4px; flex-direction: row; flex-wrap: wrap; }
  .ch-page, .ch-page--bg { padding-top: 34px; }
  .ch-hero__banner { aspect-ratio: 16 / 5; }
}

.ch-ident__bars {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}
.ch-ident__bars .ch-social-bar { align-self: auto; }
.ch-games {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
}
.ch-games__logo { display: block; width: 26px; height: 26px; }

.ch-social-bar {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0;
  padding: 2px 4px;
  border-radius: var(--radius-md);
  background: var(--well);
  box-shadow: var(--well-shadow);
  border: 1px solid var(--border);
}
.ch-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  color: var(--text-dim);
  transition: color 140ms, background 140ms;
}
.ch-social svg { width: 15px; height: 15px; }
.ch-social img { width: 18px; height: 18px; object-fit: contain; }
.ch-social:hover { color: var(--clan-accent, var(--accent)); background: var(--surface-3); }
.ch-social--discord { color: #8b95f7; }
.ch-social--discord:hover { color: #fff; background: #5865f2; }
.ch-social__div {
  width: 1px;
  height: 14px;
  background: var(--border-strong);
  margin: 0 5px;
}
.ch-status {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 5px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: linear-gradient(180deg, rgba(34, 34, 38, 0.9), rgba(20, 20, 22, 0.9));
  border: 1px solid var(--border-strong);
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ch-status--open { color: var(--ok); border-color: rgba(74, 222, 128, 0.35); }
.ch-status--closed { color: var(--danger); border-color: rgba(248, 113, 113, 0.35); }
.ch-status--invite_only { color: var(--warning); border-color: rgba(251, 191, 36, 0.35); }


.fi {
  display: inline-block;
  width: 1.3333em;
  line-height: 1em;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
}
.fi::before { content: "\00a0"; }
.fi-gb { background-image: url('/static/img/flags/gb.svg'); }

.cc-legal { padding: 48px 20px 80px; }
.cc-legal__inner { max-width: 760px; margin: 0 auto; }
.cc-legal__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: 0 0 6px;
  color: var(--text);
}
.cc-legal__meta { color: var(--text-muted); font-size: 13px; margin: 0 0 28px; }
.cc-legal > .cc-legal__inner > p { color: var(--text-dim); }
.cc-legal h2 { font-size: 18px; margin: 32px 0 10px; color: var(--text); }
.cc-legal p, .cc-legal li { color: var(--text-dim); line-height: 1.65; font-size: 15px; }
.cc-legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.cc-legal a { color: var(--accent); }
.cc-legal a:hover { text-decoration: underline; }
.cc-legal strong { color: var(--text); font-weight: 600; }
.cc-legal__foot { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); }
.cc-legal h2[id] { scroll-margin-top: 24px; }
.cc-help-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.cc-legal .cc-help-toc a {
  font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(0,0,0,0.2);
  transition: color 120ms, border-color 120ms;
}
.cc-legal .cc-help-toc a:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; }
.cc-help-faq { display: flex; flex-direction: column; gap: 8px; }
.cc-help-faq details { border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(0,0,0,0.2); padding: 0 14px; }
.cc-help-faq summary { cursor: pointer; padding: 12px 0; color: var(--text); font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.cc-help-faq summary::-webkit-details-marker { display: none; }
.cc-help-faq summary::after { content: "+"; font-family: var(--font-data); color: var(--text-muted); }
.cc-help-faq details[open] summary::after { content: "−"; }
.cc-help-faq details p { margin: 0 0 12px; }
.cc-help-contact { margin-top: 28px; }

.cc-footer__legal-links { display: inline-flex; gap: 16px; margin-top: 8px; }
.cc-footer__legal-links a { color: var(--text-dim); font-size: 13px; text-decoration: none; }
.cc-footer__legal-links a:hover { color: var(--accent); text-decoration: underline; }

.ch-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  align-items: start;
}
.ch-panel {
  padding: 16px;
  border-radius: calc(var(--radius-lg) + 6px);
  background: rgba(14, 15, 22, 0.84);
  border: none;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}
@media (max-width: 900px) {
  .ch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ch-grid { grid-template-columns: 1fr; }
}

.ch-grid--v2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  align-items: stretch;
}
.ch-grid--v2 .ch-slot { min-width: 0; display: flex; container-type: inline-size; container-name: cardslot; }
.ch-grid--v2 .ch-slot > .ch-card { flex: 1 1 auto; width: 100%; }
.ch-grid--measure { align-items: start; }
.ch-grid--measure > .ch-slot > .ch-card { align-self: flex-start; }
.ch-slot--w1 { grid-column: span 1; }
.ch-slot--w2 { grid-column: span 2; }
.ch-slot--w3 { grid-column: span 3; }
.ch-grid--v2 .ch-sep {
  grid-column: 1 / -1;
  height: 0;
  border: 0;
  border-top: 1px solid var(--border);
  margin: 6px 0;
  opacity: 0.7;
}
.ch-imgblock { margin: 0; }
.ch-imgblock img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.ch-imgblock__cap {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 900px) {
  .ch-grid--v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-slot--w3 { grid-column: 1 / -1; }
  .ch-slot--w2 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .ch-grid--v2 { grid-template-columns: 1fr; }
  .ch-grid--v2 .ch-slot { grid-column: 1 / -1; }
}

.ch-rail {
  position: fixed;
  top: 76px;
  right: 18px;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: 280px;
  max-height: min(84vh, 760px);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(24, 24, 29, 0.98), rgba(15, 15, 18, 0.98));
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.ch-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.ch-rail__head:active { cursor: grabbing; }
.ch-rail__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--btn-sm-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ch-rail__brand svg { width: 14px; height: 14px; color: var(--clan-accent, var(--accent)); }
.ch-rail__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.ch-rail__x svg { width: 16px; height: 16px; }
.ch-rail__x:hover { background: var(--surface-3); color: var(--text); }
.ch-rail__scroll { flex: 1 1 auto; overflow-y: auto; padding: 4px 14px; scrollbar-width: none; -ms-overflow-style: none; }
.ch-rail__scroll::-webkit-scrollbar { display: none; }
.ch-rail__sec { padding: 13px 0; border-bottom: 1px solid var(--border); }
.ch-rail__sec:last-child { border-bottom: none; }
.ch-rail__sechead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ch-rail__sechead .ch-rail__h { margin: 0; }
.ch-rail__h {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.ch-rail__tray { display: flex; flex-direction: column; gap: 6px; min-height: 8px; }
.ch-rail__blocks { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-rail__add {
  border: 1px solid var(--border-strong);
  background: #1b1b1f;
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: var(--btn-sm-pad);
  font-family: var(--font-ui);
  font-size: var(--btn-sm-font);
  font-weight: 400;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.ch-rail__add:hover { border-color: var(--clan-accent, var(--accent)); background: #212127; }
.ch-rail__bin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 4px 9px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 14px;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.ch-rail__bin svg { width: 13px; height: 13px; flex-shrink: 0; }
.ch-rail__bin.is-over,
.ch-rail__bin.sortable-drag-over {
  border-color: #ff6b6b;
  color: #ff6b6b;
  background: rgba(248, 113, 113, 0.1);
}
.ch-rail__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
}
.ch-rail__status { flex: 1 1 auto; font-size: 13px; color: var(--text-muted); }
.ch-rail__btn {
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: var(--btn-sm-pad);
  font-family: var(--font-ui);
  font-size: var(--btn-sm-font);
  font-weight: 400;
  cursor: pointer;
}
.ch-rail__btn:hover { background: #24242a; }
.ch-rail__btn--save {
  background: var(--clan-accent, var(--accent));
  border-color: var(--clan-accent, var(--accent));
  color: #fff;
}
.ch-rail__btn--save:hover { filter: brightness(1.08); }
.ch-rail__btn--save[disabled] { opacity: 0.6; cursor: default; }
.ch-toolkit__h {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.ch-toolkit__chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(40, 44, 66, 0.5), rgba(27, 27, 31, 0.6));
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--btn-sm-font);
  cursor: grab;
  transition: border-color 120ms, background 120ms;
}
.ch-toolkit__chip:hover { border-color: var(--clan-accent, var(--accent)); background: #212127; }
.ch-toolkit__chip:active { cursor: grabbing; }
.ch-toolkit__chip.sortable-ghost { opacity: 0.4; }
.ch-toolkit__empty { font-size: 13px; color: var(--text-muted); margin: 2px 0; }
.ch-toolkit__add {
  border: 1px solid var(--border-strong);
  background: #1b1b1f;
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 7px 11px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.ch-toolkit__add:hover { border-color: var(--clan-accent, var(--accent)); }
.ch-toolkit__link {
  border: none;
  background: none;
  color: #ff6b6b;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 0;
  margin-bottom: 8px;
}
.ch-toolkit__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ch-toolkit__field > span {
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
}
.ch-toolkit__field > span b { color: var(--text); font-weight: 600; }
.ch-toolkit__field--inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.ch-toolkit__field--inline > span { margin-bottom: 0; }
.ch-toolkit__field--inline input[type="color"] { width: 38px; height: 30px; flex-shrink: 0; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #16161a; cursor: pointer; }
.ch-toolkit__field:not(.ch-toolkit__field--inline) input[type="color"] { width: 100%; height: 34px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #16161a; cursor: pointer; }
.ch-toolkit__field input[type="range"] { width: 100%; accent-color: var(--clan-accent, var(--accent)); }
.ch-toolkit__add--sm { padding: 5px 12px; font-size: 13px; flex-shrink: 0; }
.ch-toolkit__bgctrls { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ch-toolkit__bgctrls .ch-toolkit__link { margin-bottom: 0; }
.ch-toolkit__duo { display: flex; gap: 12px; }
.ch-toolkit__field--mini { flex: 1; min-width: 0; }
.ch-toolkit__field--mini > span { font-size: 12px; }
.ch-toolkit__field textarea,
.ch-toolkit__field input[type="text"] {
  width: 100%;
  border: 1px solid var(--border-strong);
  background: #16161a;
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 16px;
  resize: vertical;
}
body.ch-editing .ch-page { padding-bottom: 96px; }

.ch-grid--editing { grid-auto-flow: row dense; }

.ch-slot--editing {
  display: flex;
  flex-direction: column;
  outline: 1px dashed var(--border-strong);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}
.ch-slot--editing > .ch-slot__body { flex: 1 1 auto; width: 100%; display: flex; }
.ch-slot--editing > .ch-slot__body > .ch-card { flex: 1 1 auto; width: 100%; }
.ch-slot--ghost { opacity: 0.4; }

.ch-ed__bar {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(24, 24, 28, 0.96);
  border: 1px solid var(--border-strong);
  cursor: grab;
  user-select: none;
}
.ch-ed__bar:active { cursor: grabbing; }
.ch-ed__bar:hover { border-color: var(--clan-accent, var(--accent)); }
.ch-ed__grip {
  display: inline-flex;
  color: var(--text-muted);
  line-height: 1;
}
.ch-ed__grip svg { width: 16px; height: 16px; display: block; }
.ch-slot--chosen { outline-color: var(--clan-accent, var(--accent)); }
.ch-slot--drag { opacity: 0.95; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9); }
.ch-ed__rm.is-locked { opacity: 0.35; cursor: default; }
.ch-ed__rm svg { width: 15px; height: 15px; display: block; }
.ch-ed__input,
.ch-ed__ta {
  width: 100%;
  margin-top: 10px;
  border: 1px solid var(--border-strong);
  background: #16161a;
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 16px;
  resize: vertical;
}
.ch-ed__input:focus,
.ch-ed__ta:focus { outline: none; border-color: var(--clan-accent, var(--accent)); }

.ch-card--video { padding: 0; overflow: hidden; }
.ch-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.ch-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ch-linkgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-linkgrid__btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 140ms, background 140ms, transform 140ms;
}
.ch-linkgrid__btn:hover {
  border-color: var(--clan-accent, var(--accent));
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.ch-faq { display: flex; flex-direction: column; gap: 8px; }
.ch-faq__item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.ch-faq__item > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-faq__item > summary::-webkit-details-marker { display: none; }
.ch-faq__item > summary::before {
  content: "+";
  color: var(--clan-accent, var(--accent));
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.ch-faq__item[open] > summary::before { content: "\2212"; }
.ch-faq__item > p { margin: 0; padding: 0 14px 14px 30px; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.ch-ed__title {
  font-weight: 600;
  font-size: 14px;
  margin-right: auto;
  white-space: nowrap;
}
.ch-ed__widths { display: inline-flex; gap: 4px; }
.ch-ed__widths button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-strong);
  background: #16161a;
  color: var(--text-muted);
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.ch-ed__widths button svg { width: 18px; height: auto; display: block; }
.ch-ed__widths button:hover { color: var(--text); }
.ch-ed__widths button.is-active {
  background: #2a2a30;
  border-color: #4a4a52;
  color: #fff;
}
.ch-ed__toggle,
.ch-ed__rm,
.ch-ed__barbtn {
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ch-ed__rm:hover { border-color: #b5423a; color: #ff6b6b; }
.ch-ed__barbtn:hover { border-color: #4a4a52; }

.ch-ed__editable {
  outline: 1px dashed transparent;
  outline-offset: 3px;
  border-radius: 4px;
  cursor: text;
}
.ch-ed__editable:hover { outline-color: var(--border-strong); }

.ch-hero__banner, .ch-logo { position: relative; }
.ch-imgedit {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: #fff;
  cursor: pointer;
  background: rgba(8, 9, 14, 0.18);
  outline: 2px dashed rgba(255, 255, 255, 0.35);
  outline-offset: -8px;
  transition: background 140ms ease, outline-color 140ms ease;
}
.ch-imgedit--banner { z-index: 1; align-items: flex-start; justify-content: flex-start; padding: 14px 0 0 16px; }
.ch-imgedit--drag { cursor: grab; touch-action: none; }
.ch-imgedit--drag.is-dragging { cursor: grabbing; background: transparent; }
.ch-imgedit--drag.is-dragging .ch-imgedit__lbl { opacity: 0; }
body.ch-editing .ch-hero__banner--empty { height: 130px; }
.ch-imgedit--logo { border-radius: inherit; outline-offset: -5px; }
.ch-imgedit__lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-lg);
  font-family: var(--font-ui);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(10, 11, 16, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.9);
  opacity: 0.85;
  transition: opacity 140ms ease, transform 140ms ease;
}
.ch-imgedit__lbl svg { width: 16px; height: 16px; flex-shrink: 0; }
.ch-imgedit--logo .ch-imgedit__lbl { flex-direction: column; gap: 3px; padding: 6px 8px; font-size: 13px; background: rgba(10, 11, 16, 0.7); }
.ch-imgedit:hover, .ch-imgedit:focus-visible {
  background: rgba(8, 9, 14, 0.45);
  outline-color: var(--clan-accent, var(--accent));
}
.ch-imgedit:hover .ch-imgedit__lbl, .ch-imgedit:focus-visible .ch-imgedit__lbl { opacity: 1; transform: translateY(-1px); }
.ch-imgedit.is-busy { cursor: progress; }
.ch-imgedit.is-busy .ch-imgedit__lbl { opacity: 0.5; }

.ch-toolkit__field--img { gap: 10px; }
.ch-toolkit__field--img > span:first-child { flex: 1 1 auto; }
.ch-toolkit__thumb {
  flex: 0 0 auto;
  width: 54px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-2) center / cover no-repeat;
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.8);
}
.ch-toolkit__thumb--logo { width: 32px; }
.ch-ed__editable:focus {
  outline: 1px solid var(--clan-accent, var(--accent));
  outline-offset: 3px;
}
.ch-ed__editable:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
}

.ch-card--empty {
  border-style: dashed;
  opacity: 0.75;
}
.ch-card__empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  padding: 22px 12px;
}
.ch-card__empty-name { font-weight: 600; font-size: 14px; color: var(--text); }
.ch-card__empty-note { font-size: 13px; color: var(--text-muted); }
.ch-card--imageblock .ch-card__ph {
  color: var(--text-muted);
  text-align: center;
  padding: 24px 0;
  font-size: 14px;
}

.ch-card {
  position: relative;
  background: linear-gradient(180deg, #1d1d22, #18181c);
  border: none;
  border-radius: var(--radius-lg);
  padding: 18px;
  min-width: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 40px -22px rgba(0, 0, 0, 0.95),
    0 4px 12px -6px rgba(0, 0, 0, 0.6);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ch-card__h {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 14px;
}
.ch-card [data-game-pane][hidden],
.ch-cdrop__menu [hidden] { display: none !important; }
.ch-card__hctrls { display: inline-flex; align-items: center; gap: 8px; }
.ch-gameswitch { display: inline-flex; align-items: center; gap: 2px; }
.ch-gameswitch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: #fff;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 140ms, transform 140ms;
}
.ch-gameswitch__btn:hover { opacity: 0.75; }
.ch-gameswitch__btn.is-active { opacity: 1; }
.ch-gameswitch__btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.ch-gameswitch__ico { width: 22px; height: 22px; }
.ch-card__hrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.ch-card__hrow .ch-card__h { margin: 0; flex: 1 1 auto; }
.ch-card__addbtn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-lg);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--clan-accent, var(--accent)) 70%, #000);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--clan-accent, var(--accent)) 88%, #fff) 0%,
    var(--clan-accent, var(--accent)) 55%,
    color-mix(in srgb, var(--clan-accent, var(--accent)) 82%, #000) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 14px -8px rgba(0, 0, 0, 0.6);
  transition: filter 140ms, transform 140ms;
}
.ch-card__addbtn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.ch-card--info {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  align-self: start;
  max-height: 560px;
  container-type: inline-size;
  container-name: infocard;
}
.ch-card--about {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  align-self: start;
  max-height: 560px;
}
.ch-card--about .ch-prose {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-family: var(--font-read);
  font-size: 20px;
  line-height: 1.35;
  color: var(--text);
  white-space: pre-line;
}
.ch-card--equalized { overflow-y: auto; }
/* Cards with a dropdown scroll via an inner element, so keep them unclipped
   (equalized overflow would otherwise cut off the open dropdown menu). */
.ch-card--equalized:has(.ch-cdrop) { overflow: visible; }

.ch-info__scroll,
.ch-members__scroll,
.ch-staff__scroll,
.ch-card--about .ch-prose,
.ch-activity,
.ch-ach-list,
.ch-gained,
.ch-kcgrid,
.ch-card--kc,
.ch-reviews,
.ch-cue-scroll,
.ch-card--equalized {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ch-info__scroll::-webkit-scrollbar,
.ch-members__scroll::-webkit-scrollbar,
.ch-staff__scroll::-webkit-scrollbar,
.ch-card--about .ch-prose::-webkit-scrollbar,
.ch-activity::-webkit-scrollbar,
.ch-ach-list::-webkit-scrollbar,
.ch-gained::-webkit-scrollbar,
.ch-kcgrid::-webkit-scrollbar,
.ch-card--kc::-webkit-scrollbar,
.ch-reviews::-webkit-scrollbar,
.ch-cue-scroll::-webkit-scrollbar,
.ch-card--equalized::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.ch-grid--v2 .ch-slot { position: relative; }
.ch-scrollcue {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 84px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  background: linear-gradient(to bottom, rgba(19, 19, 21, 0) 0%, #131315 62%);
  opacity: 0;
  transition: opacity 180ms ease;
}
.ch-scrollcue.is-visible { opacity: 1; }
.ch-scrollcue.is-masked { background: none; height: 40px; }
.ch-cue-more {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 132px), rgba(0, 0, 0, 0.82) calc(100% - 96px), rgba(0, 0, 0, 0.5) calc(100% - 62px), rgba(0, 0, 0, 0.2) calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 132px), rgba(0, 0, 0, 0.82) calc(100% - 96px), rgba(0, 0, 0, 0.5) calc(100% - 62px), rgba(0, 0, 0, 0.2) calc(100% - 30px), transparent 100%);
}
.ch-scrollcue__arrow {
  width: 22px;
  height: 22px;
  color: var(--text);
}
.ch-card--staff { grid-column: span 3; }
.ch-card--members { grid-column: span 3; }
.ch-card--news { grid-column: span 3; }
.ch-card--gallery { grid-column: span 3; }
.ch-card--ach { grid-column: span 2; }
.ch-card--gained { grid-column: span 2; }
.ch-card--activity { grid-column: span 2; }
.ch-card--events { grid-column: span 6; }
.ch-card--reviews { grid-column: span 6; display: flex; flex-direction: column; }
.ch-reviews {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  min-height: 0;
}
.ch-card--reviews.ch-card--equalized .ch-reviews { max-height: none; flex: 1 1 auto; }
.ch-review {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--well);
  box-shadow: var(--well-shadow);
}
.ch-review__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ch-review__avatar { width: 36px; height: 36px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-strong); }
.ch-review__avatar--ph { display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--clan-accent, var(--accent)) 18%, var(--surface-3)); color: var(--text); font-family: var(--font-ui); font-size: 16px; }
.ch-review__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ch-review__author { font-family: var(--font-ui); font-size: 18px; color: var(--text); line-height: 1.2; }
.ch-review__date { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.ch-review__del { margin-left: auto; }
.ch-review__del button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.ch-review__del button:hover { border-color: #b5423a; color: #ff6b6b; }
.ch-review__del svg { width: 14px; height: 14px; }
.ch-review__body { margin: 0 0 12px; color: var(--text-dim); font-family: var(--font-read); font-weight: 400; font-size: 20px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.ch-review__foot { display: flex; }
.ch-review__thumb {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-ui); font-size: 14px; font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 140ms, border-color 140ms, background 140ms;
}
.ch-review__thumb:disabled { cursor: default; opacity: 0.55; }
.ch-review__thumb svg { width: 15px; height: 15px; }
.ch-review__thumb:hover { color: var(--clan-accent, var(--accent)); border-color: var(--clan-accent, var(--accent)); }
.ch-review__thumb.is-on {
  color: var(--clan-accent, var(--accent));
  border-color: var(--clan-accent, var(--accent));
  background: rgba(100, 120, 255, 0.1);
}
.ch-review-form { display: block; margin-top: 14px; }
.ch-review-form textarea,
.ch-reply-form textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  background: var(--well);
  box-shadow: var(--well-shadow);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: var(--font-field); font-weight: 400; font-size: 16px;
  resize: vertical;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ch-review-form textarea:focus,
.ch-reply-form textarea:focus { outline: none; border-color: var(--clan-accent, var(--accent)); box-shadow: var(--well-focus); }
.ch-review-form__btn {
  height: 38px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clan-accent, var(--accent));
  background: var(--clan-accent, var(--accent));
  color: #fff;
  font-family: var(--font-ui); font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.ch-review-form__btn:hover { filter: brightness(1.08); }
.ch-review-signin {
  display: inline-block;
  margin-top: 12px;
  color: var(--clan-accent, var(--accent));
  font-family: var(--font-ui); font-size: 14px;
  text-decoration: none;
}
.ch-review-signin:hover { text-decoration: underline; }
.ch-review__foot { display: flex; gap: 8px; align-items: center; }
.ch-review__reply-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-lg);
  color: var(--text-dim);
  font-family: var(--font-ui); font-size: 14px;
  cursor: pointer;
  transition: color 140ms, border-color 140ms;
}
.ch-review__reply-btn svg { width: 15px; height: 15px; }
.ch-review__reply-btn:hover { color: var(--clan-accent, var(--accent)); border-color: var(--clan-accent, var(--accent)); }
.ch-review__replies {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}
.ch-reply { padding: 8px 10px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.ch-reply__head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.ch-reply__avatar { width: 28px; height: 28px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-strong); }
.ch-reply__avatar--ph { display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--clan-accent, var(--accent)) 16%, var(--surface-3)); color: var(--text); font-family: var(--font-ui); font-size: 14px; }
.ch-reply__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ch-reply__author { font-family: var(--font-ui); font-size: 16px; color: var(--text); line-height: 1.2; }
.ch-reply__date { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.ch-reply__del { margin-left: auto; }
.ch-reply__del button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.ch-reply__del button:hover { border-color: #b5423a; color: #ff6b6b; }
.ch-reply__del svg { width: 12px; height: 12px; }
.ch-reply__body { margin: 0; color: var(--text-dim); font-family: var(--font-read); font-weight: 400; font-size: 18px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.ch-reply-form { display: block; margin-top: 8px; }
.ch-reply-form__btn {
  height: 34px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clan-accent, var(--accent));
  background: var(--clan-accent, var(--accent));
  color: #fff;
  font-family: var(--font-ui); font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.ch-reply-form__btn:hover { filter: brightness(1.08); }
.ch-review-input { position: relative; display: block; }
.ch-review-input textarea { display: block; width: 100%; min-width: 0; padding-right: 116px; padding-bottom: 46px; resize: none; }
.ch-review-input__actions { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; }
.ch-review-input .ch-review-form__btn,
.ch-review-input .ch-reply-form__btn { height: 30px; padding: 0 14px; }
.ch-review-input .ch-emoji-btn { width: 30px; height: 30px; }
.ch-emoji-btn {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--text-muted); cursor: pointer;
  transition: color 140ms, border-color 140ms;
}
.ch-emoji-btn svg { width: 18px; height: 18px; }
.ch-emoji-btn:hover { border-color: var(--clan-accent, var(--accent)); color: var(--clan-accent, var(--accent)); }
.ch-emoji-panel {
  position: absolute; z-index: 60;
  width: 268px;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  padding: 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
.ch-emoji-panel__item {
  border: none; background: transparent; cursor: pointer;
  aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; border-radius: var(--radius-sm);
  transition: background 120ms, transform 120ms;
}
.ch-emoji-panel__item:hover { background: color-mix(in srgb, var(--clan-accent, var(--accent)) 18%, transparent); transform: scale(1.12); }

.ch-card--staff,
.ch-card--members {
  display: flex;
  flex-direction: column;
  max-height: 620px;
  min-height: 0;
}
.ch-card--staff { container-type: inline-size; container-name: staffcard; }
.ch-card--staff .ch-staff__scroll { overflow-y: auto; min-height: 0; flex: 1; }
.ch-card--members .ch-members__scroll { overflow-y: auto; min-height: 0; flex: 1; }

.ch-grid { align-items: stretch; }
.ch-card--ach,
.ch-card--gained,
.ch-card--activity {
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .ch-card--info, .ch-card--about,
  .ch-card--staff, .ch-card--members,
  .ch-card--news, .ch-card--gallery,
  .ch-card--ach, .ch-card--gained,
  .ch-card--events, .ch-card--activity,
  .ch-card--namechanges, .ch-card--reviews { grid-column: span 2; }
}
@media (max-width: 560px) {
  .ch-card--info, .ch-card--about,
  .ch-card--staff, .ch-card--members,
  .ch-card--news, .ch-card--gallery,
  .ch-card--ach, .ch-card--gained,
  .ch-card--events, .ch-card--activity,
  .ch-card--namechanges, .ch-card--reviews { grid-column: span 1; }
  .ch-card--staff, .ch-card--members { max-height: 580px; }
  .ch-grid { align-items: start; }
}

.ch-info__scroll {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.ch-info__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
@container infocard (min-width: 440px) {
  .ch-info__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ch-info__stat {
  background: var(--well);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  box-shadow: var(--well-shadow);
}
.ch-info__ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
}
.ch-info__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ch-info__k {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-info__v {
  font-family: var(--font-ui);
  font-size: 20px;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-info__v--accent { color: var(--clan-amount, var(--clan-accent, var(--accent))); font-family: var(--font-ui); font-weight: 400; font-size: 20px; }
.ch-info__sub { font-size: 12px; color: var(--text-muted); }

.ch-info__block {
  padding-top: 2px;
}
.ch-info__subh {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.ch-info__subh::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  min-width: 24px;
  border-radius: 2px;
  background: rgba(170, 180, 210, 0.18);
}

.ch-staff-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 140ms;
  min-width: 0;
}
.ch-staff-icon { width: 18px; height: 16px; min-width: 18px; object-fit: contain; image-rendering: pixelated; }
.ch-staff-name {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.ch-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ch-tag-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 140ms, border-color 140ms;
}
.ch-tag-pill:hover { color: var(--clan-accent, var(--accent)); border-color: var(--clan-accent, var(--accent)); }
.ch-tag-pill__ico { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.ch-tag-pill--type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  border-color: var(--border-strong);
}

.ch-req-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.ch-req {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 4px 13px;
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ch-req__ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.ch-req b {
  color: var(--clan-amount, var(--clan-accent, var(--accent)));
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1;
}
.ch-req--note {
  gap: 0;
  color: var(--text-dim);
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: none;
}
.ch-req-text {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--clan-accent, var(--accent));
  flex-basis: 100%;
  width: 100%;
}

.ch-prose {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ch-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-muted);
  text-align: center;
}
.ch-shell svg { width: 28px; height: 28px; opacity: 0.5; }
.ch-shell p { margin: 0; font-size: 14px; }
.ch-shell--sm { padding: 22px 14px; }

.ch-members__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Shared compact dropdown (staff + members filters) */
.ch-cdrop { position: relative; }
.ch-cdrop__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms, border-color 140ms, background 140ms;
}
.ch-cdrop__btn:hover { color: var(--clan-accent, var(--accent)); border-color: var(--clan-accent, var(--accent)); }
.ch-cdrop.is-open .ch-cdrop__btn {
  color: var(--clan-accent, var(--accent));
  border-color: color-mix(in srgb, var(--clan-accent, var(--accent)) 45%, var(--border));
}
.ch-cdrop__cur { white-space: nowrap; }
.ch-cdrop__chev { width: 13px; height: 13px; flex-shrink: 0; transition: transform 160ms; }
.ch-cdrop.is-open .ch-cdrop__chev { transform: rotate(180deg); }
.ch-cdrop__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  max-height: 320px;
  overflow-y: auto;
  padding: 5px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.ch-cdrop__group {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 7px 8px 4px;
}
.ch-cdrop__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.ch-cdrop__opt:hover { color: var(--text); background: var(--surface-3); }
.ch-cdrop__opt.is-active {
  color: var(--clan-accent, var(--accent));
  background: color-mix(in srgb, var(--clan-accent, var(--accent)) 12%, transparent);
}
.ch-cdrop__ico { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }

.ch-members__scroll {
  max-height: 460px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
.ch-members__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ch-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--carved);
  box-shadow: var(--carved-shadow);
}
.ch-member-name {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  min-width: 0;
  transition: color 140ms;
}
.ch-member-name:hover { color: var(--clan-accent, var(--accent)); }
.ch-member-icon { width: 20px; height: 18px; min-width: 20px; object-fit: contain; }
.ch-member-mono {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 13px;
}
.ch-member-rsn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.ch-member-max { width: 18px; height: 18px; flex: none; object-fit: contain; }
.ch-member-stats {
  display: flex;
  gap: 14px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.1;
  color: var(--text-muted);
  flex-shrink: 0;
}
.ch-member-stats b { color: var(--text-dim); font-weight: 400; }
.ch-member-unit { margin-left: 2px; }
.ch-members__empty {
  padding: 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.ch-members__more {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms, background 140ms;
}
.ch-members__more:hover { color: var(--clan-accent, var(--accent)); background: var(--surface-3); }
.ch-members__more[hidden] { display: none; }

.ch-ach-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ch-ach {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 140ms;
}
.ch-ach:hover { background: var(--surface-2); }
.ch-ach__icon { width: 26px; height: 26px; min-width: 26px; object-fit: contain; }
.ch-ach__text { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.ch-ach__name {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-ach__by { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 0 0 auto; max-width: 50%; }
.ch-ach__rankico { width: 17px; height: 15px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.ch-ach__rsn {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-ach__date {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@container cardslot (min-width: 640px) {
  .ch-ach { padding: 9px 11px; gap: 12px; }
  .ch-ach__icon { width: 30px; height: 30px; min-width: 30px; }
  .ch-ach__text { gap: 10px; }
}

.ch-gained {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ch-gained__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 12px;
}
.ch-gained__played {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  background: var(--well);
  box-shadow: var(--well-shadow);
  border: 1px solid var(--border-strong);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 140ms, color 140ms;
}
a.ch-gained__played:hover { border-color: var(--clan-accent, var(--accent)); color: var(--clan-accent, var(--accent)); }
.ch-gained__played-ico { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.ch-gained__played b { color: var(--clan-amount, var(--clan-accent, var(--accent))); font-weight: 400; font-size: 16px; }
.ch-card--ach, .ch-card--gained, .ch-card--kc, .ch-card--raids, .ch-card--comps, .ch-card--rp { display: flex; flex-direction: column; }

/* RuneProfile clan feed */
.ch-card--rp { grid-column: span 2; }
.ch-rp__src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 140ms;
}
.ch-rp__src svg { width: 12px; height: 12px; }
.ch-rp__srclogo { width: 15px; height: 15px; object-fit: contain; flex-shrink: 0; }
.ch-rp__src:hover { color: var(--clan-accent, var(--accent)); }
.ch-rp__list { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow-y: auto; }
.ch-rp__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(150, 160, 200, 0.08);
}
.ch-rp__row:last-child { border-bottom: 0; }
.ch-rp__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  flex-shrink: 0;
}
.ch-rp__ico img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ch-rp__ico--level img, .ch-rp__ico--ca img, .ch-rp__ico--quest img { image-rendering: pixelated; width: 22px; height: 22px; }
.ch-rp__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.ch-rp__line {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.25;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ch-rp__rsn { color: var(--text); font-weight: 400; }
.ch-rp__verb { color: var(--text-muted); }
.ch-rp__text { color: var(--clan-amount, var(--clan-accent, var(--accent))); }
.ch-rp__sub {
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--clan-accent, var(--accent)) 16%, var(--surface-3));
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}
.ch-rp__time {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
@container cardslot (min-width: 640px) {
  .ch-rp__row { gap: 14px; padding: 10px 6px; }
  .ch-rp__ico { width: 42px; height: 38px; }
  .ch-rp__ico--level img, .ch-rp__ico--ca img, .ch-rp__ico--quest img { width: 28px; height: 28px; }
  .ch-rp__line { font-size: 18px; }
  .ch-rp__sub { font-size: 14px; }
  .ch-rp__time { font-size: 13px; }
}
.ch-card--ach .ch-ach-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
@container cardslot (min-width: 860px) {
  .ch-feed--double .ch-rp__list,
  .ch-feed--double .ch-ach-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
  }
  .ch-feed--double .ch-rp__row,
  .ch-feed--double .ch-ach {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--carved);
    box-shadow: var(--carved-shadow);
  }
  .ch-feed--double a.ch-ach:hover { background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%); }
}
@container cardslot (max-width: 300px) {
  .ch-ach__text { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ch-ach__by { max-width: 100%; }
}
.ch-card--kc { max-height: 620px; }
.ch-card--kc .ch-kcgrid { flex: 1; overflow-y: auto; min-height: 0; }
@media (max-width: 560px) {
  .ch-card--kc { max-height: 480px; }
}

/* Raids: premium per-raid cards, normal + hard mode */
.ch-card--raids { container-type: inline-size; container-name: raidscard; }
.ch-raidgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@container raidscard (min-width: 560px) and (max-width: 720px) {
  .ch-raidgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-raidgrid > .ch-raidcard:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-content: start; }
  .ch-raidgrid > .ch-raidcard:last-child:nth-child(odd) > :not(.ch-raidmode) { grid-column: 1 / -1; }
  .ch-raidgrid > .ch-raidcard:last-child:nth-child(odd):not(:has(.ch-raidmode + .ch-raidmode)) > .ch-raidmode { grid-column: 1 / -1; }
  .ch-raidgrid > .ch-raidcard:last-child:nth-child(odd) > .ch-raidmode + .ch-raidmode { margin-top: 0; }
}
@container raidscard (min-width: 720px) {
  .ch-raidgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ch-raidcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--clan-accent, var(--accent)) 15%, var(--border));
  background: linear-gradient(168deg, color-mix(in srgb, var(--clan-accent, var(--accent)) 6%, var(--surface-2)), var(--surface));
  overflow: hidden;
}
.ch-raidcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--clan-accent, var(--accent)) 50%, transparent), transparent);
  opacity: 0.7;
}
.ch-raidcard__glow { display: none; }
.ch-raidcard__bg {
  position: absolute;
  top: -16px;
  right: -12px;
  width: 132px;
  height: 132px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  opacity: 0.18;
  image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
  mask-image: linear-gradient(180deg, #000, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.ch-raidcard__head { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; margin-bottom: 4px; }
.ch-raidcard__icon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7)); }
.ch-raidcard__name { font-family: var(--font-ui); font-size: 22px; line-height: 1.1; color: var(--text); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.6); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-raidcard__totalrow { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; line-height: 1.1; }
.ch-raidcard__total {
  font-family: var(--font-game);
  font-size: 34px;
  line-height: 1;
  color: var(--clan-amount, var(--clan-accent, var(--accent)));
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px color-mix(in srgb, var(--clan-accent, var(--accent)) 55%, transparent), 0 1px 0 rgba(0, 0, 0, 0.45);
}
.ch-raidcard__totallbl { font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.ch-raidmode { position: relative; z-index: 1; margin-top: 6px; }
.ch-raidcard__totalrow + .ch-raidmode,
.ch-raidcard__head + .ch-raidmode { margin-top: 0; }
.ch-raidmode__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 2px; margin-bottom: 3px; line-height: 1.1; border-bottom: 1px solid color-mix(in srgb, var(--clan-accent, var(--accent)) 14%, var(--border)); }
.ch-raidmode__label { font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.ch-raidmode__short { display: none; }
.ch-raidmode__total { font-family: var(--font-game); font-size: 20px; color: var(--clan-amount, var(--clan-accent, var(--accent))); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.ch-raidmode__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ch-raidmode__pl { display: flex; align-items: center; gap: 7px; line-height: 0.95; }
.ch-raidmode__pos { font-family: var(--font-ui); font-size: 16px; color: var(--text-muted); width: 15px; flex-shrink: 0; }
.ch-raidmode__pl:first-child .ch-raidmode__pos { color: var(--clan-amount, var(--clan-accent, var(--accent))); }
.ch-raidmode__rankico { width: 15px; height: 13px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.ch-raidmode__rsn { font-family: var(--font-ui); font-size: 16px; color: var(--text-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-raidmode__pl:first-child .ch-raidmode__rsn { color: var(--text); }
.ch-raidmode__kc { font-family: var(--font-game); font-size: 21px; color: var(--clan-amount, var(--clan-accent, var(--accent))); flex-shrink: 0; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.ch-raidmode__empty { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); }

/* Boss kills: icon + kc tiles in a grid */
.ch-kc__modes {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-lg);
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.ch-kcmode {
  padding: 4px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.ch-kcmode:hover { color: var(--clan-accent, var(--accent)); }
.ch-kcmode.is-active {
  color: var(--clan-accent, var(--accent));
  background: color-mix(in srgb, var(--clan-accent, var(--accent)) 16%, var(--surface));
}
.ch-comps__modes { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-lg); background: var(--surface-3); border: 1px solid var(--border); }
.ch-compmode {
  padding: 4px 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.ch-compmode:hover { color: var(--clan-accent, var(--accent)); }
.ch-compmode.is-active { color: var(--clan-accent, var(--accent)); background: color-mix(in srgb, var(--clan-accent, var(--accent)) 16%, var(--surface)); }

.ch-comps__panel { display: flex; flex-direction: column; }
.ch-comps__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 2px;
}
.ch-comps__row.is-single { grid-template-columns: minmax(0, 1fr); }
.ch-comps__row.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- Compact card layouts (narrow columns) ---- */
@container cardslot (max-width: 720px) {
  .ch-comps__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.ch-card--gained, .ch-card--comps) .ch-gcol:nth-child(n+8) { display: none; }
}
@container cardslot (max-width: 640px) {
  :is(.ch-card--gained, .ch-card--comps) .ch-gchart__cols { overflow: visible; }
  :is(.ch-card--gained, .ch-card--comps) .ch-gcol__nrow { position: relative; flex-direction: column; justify-content: flex-start; gap: 0; height: 84px; }
  :is(.ch-card--gained, .ch-card--comps) .ch-gcol__ico,
  :is(.ch-card--gained, .ch-card--comps) .ch-gcol__pos { height: 16px; }
  :is(.ch-card--gained, .ch-card--comps) .ch-gcol__name {
    position: absolute;
    top: 22px;
    right: 50%;
    max-width: 104px;
    font-size: 15px;
    text-align: right;
    transform: rotate(-45deg);
    transform-origin: right top;
  }
}
@container cardslot (max-width: 330px) {
  :is(.ch-card--gained, .ch-card--comps) .ch-gcol:nth-child(n+6) { display: none; }
}
@container cardslot (max-width: 315px) {
  .ch-raidcard { grid-template-columns: minmax(0, 1fr); }
}
@container cardslot (max-width: 480px) {
  .ch-comps__row,
  .ch-comps__row.is-pair { grid-template-columns: minmax(0, 1fr); }
  .ch-card__hrow { flex-wrap: wrap; row-gap: 8px; }
  .ch-card--reviews .ch-reviews { max-height: 360px; gap: 6px; }
  .ch-review { padding: 9px 10px; }
  .ch-review__head { gap: 8px; margin-bottom: 5px; }
  .ch-review__avatar { width: 28px; height: 28px; }
  .ch-review__avatar--ph { font-size: 14px; }
  .ch-review__author { font-size: 14px; }
  .ch-review__date { font-size: 12px; }
  .ch-review__del button { width: 22px; height: 22px; }
  .ch-review__del svg { width: 12px; height: 12px; }
  .ch-review__body { font-size: 18px; line-height: 1.35; margin-bottom: 7px; }
  .ch-review__foot { gap: 6px; }
  .ch-review__thumb, .ch-review__reply-btn { padding: 3px 8px; gap: 5px; font-size: 13px; }
  .ch-review__thumb svg, .ch-review__reply-btn svg { width: 13px; height: 13px; }
  .ch-review-form { margin-top: 10px; }
  .ch-review__replies { margin-top: 7px; gap: 5px; padding-left: 8px; }
  .ch-reply { padding: 6px 8px; }
  .ch-reply__head { gap: 7px; margin-bottom: 3px; }
  .ch-reply__avatar { width: 22px; height: 22px; }
  .ch-reply__avatar--ph { font-size: 13px; }
  .ch-reply__author { font-size: 16px; }
  .ch-reply__date { font-size: 12px; }
  .ch-reply__body { font-size: 16px; line-height: 1.35; }
  .ch-review-input textarea { padding: 8px 10px; padding-right: 92px; padding-bottom: 8px; min-height: 56px; font-size: 15px; }
  .ch-review-input__actions { right: 8px; bottom: 8px; gap: 5px; }
  .ch-review-input .ch-review-form__btn,
  .ch-review-input .ch-reply-form__btn { height: 26px; padding: 0 11px; font-size: 14px; }
  .ch-review-input .ch-emoji-btn { width: 26px; height: 26px; }
  .ch-review-input .ch-emoji-btn svg { width: 15px; height: 15px; }

  :is(.ch-card--gained, .ch-card--comps) .ch-gcol__val { font-size: 18px; }
  :is(.ch-card--gained, .ch-card--comps) .ch-gchart__axis { font-size: 15px; }
  :is(.ch-card--gained, .ch-card--comps) .ch-gcol__unit { display: none; }

  .ch-raidgrid { gap: 6px; }
  .ch-raidcard { padding: 8px; }
  .ch-raidcard__bg { width: 84px; height: 84px; top: -10px; right: -8px; }
  .ch-raidcard { padding: 10px; }
  .ch-raidcard__head { gap: 7px; margin-bottom: 0; padding-right: 64px; }
  .ch-raidcard__icon { width: 20px; height: 20px; }
  .ch-raidcard__name { font-size: 19px; }
  .ch-raidcard__totalrow { grid-column: 1 / -1; margin: 2px 0 6px; gap: 6px; }
  .ch-raidcard__total { font-size: 19px; text-shadow: none; }
  .ch-raidcard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; align-content: start; }
  .ch-raidcard__head { grid-column: 1 / -1; }
  .ch-raidcard:not(:has(.ch-raidmode + .ch-raidmode)) .ch-raidmode { grid-column: 1 / -1; }
  .ch-raidmode { margin-top: 4px; min-width: 0; }
  .ch-raidcard__totalrow + .ch-raidmode,
  .ch-raidcard__totalrow + .ch-raidmode + .ch-raidmode { margin-top: 0; }
  .ch-raidmode__head { align-items: baseline; gap: 4px; padding-bottom: 3px; margin-bottom: 5px; }
  .ch-raidmode__label, .ch-raidmode__total { font-size: 16px; line-height: 1; white-space: nowrap; }
  .ch-raidmode__label { letter-spacing: 0.06em; }
  .ch-raidmode__full { display: none; }
  .ch-raidmode__short { display: inline; }
  .ch-raidmode__list { gap: 4px; }
  .ch-raidmode__pl { gap: 3px; line-height: 0.95; }
  .ch-raidmode__pos { font-size: 18px; width: 10px; }
  .ch-raidmode__rankico { width: 12px; height: 11px; }
  .ch-raidmode__rsn { font-size: 18px; }
  .ch-raidmode__kc { font-size: 20px; }

  .ch-comps__row:not(.is-single) .ch-compcard__pl:nth-child(n+4) { display: none; }
}
.ch-compcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--clan-accent, var(--accent)) 16%, var(--border));
  background: linear-gradient(168deg, color-mix(in srgb, var(--clan-accent, var(--accent)) 6%, var(--surface-2)), var(--surface));
  text-decoration: none;
  overflow: hidden;
}
.ch-compcard__bg {
  position: absolute;
  top: -18px;
  right: -14px;
  width: 130px;
  height: 130px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  opacity: 0.16;
  image-rendering: pixelated;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
  mask-image: linear-gradient(180deg, #000, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.ch-compcard > *:not(.ch-compcard__bg) { position: relative; z-index: 1; }
.ch-compcard__head { display: flex; align-items: center; gap: 11px; }
.ch-compcard__iconwrap {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
}
.ch-compcard__icon { width: 34px; height: 34px; object-fit: contain; }
.ch-compcard__titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ch-compcard__title {
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
}
.ch-compcard__meta { display: flex; flex-wrap: wrap; gap: 3px 8px; font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ch-compcard__metric { color: var(--clan-amount, var(--clan-accent, var(--accent))); }
.ch-compcard__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 10px 34px;
  margin: 14px 0 12px;
}
.ch-compcard__stat { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.ch-compcard__statv { font-family: var(--font-game); font-size: 32px; line-height: 0.9; color: var(--text); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-compcard__statk { font-family: var(--font-ui); font-size: 14px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ch-compcard__board { list-style: none; margin: 0; padding: 12px 0 4px; border-top: 1px solid color-mix(in srgb, var(--clan-accent, var(--accent)) 14%, var(--border)); display: flex; flex-direction: column; gap: 5px; }
.ch-compcard__pl { position: relative; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: var(--radius-sm); font-size: 14px; overflow: hidden; }
.ch-compcard__pl::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--bar, 0%);
  background: color-mix(in srgb, var(--clan-accent, var(--accent)) 13%, transparent);
  border-radius: var(--radius-sm);
  transition: width 400ms ease;
}
.ch-compcard__pl > * { position: relative; }
.ch-compcard__pos { font-family: var(--font-ui); font-size: 14px; color: var(--text-muted); width: 14px; flex-shrink: 0; }
.ch-compcard__pl:first-child .ch-compcard__pos { color: var(--clan-amount, var(--clan-accent, var(--accent))); }
.ch-compcard__rsn { font-family: var(--font-ui); color: var(--text-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-compcard__pl:first-child .ch-compcard__rsn { color: var(--text); }
.ch-compcard__gain { font-family: var(--font-ui); font-size: 13px; color: var(--clan-amount, var(--clan-accent, var(--accent))); flex-shrink: 0; }
.ch-compcard__gainu { margin-left: 3px; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.ch-compcard__note { margin: 0; padding: 14px 0 4px; font-size: 14px; color: var(--text-muted); }
.ch-compcard__foot { margin-top: auto; padding-top: 13px; display: flex; align-items: center; gap: 7px; color: var(--text-muted); }
.ch-compcard__wom { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.ch-compcard__womtxt { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.ch-compcard__arrow { width: 13px; height: 13px; margin-left: auto; opacity: 0.55; transition: transform 160ms, opacity 160ms; }
.ch-compcard:hover .ch-compcard__arrow { transform: translateX(2px); opacity: 1; }
.ch-comps__past { display: flex; flex-direction: column; }
.ch-comp-past { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-top: 1px solid var(--border); text-decoration: none; color: var(--text-dim); font-family: var(--font-ui); font-size: 16px; }
.ch-comps__past .ch-comp-past:first-child { border-top: 0; }
.ch-comp-past:hover { color: var(--clan-accent, var(--accent)); }
.ch-comp-past__icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.ch-comp-past__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-comp-past__metric { font-family: var(--font-ui); font-size: 14px; text-transform: uppercase; color: var(--text-muted); }
.ch-comp-past__date { font-family: var(--font-ui); font-size: 14px; color: var(--text-muted); flex-shrink: 0; }
@container cardslot (max-width: 420px) {
  .ch-comp-past {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 2px;
  }
  .ch-comp-past__icon { grid-row: 1 / span 2; }
  .ch-comp-past__title { grid-column: 2 / -1; white-space: normal; }
  .ch-comp-past__metric { grid-column: 2; grid-row: 2; }
  .ch-comp-past__date { grid-column: 3; grid-row: 2; }
}
@container cardslot (max-width: 480px) {
  .ch-compcard__stats { display: flex; flex-wrap: wrap; gap: 8px 26px; }
  .ch-compcard__statv { overflow: visible; text-overflow: clip; }
}

.ch-kcgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
}
.ch-kctile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 6px;
  border-radius: var(--radius-md);
  background: var(--well);
  box-shadow: var(--well-shadow);
  border: 1px solid var(--border);
  transition: border-color 140ms, background 140ms;
  min-width: 0;
  text-align: center;
}
.ch-kctile__top { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; max-width: 100%; }
.ch-kctile__icon { flex-shrink: 0; width: 22px; height: 22px; object-fit: contain; }
.ch-kctile__who { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; max-width: 100%; }
.ch-kctile__who[hidden] { display: none; }
.ch-kctile__rankico { width: 12px; height: 11px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.ch-kctile__rsn {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-card--kc[data-kc-mode="clan"] .ch-kctile__who { display: none; }
.ch-kctile__spin {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--clan-accent, var(--accent));
  border-radius: 50%;
  animation: ch-kc-spin 0.7s linear infinite;
}
.ch-kctile.is-loading { opacity: 0.7; }
.ch-kctile.is-loading .ch-kctile__kc { display: none; }
.ch-kctile.is-loading .ch-kctile__spin { display: block; }
@keyframes ch-kc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ch-kctile__spin { animation: none; }
}

/* Gallery marquee */
.ch-gallery__controls { display: inline-flex; gap: 4px; }
.ch-gallery { overflow: hidden; position: relative; cursor: ew-resize; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ch-gallery__track { display: flex; width: max-content; will-change: transform; }
.ch-gallery__item {
  flex: 0 0 auto;
  width: 200px;
  height: 132px;
  margin-right: 10px;
  padding: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  background-color: #16161a;
  cursor: pointer;
  transition: border-color 140ms, box-shadow 140ms, width 200ms, height 200ms;
}
.ch-gallery.is-static {
  cursor: default;
  -webkit-mask-image: none;
  mask-image: none;
}
.ch-gallery.is-static .ch-gallery__track {
  width: 100%;
  justify-content: center;
  gap: 10px;
  transform: none !important;
}
.ch-gallery.is-static .ch-gallery__item { margin-right: 0; }
.ch-gallery.is-static .ch-gallery__item[aria-hidden="true"] { display: none; }
.ch-gallery[data-gallery-size="sm"] .ch-gallery__item { width: 132px; height: 88px; }
.ch-gallery[data-gallery-size="lg"] .ch-gallery__item { width: 300px; height: 196px; }
.ch-card--gallery { display: flex; flex-direction: column; }
.ch-card--gallery > .ch-gallery { flex: 1 1 auto; }
.ch-gallery.is-static { display: flex; }
.ch-gallery.is-static .ch-gallery__track { flex: 1 1 auto; align-items: stretch; }
.ch-gallery.is-static .ch-gallery__item { flex: 1 1 0; width: auto; height: auto; min-width: 0; min-height: 132px; }
.ch-gallery.is-static[data-gallery-size="sm"] .ch-gallery__item { min-height: 88px; }
.ch-gallery.is-static[data-gallery-size="lg"] .ch-gallery__item { min-height: 196px; }
@media (prefers-reduced-motion: reduce) {
  .ch-gallery__track { flex-wrap: wrap; width: auto; transform: none !important; }
  .ch-gallery__item { margin-bottom: 10px; }
}
.ch-gallery__item { position: relative; overflow: hidden; }
.ch-gallery__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 10px 7px;
  background: linear-gradient(0deg, rgba(8, 9, 12, 0.88) 0%, rgba(8, 9, 12, 0.6) 55%, transparent 100%);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.15;
  color: var(--text);
  text-align: left;
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.ch-gallery[data-gallery-size="sm"] .ch-gallery__cap { font-size: 12px; padding: 14px 7px 5px; }

/* Gallery card — inline editor */
.ch-galedit__sizes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ch-galedit__sizelbl { font-family: var(--font-data); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-right: 2px; }
.ch-galedit__size {
  padding: 4px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.ch-galedit__size:hover { border-color: var(--border-strong); color: var(--text); }
.ch-galedit__size.is-on { border-color: var(--clan-accent, var(--accent)); color: var(--text); background: color-mix(in srgb, var(--clan-accent, var(--accent)) 16%, var(--surface-2)); }

.ch-galedit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 0; }
.ch-galedit__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  background-color: #16161a;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.7);
}
.ch-galedit__rm {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  cursor: pointer;
  transition: transform 120ms;
}
.ch-galedit__rm:hover { transform: scale(1.1); }
.ch-galedit__rm svg { width: 12px; height: 12px; display: block; }
.ch-galedit__add {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: #16161a;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.ch-galedit__add:hover { border-color: var(--clan-accent, var(--accent)); color: var(--text); background: #1c1c22; }
.ch-galedit__add svg { width: 20px; height: 20px; display: block; }
.ch-galedit__add.is-busy { opacity: 0.5; pointer-events: none; }
.ch-galedit__item { position: relative; min-width: 0; }
.ch-galedit__item.is-extra .ch-galedit__thumb { opacity: 0.45; }
.ch-galedit__item .ch-galedit__thumb { cursor: grab; }
.ch-galedit__item.sortable-ghost { opacity: 0.35; }
.ch-galedit__tip { margin: 0 0 10px; font-family: var(--font-ui); font-size: 13px; color: var(--text-muted); }
.ch-galedit__cap {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  width: auto;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: rgba(10, 11, 16, 0.78);
  box-shadow: var(--well-shadow);
  color: var(--text);
  font-family: var(--font-field);
  font-size: 13px;
}
.ch-galedit__cap::placeholder { color: var(--text-muted); }
.ch-galedit__cap:focus { outline: none; box-shadow: var(--well-shadow), 0 0 0 3px rgba(100, 120, 255, 0.22); }
.ch-galedit__hint { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

/* Gallery lightbox */
body.ch-lb-open { overflow: hidden; }
.ch-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.ch-lightbox[hidden] { display: none; }
.ch-lightbox__backdrop { position: absolute; inset: 0; background: rgba(6, 6, 8, 0.86); backdrop-filter: blur(4px); }
.ch-lightbox__stage { position: relative; z-index: 1; margin: 0; max-width: min(92vw, 1100px); max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ch-lightbox__img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius-md); border: 1px solid var(--border-strong); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8); }
.ch-lightbox__count { font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.08em; color: var(--text-dim); }
.ch-lightbox__cap { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ch-lightbox__caption { font-family: var(--font-ui); font-size: 20px; color: var(--text); text-shadow: 0 1px 0 #000; }
.ch-lightbox__close, .ch-lightbox__nav {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent); color: var(--text);
  cursor: pointer; transition: background 140ms, border-color 140ms;
}
.ch-lightbox__close:hover, .ch-lightbox__nav:hover { background: var(--surface-3); border-color: var(--clan-accent, var(--accent)); }
.ch-lightbox__close { top: 20px; right: 20px; width: 40px; height: 40px; }
.ch-lightbox__close svg { width: 20px; height: 20px; }
.ch-lightbox__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.ch-lightbox__nav svg { width: 22px; height: 22px; }
.ch-lightbox__nav--prev { left: 20px; }
.ch-lightbox__nav--next { right: 20px; }
@media (max-width: 640px) {
  .ch-lightbox__nav { width: 38px; height: 38px; }
  .ch-lightbox__nav--prev { left: 8px; }
  .ch-lightbox__nav--next { right: 8px; }
  .ch-lightbox__close { top: 10px; right: 10px; }
}
.ch-kctile__kc {
  font-family: var(--font-game);
  font-size: 18px;
  line-height: 1;
  color: var(--clan-amount, var(--clan-accent, var(--accent)));
  font-variant-numeric: tabular-nums;
}
.ch-gchart { display: flex; gap: 10px; padding-top: 4px; }
.ch-gchart__axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 180px;
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.ch-gchart__cols {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ch-gchart__cols::-webkit-scrollbar { display: none; }
.ch-gchart__cols::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 180px;
  background:
    linear-gradient(var(--border), var(--border)) left top / 100% 1px no-repeat,
    linear-gradient(var(--border), var(--border)) left 50% / 100% 1px no-repeat,
    linear-gradient(var(--border), var(--border)) left bottom / 100% 1px no-repeat;
  pointer-events: none;
}
.ch-gcol {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ch-gcol__track { position: relative; width: 100%; height: 180px; display: flex; align-items: flex-end; justify-content: center; }
.ch-gcol__bar {
  width: 78%;
  max-width: 46px;
  height: var(--h, 0%);
  min-height: 3px;
  border-radius: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--clan-accent, var(--accent)) 22%, var(--surface)) 0%,
    color-mix(in srgb, var(--clan-accent, var(--accent)) 70%, transparent) 55%,
    var(--clan-accent, var(--accent)) 100%);
  box-shadow: 0 0 16px -5px color-mix(in srgb, var(--clan-accent, var(--accent)) 70%, #000);
  transition: height 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ch-gcol__foot { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 9px; width: 100%; min-width: 0; }
.ch-gcol__nrow { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-width: 0; }
.ch-gcol__ico { width: 18px; height: 16px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.ch-gcol__pos { font-family: var(--font-ui); font-size: 13px; color: var(--text-muted); }
.ch-gcol__val { font-family: var(--font-game); font-size: 18px; color: var(--clan-amount, var(--clan-accent, var(--accent))); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-gcol__name {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text);
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ch-staff-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-content: start;
}

.ch-staff__scroll {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
.ch-staff-group__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.ch-staff-group__ico {
  width: 16px;
  height: 14px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

/* Staff item + owner-toggled metrics (inline with the name) */
.ch-staff-metrics {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px 12px;
  margin-left: auto;
  flex-shrink: 0;
}
.ch-staff-item.has-metrics .ch-staff-name { flex: 0 1 auto; }
.ch-staff-metric {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.1;
  color: var(--text-muted);
  white-space: nowrap;
}
.ch-staff-metric__ico { width: 14px; height: 14px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.ch-staff-metric__v { color: var(--text-dim); white-space: nowrap; }

@container staffcard (min-width: 560px) {
  .ch-staff-icon { width: 20px; height: 18px; min-width: 20px; }
  .ch-staff-name { font-size: 16px; }
  .ch-staff-item.has-metrics .ch-staff-name { flex: 0 0 168px; }
  .ch-staff-item.has-metrics .ch-staff-metrics {
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-left: 8px;
    gap: 6px 20px;
  }
  .ch-staff-metric { font-size: 15px; justify-content: flex-end; min-width: 5.6em; }
  .ch-staff-metric__ico { width: 14px; height: 14px; }
}

@container staffcard (max-width: 559px) {
  .ch-staff-item.has-metrics { gap: 6px; padding: 6px 7px; }
  .ch-staff-item.has-metrics .ch-staff-icon { width: 16px; min-width: 16px; height: 14px; }
  .ch-staff-item.has-metrics .ch-staff-name { flex: 1 1 auto; min-width: 44px; font-size: 16px; }
  .ch-staff-metrics { gap: 5px; }
  .ch-staff-metric { gap: 2px; font-size: 14px; }
  .ch-staff-metric__ico { width: 12px; height: 12px; }
}
@container staffcard (max-width: 275px) {
  .ch-staff-item.has-metrics { gap: 5px; padding: 6px 6px; }
  .ch-staff-metrics { gap: 4px; }
  .ch-staff-metric { font-size: 13px; }
  .ch-staff-metric__ico { width: 11px; height: 11px; }
}
@container staffcard (max-width: 250px) {
  .ch-staff-item.has-metrics { flex-wrap: wrap; row-gap: 2px; }
  .ch-staff-item.has-metrics .ch-staff-name { flex: 1 1 calc(100% - 30px); }
  .ch-staff-item.has-metrics .ch-staff-metrics { flex: 1 0 100%; justify-content: space-between; padding-left: 25px; margin-left: 0; }
  .ch-staff-metric { min-width: 0; }
}

/* Member stat icons */
.ch-member-stat__ico {
  width: 14px;
  height: 14px;
  object-fit: contain;
  image-rendering: pixelated;
  vertical-align: -2px;
  margin-right: 4px;
}
.ch-member-stats span { display: inline-flex; align-items: center; }

/* Account type makeup bar (labels live inside each segment) */
.ch-makeup {
  display: flex;
  gap: 2px;
}
.ch-makeup__seg {
  position: relative;
  flex-basis: 0;
  min-width: 2.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  white-space: nowrap;
  color: rgba(6, 8, 12, 0.86);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.03em;
}
.ch-makeup__seg:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.ch-makeup__seg:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.ch-makeup__seg:only-child { border-radius: var(--radius-md); }
.ch-makeup__ico {
  width: 13px;
  height: 15px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.ch-makeup__lbl { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: clip; }
.ch-makeup__seg.is-compact { min-width: max-content; padding: 0 6px; gap: 3px; justify-content: center; }
.ch-makeup[data-fit]:not(.is-ready) .ch-makeup__lbl { visibility: hidden; }
.ch-makeup__n { font-weight: 400; flex-shrink: 0; }
/* Premium hover tooltip (no chrome border, translucent, matches pill corners) */
.ch-makeup__tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translate(-50%, -4px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease, transform 130ms ease;
}
.ch-makeup__tip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--surface) 93%, transparent);
}
.ch-makeup__seg:hover .ch-makeup__tip { opacity: 1; transform: translate(-50%, 0); }
.ch-makeup__seg:last-child .ch-makeup__tip { left: auto; right: 0; transform: translate(0, -4px); }
.ch-makeup__seg:last-child:hover .ch-makeup__tip { transform: translate(0, 0); }
.ch-makeup__seg:last-child .ch-makeup__tip::after { left: auto; right: 14px; transform: none; }
.ch-makeup__seg:first-child:not(:last-child) .ch-makeup__tip { left: 0; transform: translate(0, -4px); }
.ch-makeup__seg:first-child:not(:last-child):hover .ch-makeup__tip { transform: translate(0, 0); }
.ch-makeup__seg:first-child:not(:last-child) .ch-makeup__tip::after { left: 14px; transform: none; }
.ch-makeup__tipico { width: 12px; height: 14px; object-fit: contain; image-rendering: pixelated; }
.ch-makeup__tiplbl { font-family: var(--font-ui); font-size: 14px; }
.ch-makeup__tipn { font-family: var(--font-ui); font-size: 13px; color: var(--text-muted); }
.ch-cdrop__ico--badge { width: 11px; height: 13px; image-rendering: pixelated; }
.ch-makeup--main { background: #6478ff; }
.ch-makeup__seg.ch-makeup--main { color: rgba(255, 255, 255, 0.94); }
.ch-makeup--ironman { background: #9aa4b2; }
.ch-makeup--hardcore { background: #d1495b; }
.ch-makeup--ultimate { background: #4aa3df; }
.ch-makeup--gim { background: #5fbf7f; }
.ch-makeup--d7 { background: #3fae6a; }
.ch-makeup--d30 { background: #8fbf4a; }
.ch-makeup--d60 { background: #c9973a; }
.ch-makeup--old { background: #5b6170; }
.ch-makeup--activity .ch-makeup__seg:not(.is-compact) .ch-makeup__n { display: none; }
.ch-makeup--activity .ch-makeup--d7, .ch-makeup--activity .ch-makeup--d30 { min-width: max-content; }
.ch-makeup--activity .ch-makeup--good { --act: #3f9e5a; }
.ch-makeup--activity .ch-makeup--mid { --act: #d0832a; }
.ch-makeup--activity .ch-makeup--low { --act: #c0392b; }
.ch-makeup--activity .ch-makeup--d7 { background: var(--act); color: #fff; }
.ch-makeup--activity .ch-makeup--d30 { background: color-mix(in srgb, var(--act) 62%, #14151b); color: #fff; }
.ch-makeup--activity .ch-makeup--rest.ch-makeup--low { background: color-mix(in srgb, var(--act) 40%, #14151b); color: #fff; }
.ch-makeup--activity .ch-makeup--rest { background: rgba(255, 255, 255, 0.07); color: var(--text-dim); justify-content: center; }
.ch-info__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 22px; align-items: end; }
.ch-info__pair > .ch-info__block { min-width: 0; }
.ch-info__block[hidden] { display: none; }
.ch-info__pair > .ch-info__block:only-child, .ch-info__pair > .ch-info__block:has(+ [hidden]), .ch-info__pair > [hidden] + .ch-info__block { grid-column: 1 / -1; }
@container cardslot (min-width: 640px) {
  .ch-info__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Members two-across in full-width cards */
.ch-card--members { container-type: inline-size; container-name: memberscard; }
@container memberscard (max-width: 460px) or ((min-width: 640px) and (max-width: 1000px)) {
  .ch-member-row { gap: 8px; padding: 7px 10px; }
  .ch-member-name { gap: 7px; }
  .ch-member-stats { gap: 8px; font-size: 14px; }
  .ch-member-stat__ico { width: 12px; height: 12px; margin-right: 2px; }
  .ch-member-max { width: 15px; height: 15px; }
  .ch-member-stats .ch-member-unit { display: none; }
}
@container memberscard ((min-width: 461px) and (max-width: 639px)) or (min-width: 1001px) {
  .ch-member-stats > span { justify-content: flex-end; min-width: 5.6em; }
  .ch-member-stats > span[title="Total XP"] { min-width: 6.2em; }
}
@container memberscard (max-width: 460px) {
  .ch-member-row { gap: 6px; padding: 6px 8px; }
  .ch-member-name { gap: 6px; }
  .ch-member-stats { gap: 6px; }
}
@container memberscard (max-width: 250px) {
  .ch-member-row { flex-wrap: wrap; row-gap: 2px; }
  .ch-member-name { flex: 1 1 100%; }
  .ch-member-stats { flex: 1 0 100%; justify-content: space-between; padding-left: 27px; }
  .ch-member-stats > span { min-width: 0; }
}
@container memberscard (min-width: 640px) {
  .ch-members__list { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Editor per-card options */
.ch-ed__opts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.ch-ed__opts-label {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 2px;
}
.ch-ed__opt {
  padding: 4px 10px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.ch-ed__opt:hover { color: var(--text-dim); border-color: var(--border-strong); }
.ch-ed__opt.is-on {
  color: var(--clan-accent, var(--accent));
  border-color: color-mix(in srgb, var(--clan-accent, var(--accent)) 45%, var(--border));
  background: color-mix(in srgb, var(--clan-accent, var(--accent)) 12%, var(--surface));
}
.ch-ed__opts--kc { flex-direction: column; align-items: stretch; }
.ch-ed__bosses {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 168px;
  overflow-y: auto;
  scrollbar-width: none;
}
.ch-ed__bosses::-webkit-scrollbar { display: none; }
.ch-ed__boss {
  padding: 3px 8px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  opacity: 0.5;
  transition: color 120ms, border-color 120ms, background 120ms, opacity 120ms;
}
.ch-ed__boss:hover { border-color: var(--border-strong); }
.ch-ed__boss.is-on {
  opacity: 1;
  color: var(--text);
  border-color: color-mix(in srgb, var(--clan-accent, var(--accent)) 40%, var(--border));
  background: color-mix(in srgb, var(--clan-accent, var(--accent)) 10%, var(--surface));
}

.ch-msum {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 10px;
}
.ch-msum__cell {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  row-gap: 1px;
  min-width: 0;
  padding: 5px 4px;
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--well-shadow);
}
.ch-msum__ico { width: 14px; height: 14px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.ch-msum__body { display: contents; }
.ch-msum__v {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
}
.ch-msum__k {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}
.ch-msum.ch-msum--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container memberscard (max-width: 340px) {
  .ch-msum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ch-msum.ch-msum--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-msum:has(> .ch-msum__cell:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ch-msum:has(> .ch-msum__cell:nth-child(5):last-child) > .ch-msum__cell { grid-column: span 2; }
  .ch-msum:has(> .ch-msum__cell:nth-child(5):last-child) > .ch-msum__cell:nth-child(n+4) { grid-column: span 3; }
}

.ch-members__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ch-mdir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 140ms, color 140ms;
}
.ch-mdir:hover { border-color: var(--clan-accent, var(--accent)); color: var(--clan-accent, var(--accent)); }
.ch-mdir { justify-content: center; min-width: 36px; padding-left: 8px; padding-right: 8px; align-self: stretch; }
.ch-mdir svg { width: 18px; height: 18px; }
.ch-mdir__up, .ch-mdir__down { opacity: 0.35; transition: opacity 160ms, stroke 160ms; }
.ch-mdir.is-asc .ch-mdir__up, .ch-mdir.is-desc .ch-mdir__down { opacity: 1; stroke: var(--clan-accent, var(--accent)); }

.ch-inactive-buckets {
  display: inline-flex;
  gap: 4px;
}
.ch-ibucket {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.ch-ibucket:hover { color: var(--clan-accent, var(--accent)); border-color: var(--clan-accent, var(--accent)); }
.ch-ibucket.is-active {
  color: var(--clan-accent, var(--accent));
  border-color: color-mix(in srgb, var(--clan-accent, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--clan-accent, var(--accent)) 12%, var(--surface-2));
}
.ch-member-inact {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--warning);
  opacity: 0.85;
}
.ch-member-inact:empty { display: none; }

.ch-card--activity { display: flex; flex-direction: column; }
.ch-card--activity .ch-activity {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Calendar: month grid + upcoming rail (wide) / next-7-days agenda (compact) */
.ch-card--events { container-type: inline-size; container-name: calcard; }
.ch-calwrap { display: none; }
.ch-cal__agenda { display: flex; flex-direction: column; gap: 8px; }
@container calcard (min-width: 600px) {
  .ch-calwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 264px); gap: 16px; align-items: stretch; }
  .ch-card--events-solo .ch-calwrap { grid-template-columns: 1fr; }
  .ch-cal__agenda { display: none; }
}
.ch-cal__rail { display: flex; flex-direction: column; gap: 8px; min-width: 0; contain: size; overflow-y: auto; scrollbar-width: none; }
.ch-cal__rail::-webkit-scrollbar { display: none; }
.ch-cal__rail .ch-evcard { flex: 1 1 0; min-height: 76px; }
.ch-cal__rail .ch-evcard__body { height: 100%; }
.ch-cal__rail .ch-evcard__title { -webkit-line-clamp: 1; }
.ch-cal__railh {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1px;
}

/* Premium event card (cover image + accent gradient) */
.ch-evcard {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--carved);
  box-shadow: var(--carved-shadow);
  text-decoration: none;
  transition: background 140ms;
}
a.ch-evcard:hover { background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%); }
.ch-evcard.has-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ev-cover);
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  border-radius: inherit;
}
.ch-evcard__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 20%, transparent) 0%, color-mix(in srgb, var(--surface) 88%, transparent) 100%);
}
.ch-evcard:not(.has-cover) .ch-evcard__scrim { display: none; }
.ch-evcard__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; }
.ch-evcard__type {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--carved);
  border: 1px solid transparent;
  box-shadow: var(--carved-shadow);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clan-accent, var(--accent));
  text-shadow: var(--carved-text);
}
.ch-evcard__title {
  font-family: var(--font-ui);
  font-size: 15px;
  text-shadow: 1px 1px 0 #000;
  color: var(--text);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ch-evcard__when { font-family: var(--font-ui); font-size: 13px; color: var(--text-dim); margin-top: 1px; }
.ch-evcard__body--dated { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; }
.ch-evcard__date { min-width: 46px; }
.ch-evcard__text { display: flex; flex-direction: column; gap: 0; min-width: 0; line-height: 1.05; }
.ch-evcard__body--dated .ch-evcard__title { font-size: 16px; line-height: 1.1; text-shadow: 1px 1px 0 #000, 0 0 10px rgba(0, 0, 0, 0.9); }
.ch-evcard__body--dated .ch-evcard__when { margin: 0; font-size: 14px; line-height: 1.1; color: var(--clan-accent, var(--accent)); text-shadow: 1px 1px 0 #000; }
.ch-evcard__meta { font-family: var(--font-ui); font-size: 12px; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); text-shadow: 1px 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-cal__rail .ch-evcard.has-cover .ch-evcard__scrim { background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 92%, transparent) 0%, color-mix(in srgb, var(--surface) 70%, transparent) 55%, color-mix(in srgb, var(--surface) 30%, transparent) 100%); }

/* Compact agenda rows */
.ch-agenda__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--carved);
  border: 1px solid transparent;
  box-shadow: var(--carved-shadow);
  text-decoration: none;
  transition: background 140ms;
}
a.ch-agenda__row:hover { background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%); }
.ch-agenda__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  min-width: 42px;
  padding: 5px 5px;
  gap: 0;
  border-radius: var(--radius-sm);
  background: var(--carved);
  border: 0;
  box-shadow: var(--carved-shadow);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ch-agenda__date b { font-family: var(--font-ui); font-size: 24px; line-height: 0.95; color: var(--clan-amount, var(--clan-accent, var(--accent))); font-weight: 400; }
.ch-agenda__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ch-agenda__title { font-family: var(--font-ui); font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-agenda__meta { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.ch-agenda__empty { font-size: 13px; color: var(--text-muted); padding: 4px 2px; }

/* Flash toasts (fixed overlay, no layout shift) */
.cc-toasts {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.cc-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.7);
  color: var(--text);
  font-size: 14px;
  pointer-events: auto;
  animation: cc-toast-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cc-toast::before {
  content: "";
  align-self: stretch;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
  flex-shrink: 0;
}
.cc-toast--success::before, .cc-toast--ok::before { background: var(--ok); }
.cc-toast--warning::before { background: var(--warning); }
.cc-toast--danger::before, .cc-toast--error::before { background: var(--danger); }
.cc-toast__msg { flex: 1; min-width: 0; padding-top: 1px; line-height: 1.35; }
.cc-toast__x {
  flex-shrink: 0;
  display: inline-flex;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: color 120ms;
}
.cc-toast__x:hover { color: var(--text); }
.cc-toast__x svg { width: 15px; height: 15px; }
.cc-toast.is-leaving { animation: cc-toast-out 220ms ease forwards; }
@keyframes cc-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cc-toast-out { to { opacity: 0; transform: translateX(16px); } }
@media (prefers-reduced-motion: reduce) {
  .cc-toast, .cc-toast.is-leaving { animation: none; }
}

.ch-cal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ch-cal__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.ch-cal__title {
  order: 2;
  flex: 1;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(0, 0, 0, 0.4);
}
.ch-cal__bar [data-cal-prev] { order: 1; }
.ch-cal__bar [data-cal-next] { order: 3; }
.ch-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 140ms, border-color 140ms, background 140ms;
}
.ch-cal__nav:hover { color: var(--clan-accent, var(--accent)); border-color: var(--clan-accent, var(--accent)); background: var(--surface-3); }
.ch-cal__nav svg { width: 14px; height: 14px; }
.ch-cal__dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.ch-cal__dow span {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.ch-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.ch-cal__cell {
  min-width: 0;
  min-height: 66px;
  padding: 6px 6px;
  border-radius: var(--radius-sm);
  background: var(--carved);
  box-shadow: var(--carved-shadow);
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
}
.ch-cal__cell--empty {
  background: none;
  box-shadow: none;
}
.ch-cal__cell.is-today {
  background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%);
}
.ch-cal__num {
  font-family: var(--font-game);
  font-size: 14px;
  line-height: 1;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  text-shadow: var(--carved-text);
}
.ch-cal__cell.is-today .ch-cal__num { color: var(--clan-accent, var(--accent)); }
.ch-cal__events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin-top: auto;
}
.ch-cal__event {
  display: block;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--raised);
  box-shadow: var(--raised-shadow);
  text-shadow: var(--raised-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.ch-cal__event:hover { background: var(--raised-hover); }
.ch-cal__event.is-past { color: var(--text-muted); }
.ch-cal__event.is-cont { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -6px; }
.ch-cal__event.is-through { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -6px; }
@media (max-width: 640px) {
  .ch-cal__cell { min-height: 46px; padding: 4px; }
  .ch-cal__event { font-size: 13px; }
  .ch-cal__num { font-size: 13px; }
}

.ch-activity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ch-act {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
}
.ch-act__icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; }
.ch-act__rankico { width: 16px; height: 14px; object-fit: contain; image-rendering: pixelated; }
.ch-act__rsn { font-family: var(--font-ui); letter-spacing: 0.01em; font-size: 16px; line-height: 1.1; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.ch-act__rsn:hover { color: var(--clan-accent, var(--accent)); }
.ch-act__label {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.1;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.ch-act__label--joined { color: color-mix(in srgb, var(--ok) 70%, var(--text-muted)); }
.ch-act__label--left { color: color-mix(in srgb, #ff6b6b 55%, var(--text-muted)); }
.ch-act__time {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@container cardslot (min-width: 640px) {
  .ch-act { padding: 9px 13px; gap: 10px; }
  .ch-act__rankico { width: 18px; height: 16px; }
  .ch-act__rsn { font-size: 16px; }
  .ch-act__label { font-size: 16px; }
  .ch-act__time { font-size: 15px; }
}
@container cardslot (max-width: 380px) {
  .ch-act {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 2px;
  }
  .ch-act__label { grid-column: 2 / -1; grid-row: 2; font-size: 16px; }
  .ch-act__time { grid-column: 3; grid-row: 1; }
}
.ch-act.is-hidden { display: none; }

.ch-cta {
  margin-top: 24px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: none;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 40px -8px rgba(0, 0, 0, 0.7),
    0 24px 60px -24px rgba(0, 0, 0, 0.95);
  overflow: hidden;
}
.ch-cta__fade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--clan-accent, var(--accent)) 0%, transparent 55%);
  opacity: 0.16;
  filter: blur(6px);
  pointer-events: none;
}
.ch-cta__logo {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
}
.ch-cta__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-cta__text { position: relative; z-index: 1; flex: 1; min-width: 0; }
.ch-cta .btn-primary,
.ch-cta .ch-join { position: relative; z-index: 1; }
.ch-cta .ch-join { height: 44px; padding: 0 24px; }
body.ch-editing .ch-cta {
  overflow: visible;
}
.ch-cta__title,
.ch-cta__custom {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
  text-shadow: 1px 1px 0 #000, 0 2px 6px rgba(0, 0, 0, 0.55);
  margin: 0;
}
.ch-cta__title { margin-bottom: 4px; }
.ch-cta__custom { white-space: pre-line; }
.ch-cta__sub {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text-dim);
  text-shadow: 1px 1px 0 #000;
  margin: 0;
}

/* Join banner — inline editor */
body.ch-editing .ch-cta__logo { overflow: visible; }
.ch-cta__logobtn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--clan-accent, var(--accent)) 55%, var(--border-strong));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms, opacity 140ms;
}
.ch-cta__logobtn svg { width: 20px; height: 20px; display: block; }
.ch-cta__logobtn:hover { border-color: var(--clan-accent, var(--accent)); color: var(--clan-accent, var(--accent)); background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
.ch-cta__logobtn.has-logo { opacity: 0; border-style: solid; border-color: transparent; background: color-mix(in srgb, #000 42%, transparent); }
.ch-cta__logobtn.has-logo:hover { opacity: 1; color: #fff; border-color: color-mix(in srgb, var(--clan-accent, var(--accent)) 55%, transparent); }
.ch-cta__logorm {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 3;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 140ms, color 140ms;
}
.ch-cta__logorm:hover { border-color: #b5423a; color: #ff6b6b; }
.ch-cta__logorm svg { width: 12px; height: 12px; display: block; }
.ch-cta__editmsg {
  width: 100%;
  border: 1px solid var(--border-strong);
  background: #16161a;
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
.ch-cta__editmsg:focus { outline: none; border-color: var(--clan-accent, var(--accent)); }

.cc-promo { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 4, 6, 0.72); backdrop-filter: blur(4px); opacity: 0; transition: opacity 260ms ease; }
.cc-promo[hidden] { display: none; }
.cc-promo.is-in { opacity: 1; }
.cc-promo__card { position: relative; width: 100%; max-width: 760px; min-height: 360px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--panel-shadow); transform: translateY(12px) scale(0.98); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); }
.cc-promo.is-in .cc-promo__card { transform: none; }
.cc-promo__scene { position: absolute; inset: 0; background: var(--scene) center 40% / cover no-repeat; opacity: 0.75; filter: saturate(0.9) brightness(0.8); }
.cc-promo__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 22, 34, 0.97) 0%, rgba(20, 22, 34, 0.85) 45%, rgba(20, 22, 34, 0.1) 75%), linear-gradient(0deg, rgba(20, 22, 34, 0.9), transparent 40%); }
.cc-promo__x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--raised); box-shadow: var(--raised-shadow); color: #cfd3e6; cursor: pointer; }
.cc-promo__x:hover { background: var(--raised-hover); color: #fff; }
.cc-promo__x:active { box-shadow: var(--pressed-shadow); }
.cc-promo__x svg { width: 16px; height: 16px; }
.cc-promo__clerk { position: absolute; right: 40px; bottom: 0; z-index: 1; height: 290px; margin: 0; }
.cc-promo__clerk img { display: block; width: auto; height: 100%; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55)); }
.cc-promo__say { position: absolute; left: 37%; bottom: calc(97% + 4px); transform: translateX(-50%); width: max-content; font-family: var(--font-game); font-size: 20px; line-height: 1; color: #ff0; text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0, 0, 0, 0.6); }
.cc-promo__body { position: relative; z-index: 2; width: 60%; padding: 30px 20px 30px 32px; }
.cc-promo__wordmark { display: block; width: 300px; max-width: 100%; height: auto; margin: 0 0 18px; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.85)); }
.cc-promo__title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.05; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.8); }
.cc-promo__title span { color: var(--accent); }
.cc-promo__lede { margin: 0 0 20px; font-family: var(--font-read); font-size: 18px; line-height: 1.1; color: var(--text-dim); text-shadow: 1px 1px 0 #000, 0 2px 8px rgba(0, 0, 0, 0.85); }
.cc-promo__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-promo__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--raised); box-shadow: var(--raised-shadow); color: #fff; font-family: var(--font-ui); font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; text-shadow: var(--raised-text); white-space: nowrap; }
.cc-promo__btn:hover { background: var(--raised-hover); color: #fff; }
.cc-promo__btn--primary { background: var(--raised-primary); box-shadow: var(--raised-primary-shadow); }
.cc-promo__btn--primary:hover { background: var(--raised-primary-hover); }
.cc-promo__btn:active { box-shadow: var(--pressed-shadow); }
.cc-promo__ico { width: 20px; height: 20px; flex-shrink: 0; filter: drop-shadow(1px 1px 0 #000); }
@media (max-width: 640px) {
  .cc-promo { align-items: center; padding: 10px; }
  .cc-promo__card { min-height: 0; }
  .cc-promo__scene { bottom: auto; height: 210px; }
  .cc-promo__scene::after { background: linear-gradient(0deg, var(--surface) 0%, rgba(20, 22, 34, 0.2) 55%, rgba(20, 22, 34, 0.1) 100%); }
  .cc-promo__clerk { top: 34px; right: auto; bottom: auto; left: 50%; height: 176px; transform: translateX(-50%); }
  .cc-promo__say { font-size: 16px; }
  .cc-promo__body { width: auto; padding: 196px 18px 18px; text-align: center; }
  .cc-promo__wordmark { width: 230px; margin: 0 auto 14px; }
  .cc-promo__lede { font-size: 16px; margin-bottom: 16px; }
  .cc-promo__ctas { flex-direction: column; }
}

.cc-cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cc-cookie.is-in { opacity: 1; transform: none; }
.cc-cookie__body {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cc-cookie__icon {
  width: 40px;
  height: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}
.cc-cookie__body p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}
.cc-cookie__btn {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: 5px;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms;
}
.cc-cookie__btn:hover { background: var(--accent-hover); }

@media (max-width: 640px) {
  .cc-cookie {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    left: 0;
    right: 0;
    bottom: 76px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .cc-cookie__btn { width: 100%; }
  body.cc-cookie-open .app-main { padding-bottom: calc(var(--mobilebar-h, 76px) + 168px); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-cookie { transition: opacity 200ms ease; transform: none; }
}
.cc-event-form { margin-top: 8px; }
.cc-event-form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 560px) { .cc-event-form__grid { grid-template-columns: 1fr; } }
.cc-event-form__actions { margin-top: 12px; }
.cc-event-form__check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-dim);
  cursor: pointer;
}
.cc-event-form__check input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }

.ch-card--news { display: flex; flex-direction: column; }
.ch-newslist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  min-height: 0;
}
.ch-newsitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 96px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
}
.ch-newsitem--cover {
  background-image: var(--news-cover);
  background-clip: padding-box;
  background-size: cover;
  background-position: center;
}
.ch-newsitem__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 12, 16, 0.96) 0%, rgba(11, 12, 16, 0.82) 42%, rgba(11, 12, 16, 0.35) 78%, rgba(11, 12, 16, 0.12) 100%),
    linear-gradient(0deg, rgba(11, 12, 16, 0.55) 0%, rgba(11, 12, 16, 0) 55%),
    linear-gradient(180deg, rgba(11, 12, 16, 0.6) 0%, rgba(11, 12, 16, 0) 35%),
    linear-gradient(270deg, rgba(11, 12, 16, 0.7) 0%, rgba(11, 12, 16, 0) 22%);
}
.ch-newsitem:not(.ch-newsitem--cover) .ch-newsitem__scrim { display: none; }
.ch-newsitem:hover,
.ch-newsitem:active,
.ch-newsitem:focus-visible {
  border-color: var(--clan-accent, var(--accent));
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
}
.ch-newsitem:focus-visible {
  outline: none;
  border-radius: var(--radius-lg);
}
.ch-newsitem__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.ch-newsitem__title {
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1.1;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.ch-newsitem__excerpt {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ch-newsitem--cover .ch-newsitem__excerpt { color: rgba(226, 230, 240, 0.86); }
.ch-newsitem__date {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.ch-newsitem--cover .ch-newsitem__date { color: var(--clan-accent, var(--accent)); }
.ch-newsitem__arrow { position: relative; z-index: 1; flex-shrink: 0; width: 16px; height: 16px; color: var(--text-muted); }
.ch-newsitem--cover .ch-newsitem__arrow { color: rgba(226, 230, 240, 0.86); }
.ch-newsitem:hover .ch-newsitem__arrow { color: var(--clan-accent, var(--accent)); }
.ch-updates { display: flex; flex-direction: column; gap: 6px; }
.ch-newsbody { display: flex; flex-direction: column; min-height: 0; max-height: 460px; overflow-y: auto; }
.ch-newsbody .ch-newslist { max-height: none; overflow: visible; }
.ch-newslist + .ch-updates { margin-top: 14px; }
.ch-updates__h { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.ch-updates__h::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: rgba(150, 160, 200, 0.12); }
.ch-update { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--carved); box-shadow: var(--carved-shadow); color: var(--text-dim); text-decoration: none; font-family: var(--font-ui); font-size: 16px; transition: background 140ms; }
.ch-update:hover { background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%); }
.ch-update svg { width: 18px; height: 18px; color: var(--clan-accent, var(--accent)); }
.ch-update__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--carved-text); }
.ch-update__text b { font-weight: 400; color: var(--text); }
.ch-update__date { font-size: 14px; color: var(--text-muted); white-space: nowrap; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 130ms, transform 130ms, box-shadow 130ms;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #6472e8 0%, #5360d6 100%);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 10px 22px -8px rgba(60, 78, 210, 0.6);
}
.btn-primary:active { transform: translateY(0); }

.btn-primary--discord {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--clan-accent, var(--accent)) 88%, #fff 12%) 0%,
    var(--clan-accent, var(--accent)) 100%);
  border-color: color-mix(in srgb, var(--clan-accent, var(--accent)) 60%, #000);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 16px -8px color-mix(in srgb, var(--clan-accent, var(--accent)) 55%, transparent);
}
.btn-primary--discord:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--clan-accent, var(--accent)) 78%, #fff 22%) 0%,
    color-mix(in srgb, var(--clan-accent, var(--accent)) 96%, #fff 4%) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 10px 22px -8px color-mix(in srgb, var(--clan-accent, var(--accent)) 60%, transparent);
}
.btn-primary--discord svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 4px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 130ms, background 130ms, color 130ms, transform 130ms;
}
.btn-secondary:hover { border-color: rgba(120, 135, 255, 0.5); color: var(--accent); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(0); }
.btn-secondary.is-disabled { opacity: 0.55; cursor: default; pointer-events: none; }

.sb-menu {
  position: fixed;
  left: calc(var(--sidebar-w) + 8px);
  bottom: 10px;
  width: 210px;
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  z-index: 60;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 130ms, transform 130ms;
}
.sb-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 767px) {
  .sb-menu {
    left: auto;
    right: 8px;
    bottom: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px) + 8px);
    width: min(260px, calc(100vw - 16px));
    max-height: calc(100dvh - var(--mobilebar-h) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px) - 24px);
    overflow-y: auto;
  }
}
.sb-menu__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.sb-menu__head img { width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.sb-menu__name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.2; }
.sb-menu__sub { font-size: 11px; color: var(--text-muted); }
.sb-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-size: 13px;
  text-decoration: none;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.sb-menu__item:hover { background: var(--surface-3); color: var(--text); }
.sb-menu__item svg { width: 16px; height: 16px; }
.sb-menu__sep { height: 1px; background: var(--border); margin: 6px 0; }

.sb-menu__group { width: 100%; }
.sb-menu__group summary { list-style: none; }
.sb-menu__group summary::-webkit-details-marker { display: none; }
.sb-menu__item--group span:first-of-type { flex: 1; }
.sb-menu__caret { width: 14px !important; height: 14px !important; color: var(--text-muted); transition: transform 160ms ease; }
.sb-menu__group[open] .sb-menu__caret { transform: rotate(90deg); }
.sb-menu__submenu {
  display: grid;
  gap: 2px;
  margin: 2px 0 2px 12px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.sb-menu__subitem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-size: 12px;
  text-decoration: none;
  min-width: 0;
}
.sb-menu__subitem:hover { background: var(--surface-3); color: var(--text); }
.sb-menu__subicon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 12px;
}
.sb-menu__subicon img { width: 100%; height: 100%; object-fit: cover; }
.sb-menu__subname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-trigger { background: none; border: none; padding: 0; cursor: pointer; }

.botdash {
  position: relative;
  min-height: calc(100vh - 60px);
}
.botdash__bg {
  position: fixed;
  top: -160px;
  left: var(--sidebar-w);
  right: 0;
  height: calc(100vh + 320px);
  height: calc(100lvh + 320px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}
@media (max-width: 767px) {
  .botdash__bg { left: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .cc-bg-fx,
  .ch-bg,
  .botdash__bg { top: 0; height: 100vh; }
}
.botdash__bg::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: url('/static/img/index-bg.jpg') center top / cover no-repeat;
  filter: saturate(1.2) brightness(0.68) contrast(1.04) blur(3px);
  opacity: calc(0.8 - var(--bg-dim, 0) * 0.8);
}
.botdash__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(24, 32, 62, 0.42) 0%, rgba(12, 14, 24, 0.74) 45%, rgba(8, 9, 14, 0.9) 75%, var(--bg) 100%),
    radial-gradient(ellipse 900px 600px at 18% 6%, rgba(100,120,255,0.1) 0%, transparent 55%);
}
.botdash__inner {
  position: relative;
  z-index: 1;
}
.botdash__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 6px;
}
.botdash__sub {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0;
}
.botdash__back {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 120ms;
}
.botdash__back:hover { color: var(--text); }

.srv-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(34,34,40,0.94) 0%, rgba(26,26,30,0.94) 100%);
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
}
.srv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.srv-card__avatar {
  width: 54px;
  height: 54px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  flex-shrink: 0;
}
.srv-card__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent);
}
.srv-card__name {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--text);
}
.srv-card__id {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.srv-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
.srv-card__meta .srv-card__id { margin-top: 0; }
.srv-card__act { min-width: 128px; }
.srv-card__act--danger { color: var(--danger); }
.srv-card > form { flex-shrink: 0; }
.srv-card__badge {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-dim);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.srv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}
.srv-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(150, 160, 200, 0.18);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(43, 45, 57, 0.92) 0%, rgba(33, 35, 44, 0.95) 100%),
    radial-gradient(ellipse 120% 90% at 15% 0%, rgba(100, 120, 255, 0.08), transparent 60%);
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.85), 0 2px 6px -3px rgba(0, 0, 0, 0.5);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.srv-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9), 0 2px 6px -3px rgba(0, 0, 0, 0.5);
}
.srv-tile:hover .srv-tile__name { color: var(--accent); }
.srv-tile__banner {
  position: relative;
  aspect-ratio: 16 / 5;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #283149 0%, #1c1f2a 60%, #181a22 100%);
}
.srv-tile__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--srv-bg, none) center / cover no-repeat;
}
.srv-tile__banner--icon::before {
  inset: -40px;
  filter: blur(22px) saturate(1.4) brightness(0.8);
}
.srv-tile__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(24, 26, 33, 0.55) 72%, #24262f 100%);
}
.srv-tile__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 16px 16px 16px;
}
.srv-tile__row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
  margin-top: -34px;
}
.srv-tile__avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: linear-gradient(135deg, var(--accent), var(--accent-dim, #4a5ad4)) center / cover;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.7);
  color: var(--bg);
  font-family: var(--font-ui);
  font-size: 24px;
}
.srv-tile__avatar[style] { background-size: cover; background-position: center; }
.srv-tile__ident { min-width: 0; flex: 1; }
.srv-tile__name {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75), 0 1px 12px rgba(0, 0, 0, 0.45);
  transition: color 140ms;
}
.srv-tile__sub {
  margin: 2px 0 0;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srv-tile__sub a { color: var(--text-dim); text-decoration: none; }
.srv-tile__sub a:hover { color: var(--accent); }
.srv-tile__status {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--text-muted);
}
.srv-tile__status span { color: #7ee08f; }
.srv-tile--removed .srv-tile__status span { color: #f0b45a; }
.srv-tile--absent .srv-tile__status span { color: var(--text-dim); }
.srv-tile__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.srv-tile__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  height: 54px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--carved);
  box-shadow: var(--carved-shadow);
}
.srv-tile__val {
  font-family: var(--font-data);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--accent);
  text-shadow: var(--carved-text);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srv-tile__key {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srv-tile__foot {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: auto;
}
.srv-tile__foot > a { justify-content: center; text-align: center; }
.srv-tile__link { display: flex; justify-content: center; text-align: center; margin: auto 0 8px; }
.srv-tile__link + .srv-tile__foot { margin-top: 0; }
.srv-tile__note {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-muted);
}

.dash-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: start;
}
.dash-nav {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dash-nav a {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  padding: 5px 12px;
  line-height: 1.25;
  border-radius: var(--radius-md);
  transition: color 120ms, background 120ms;
}
.dash-nav a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.dash-nav a.is-active {
  color: var(--text);
  background: rgba(100,120,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(100,120,255,0.28);
}
.dash-nav form { margin: 0; }
.dash-nav__logout {
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 5px 12px;
  line-height: 1.25;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.dash-nav__logout:hover { color: var(--danger); background: rgba(255,255,255,0.04); }

.dash-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(34,34,40,0.94) 0%, rgba(26,26,30,0.94) 100%);
  padding: 15px 17px;
  margin-bottom: 13px;
}
.dash-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.dash-cols .dash-card { margin-bottom: 18px; }
@media (max-width: 720px) {
  .dash-cols { grid-template-columns: 1fr; }
}
.dash-card__title {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0 0 4px;
}
.dash-card__hint {
  color: var(--text-dim);
  font-size: 12px;
  margin: 0 0 13px;
}
.tk-code {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text);
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}
@media (max-width: 820px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-nav { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: 8px; }
  .dash-nav__group { width: 100%; }
}

/* ===== Bot dashboard — grouped nav + compact cards ===== */
.dash-nav__group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 12px 3px;
}
.dash-nav__group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.dash-nav__group:first-child { padding-top: 2px; }

.dash-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.dash-card__head .dash-card__title { margin: 0; }
.dash-card__head--tight { margin-bottom: 11px; }

.dash-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.dash-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
}
.dash-fields--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .dash-fields--2col { grid-template-columns: 1fr; } }
.dash-fields + .dash-fields { margin-top: 12px; }
.dash-field { display: flex; flex-direction: column; min-width: 0; }
.dash-field--full { grid-column: 1 / -1; }
.dash-field .cc-field__help,
.dash-field .dash-card__hint { margin-top: 4px; margin-bottom: 0; }
/* Single-line controls shouldn't sprawl across a wide card */
.dash-field > .csel,
.dash-field > select,
.dash-field > input[type=text],
.dash-field > input[type=number],
.dash-field > input[type=search],
.dash-field > input[type=url],
.dash-field > input:not([type]) { max-width: 440px; }
.dash-field--full > textarea,
.dash-field--full > input,
.dash-field--full > select,
.dash-field--full > .csel { max-width: none; }

.dash-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 9px 16px;
}
.dash-checks label { font-size: 13px; }

.dash-collapse {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.18);
}
.dash-collapse + .dash-collapse { margin-top: 12px; }
.dash-collapse > summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  user-select: none;
}
.dash-collapse > summary::-webkit-details-marker { display: none; }
.dash-collapse > summary::after {
  content: "";
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}
.dash-collapse[open] > summary::after { transform: rotate(-135deg); }
.dash-collapse > summary:hover { color: var(--text); }
.dash-collapse__count {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: none;
}
.dash-collapse__body { padding: 2px 14px 15px; }

.dash-note {
  font-size: 13px;
  color: #e0a800;
  margin: 12px 0 0;
}

/* Reminders editor + list */
.dash-remlist { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.dash-remrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.2);
}
.dash-remrow.is-editing { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dash-remrow__main { min-width: 0; }
.dash-remrow__msg {
  font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-remrow__meta {
  font-family: var(--font-data);
  font-size: 11px; color: var(--text-dim); margin-top: 2px;
}
.dash-remrow__actions { display: flex; gap: 6px; }

.cvb { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .cvb { grid-template-columns: 1fr; } }

.cvb__palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.cvb__add {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 7px 11px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.cvb__add:hover { color: var(--text); border-color: var(--border-strong); background: rgba(100,120,255,0.08); }

.cvb__blocks { display: flex; flex-direction: column; gap: 10px; min-height: 40px; }
.cvb__empty {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}
.cvb-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 10px;
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr;
  grid-auto-rows: min-content;
  gap: 4px 10px;
  align-items: start;
}
.cvb-block__handle {
  grid-column: 1;
  grid-row: 1;
  color: var(--text-muted);
  cursor: grab;
  font-size: 13px;
  line-height: 1;
  user-select: none;
}
.cvb-block__head {
  grid-column: 1;
  grid-row: 2 / 99;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
}
.cvb-block > :not(.cvb-block__handle):not(.cvb-block__head) {
  grid-column: 2;
}
.cvb-block__type {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
}
.cvb-block__del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  text-align: left;
}
.cvb-block__del:hover { color: var(--danger); }
.cvb-block input[type=text],
.cvb-block textarea,
.cvb-block select {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  font-family: var(--font-sans);
  padding: 6px 9px;
  margin-bottom: 5px;
}
.cvb-block textarea { resize: vertical; min-height: 52px; }
.cvb-row { display: flex; gap: 6px; align-items: center; }
.cvb-row input { margin-bottom: 0; }
.cvb-block-roles {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cvb-block-roles__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
@media (max-width: 560px) {
  .cvb-block { grid-template-columns: 1fr; }
  .cvb-block__handle { grid-row: 1; }
  .cvb-block__head { grid-row: 2; flex-direction: row; align-items: center; gap: 10px; }
  .cvb-block > :not(.cvb-block__handle):not(.cvb-block__head) { grid-column: 1; }
}
.cvb-mini {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  cursor: pointer;
}
.cvb-mini:hover { color: var(--text); border-color: var(--border-strong); }
.cvb-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }

.cvb__preview {
  position: sticky;
  top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #2b2d31;
  padding: 14px;
}
.cvb__preview-label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cvb-pv {
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: #313338;
  padding: 12px 14px;
  color: #dbdee1;
  font-size: 13px;
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: anywhere;
}
.cvb-pv h4 { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: #f2f3f5; }
.cvb-pv p { margin: 0 0 0.85em; white-space: pre-wrap; }
.cvb-pv p:last-child { margin-bottom: 0; }
.cvb-pv hr { border: none; border-top: 1px solid #3f4147; margin: 8px 0; }
.cvb-pv__imgs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.cvb-pv__imgs img { max-width: 80px; max-height: 60px; border-radius: 4px; object-fit: cover; }
.cvb-pv__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cvb-pv__btn {
  font-size: 12px;
  background: #4e5058;
  color: #fff;
  border-radius: 4px;
  padding: 5px 10px;
}
.cvb-pv__foot { font-size: 11px; line-height: 1.4; color: #949ba4; margin-top: 4px; }
.cvb__footer { margin-top: 10px; }
.cvb-block--footer .cvb-block__handle { cursor: default; }
.cvb-block--footer .cvb-row { gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.cvb-block--footer .cvb-check { white-space: nowrap; }
.cvb-pv__react { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cvb-pv__react span {
  font-size: 12px;
  background: #2b2d31;
  border: 1px solid #3f4147;
  border-radius: 5px;
  padding: 3px 8px;
}

.cvb__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cvb__toolbar .cvb__palette { margin-bottom: 0; }
.cvb__accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cvb__accent input[type=color] {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  cursor: pointer;
}

.cvb-block select,
.cvb-block input[type=text],
.cvb-block textarea,
.cvb-emoji input,
[data-cvb-roles] select,
[data-cvb-roles] input {
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  font-family: var(--font-sans);
  padding: 7px 9px;
  color-scheme: dark;
}
.cvb-block select,
[data-cvb-roles] select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.cvb-block select option,
[data-cvb-roles] select option { background: var(--surface-2); color: var(--text); }
.cvb-block select:focus,
.cvb-block input:focus,
.cvb-block textarea:focus,
.cvb-emoji input:focus,
[data-cvb-roles] select:focus,
[data-cvb-roles] input:focus {
  outline: none;
  border-color: var(--border-strong);
}

.cvb-btnrow {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  margin-bottom: 6px;
  background: rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cvb-btnrow .cvb-row { margin: 0; }

.cvb-imgfield { flex: 1; }
.cvb-note { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.cvb-imgfield.is-drop { outline: 1px dashed var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

.cvb-emoji { position: relative; display: flex; gap: 6px; align-items: center; }
.cvb-emoji input { flex: 1; }
.cvb-emoji__pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 240px;
  max-height: 180px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.cvb-emoji__opt {
  font-size: 18px;
  line-height: 1;
  padding: 5px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
}
.cvb-emoji__opt:hover { background: rgba(255,255,255,0.08); }

.cvb-epick { position: relative; margin-top: 6px; }
.cvb-epick__pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 264px;
  max-height: 200px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.cvb-epick__opt {
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
}
.cvb-epick__opt:hover { background: rgba(255,255,255,0.08); }
.cvb-epick__opt img { width: 22px; height: 22px; object-fit: contain; }
.cvb-epick__head { grid-column: 1 / -1; padding: 4px 2px 2px; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cvb-epick__head:not(:first-child) { margin-top: 6px; }
.cvb-emoji__opt img { display: block; width: 20px; height: 20px; }

.cvb-pv h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: #f2f3f5; }
.cvb-pv h5 { font-size: 14px; font-weight: 700; margin: 0 0 6px; color: #f2f3f5; }
.cvb-pv blockquote { border-left: 3px solid #4e5058; margin: 0 0 6px; padding: 1px 0 1px 10px; color: #dbdee1; }
.cvb-pv code { background: rgba(0,0,0,0.35); border-radius: 3px; padding: 0 3px; font-family: var(--font-data); font-size: 0.92em; }
.cvb-pv__emoji { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; object-fit: contain; }

.cvb-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 200;
  padding: 11px 18px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 13px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms, transform 160ms;
}
.cvb-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cvb-toast.is-error { border-color: var(--danger); color: var(--danger); }

.tk-type__off {
  font-family: var(--font-data);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--warning);
  margin-left: 8px;
}

.csel { position: relative; width: 100%; }
.csel--full { display: block; }
:root select:where(:not([multiple]):not([data-no-csel]):not([data-nav-select]):not(.form-select):not(.csel__native)) {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: normal;
  padding: 9px 12px;
  color-scheme: dark;
}
.csel__native {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.csel__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-sans);
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
}
.csel.is-open .csel__trigger { border-color: var(--accent); }
.csel__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel__caret { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.csel__menu {
  position: fixed;
  z-index: 60;
  box-sizing: border-box;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 38px rgba(0,0,0,0.5);
  padding: 4px;
}
.csel__opt {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}
.csel__opt:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.csel__opt.is-active { background: rgba(100,120,255,0.16); color: var(--text); }
.csel__opt.is-focus { background: rgba(255,255,255,0.08); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.csel__opt.is-disabled { opacity: 0.45; cursor: not-allowed; }
.csel__menu:focus { outline: none; }
.csel__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.csel__trigger:disabled { opacity: 0.55; cursor: not-allowed; }
.csel__menu { z-index: 120; display: flex; flex-direction: column; gap: 2px; max-height: 340px; padding: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7); scrollbar-width: none; }
.csel__menu[hidden] { display: none; }
.csel__menu::-webkit-scrollbar { display: none; }
.csel__menu .csel__opt { position: relative; padding: 8px 14px 8px 16px; border-radius: var(--radius-lg); font-family: var(--font-ui); font-size: 14px; line-height: 1.2; white-space: nowrap; color: var(--text-dim); transition: background 80ms, color 80ms; }
.csel__menu .csel__opt::before { content: ""; position: absolute; left: 6px; top: 50%; width: 3px; height: 60%; border-radius: 2px; background: var(--accent); transform: translateY(-50%) scaleY(0); transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1); }
.csel__menu .csel__opt:hover,
.csel__menu .csel__opt.is-focus,
.csel__menu .csel__opt.is-active { background: var(--surface-2); color: var(--text); box-shadow: none; }
.csel__menu .csel__opt.is-active::before { transform: translateY(-50%) scaleY(1); }

.tk-grid { display: flex; flex-direction: column; gap: 8px; }
.tk-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 12px 14px;
}
.tk-card__icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}
.tk-card__body { flex: 1; min-width: 0; }
.tk-card__name { font-weight: 600; font-size: 14px; color: var(--text); }
.tk-card__meta { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.tk-card__actions { display: flex; gap: 6px; }

.tk-open {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  max-height: 360px;
  overflow-y: auto;
}
.tk-open__head,
.tk-open__row {
  display: grid;
  grid-template-columns: 1fr auto 44px auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
}
.tk-open__head {
  position: sticky;
  top: 0;
  background: var(--surface-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  z-index: 1;
}
.tk-open__row { border-top: 1px solid var(--border); }
.tk-open__row:hover { background: var(--surface-3); }
.tk-open__main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tk-open__id { font-family: var(--font-data); font-size: 12px; color: var(--text-muted); }
.tk-open__type {
  font-weight: 600; font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-open__badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.tk-open__opener { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); }
.tk-open__age { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); text-align: right; }
.tk-open__actions { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 640px) {
  .tk-open__head,
  .tk-open__row { grid-template-columns: 1fr 40px auto; }
  .tk-open__opener { display: none; }
}

.rolepick { display: flex; flex-direction: column; gap: 6px; }
.rolepick__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.rolepick__pills:empty { display: none; }
.rolepick .csel, .rolepick > select { max-width: 260px; }

.ph-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  margin-left: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-muted);
  cursor: help;
  vertical-align: middle;
}
.ph-help__pop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 300px;
  display: none;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,0.8);
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: normal;
}
.ph-help__pop b { color: var(--text); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.ph-help__pop code { color: var(--accent); font-family: var(--font-data); }
.ph-help:hover .ph-help__pop,
.ph-help:focus .ph-help__pop,
.ph-help:focus-within .ph-help__pop { display: flex; }
.rolepick__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 6px 3px 10px;
  font-size: 12px;
  color: var(--text);
}
.rolepick__x {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}
.rolepick__x:hover { color: var(--text); }

.tk-fields { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tk-field__drag { cursor: grab; color: var(--text-muted); user-select: none; padding: 0 4px; font-size: 13px; }
.tk-field__drag:active { cursor: grabbing; }
.tk-field {
  display: flex; gap: 6px; align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.15);
  padding: 8px;
}
.tk-field input[type=text] { flex: 1; }

.cc-newscard { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(37,39,49,0.82), rgba(22,23,30,0.86)); border: 1px solid rgba(150,160,200,0.18); border-radius: 4px; overflow: hidden; text-decoration: none; box-shadow: 0 12px 28px -18px rgba(0,0,0,0.85), 0 1px 0 rgba(255,255,255,0.05) inset; transition: border-color .25s, transform .25s, box-shadow .25s; }
.cc-newscard__cover { position: relative; height: 200px; background-size: cover; background-position: center; }
.cc-newscard__cover::after { content: ''; position: absolute; inset: 0 0 auto; height: 200px; background: linear-gradient(180deg, transparent 55%, rgba(18,18,22,0.55)); pointer-events: none; }
.cc-newscard__body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 7px; }
.cc-newscard__meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.cc-newscard__date { color: var(--text-muted); white-space: nowrap; }
.cc-newscard__headline { font-family: var(--font-display); font-size: 26px; line-height: 1.15; letter-spacing: 0.01em; color: var(--text); margin: 0; }
.cc-newscard__excerpt { font-size: 15px; line-height: 1.55; color: var(--text-dim); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.cc-newsbtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; align-self: flex-start; padding: var(--btn-md-pad); border-radius: 4px; font-family: var(--font-ui); font-size: var(--btn-md-font); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: #cdd4ff; border: 1px solid rgba(120,135,255,0.32); background: linear-gradient(180deg, rgba(90,105,210,0.18), rgba(70,82,180,0.08)); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset; transition: background .18s, border-color .18s, color .18s, transform .1s; }
.cc-newsbtn svg { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.cc-newsbtn--primary { color: #fff; border-color: #3d49ac; background: linear-gradient(180deg, #5665dd 0%, #4552c4 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 24px -12px rgba(60,78,210,0.6); }
.cc-newscard__body .cc-newsbtn { margin-top: auto; }
.cc-newscard:hover .cc-newsbtn { color: #fff; border-color: rgba(120,135,255,0.55); background: linear-gradient(180deg, rgba(100,115,220,0.26), rgba(78,92,195,0.12)); }
.cc-newshero__slide:hover .cc-newsbtn--primary { background: linear-gradient(180deg, #6472e8, #5360d6); transform: translateY(-1px); }

.cc-newshero { position: relative; border-radius: 5px; overflow: hidden; border: 1px solid rgba(150,160,200,0.18); margin-bottom: 14px; box-shadow: 0 24px 60px -34px rgba(0,0,0,0.9); }
.cc-newshero__track { position: relative; min-height: 400px; }
.cc-newshero__slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 40px 18px 26px; text-decoration: none; opacity: 0; visibility: hidden; transition: opacity 600ms ease; background-image: var(--hero-img); background-size: cover; background-position: center; background-color: var(--surface-2); }
.cc-newshero__slide.is-active { opacity: 1; visibility: visible; }
.cc-newshero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,0.15) 40%, rgba(10,10,12,0.78) 72%, rgba(10,10,12,0.96) 100%); }
.cc-newshero__body { position: relative; max-width: 720px; }
.cc-newshero__meta { display: inline-flex; flex-wrap: wrap; gap: 4px 9px; align-items: center; margin: 0 0 5px; }
.cc-newshero__clanlogo { width: 24px; height: 24px; border-radius: 5px; object-fit: cover; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.22); flex-shrink: 0; }
.cc-newshero__clan { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #aab4ff; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
.cc-newshero__sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(232,232,234,0.55); }
.cc-newshero__date { font-family: var(--font-data); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(232,232,234,0.82); white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
.cc-newshero__headline { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.02; letter-spacing: 0.01em; color: #fff; margin: 0 0 3px; text-shadow: 0 2px 5px rgba(0,0,0,0.85), 0 3px 18px rgba(0,0,0,0.75); text-transform: uppercase; overflow-wrap: anywhere; }
.cc-newshero__excerpt { font-family: var(--font-read); font-size: 18px; line-height: 1.32; color: rgba(232,232,234,0.86); margin: 0 0 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.cc-newshero__dots { position: absolute; bottom: 18px; right: 24px; display: flex; gap: 8px; z-index: 2; }
.cc-newshero__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,0.35); cursor: pointer; transition: background .2s, transform .2s; }
.cc-newshero__dot.is-active { background: #fff; transform: scale(1.25); }

.cc-latest { margin-top: 16px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px 22px; }
@media (max-width: 1200px) { .cc-latest--3 { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 900px) { .cc-latest { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); } }
.cc-latest__col { display: flex; flex-direction: column; min-width: 0; }
.cc-latest__col .cc-latest__title { margin-bottom: 8px; }
.cc-latest__list { display: flex; flex-direction: column; gap: 6px; }
.cc-feedrow { display: flex; align-items: stretch; gap: 12px; min-width: 0; height: 48px; padding: 0 10px 0 0; overflow: hidden; border-radius: var(--radius-lg); text-decoration: none; background: linear-gradient(180deg, rgba(43, 45, 57, 0.9) 0%, rgba(33, 35, 44, 0.94) 100%), radial-gradient(ellipse 120% 90% at 15% 0%, rgba(100, 120, 255, 0.08), transparent 60%); border: 1px solid rgba(150,160,200,0.18); box-shadow: 0 18px 40px -24px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.06) inset; transition: border-color .2s; }
.cc-feedrow:hover { border-color: rgba(150,160,200,0.32); }
.cc-feedrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-feedrow__thumb { position: relative; flex: 0 0 72px; overflow: hidden; background: radial-gradient(ellipse 90% 80% at 30% 20%, rgba(100,120,255,0.3), transparent 65%), linear-gradient(135deg, #22284a 0%, #14161f 100%); }
.cc-feedrow__thumb--empty { display: flex; align-items: center; justify-content: center; }
.cc-feedrow__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cc-feedrow__mark { width: 22px; height: 22px; object-fit: contain; opacity: 0.85; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6)); }
.cc-feedrow__mark--metric { width: 26px; height: 26px; opacity: 1; }
.cc-feedrow__body { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; flex: 1; }
.cc-feedrow__clan { font-family: var(--font-data); font-size: 11px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: #aab4ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cc-feedrow__chip { align-self: center; flex-shrink: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1; letter-spacing: 0.06em; color: #e4e6ee; padding: 4px 7px 3px; border-radius: 4px; background: var(--carved); border: 1px solid transparent; box-shadow: var(--carved-shadow); text-shadow: var(--carved-text); }
.cc-feedrow__headline { font-family: var(--font-ui); font-size: 18px; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.cc-feedrow:hover .cc-feedrow__headline { color: #cdd4ff; }
@media (max-width: 480px) { .cc-feedrow__thumb { flex-basis: 56px; } }
.cc-latest__title { font-family: var(--font-ui); font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); margin: 0; }

@media (max-width: 640px) { .cc-newshero__slide { padding: 26px; } .cc-newshero__sep { display: none; } .cc-newshero__date { flex-basis: 100%; } }

.cc-eventsrow { margin-top: 0; }
.cc-eventsrow__head { display: flex; align-items: center; gap: 20px; margin-bottom: 5px; }
.cc-eventsrow__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); margin: 0; white-space: nowrap; text-shadow: 0 2px 3px rgba(0,0,0,0.75), 0 6px 22px rgba(0,0,0,0.55), 0 0 30px rgba(110,130,255,0.22); }
.cc-eventsrow__rail { position: relative; --ev-per: 3; }
.cc-eventsrow__grid { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 0 20px; margin: -4px 0 -20px; }
.cc-eventsrow__grid::-webkit-scrollbar { display: none; }
.cc-eventsrow__grid > .cc-eventcard { flex: 0 0 calc((100% - (var(--ev-per) - 1) * 18px) / var(--ev-per)); min-width: 0; scroll-snap-align: start; }
.cc-eventsrow__nav { position: absolute; top: calc(50% - 8px); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); color: #e4e6ee; background: var(--raised); box-shadow: var(--raised-shadow), 0 10px 22px -10px rgba(0,0,0,0.9); text-shadow: var(--raised-text); cursor: pointer; transform: translateY(-50%); transition: background .2s, color .2s, opacity .16s; }
.cc-eventsrow__nav svg { width: 18px; height: 18px; }
.cc-eventsrow__nav--prev { left: -20px; }
.cc-eventsrow__nav--next { right: -20px; }
.cc-eventsrow__nav:hover { color: #fff; background: var(--raised-hover); }
.cc-eventsrow__nav:active { box-shadow: var(--pressed-shadow); }
.cc-eventsrow__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-eventsrow__nav:disabled { opacity: 0; pointer-events: none; }
.cc-eventsrow__nav[hidden] { display: none; }
.cc-eventsrow__rail--few .cc-eventsrow__nav { display: none; }
@media (max-width: 900px) {
  .cc-eventsrow__rail { --ev-per: 1; }
  .cc-eventsrow__rail--few .cc-eventsrow__nav { display: inline-flex; }
  .cc-eventsrow__rail--few .cc-eventsrow__nav[hidden] { display: none; }
  .cc-eventsrow__nav--prev { left: -14px; }
  .cc-eventsrow__nav--next { right: -14px; }
}
.cc-eventcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  border: 1px solid rgba(150,160,200,0.18);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: radial-gradient(ellipse 130% 70% at 50% 120%, rgba(100,120,255,0.14), transparent 62%), #1a1c26;
  box-shadow: 0 14px 34px -20px rgba(0,0,0,0.85), 0 2px 6px -3px rgba(0,0,0,0.5);
}
.cc-eventcard__banner { position: absolute; inset: 0; background-image: var(--evt-img, none); background-size: cover; background-position: center; }
.cc-eventcard__banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,28,38,0) 0%, rgba(26,28,38,0.5) 40%, #1a1c26 86%, #1a1c26 100%); }
.cc-eventcard__info { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 12px 16px; }
.cc-eventcard__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cc-eventcard__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: -3px; }
.cc-eventcard__when { font-family: var(--font-ui); font-size: 16px; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-dim); }
.cc-eventcard__title { font-family: var(--font-ui); font-weight: 400; font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.08; color: var(--text); margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.6); overflow-wrap: anywhere; }
.cc-eventcard__clan { display: flex; align-items: center; gap: 8px; font-family: var(--font-data); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: #aab4ff; }
.cc-eventcard__logo { width: 20px; height: 20px; border-radius: var(--radius-sm); object-fit: cover; background: rgba(0,0,0,0.4); border: 1px solid rgba(150,160,200,0.25); flex-shrink: 0; }
.cc-eventcard__more { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; padding: 9px 17px; border-radius: var(--radius-md); border: 1px solid var(--accent-hover); background: var(--accent); box-shadow: 0 8px 20px -10px rgba(100,120,255,0.55); }
.cc-eventcard__more svg { width: 14px; height: 14px; margin-top: -1px; }
.cc-eventcard:hover .cc-eventcard__more { background: var(--raised-primary-hover); }
.cc-eventcard:hover .cc-eventcard__title { color: #fff; }

.cc-wall { position: relative; z-index: 1; padding: 20px 0 80px; }
.cc-wall__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.cc-wall__head { display: flex; align-items: center; gap: 20px; margin-bottom: 3px; }
.cc-wall__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: 0.02em; text-transform: uppercase; margin: 0; color: var(--text); white-space: nowrap; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.75), 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 30px rgba(110, 130, 255, 0.22); }
.cc-wall__post, .cc-wall__all {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--radius-md);
  padding: var(--btn-md-pad);
  font-family: var(--font-ui);
  font-size: var(--btn-md-font);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .12s, box-shadow .2s, border-color .2s, color .2s;
}
.cc-wall__post, .cc-wall__all { text-shadow: var(--raised-text); border: 1px solid transparent; }
.cc-wall__post {
  background: var(--raised-primary);
  color: #fff;
  box-shadow: var(--raised-primary-shadow);
}
.cc-wall__post svg, .cc-wall__all svg { width: 15px; height: 15px; }
.cc-wall__post:hover { background: var(--raised-primary-hover); transform: translateY(-1px); }
.cc-wall__all {
  color: #e4e6ee;
  background: var(--raised);
  box-shadow: var(--raised-shadow);
}
.cc-wall__all:hover { color: #fff; background: var(--raised-hover); transform: translateY(-1px); }
.cc-wall__post:active, .cc-wall__all:active { transform: translateY(0); box-shadow: var(--pressed-shadow); }
@media (max-width: 640px) {
  .cc-wall__post { flex: 1; justify-content: center; }
}
.cc-wall__empty { border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 60px; text-align: center; color: var(--text-dim); }
.cc-brickwall { columns: 3 320px; column-gap: 14px; }
.cc-brick {
  break-inside: avoid;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 14px;
  background:
    linear-gradient(180deg, rgba(43, 45, 57, 0.9) 0%, rgba(33, 35, 44, 0.94) 100%),
    radial-gradient(ellipse 120% 90% at 15% 0%, rgba(100, 120, 255, 0.08), transparent 60%);
  border: 1px solid rgba(150, 160, 200, 0.18);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 16px 22px 14px;
  box-shadow:
    0 14px 34px -14px rgba(0, 0, 0, 0.7),
    0 1px 0 0 rgba(255, 255, 255, 0.03) inset;
}

.cc-brick__title {
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #f5f0dc;
  overflow-wrap: break-word;
  word-break: break-word;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(0, 0, 0, 0.8);
}
.cc-brick__top { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.cc-brick__own { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cc-brick__own form { display: contents; }
.cc-brick__ownbtn {
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border-radius: var(--radius-md); border: 1px solid transparent;
  background: var(--raised); box-shadow: var(--raised-shadow);
  color: #c2c4d0; cursor: pointer;
  transition: color 140ms, background 140ms, transform .12s;
}
.cc-brick__ownbtn svg { width: 14px; height: 14px; }
.cc-brick__ownbtn:hover { color: #fff; background: var(--raised-hover); transform: translateY(-1px); }
.cc-brick__ownbtn--danger:hover { color: var(--danger); }
.cc-brick__ownbtn:active { transform: translateY(0); box-shadow: var(--pressed-shadow); }
.cc-brick__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ff3030;
  background: var(--carved);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 5px 11px 4px;
  box-shadow: var(--carved-shadow);
  text-shadow: var(--carved-text);
}
.cc-brick--lfc .cc-brick__tag { color: #00ffff; }
.cc-brick--reddit .cc-brick__tag { color: #ff981f; }
.cc-brick--lfgim .cc-brick__tag { color: #d0d0d0; }
.cc-brick--lfevent .cc-brick__tag { color: #ff6bff; }
.cc-brick--lfstaff .cc-brick__tag { color: #7fff7f; }
.cc-brick--startclan .cc-brick__tag { color: #ffff00; }
.cc-brick--info { background: linear-gradient(180deg, rgba(44, 48, 66, 0.92) 0%, rgba(26, 28, 40, 0.94) 100%); border-color: rgba(120, 135, 255, 0.28); }
.cc-brick--info .cc-brick__tag { color: #00ffff; }
.cc-brick--info .cc-brick__title { color: #eef1ff; }
.cc-brick--info .cc-brick__body { color: var(--text-dim); }
.cc-brick__kinds { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 0 6px; }
.cc-kindpill {
  position: relative;
  display: block;
  width: 100%;
  height: 46px;
  overflow: hidden;
  font-family: var(--font-ui);
  color: #ff3030;
  background: var(--carved);
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: var(--carved-shadow);
  text-shadow: var(--carved-text);
  transition: background .2s;
}
.cc-kindpill:hover, .cc-kindpill:focus-visible { background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%); }
.cc-kindpill__label,
.cc-kindpill__desc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 14px;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity .7s ease;
  will-change: transform;
}
.cc-kindpill__label {
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transform: translateY(0);
}
.cc-kindpill__desc {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.78);
  transform: translateY(100%);
  opacity: 0;
}
.cc-kindpill:hover .cc-kindpill__label,
.cc-kindpill:focus-visible .cc-kindpill__label { transform: translateY(-100%); opacity: 0; }
.cc-kindpill:hover .cc-kindpill__desc,
.cc-kindpill:focus-visible .cc-kindpill__desc { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cc-kindpill__label, .cc-kindpill__desc { transition: opacity .2s ease; transform: none !important; }
}
.cc-kindpill--lfc { color: #00ffff; }
.cc-kindpill--lfgim { color: #d0d0d0; }
.cc-kindpill--lfevent { color: #ff6bff; }
.cc-kindpill--lfstaff { color: #7fff7f; }
.cc-kindpill--startclan { color: #ffff00; }
.cc-brick__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cc-brick__cta .cc-wall__post, .cc-brick__cta .cc-wall__all { flex: 1 1 auto; justify-content: center; }
.cc-brick__media { height: 180px; margin: 2px 0 14px; border-radius: var(--radius-md); background-size: cover; background-position: center; box-shadow: var(--carved-shadow); }
.cc-brick__video { position: relative; display: block; margin: 2px 0 14px; height: 180px; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--carved-shadow); }
.cc-brick__video-thumb { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .4s ease; }
.cc-brick__video:hover .cc-brick__video-thumb { transform: scale(1.05); }
.cc-brick__video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 12, 0.05), rgba(10, 10, 12, 0.55)); }
.cc-brick__play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 10, 12, 0.7); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; z-index: 2; transition: background .2s, transform .2s; }
.cc-brick__video:hover .cc-brick__play { background: rgba(220, 50, 50, 0.9); transform: scale(1.08); }
.cc-brick__play svg { width: 24px; height: 24px; margin-left: 2px; }
.cc-brick__body {
  font-family: var(--font-read);
  font-size: 18px;
  line-height: 1.38;
  color: var(--text-dim);
  margin: 0;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}
.cc-brick__skills {
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-content: space-between;
  gap: 10px 8px;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--carved);
  box-shadow: var(--carved-shadow);
  border-radius: var(--radius-md);
}
.cc-brick__skill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1;
  color: #eceff5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cc-brick__skill-icon { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.6)); }
.cc-brick__skill b { font-weight: 400; min-width: 1.15em; text-shadow: var(--carved-text); }
.cc-brick__skillfoot {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}
.cc-brick__footpill {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--carved);
  box-shadow: var(--carved-shadow);
  border-radius: var(--radius-md);
  padding: 5px 6px 5px;
}
.cc-brick__footpill b {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: #f4f6fb;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--carved-text);
}
.cc-brick__footpill i {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  color: #8a8f9c;
}

.cc-brick__stats { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 8px; margin-top: 10px; padding-top: 0; border-top: none; }

/* LFC "clan types wanted" + timezone chips, and CVC event line */
.cc-brick__wants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cc-brick__want {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px;
  font-family: var(--font-ui); font-size: 14px; line-height: 1; letter-spacing: 0.02em;
  color: var(--text); background: var(--well); box-shadow: var(--well-shadow);
}
.cc-brick__want-ico { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.cc-brick__want--tz { color: var(--text-dim); border-color: var(--border); }
.cc-brick__event { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 10px; }
.cc-brick__eventwhen {
  font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text); background: rgba(0,0,0,0.28); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 10px;
}
.cc-brick__eventclan { font-family: var(--font-ui); font-size: 14px; color: var(--accent); }
.cc-brick__eventclan a { color: inherit; text-decoration: none; }
.cc-brick__eventclan a:hover { text-decoration: underline; }
.cc-cm__poststats { margin-top: 12px; }
.cc-cm__poststats > .cc-brick__skills { margin-top: 0; }
.cc-brick__stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 68px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a8f9c;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  padding: 10px 14px;
}
.cc-brick__stat b { color: #f4f6fb; font-family: var(--font-game); font-size: 20px; font-weight: 400; font-variant-numeric: tabular-nums; }
.cc-brick__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--btn-sm-pad);
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: var(--btn-sm-font);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e4e6ee;
  background: var(--raised);
  border: 1px solid transparent;
  box-shadow: var(--raised-shadow);
  text-shadow: var(--raised-text);
  text-decoration: none;
  transition: color .2s, background .2s, transform .12s;
}
.cc-brick__link svg { width: 14px; height: 14px; }
.cc-brick__link:hover { color: #fff; background: var(--raised-hover); transform: translateY(-1px); }
.cc-brick__link:active { transform: translateY(0); box-shadow: var(--pressed-shadow); }
.cc-brick__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}
.cc-brick__id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cc-brick__avatar { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(90, 90, 110, 0.35); background: #1a1a1e; }
.cc-brick__avatar--fallback { padding: 0; }
.cc-brick__avatar--reddit { display: grid; place-items: center; background: #ff4500; border-color: rgba(255,120,60,0.4); color: #ff4500; padding: 0; overflow: hidden; }
.cc-brick__avatar--reddit svg { width: 100%; height: 100%; padding: 1px; }
.cc-brick__idbody { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.cc-brick__author { font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: var(--text); letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-brick__authorsub { font-family: var(--font-ui); font-size: 12px; color: var(--text-muted); letter-spacing: 0.02em; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-brick__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cc-brick__comments {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: var(--btn-sm-pad);
  color: #c6d0ff;
  text-shadow: var(--raised-text);
  font-family: var(--font-ui);
  font-size: var(--btn-sm-font);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: var(--raised-shadow);
  transition: color .2s, background .2s, transform .12s;
}
.cc-brick__comments svg { width: 14px; height: 14px; }
.cc-brick__comments:hover { color: #fff; background: var(--raised-hover); transform: translateY(-1px); }
.cc-brick__comments:active { transform: translateY(0); box-shadow: var(--pressed-shadow); }
.cc-brick__commentcount { font-weight: 400; }
@media (max-width: 640px) { .cc-brickwall { columns: 1; } }

.cc-brickwall.is-masonry { columns: unset; column-gap: normal; display: flex; align-items: flex-start; gap: 14px; position: relative; }
.cc-brickwall.is-masonry .cc-brickwall__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cc-brickwall.is-masonry .cc-brick { margin-bottom: 0; width: 100%; }

.cc-cm-backdrop { position: fixed; inset: 0; background: rgba(4,4,6,0.72); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 210; padding: 20px; }
.cc-cm-backdrop.is-open { display: flex; }
.cc-cm { width: 100%; max-width: 900px; max-height: 88vh; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(43, 45, 57, 0.96) 0%, rgba(26, 27, 35, 0.98) 100%), radial-gradient(ellipse 120% 90% at 15% 0%, rgba(100, 120, 255, 0.08), transparent 60%), var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; }
.cc-cm__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
.cc-cm__title { font-family: var(--font-display); font-size: 20px; margin: 0; color: var(--text); line-height: 1.2; overflow-wrap: anywhere; }
.cc-cm__close { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md); border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; transition: background .2s, color .2s; }
.cc-cm__close svg { width: 16px; height: 16px; }
.cc-cm__close:hover { background: rgba(255,255,255,0.06); color: var(--text); }

.cc-cm__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; flex: 1; }
.cc-cm__postcol { overflow-y: auto; border-right: 1px solid var(--border); min-height: 0; }
.cc-cm__post { padding: 18px 22px; }
.cc-cm__side { display: flex; flex-direction: column; min-height: 0; }
.cc-cm__posthead { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.cc-cm__postkind { font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.cc-cm__postimg { height: 190px; margin: 0 0 12px; border-radius: var(--radius-md); background-size: cover; background-position: center; border: 1px solid var(--border); }
.cc-cm__postbody { margin: 0; font-family: var(--font-read); font-size: 16px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.cc-cm__list { flex: 1; overflow-y: auto; min-height: 90px; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.cc-cm__loading, .cc-cm__empty { color: var(--text-muted); font-size: 14px; text-align: center; margin: 20px 0; }
.cc-cm__thread { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cc-cm__thread:last-child { border-bottom: 0; padding-bottom: 0; }
.cc-cm__item { display: flex; gap: 11px; }
.cc-cm__item--reply { border-left: 2px solid rgba(100,120,255,0.25); padding-left: 11px; }
.cc-cm__avatar { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; flex-shrink: 0; background: #1a1a1e; border: 1px solid rgba(90,90,110,0.35); }
.cc-cm__avatar--ph { display: grid; place-items: center; font-family: var(--font-ui); font-weight: 400; color: #c8a878; background: #3a3126; }
.cc-cm__avatar--reddit { display: grid; place-items: center; background: #ff4500; border-color: rgba(255,120,60,0.4); color: #ff4500; overflow: hidden; padding: 0; }
.cc-cm__avatar--reddit svg { width: 100%; height: 100%; }
.cc-cm__main { min-width: 0; flex: 1; }
.cc-cm__meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.cc-cm__name { font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: var(--text); }
.cc-cm__when { font-size: 12px; color: var(--text-muted); }
.cc-cm__quote { display: block; margin: 0 0 6px; padding: 6px 10px; border-left: 2px solid var(--accent-dim); background: rgba(100,120,255,0.08); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-ui); font-size: 12px; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }
.cc-cm__quote b { color: var(--accent); font-weight: 600; margin-right: 6px; }
.cc-cm__body { margin: 0; font-family: var(--font-read); font-size: 16px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.cc-cm__cactions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.cc-cm__thumb { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 4px; background: rgba(100,120,255,0.14); border: 1px solid rgba(100,120,255,0.45); cursor: pointer; color: #cdd4ff; font-family: var(--font-data); font-size: 12px; transition: background .15s, border-color .15s, color .15s; }
.cc-cm__thumb svg { width: 14px; height: 14px; }
.cc-cm__thumb:hover { border-color: rgba(120,140,255,0.85); color: #fff; }
.cc-cm__thumb.is-on { background: rgba(100,120,255,0.3); border-color: rgba(120,140,255,0.9); color: #fff; }
.cc-cm__reply { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-muted); font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; transition: color .15s; }
.cc-cm__reply:hover { color: var(--accent); }

.cc-cm__form { border-top: 1px solid var(--border); padding: 12px 20px 16px; display: flex; flex-direction: column; gap: 9px; }
.cc-cm__replybar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-left: 2px solid var(--accent); background: rgba(100,120,255,0.1); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-ui); font-size: 12px; color: var(--text-dim); }
.cc-cm__replybar b { color: var(--accent); }
.cc-cm__replycancel { display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: none; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); }
.cc-cm__replycancel svg { width: 13px; height: 13px; }
.cc-cm__replycancel:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.cc-cm__inputrow { position: relative; }
.cc-cm__field {
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--well-shadow);
  padding: 11px 12px 48px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.cc-cm__field:focus-within { border-color: var(--accent); box-shadow: var(--well-focus); }
.cc-cm__field .cc-cm__txt {
  width: 100%;
  min-height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-family: var(--font-field);
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  outline: none;
}
.cc-cm__fieldbtns { position: absolute; right: 9px; bottom: 9px; display: flex; align-items: center; gap: 8px; }
.cc-cm__send {
  height: 32px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms;
}
.cc-cm__send:hover { background: var(--accent-hover); }
.cc-cm__send:disabled { opacity: 0.55; cursor: default; }
.cc-cm__emojibtn { position: static; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border-strong); background: rgba(0,0,0,0.3); border-radius: var(--radius-sm); color: var(--text-dim); line-height: 1; cursor: pointer; transition: color .15s, border-color .15s; }
.cc-cm__emojibtn svg { width: 18px; height: 18px; display: block; }
.cc-cm__emojibtn:hover { color: var(--text); border-color: var(--accent-dim); }
.cc-cm__emoji { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; width: min(320px, 100%); max-height: 216px; overflow-y: auto; overflow-x: hidden; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.8); }
.cc-cm__emojiitem { border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1; padding: 5px; border-radius: var(--radius-sm); transition: background .12s; }
.cc-cm__emojiitem:hover { background: rgba(255,255,255,0.08); }
.cc-cm__msg { min-height: 16px; font-size: 13px; }
.cc-cm__msg.is-err { color: var(--danger); }
.cc-cm__msg.is-ok { color: var(--ok); }
.cc-cm__note { margin: 0; font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.cc-cm__note a { color: var(--accent); }
@media (max-width: 720px) {
  .cc-cm { max-width: 480px; }
  .cc-cm__body { grid-template-columns: 1fr; overflow-y: auto; }
  .cc-cm__postcol { overflow: visible; border-right: 0; border-bottom: 1px solid var(--border); }
  .cc-cm__list { overflow: visible; }
}

.cc-wm-backdrop { position: fixed; inset: 0; background: rgba(4,4,6,0.72); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 200; padding: 12px; }
.cc-wm-backdrop.is-open { display: flex; }
body.cc-modal-open { overflow: hidden; }
body.cc-modal-open .app-main { position: relative; z-index: 90; }
.cc-wm { width: 100%; max-width: 560px; background: var(--surface); border: 0; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.9); border-radius: var(--radius-lg); padding: 20px 24px; max-height: calc(100dvh - 24px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.cc-wm::-webkit-scrollbar { width: 0; height: 0; display: none; }
.cc-wm__title { font-family: var(--font-display); font-size: 26px; margin: 0 0 10px; color: var(--text); }
.cc-wm__note { font-family: var(--font-read); font-size: 16px; color: var(--text-dim); line-height: 1.3; margin: 2px 0 10px; }
.cc-wm__note a { color: var(--accent); }
.cc-wm-field { margin-bottom: 10px; }
.cc-wm-lbl { display: block; font-family: var(--font-data); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px; }
.cc-wm-opt { margin-left: 4px; color: var(--text-muted); }
.cc-wm-inp, .cc-wm-txt {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--well-shadow);
  color: var(--text);
  font-family: var(--font-field);
  font-size: 18px;
  line-height: 1.2;
  transition: border-color 120ms, box-shadow 120ms;
}
.cc-wm-inp::placeholder, .cc-wm-txt::placeholder { color: #6c7085; }
.cc-wm-inp:focus, .cc-wm-txt:focus { outline: none; border-color: var(--accent); box-shadow: var(--well-focus); }
.cc-wm-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0b0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"), var(--well);
  background-repeat: no-repeat, no-repeat;
  background-position: right 13px center, 0 0;
}
.cc-wm-select option { background: #17171b; color: var(--text); }
.cc-wm-txt { height: auto; min-height: 76px; padding: 10px 14px; line-height: 1.3; resize: vertical; }
.cc-wm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .cc-wm-row { grid-template-columns: 1fr; } }

.cc-wm-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-wm-pill { display: inline-flex; align-items: center; cursor: pointer; }
.cc-wm-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-wm-pill span {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--well); box-shadow: var(--well-shadow);
  font-family: var(--font-ui); font-size: 15px; line-height: 1; color: var(--text-dim);
  transition: border-color 140ms, color 140ms;
}
.cc-wm-pill__ico { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.cc-wm-pill:hover span { border-color: var(--border-strong); color: var(--text); }
.cc-wm-pill input:checked + span { background: var(--carved); border-color: transparent; box-shadow: var(--carved-shadow); color: var(--accent); text-shadow: var(--carved-text); }
.cc-wm-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.cc-wm-rsn, .cc-wm-upload { display: flex; gap: 8px; }
.cc-wm-rsn .cc-wm-inp, .cc-wm-upload .cc-wm-inp { flex: 1; min-width: 0; }
.cc-wm-rsn__btn, .cc-wm-upload__btn {
  flex: 0 0 auto; height: 42px; padding: 0 14px;
  border-radius: var(--radius-lg); border: 1px solid #3d49ac;
  background: linear-gradient(180deg, rgba(86,101,221,0.32), rgba(69,82,196,0.22));
  color: #dfe4ff; font-family: var(--font-ui); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; transition: background 140ms;
}
.cc-wm-rsn__btn:hover:not(:disabled), .cc-wm-upload__btn:hover:not(:disabled) { background: linear-gradient(180deg, rgba(86,101,221,0.45), rgba(69,82,196,0.32)); }
.cc-wm-rsn__btn:disabled, .cc-wm-upload__btn:disabled { opacity: 0.6; cursor: default; }
.cc-wm-rsn__out { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; overflow: hidden; transition: grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease, margin-top 320ms ease; }
.cc-wm-rsn__inner { min-height: 0; }
.cc-wm-rsn__out.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .cc-wm-rsn__out { transition: none; } }
.cc-wm-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cc-wm-stat { text-align: center; background: rgba(0,0,0,0.28); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 4px; }
.cc-wm-stat__v { display: block; font-family: var(--font-data); font-size: 16px; color: var(--text); }
.cc-wm-stat__k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 2px; }
.cc-wm-opt-row { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 14px; color: var(--text-dim); cursor: pointer; }
.cc-wm-opt-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.cc-wm-opt-row input:disabled { cursor: default; }
@media (max-width: 520px) { .cc-wm-stats { grid-template-columns: repeat(3, 1fr); } }
.cc-wm__msg { min-height: 0; font-family: var(--font-read); font-size: 16px; margin: 0 0 8px; }
.cc-wm__msg:empty { margin: 0; }
.cc-wm__msg.is-err { color: var(--danger); }
.cc-wm__msg.is-ok { color: var(--ok); }
.cc-wm__actions { display: flex; justify-content: flex-end; gap: 10px; }
.cc-wm__actions { margin-top: 4px; }
.cc-wm__btn { height: 40px; padding: 0 20px; border-radius: var(--radius-md); border: 1px solid transparent; background: var(--raised); box-shadow: var(--raised-shadow); color: #e4e6ee; font-family: var(--font-ui); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: var(--raised-text); cursor: pointer; transition: background .2s, color .2s, transform .12s; }
.cc-wm__btn:hover { color: #fff; background: var(--raised-hover); transform: translateY(-1px); }
.cc-wm__btn.primary { background: var(--raised-primary); box-shadow: var(--raised-primary-shadow); color: #fff; }
.cc-wm__btn.primary:hover { background: var(--raised-primary-hover); }
.cc-wm__btn:active { transform: translateY(0); box-shadow: var(--pressed-shadow); }

.cc-bot__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.cc-bot__cta { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: var(--radius-lg); padding: 12px 24px; font-family: var(--font-ui); font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--accent-hover); box-shadow: 0 8px 24px -8px rgba(100, 120, 255, 0.5); transition: background .2s; }
.cc-bot__cta:hover { background: var(--accent-hover); }
.cc-bot__ghost { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--radius-lg); padding: 12px 24px; font-family: var(--font-ui); font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; transition: border-color .2s; }
.cc-bot__ghost:hover { border-color: var(--accent); }
.cc-bot__ghost svg { width: 18px; height: 18px; flex-shrink: 0; }

.cc-bot__sec { padding: 26px 34px; border-bottom: 1px solid rgba(150, 160, 200, 0.1); }
.cc-bot__sec:last-child, .cc-bot__sec:has(+ .cc-why__end) { border-bottom: 0; }
.cc-bot__head { display: grid; justify-items: center; text-align: center; padding-top: 18px; }
.cc-bot__head .cc-why__key { margin: 0 0 12px; font-size: clamp(1.3rem, 2.2vw, 1.9rem); text-wrap: balance; }
.cc-bot__head .cc-bot__coltext { max-width: 620px; margin: 0; }

.cc-bot__offer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 40px; padding-top: 44px; padding-bottom: 48px; }
.cc-bot__col { display: grid; grid-row: span 2; grid-template-rows: subgrid; justify-items: center; align-content: start; text-align: center; min-width: 0; }
.cc-bot__col .cc-why__key { align-self: end; margin: 0 0 22px; font-size: clamp(1.3rem, 2.2vw, 1.9rem); text-wrap: balance; }
.cc-bot__coltext { max-width: 460px; margin: 0 0 22px; text-wrap: balance; font-family: var(--font-read); font-size: 20px; line-height: 0.95; color: var(--text-dim); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.cc-bot__ticks { display: flex; flex-direction: column; gap: 8px; width: min(100%, 460px); margin: 0; padding: 24px 30px; list-style: none; text-align: left; background: linear-gradient(180deg, rgba(43, 45, 57, 0.78) 0%, rgba(28, 29, 37, 0.84) 100%); border-radius: 4px; box-shadow: var(--card-shadow); }
.cc-bot__ticks li { display: flex; align-items: center; gap: 14px; font-family: var(--font-read); font-size: 21px; line-height: 1.15; color: var(--text); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.cc-bot__ticks img { flex: none; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.6)); }
.cc-bot__offercta { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 36px; }
@media (max-width: 800px) {
  .cc-bot__offercta { margin-top: 0; }
  .cc-bot__offer { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 40px; }
  .cc-bot__col { grid-row: auto; grid-template-rows: none; }
}

.cc-bot__rows { margin: 0 -34px; container-type: inline-size; }
.cc-botrow { --mock-inset: max(0px, calc(30cqw - 318.4px)); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-template-areas: "text mock"; gap: 48px; align-items: center; padding: 44px 40px; }
.cc-botrow + .cc-botrow { border-top: 1px solid rgba(150, 160, 200, 0.08); }
.cc-botrow--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); grid-template-areas: "mock text"; }
.cc-botrow__text { grid-area: text; min-width: 0; padding-left: var(--mock-inset); }
.cc-botrow:not(.cc-botrow--flip) .cc-botrow__text { text-align: right; }
.cc-botrow:not(.cc-botrow--flip) .cc-botrow__body { margin-left: auto; }
.cc-botrow--flip .cc-botrow__text { justify-self: end; padding-left: 0; padding-right: var(--mock-inset); }
.cc-botrow__text .cc-why__key { margin: 0 0 12px; font-size: clamp(1.35rem, 2.1vw, 1.95rem); text-wrap: balance; }
.cc-botrow__body { margin: 0; max-width: 480px; font-family: var(--font-read); font-size: 23px; line-height: 1.05; color: var(--text-dim); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.cc-botrow__mock { grid-area: mock; width: 100%; max-width: 560px; justify-self: center; pointer-events: none; user-select: none; }
.cc-botrow__mock .cc-dc { box-shadow: 0 28px 56px -24px rgba(0, 0, 0, 0.95), 0 10px 20px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
@media (max-width: 900px) {
  .cc-botrow, .cc-botrow--flip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "mock"; gap: 20px; padding: 36px 34px; }
  .cc-bot__ticks { padding: 20px 22px; }
  .cc-botrow__body { max-width: none; }
  .cc-botrow__text, .cc-botrow--flip .cc-botrow__text, .cc-botrow:not(.cc-botrow--flip) .cc-botrow__text { justify-self: center; width: 100%; max-width: 560px; padding: 0; text-align: left; }
}
@media (max-width: 640px) {
  .cc-bot__rows { margin: 0 -20px; }
  .cc-botrow, .cc-botrow--flip { padding: 30px 20px; }
  .cc-bot__coltext { font-size: 19px; }
  .cc-botrow__body { font-size: 20px; }
  .cc-bot__ticks li { font-size: 19px; }
}

.cc-dc { background: #313338; border-radius: 8px; padding: 14px 16px 16px; font-family: var(--font-sans); font-size: 14px; line-height: 1.375; color: #dbdee1; text-align: left; overflow-wrap: anywhere; }
.cc-dc p { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.375; color: #dbdee1; }
.cc-dc strong { font-weight: 700; color: #f2f3f5; }
.cc-dc code { background: #1e1f22; border-radius: 4px; padding: 0 3px; font-family: var(--font-data); font-size: 12px; }
.cc-dc__cmd { position: relative; display: flex; align-items: center; gap: 4px; margin: 0 0 4px 56px; font-size: 13px; color: #949ba4; white-space: nowrap; }
.cc-dc__cmd::before { content: ""; position: absolute; left: -36px; top: 9px; width: 30px; height: 10px; border-left: 2px solid #4e5058; border-top: 2px solid #4e5058; border-top-left-radius: 6px; }
.cc-dc__cmd b { font-weight: 500; color: #dbdee1; }
.cc-dc__slash { color: #00a8fc; }
.cc-dc__msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 16px; }
.cc-dc__ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #1e1f22; }
.cc-dc__mini { display: inline-grid; place-items: center; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--c); color: #fff; font-size: 9px; font-weight: 700; }
.cc-dc__main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.cc-dc__main > * { max-width: 100%; }
.cc-dc__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: -2px; }
.cc-dc__name { font-weight: 500; font-size: 15px; color: #f2f3f5; }
.cc-dc__app { background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; padding: 0 4px; border-radius: 3px; }
.cc-dc__time { font-size: 12px; color: #949ba4; }
.cc-dc-at { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.cc-dc-time { background: rgba(255, 255, 255, 0.06); border-radius: 3px; padding: 0 2px; }
.cc-dc-link { color: #00a8fc; }
.cc-dc .cc-dc-sub { font-size: 12px; color: #949ba4; }
.cc-dc-embed, .cc-dc-box { width: 100%; max-width: 432px; display: grid; gap: 8px; background: #2b2d31; border-left: 4px solid var(--c, #6478ff); border-radius: 4px; padding: 10px 16px 14px 12px; }
.cc-dc-box { border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.04); border-left: 4px solid var(--c, #6478ff); padding: 14px 16px; }
.cc-dc-box h3 { font-family: var(--font-sans); font-size: 20px; font-weight: 700; line-height: 1.3; color: #f2f3f5; margin: 0; text-transform: none; letter-spacing: 0; }
.cc-dc-box h4 { font-family: var(--font-sans); font-size: 16px; font-weight: 700; line-height: 1.3; color: #f2f3f5; margin: 0; }
.cc-dc-embed__author { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #f2f3f5; }
.cc-dc-embed__author .cc-dc__mini { width: 24px; height: 24px; font-size: 11px; }
.cc-dc-embed__title { font-size: 16px; font-weight: 600; color: #f2f3f5; }
.cc-dc-embed__desc { font-size: 14px; }
.cc-dc-board { display: grid; gap: 2px; }
.cc-dc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.cc-dc-field { font-size: 14px; min-width: 0; }
.cc-dc-field b { display: block; font-weight: 600; color: #f2f3f5; margin-bottom: 2px; }
.cc-dc-field--wide { grid-column: 1 / -1; }
.cc-dc-field pre { margin: 2px 0 0; background: #1e1f22; border: 1px solid #1a1b1e; border-radius: 4px; padding: 6px 8px; font-family: var(--font-data); font-size: 12px; color: #dbdee1; white-space: pre-wrap; }
.cc-dc-quote { display: block; border-left: 4px solid #4e5058; padding-left: 10px; }
.cc-dc-embed__foot { font-size: 12px; color: #949ba4; }
.cc-dc-sep { height: 1px; background: #3f4147; margin: 2px 0; }
.cc-dc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-dc-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 8px; background: #4e5058; color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; }
.cc-dc-btn--primary { background: #5865f2; }
.cc-dc-btn--success { background: #248046; }
.cc-dc-btn--danger { background: #da373c; }
.cc-dc-reacts { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-dc-reacts span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 8px; background: #2b2d31; border: 1px solid transparent; font-size: 14px; color: #b5bac1; }
.cc-dc-reacts .is-me { background: rgba(88, 101, 242, 0.15); border-color: #5865f2; color: #c9cdfb; }
@media (max-width: 600px) {
  .cc-dc { padding: 10px; }
  .cc-dc-embed, .cc-dc-box { padding: 10px 12px; }
  .cc-dc-btn { padding: 0 12px; }
  .cc-dc__msg { grid-template-columns: 32px minmax(0, 1fr); gap: 0 8px; }
  .cc-dc__ava { width: 32px; height: 32px; }
  .cc-dc__cmd { margin-left: 40px; white-space: normal; flex-wrap: wrap; }
  .cc-dc__cmd::before { left: -26px; width: 22px; }
  .cc-dc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) { .cc-bot__sec { padding-left: 20px; padding-right: 20px; } }

.cc-article-wrap { position: relative; z-index: 1; max-width: 1280px; margin: 28px auto 0; padding: 0 24px; }
@media (max-width: 640px) { .cc-article-wrap { padding: 0 12px; margin-top: 14px; } }

.cc-article {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(150, 160, 200, 0.18);
  background:
    linear-gradient(180deg, rgba(43, 45, 57, 0.92) 0%, rgba(25, 26, 33, 0.95) 100%),
    radial-gradient(ellipse 120% 90% at 15% 0%, rgba(100, 120, 255, 0.09), transparent 60%);
  box-shadow:
    0 44px 100px -34px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.cc-article__hero { position: relative; }
.cc-article__hero-media {
  position: relative;
  height: clamp(190px, 26vw, 320px);
  background-size: cover;
  background-position: center;
}
.cc-article__hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(25, 26, 33, 0.0) 0%,
    rgba(25, 26, 33, 0.22) 30%,
    rgba(25, 26, 33, 0.62) 55%,
    rgba(25, 26, 33, 0.9) 78%,
    rgba(25, 26, 33, 1) 100%);
}
.cc-article__hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 clamp(24px, 5vw, 56px) 0;
  margin-top: clamp(-96px, -9vw, -56px);
}
.cc-article--nocover .cc-article__hero-inner { padding-top: 34px; margin-top: 0; }
.cc-article__author { color: var(--text-dim); }

.cc-article__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; align-items: center; font-family: var(--font-data); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; margin: 10px 0 0; }
.cc-article__clan { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-weight: 600; text-decoration: none; }
.cc-article__clan:hover { color: var(--accent-hover); }
.cc-article__clan-logo { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.15); }
.cc-article__date { color: var(--text-dim); }
.cc-article__meta-sep { color: var(--text-muted); }
.cc-article__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.0;
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.cc-article__body-wrap { padding: 28px clamp(24px, 5vw, 64px) 52px; }
.cc-article__body {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-read);
  font-size: 18px;
  line-height: 1.95;
  color: #e4e4ec;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.cc-article__body > *:first-child { margin-top: 0; }
.cc-article__body h2 { font-family: var(--font-display); font-size: 26px; line-height: 1.2; margin: 40px 0 14px; color: var(--text); text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.cc-article__body h3 { font-family: var(--font-display); font-size: 20px; margin: 30px 0 12px; color: var(--text); text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.cc-article__body p { margin: 0 0 20px; }
.cc-article__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cc-article__body a:hover { color: var(--accent-hover); }
.cc-article__body ul { list-style: disc; margin: 0 0 20px; padding-left: 26px; }
.cc-article__body ol { list-style: decimal; margin: 0 0 20px; padding-left: 26px; }
.cc-article__body li { margin-bottom: 8px; }
.cc-article__body blockquote { border-left: 3px solid var(--accent); padding: 6px 0 6px 18px; margin: 0 0 22px; color: var(--text-dim); font-style: italic; text-shadow: none; }
.cc-article__body img { max-width: 100%; border-radius: var(--radius-md); margin: 10px 0 26px; border: 1px solid rgba(150,160,200,0.14); }
.cc-article__body hr { border: none; border-top: 1px solid rgba(150,160,200,0.18); margin: 34px 0; }
.cc-article__body pre { background: rgba(0,0,0,0.4); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; overflow-x: auto; font-size: 14px; margin: 0 0 20px; text-shadow: none; }

.cc-article-more { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 48px 24px 70px; }
.cc-article-more__head { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.cc-article-more__title { font-family: var(--font-display); font-size: 20px; margin: 0; color: var(--text); white-space: nowrap; }
.cc-article-more__rule { flex: 1; height: 3px; border-radius: 2px; background: rgba(150, 160, 200, 0.28); }
.cc-article-more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .cc-article-more__grid { grid-template-columns: 1fr; } }
.cc-article-more .cc-newscard { border-radius: var(--radius-lg); box-shadow: 0 22px 48px -20px rgba(0,0,0,0.9), 0 4px 14px -6px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.25); }
.cc-article-more .cc-newscard:hover { box-shadow: 0 30px 64px -22px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,0,0,0.25); }

.cc-editor { border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(0,0,0,0.2); overflow: hidden; }
.cc-editor__toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.25); }
.cc-editor__btn { min-width: 30px; height: 30px; padding: 0 7px; border: 1px solid transparent; background: transparent; color: var(--text-dim); border-radius: 5px; cursor: pointer; font-size: 14px; }
.cc-editor__btn:hover { color: var(--text); background: rgba(255,255,255,0.06); border-color: var(--border); }
.cc-editor__sep { width: 1px; background: var(--border); margin: 4px 4px; }
.cc-editor__area { min-height: 240px; padding: 16px; color: var(--text); font-size: 1rem; line-height: 1.65; outline: none; }
.cc-editor__area:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.cc-editor__area h2 { font-family: var(--font-display); font-size: 26px; margin: 18px 0 10px; }
.cc-editor__area h3 { font-family: var(--font-display); font-size: 20px; margin: 16px 0 8px; }
.cc-editor__area blockquote { border-left: 3px solid var(--accent); padding-left: 14px; color: var(--text-dim); margin: 0 0 14px; }
.cc-editor__area ul { list-style: disc; margin: 0 0 14px; padding-left: 24px; }
.cc-editor__area ol { list-style: decimal; margin: 0 0 14px; padding-left: 24px; }
.cc-editor__area li { margin-bottom: 6px; }
.cc-editor__area img { max-width: 100%; border-radius: var(--radius-md); margin: 8px 0; }
.cc-editor__emoji { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; border-top: 1px solid var(--border); background: rgba(0,0,0,0.25); }
.cc-editor__emojibtn { width: 34px; height: 34px; border: none; background: transparent; font-size: 19px; cursor: pointer; border-radius: 4px; }
.cc-editor__emojibtn:hover { background: rgba(255,255,255,0.08); }
.cc-news-cover { display: flex; gap: 14px; align-items: center; }
.cc-news-cover__preview { width: 120px; height: 72px; border-radius: var(--radius-md); border: 1px dashed var(--border); background-size: cover; background-position: center; flex-shrink: 0; }
.cc-news-cover__preview.has-img { border-style: solid; }
.cc-news-cover__controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-news-cover__status { font-size: 13px; color: var(--text-dim); }
.cc-field__opt { color: var(--text-muted); font-weight: 400; }

.dash-card--compact { padding: 16px; }
.dash-card--compact .dash-card__hint { margin-bottom: 12px; }
.tk-config-grid,
.bot-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 12px; align-items: end; }
.tk-config-grid > div,
.bot-grid > div { min-width: 0; }
.tk-config-grid label,
.bot-grid label { margin-bottom: 3px; }
.tk-config-grid .cc-select__trigger,
.tk-config-grid input,
.tk-config-grid select,
.tk-config-grid textarea,
.bot-grid .cc-select__trigger,
.bot-grid input,
.bot-grid select,
.bot-grid textarea { padding: 6px 9px; font-size: 16px; }
.tk-config-grid .cvb-check input,
.bot-grid .cvb-check input { padding: 0; }
.tk-config-check,
.bot-grid__checks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 33px; }
.tk-config-check .cvb-check,
.bot-grid__checks .cvb-check { font-size: 13px; margin: 0; }
.tk-config-wide,
.bot-grid__span2 { grid-column: span 2; }
.bot-grid__hint { grid-column: 1 / -1; margin: -4px 0 0; font-size: 12px; color: var(--text-muted); }
.ev-remind { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(0,0,0,0.18); }
.ev-remind__row { display: flex; align-items: center; gap: 14px; padding: 9px 12px; }
.ev-remind__row + .ev-remind__row { border-top: 1px solid var(--border); }
.ev-remind__main { flex: 1; min-width: 0; }
.ev-remind__title { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-remind__tag { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 5px; margin-left: 4px; }
.ev-remind__meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ev-remind__row input { width: 210px; flex: none; padding: 6px 9px; font-family: var(--font-sans); font-size: 16px; }
@media (max-width: 560px) { .ev-remind__row { flex-direction: column; align-items: stretch; } .ev-remind__row input { width: 100%; } }
@supports (-webkit-touch-callout: none) {
  input[type="datetime-local"], input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; min-height: 2.6rem; }
  input[type="datetime-local"]::-webkit-date-and-time-value, input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }
}
.voice-access { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.voice-access__row { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(0,0,0,0.18); }
.voice-access__row .cvb-check { margin: 0; font-size: 13px; }
.voice-access__row select { padding: 6px 9px; font-family: var(--font-sans); font-size: 16px; }
.voice-access__row .cc-field__help { margin: 0; font-size: 12px; }
@media (max-width: 720px) { .voice-access { grid-template-columns: 1fr; } }
.bot-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bot-card-head .cvb-check { margin: 0; font-size: 13px; }
@media (max-width: 720px) {
  .tk-config-grid, .bot-grid { grid-template-columns: 1fr 1fr; }
  .tk-config-wide, .bot-grid__span2 { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .tk-config-grid, .bot-grid { grid-template-columns: 1fr; } }
.dash-card--compact .tk-grid { gap: 8px; }
.dash-card--compact .tk-card { padding: 10px; }

[data-tk-form] input[type=text],
[data-tk-form] input[type=number],
[data-tk-form] input:not([type]),
[data-tk-form] textarea,
[data-tk-form] select,
.tk-field input[type=text],
.tk-config-grid input,
.tk-config-grid select {
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  font-family: var(--font-sans);
  padding: 7px 9px;
  color-scheme: dark;
}
[data-tk-form] select,
.tk-config-grid select { appearance: none; -webkit-appearance: none; cursor: pointer; }
[data-tk-form] select option,
.tk-config-grid select option { background: var(--surface-2); color: var(--text); }
[data-tk-form] input:focus,
[data-tk-form] textarea:focus,
[data-tk-form] select:focus,
.tk-field input:focus,
.tk-config-grid input:focus,
.tk-config-grid select:focus {
  outline: none;
  border-color: var(--border-strong);
}
[data-tk-form] textarea { resize: vertical; }

.cvb-block {
  display: block;
  padding: 8px 10px 10px;
}
.cvb-block__handle {
  float: right;
  margin: 0 0 0 8px;
}
.cvb-block__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  overflow: hidden;
}
.cvb-block__type {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.cvb-block__del {
  writing-mode: horizontal-tb;
  font-size: 11px;
  line-height: 1;
  margin-left: auto;
}
.cvb-block__toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  width: 14px;
}
.cvb-block__summary {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  display: none;
}
.cvb-block__head { cursor: pointer; }
.cvb-block.is-collapsed .cvb-block__head { margin-bottom: 0; }
.cvb-block.is-collapsed .cvb-block__summary { display: inline; }
.cvb-block.is-collapsed > :not(.cvb-block__handle):not(.cvb-block__head) { display: none; }
.cvb-block > :not(.cvb-block__handle):not(.cvb-block__head) {
  grid-column: auto;
}
.cvb-block input[type=text],
.cvb-block textarea,
.cvb-block select { padding: 6px 8px; margin-bottom: 4px; font-size: 16px; }
.cvb-block textarea { min-height: 46px; }

.tk-config-grid { gap: 8px 10px; margin-bottom: 12px; }
.tk-config-grid .csel__trigger,
.tk-config-grid input,
.tk-config-grid select { padding: 6px 9px; font-size: 16px; }

.tk-field { gap: 6px; align-items: center; padding: 6px; }
.tk-field .cvb-check { font-size: 11px; white-space: nowrap; }
.tk-fields { gap: 5px; }

[data-tk-form] .dash-cols { gap: 10px; }
[data-tk-form] label { margin-bottom: 2px; }
[data-tk-form] .mb-3 { margin-bottom: 8px; }

.cdash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.cdash-head__id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cdash-logo {
  width: 60px; height: 60px; min-width: 60px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: #fff; font-family: var(--font-display); font-size: 24px;
}
.cdash-logo img { width: 100%; height: 100%; object-fit: cover; }
.cdash-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 4px !important; }
.cdash-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cdash-head__actions .csel { width: 210px; }

.cdash-pill {
  font-family: var(--font-data); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  vertical-align: middle;
}
.cdash-pill--approved { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 34%, transparent); }
.cdash-pill--pending { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: color-mix(in srgb, var(--warning) 34%, transparent); }
.cdash-pill--rejected { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 34%, transparent); }

.cdash-switch {
  background: #0d0d10; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  color: var(--text); font-family: var(--font-sans); font-size: 13px; padding: 8px 12px; cursor: pointer;
}
.cdash-switch:focus { border-color: var(--accent); outline: none; }

.cdash-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cdash-note { font-family: var(--font-data); font-size: 11px; color: var(--text-dim); }

.cdash-bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; }
.cdash-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.cdash-bar__fill {
  width: 100%; max-width: 40px; min-height: 3px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: rgba(120, 135, 255, 0.16); transition: height 200ms ease;
}
.cdash-bar__fill.is-on { background: linear-gradient(180deg, #6472e8, #4552c4); box-shadow: 0 0 12px -2px rgba(100,120,255,0.5); }
.cdash-bar__label { flex: 0 0 auto; height: 14px; line-height: 14px; font-family: var(--font-data); font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.cdash-list { display: flex; flex-direction: column; }
.cdash-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 4px; border-top: 1px solid var(--border);
}
.cdash-row:first-child { border-top: 0; }
.cdash-row.is-over { opacity: 0.5; }
.cdash-row__main { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.cdash-row__title { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text); min-width: 0; }
.cdash-row__meta { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.cdash-star { color: var(--accent); }
.cdash-row__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cdash-link {
  font-family: var(--font-data); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none; background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 9px; cursor: pointer; transition: color 120ms, border-color 120ms, background 120ms;
}
.cdash-link:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,0.04); }
.cdash-link--danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.cdash-empty { font-size: 13px; color: var(--text-muted); margin: 4px 0; }
.cdash-manage { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); flex-shrink: 0; }

.cdash-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-color: color-mix(in srgb, var(--danger) 26%, var(--border)); }
.cdash-danger__btn {
  font-family: var(--font-ui); font-weight: 400; font-size: 14px;
  color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: var(--radius-md);
  padding: 8px 16px; cursor: pointer; transition: background 130ms, border-color 130ms;
}
.cdash-danger__btn:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); border-color: var(--danger); }

.cdash-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.cdash-modal__backdrop { position: fixed; inset: 0; background: rgba(6, 7, 10, 0.72); backdrop-filter: blur(3px); }
.cdash-modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 640px;
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(30,30,34,0.98) 0%, rgba(20,20,22,0.99) 100%);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9);
}
.cdash-modal__head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cdash-modal__title { font-family: var(--font-ui); font-size: 18px; color: var(--text); margin: 0; }
.cdash-modal__x { background: transparent; border: 0; color: var(--text-dim); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.cdash-modal__x:hover { color: var(--text); }
.cdash-modal__body { padding: 20px; overflow-y: auto; }
.dash-nav__sep { font-family: var(--font-data); font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); padding: 6px 12px 6px; border-top: 1px solid var(--border); margin-top: 12px; opacity: 0.85; }

.cdash-events { display: flex; flex-direction: column; gap: 8px; }
.cdash-event { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(0,0,0,0.22); }
.cdash-event.is-over { opacity: 0.6; }
.cdash-event__thumb {
  width: 64px; height: 44px; flex-shrink: 0; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-size: 16px;
}
.cdash-event__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cdash-event__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 15px; color: var(--text); }
.cdash-event__desc { margin: 2px 0 0; font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.cdash-event__live { color: var(--ok); }
.cdash-event__rsvps { font-size: 13px; color: var(--text-dim); }
.cdash-event__rsvps summary { cursor: pointer; font-family: var(--font-ui); font-size: 14px; color: var(--accent); width: max-content; }
.cdash-event__rsvps p { margin: 4px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
.cdash-event__status { display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--font-data); font-size: 11px; color: var(--text-muted); }
.cdash-event__status span.is-done { color: var(--ok); }
.cdash-event__status span.is-missed { color: var(--warning); }
.cdash-event .cdash-row__actions { align-self: center; }
.cdash-past { margin-top: 12px; }
.cdash-past summary { cursor: pointer; font-family: var(--font-data); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
@media (max-width: 560px) { .cdash-event { flex-wrap: wrap; } .cdash-event .cdash-row__actions { width: 100%; } }
.cdash-ally-member { align-items: center; }
.cdash-ally-member__logo {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: #fff; font-family: var(--font-display); font-size: 13px;
}
.cdash-ally-member__logo img { width: 100%; height: 100%; object-fit: cover; }
a.cdash-row__title { text-decoration: none; }
a.cdash-row__title:hover { text-decoration: underline; }
.cdash-invite { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cdash-invite select { min-width: 200px; }
a.cdash-seg__btn { text-decoration: none; display: inline-flex; align-items: center; }
.cdash-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cdash-filter {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  font-family: var(--font-data); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(0,0,0,0.2);
}
.cdash-filter span { color: var(--text-muted); }
.cdash-filter:hover { color: var(--text); border-color: var(--border-strong); }
.cdash-filter.is-on { color: var(--text); background: rgba(100,120,255,0.18); border-color: rgba(100,120,255,0.4); }
.cdash-apps { display: flex; flex-direction: column; gap: 10px; }
.cdash-app { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(0,0,0,0.22); }
.cdash-app__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cdash-app__who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cdash-app__name { font-weight: 600; font-size: 14px; color: var(--text); }
.cdash-app__unread { width: 8px; height: 8px; border-radius: 50%; background: #6478ff; }
.cdash-app__preview { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.cdash-app__answers { margin-top: 8px; }
.cdash-app__answers summary { cursor: pointer; font-family: var(--font-data); font-size: 11px; color: var(--text-muted); }
.cdash-app__answers dl { margin: 8px 0 0; display: grid; gap: 4px 0; }
.cdash-app__answers dt { font-size: 12px; color: var(--text-muted); }
.cdash-app__answers dd { margin: 0 0 6px; font-size: 13px; color: var(--text); white-space: pre-wrap; }
.cdash-app__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cdash-app__actions form { margin: 0; }
.cdash-link--ok:hover { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.cdash-tag--open { color: #aab4ff; border-color: rgba(100,120,255,0.4); }
.cdash-tag--accepted { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.cdash-tag--declined { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.cdash-tag--awaiting { color: #fbbf24; border-color: rgba(251,191,36,0.4); }
.cdash-intg__status { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }
.cdash-intg__state { display: inline-flex; align-items: center; font-family: var(--font-read); font-size: 15px; color: var(--text-muted); }
.cdash-intg__state.text-ok { color: var(--ok); }
.cdash-intg__state.text-danger { color: var(--danger); }
.cdash-intg__actions { display: inline-flex; gap: 6px; }
.cdash-linkinput { position: relative; }
.cdash-linkinput .cc-field__input { padding-left: 40px; }
.cdash-linkinput__ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; display: inline-flex; color: var(--text-dim); pointer-events: none; }
.cdash-linkinput__ico svg { width: 100%; height: 100%; }
.cdash-linkinput__ico--discord { color: #8b95f9; }
.cdash-linkinput__ico--reddit { color: #ff6a3d; }
.cdash-linkinput__ico--facebook { color: #5b8def; }
.cdash-attn {
  position: relative; overflow: hidden; padding: 16px 18px 6px;
  border-color: rgba(251,191,36,0.22);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(251,191,36,0.10), transparent 55%),
    linear-gradient(180deg, rgba(30,27,22,0.94), rgba(18,17,16,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 30px -18px rgba(0,0,0,0.8);
}
.cdash-attn::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(180deg, var(--warning), rgba(251,191,36,0.15)); }
.cdash-attn__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cdash-attn__title { margin: 0; font-family: var(--font-ui); font-weight: 400; font-size: 18px; line-height: 1.2; color: #f5d27a; }
.cdash-attn__count { min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-data); font-size: 11px; color: #1a1408; background: var(--warning); border-radius: var(--radius-md); }
.cdash-attn__list { list-style: none; margin: 0; padding: 0; }
.cdash-attn__item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.cdash-attn__item:first-child { border-top: 0; }
.cdash-attn__icon { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid rgba(251,191,36,0.22); background: rgba(251,191,36,0.07); color: var(--warning); }
.cdash-attn__icon svg { width: 19px; height: 19px; }
.cdash-attn__icon img { width: 22px; height: 22px; object-fit: contain; }
.cdash-attn__item--applications .cdash-attn__icon { border-color: rgba(100,120,255,0.3); background: rgba(100,120,255,0.1); color: #8d9bff; }
.cdash-attn__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cdash-attn__label { font-family: var(--font-read); font-size: 16px; line-height: 1.25; color: var(--text); }
.cdash-attn__detail { font-family: var(--font-data); font-size: 11px; line-height: 1.4; color: var(--text-muted); }
.cdash-attn__btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 84px; padding: 8px 14px;
  font-family: var(--font-ui); font-size: 14px; text-transform: uppercase; text-decoration: none; color: #f5d27a;
  border: 1px solid rgba(251,191,36,0.4); border-radius: var(--radius-md); background: rgba(251,191,36,0.08);
  transition: background 130ms, border-color 130ms, color 130ms;
}
.cdash-attn__btn:hover { color: #fff3d0; border-color: rgba(251,191,36,0.7); background: rgba(251,191,36,0.16); }
.cdash-attn__btn:focus-visible { outline: 2px solid var(--warning); outline-offset: 2px; }
@media (max-width: 520px) {
  .cdash-attn__item { flex-wrap: wrap; }
  .cdash-attn__body { flex-basis: calc(100% - 52px); }
  .cdash-attn__btn { margin-left: 52px; }
  .cdash-head__id { gap: 12px; }
  .cdash-logo { width: 48px; height: 48px; min-width: 48px; font-size: 20px; }
  .cdash-name { font-size: clamp(1.25rem, 6.4vw, 1.9rem); overflow-wrap: anywhere; }
}
.cdash-dock { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; }
.cdash-act-form { margin: 0; display: flex; flex: 1 1 116px; min-width: 0; }
.cdash-act {
  flex: 1 1 116px; min-width: 0;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 92px; padding: 12px 10px; text-align: center; text-decoration: none; cursor: pointer;
  font: inherit; color: var(--text); width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(0,0,0,0.22);
  transition: border-color 130ms, background 130ms, transform 130ms;
}
.cdash-act:hover { border-color: rgba(100,120,255,0.45); background: rgba(100,120,255,0.08); }
.cdash-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cdash-act svg, .cdash-act img { width: 22px; height: 22px; color: #8d9bff; object-fit: contain; margin-bottom: 2px; }
.cdash-act__icons { display: inline-flex; gap: 6px; }
.cdash-act__label { font-family: var(--font-ui); font-size: 16px; line-height: 1.2; }
.cdash-act__meta { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.cdash-act__meta.text-ok { color: var(--ok); }
.cdash-act__meta.text-danger { color: var(--danger); }
.cdash-act__badge {
  position: absolute; top: 8px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #6478ff; color: #fff; font-family: var(--font-data); font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cdash-act--hot { border-color: rgba(100,120,255,0.5); background: linear-gradient(180deg, rgba(100,120,255,0.2), rgba(69,82,196,0.12)); }
.cdash-act--hot .cdash-act__meta { color: #aab4ff; }
.cdash-act.is-off { cursor: default; opacity: 0.6; }
.cdash-act.is-off:hover { border-color: var(--border); background: rgba(0,0,0,0.22); }
.cdash-act[aria-busy="true"] { opacity: 0.7; cursor: progress; }

.cdash-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 13px; }
.cdash-kpi {
  flex: 1 1 118px;
  display: flex; flex-direction: column; gap: 6px; padding: 14px 14px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(28,28,32,0.92) 0%, rgba(20,20,22,0.92) 100%);
}
.cdash-kpi__key { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.cdash-kpi__val { font-family: var(--font-data); font-size: 26px; font-weight: 500; color: var(--text); line-height: 1; }
.cdash-kpi__sub { font-family: var(--font-data); font-size: 11px; color: var(--text-dim); }
.cdash-delta { font-family: var(--font-data); color: var(--text-dim); }
.cdash-delta.is-up, .cdash-mini__val.is-up { color: #8d9bff; }
.cdash-delta.is-down, .cdash-mini__val.is-down { color: #fbbf24; }

.cdash-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(0,0,0,0.3); }
.cdash-seg__btn {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em; color: var(--text-dim);
  background: transparent; border: 0; border-radius: var(--radius-sm); padding: 5px 11px; cursor: pointer;
  transition: color 120ms, background 120ms;
}
.cdash-seg__btn:hover { color: var(--text); }
.cdash-seg__btn.is-on { color: var(--text); background: rgba(100,120,255,0.2); box-shadow: inset 0 0 0 1px rgba(100,120,255,0.35); }
.cdash-range-sum { margin: -6px 0 12px; }
.cdash-bars--dense { gap: 3px; }
.cdash-bars--dense .cdash-bar { gap: 6px; }
.cdash-bars--dense .cdash-bar__label { white-space: nowrap; font-size: 9px; height: 11px; line-height: 11px; }
.cdash-bars--short { height: 80px; margin-top: 14px; }

.cdash-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px; }
.cdash-minis--2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
.cdash-mini { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(0,0,0,0.22); min-width: 0; }
.cdash-mini__val { font-family: var(--font-data); font-size: 18px; font-weight: 500; color: var(--text); line-height: 1.1; }
.cdash-mini__key { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

.cdash-line { position: relative; height: 150px; padding-left: 44px; }
.cdash-line svg { width: 100%; height: 130px; display: block; overflow: visible; }
.cdash-line__y { position: absolute; left: 0; font-family: var(--font-data); font-size: 11px; color: var(--text-muted); }
.cdash-line__y--max { top: 4px; }
.cdash-line__y--min { top: 112px; }
.cdash-line__x { display: flex; justify-content: space-between; font-family: var(--font-data); font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.cdash-legend { display: flex; gap: 12px; align-items: center; }
.cdash-legend__item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-data); font-size: 11px; color: var(--text-dim); }
.cdash-legend__item::before { content: ""; width: 10px; height: 10px; border-radius: 2px; }
.cdash-legend__item--in::before { background: #6478ff; }
.cdash-legend__item--out::before { background: #fbbf24; }

.cdash-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 720px) { .cdash-split { grid-template-columns: 1fr; } }
.cdash-diverge { display: flex; gap: 5px; height: 170px; }
.cdash-diverge__col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cdash-diverge__up, .cdash-diverge__down { width: 100%; height: 72px; display: flex; justify-content: center; }
.cdash-diverge__up { align-items: flex-end; border-bottom: 1px solid var(--border-strong); }
.cdash-diverge__down { align-items: flex-start; margin-bottom: 6px; }
.cdash-diverge__in, .cdash-diverge__out { width: 100%; max-width: 26px; }
.cdash-diverge__in { background: linear-gradient(180deg, #7c8cff, #4552c4); border-radius: 3px 3px 0 0; }
.cdash-diverge__out { background: linear-gradient(180deg, #d99a12, #fbbf24); border-radius: 0 0 3px 3px; }
.cdash-diverge .cdash-bar__label { white-space: nowrap; font-size: 9px; height: 11px; line-height: 11px; }
.cdash-subhead { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px; }
.cdash-moves { display: flex; flex-direction: column; }
.cdash-move { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); }
.cdash-move:first-of-type { border-top: 0; }
.cdash-move__rsn { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cdash-tag { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
.cdash-tag--in { color: #aab4ff; border-color: rgba(100,120,255,0.4); background: rgba(100,120,255,0.1); }
.cdash-tag--out { color: #fbbf24; border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.08); }
.cdash-tag--discord { color: #aab4ff; border-color: rgba(88,101,242,0.45); background: rgba(88,101,242,0.12); }
.cdash-tag--web { color: var(--text-dim); }

.cdash-rank { list-style: none; margin: 0; padding: 0; }
.cdash-rank li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.cdash-rank li:first-child { border-top: 0; }
.cdash-rank__n { width: 18px; font-family: var(--font-data); font-size: 11px; color: var(--text-muted); }
.cdash-rank__name { flex: 1; min-width: 0; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdash-rank__val { font-family: var(--font-data); font-size: 12px; color: #8d9bff; }
.dash-cols .cdash-span { grid-column: 1 / -1; }

.cc-error {
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  position: relative;
  z-index: 1;
}
.cc-error__card {
  width: 100%;
  max-width: 480px;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px 32px 36px;
}
.cc-error__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto 18px;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
}
.cc-error__code {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
  margin-bottom: 14px;
}
.cc-error__title {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: var(--text);
  text-shadow: 1px 1px 0 #000;
  margin: 0 0 10px;
}
.cc-error__msg {
  font-family: var(--font-read);
  font-size: 18px;
  line-height: 1.2;
  color: var(--text-dim);
  margin: 0 auto 8px;
  max-width: 360px;
}
.cc-error__meta {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 4px;
}
.cc-error__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: 12px 22px;
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.cc-error__btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

/* Compare tray */
.cc-toolbar__compare[hidden] { display: none; }
.cc-toolbar__compare .cc-toolbar__count { background: var(--accent); color: var(--bg); }

/* Compare pick mode */
body.cc-compare-picking .cc-card { cursor: pointer; }
body.cc-compare-picking .cc-card__link { pointer-events: none; }
body.cc-compare-picking .cc-card:hover,
body.cc-compare-picking .cc-card.is-compare-selected { box-shadow: var(--card-shadow-hover); }
.cc-card__pick-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--raised-primary);
  color: #fff;
  border-radius: var(--radius-md);
  z-index: 5;
  box-shadow: var(--raised-primary-shadow), 0 6px 14px -6px rgba(0, 0, 0, 0.8);
}
body.cc-compare-picking .cc-card.is-compare-selected .cc-card__pick-check { display: flex; }
.cc-card__pick-check svg { width: 15px; height: 15px; }

.cc-compare-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 140%);
  z-index: 230;
  max-width: calc(100vw - 32px);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
  pointer-events: none;
}
.cc-compare-bar.is-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.cc-compare-bar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(43, 45, 57, 0.97) 0%, rgba(33, 35, 44, 0.98) 100%);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cc-compare-bar__hint {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-dim);
  padding: 0 6px;
  white-space: nowrap;
}
.cc-compare-bar__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 46vw;
}
.cc-compare-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px 0 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  color: var(--text);
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cc-compare-bar__chipx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 120ms;
}
.cc-compare-bar__chipx:hover { color: var(--danger); }
.cc-compare-bar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cc-compare-bar__cancel {
  height: 36px;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 16px;
  cursor: pointer;
  border-radius: var(--radius-md);
}
.cc-compare-bar__go {
  height: 36px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
}
.cc-compare-bar__go:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 640px) {
  .cc-compare-bar { left: 16px; right: 16px; bottom: 16px; transform: translateY(140%); max-width: none; }
  .cc-compare-bar.is-open { transform: translateY(0); }
  .cc-compare-bar__inner { flex-wrap: wrap; justify-content: center; }
  .cc-compare-bar__chips { max-width: none; }
}

.cc-compare-pop {
  position: fixed; inset: 0; z-index: 220;
  display: none; align-items: flex-start; justify-content: center;
  padding: 48px 20px;
  background: rgba(4, 4, 6, 0.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.cc-compare-pop.is-open { display: flex; }
.cc-compare-pop__panel {
  width: 100%; max-width: 1040px; max-height: calc(100vh - 96px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(43, 45, 57, 0.98) 0%, rgba(28, 29, 37, 0.98) 100%);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.cc-compare-pop__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px 12px;
}
.cc-compare-pop__title {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); margin: 0;
}
.cc-compare-pop__tools { display: flex; align-items: center; gap: 10px; }
.cc-compare-pop__clear {
  height: 34px; padding: 0 14px; border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: 16px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.cc-compare-pop__close {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); cursor: pointer;
}
.cc-compare-pop__close svg { width: 16px; height: 16px; }
.cc-compare-pop__picker { position: relative; padding: 0 18px 12px; }
.cc-compare-search { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); background: var(--well); border: 1px solid var(--border); box-shadow: var(--well-shadow); cursor: text; }
.cc-compare-search svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.cc-compare-search__input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font-family: var(--font-field); font-size: 16px; }
.cc-compare-search__input::placeholder { color: var(--text-muted); }
.cc-compare-results {
  position: absolute; left: 18px; right: 18px; top: calc(100% - 4px); z-index: 3;
  max-height: 280px; overflow: auto;
  background: linear-gradient(180deg, rgba(40, 42, 54, 0.99) 0%, rgba(26, 27, 35, 0.99) 100%);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.9);
  padding: 5px;
}
.cc-compare-result { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-sans); font-size: 14px; cursor: pointer; }
.cc-compare-result:hover { background: rgba(100, 120, 255, 0.14); }
.cc-compare-result:disabled { opacity: 0.4; cursor: not-allowed; }
.cc-compare-result__logo { width: 26px; height: 26px; border-radius: var(--radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); overflow: hidden; font-weight: 600; font-size: 13px; color: var(--text-dim); }
.cc-compare-result__logo img { width: 100%; height: 100%; object-fit: cover; }
.cc-compare-result__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-compare-pop__body { overflow: auto; padding: 0 18px 18px; }
.cc-compare-pop__loading { padding: 48px 0; text-align: center; color: var(--text-muted); font-size: 14px; }
.cc-compare-pop__body .cc-compare-empty { padding: 40px 20px; }

@media (max-width: 640px) {
  .cc-compare-pop { padding: 20px 12px; }
  .cc-compare-pop__panel { max-height: calc(100vh - 40px); }
}

/* Compare page */
.cc-compare-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; }
.cc-compare-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cc-compare-close { flex-shrink: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-dim); text-decoration: none; }
.cc-compare-close svg { width: 18px; height: 18px; }
.cc-compare-title { font-family: var(--font-ui); font-size: 26px; margin: 0; color: var(--text); }
.cc-compare-sub { margin: 4px 0 0; color: var(--text-dim); font-size: 14px; }
.cc-compare-empty { text-align: center; padding: 60px 20px; color: var(--text-dim); }
.cc-compare-empty svg { width: 40px; height: 40px; opacity: 0.6; margin-bottom: 12px; }
.cc-compare-empty__hint { font-size: 13px; margin-top: 6px; }
.cc-compare-empty a { color: var(--accent); }
.cc-compare-scroll { overflow-x: auto; }
.cc-compare-swipe { display: none; margin: 0 0 8px; font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.04em; color: var(--text-muted); text-align: right; }
@media (max-width: 640px) { .cc-compare-swipe { display: block; } }
.cc-compare { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; min-width: 520px; }
.cc-compare th, .cc-compare td { padding: 8px 12px; text-align: left; vertical-align: middle; font-family: var(--font-data); font-size: 14px; line-height: 1.3; color: var(--text); background: rgba(255, 255, 255, 0.025); overflow-wrap: anywhere; }
.cc-compare tr > :first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.cc-compare tr > :last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.cc-compare thead th { background: transparent; padding: 0 12px 6px; vertical-align: bottom; }
.cc-compare .cc-compare__rowhead { width: 132px; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; position: sticky; left: 0; z-index: 1; }
.cc-compare tbody .cc-compare__rowhead { background: #1f2029; }
.cc-compare__clan { position: relative; }
.cc-compare__remove { position: absolute; top: 0; right: 8px; width: 24px; height: 24px; padding: 0; border-radius: var(--radius-sm); cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-dim); }
.cc-compare__clan .cc-compare__remove:hover:not(:disabled) { color: var(--danger); }
.cc-compare__clanlink { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--text); padding-right: 30px; }
.cc-compare__logo { width: 38px; height: 38px; border-radius: var(--radius-md); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--carved); box-shadow: var(--carved-shadow); overflow: hidden; font-family: var(--font-ui); font-size: 18px; color: var(--text-dim); }
.cc-compare__logo img { width: 100%; height: 100%; object-fit: cover; }
.cc-compare__ident { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.cc-compare__clanname { max-width: 100%; font-family: var(--font-ui); font-size: 18px; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 140ms; }
.cc-compare__clanlink:hover .cc-compare__clanname { color: var(--accent); }
.cc-compare__status { display: inline-block; padding: 3px 7px; border-radius: var(--radius-sm); font-family: var(--font-data); font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
.cc-compare__status--open { color: var(--ok); }
.cc-compare__status--application { color: #f0c470; }
.cc-compare__status--closed { color: var(--text-muted); }
.cc-compare__sub { margin-left: 8px; color: var(--text-muted); font-size: 12px; }
.cc-compare__num { font-variant-numeric: tabular-nums; }
.cc-compare__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cc-compare__chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 7px; border-radius: var(--radius-sm); font-size: 11px; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.cc-compare__chip b { font-weight: 500; font-size: 12px; color: var(--text); }

/* ============================================================
   Alliances — index + alliance home
   ============================================================ */
.cc-ally-body { padding: 24px 34px 34px; }
@media (max-width: 640px) { .cc-ally-body { padding: 20px; } }
.cc-ally-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 6px;
}
.cc-ally-toolbar { margin-bottom: 14px; }

.cc-ally-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 64px 24px;
  text-align: center;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.cc-ally-empty__mark { width: 56px; height: 56px; margin: 0 auto 12px; object-fit: contain; opacity: 0.7; }
.cc-ally-empty__title { color: var(--text-dim); margin-bottom: 4px; }
.cc-ally-empty__sub { font-size: 14px; color: var(--text-muted); }
.cc-ally-noresults { text-align: center; color: var(--text-muted); padding: 40px 0; }

.cc-ally-list { display: flex; flex-direction: column; gap: 44px; padding-top: 46px; }

.cc-ally {
  position: relative;
  display: grid;
  grid-template-columns: 264px 1fr;
  border-radius: var(--radius-lg);
  overflow: visible;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--ally-accent) 15%, transparent), transparent 55%),
    linear-gradient(180deg, #161822 0%, #13151e 60%, #11131b 100%);
  box-shadow:
    0 34px 68px -30px rgba(0, 0, 0, 0.92),
    0 14px 30px -20px rgba(0, 0, 0, 0.82);
}
@media (max-width: 760px) { .cc-ally { grid-template-columns: 1fr; } }

.cc-ally__aside {
  position: relative;
  padding: 54px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-width: 0;
  border-right: 1px solid var(--border);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ally-accent) 7%, transparent), transparent 40%);
}
.cc-ally__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding-top: 2px;
}
@media (max-width: 760px) {
  .cc-ally__aside { border-right: 0; border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

.cc-ally__idlink { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; color: inherit; width: 100%; }
.cc-ally__avatar {
  margin-top: -96px;
  margin-bottom: 4px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: color-mix(in srgb, var(--ally-accent) 18%, var(--surface-2));
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 42px;
  color: var(--ally-accent);
  overflow: hidden;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.9), 0 0 0 5px var(--bg);
}
.cc-ally__avatar--img { background: var(--bg); }
.cc-ally__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cc-ally__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
  overflow-wrap: anywhere;
  transition: color 140ms;
}
.cc-ally__idlink:hover .cc-ally__name { color: var(--ally-accent); }
.cc-ally__tagline { color: var(--text-dim); font-family: var(--font-ui); font-size: 14px; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.cc-ally__desc {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
  margin: -2px 0 2px;
  width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-ally__pills {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.cc-ally__pills > .cc-type-pill[hidden] { display: none; }
.cc-pill-more {
  position: relative;
  flex-shrink: 0;
  cursor: default;
  color: var(--text);
  outline: none;
}
.cc-pill-more:focus-visible { border-color: var(--ally-accent, var(--accent)); }
.cc-pill-more__tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  width: max-content;
  max-width: 240px;
  padding: 8px;
  border-radius: var(--radius-lg);
  background: rgba(14, 15, 20, 0.96);
  border: 1px solid var(--border-strong);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
  pointer-events: none;
}
.cc-pill-more:hover .cc-pill-more__tip,
.cc-pill-more:focus-visible .cc-pill-more__tip {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.cc-ally__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 11px 18px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--ally-accent) 55%, #3d49ac);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ally-accent) 90%, #5665dd) 0%, color-mix(in srgb, var(--ally-accent) 78%, #4552c4) 100%);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 24px -12px color-mix(in srgb, var(--ally-accent) 60%, transparent);
  transition: filter 140ms, transform 140ms;
}
.cc-ally__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

.cc-ally__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; text-align: left; }
.cc-ally__stats .ch-info__stat { margin: 0; padding: 6px 8px; gap: 7px; }
.cc-ally__stats .ch-info__ico { width: 26px; height: 26px; }
.cc-ally__stats .ch-info__k { font-size: 12px; letter-spacing: 0.08em; }
.cc-ally__stats .ch-info__v,
.cc-ally__stats .ch-info__v--accent { font-size: 17px; }

.cc-ally__clans {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ally-accent) 5%, #0f1119), #0e1017);
}
@media (max-width: 760px) { .cc-ally__clans { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } }
.cc-ally__clans-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}
.cc-ally__clans-title { display: inline-flex; align-items: center; gap: 9px; }
.cc-ally__clans-ico { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.cc-ally__clans-count { color: var(--text-muted); font-family: var(--font-data); font-size: 14px; }
.cc-ally__clanlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  max-height: 468px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.cc-ally__clanlist::-webkit-scrollbar { width: 8px; }
.cc-ally__clanlist::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }

.cc-clanmini {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
  border: 1px solid rgba(150, 160, 200, 0.18);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(43, 45, 57, 0.9) 0%, rgba(33, 35, 44, 0.94) 100%),
    radial-gradient(ellipse 120% 140% at 12% 0%, rgba(100, 120, 255, 0.08), transparent 60%);
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.85), 0 2px 6px -3px rgba(0, 0, 0, 0.5);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.cc-clanmini:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 46px -20px rgba(0, 0, 0, 0.85), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
}
.cc-clanmini:hover .cc-clanmini__name { color: var(--accent); }
.cc-clanmini__wash {
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  z-index: 0;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%);
  mask-image: linear-gradient(90deg, transparent, #000 75%);
}
.cc-clanmini__wash img { width: 100%; height: 100%; object-fit: cover; }
.cc-clanmini > *:not(.cc-clanmini__wash) { position: relative; z-index: 1; }
.cc-clanmini__logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  display: grid;
  place-items: center;
  color: var(--bg);
  font-family: var(--font-ui);
  font-size: 20px;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.7);
}
.cc-clanmini__logo img { width: 100%; height: 100%; object-fit: cover; }
.cc-clanmini__ident { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; }
.cc-clanmini__name {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0;
  min-width: 0;
  flex-shrink: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 140ms;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}
.cc-clanmini__pills { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cc-clanmini__pills .cc-type-pill { gap: 6px; padding: 5px 10px; font-size: 13px; }
.cc-clanmini__pills img.cc-type-pill__ico { width: 16px; height: 16px; }
.cc-clanmini__meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cc-clanmini__stats {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.cc-clanmini__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-left: 1px solid var(--border);
}
.cc-clanmini__stat:first-child { border-left: 0; }
.cc-clanmini__stat-ico { width: 14px; height: 14px; object-fit: contain; image-rendering: pixelated; margin-bottom: 2px; }
.cc-clanmini__stat-k {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}
.cc-clanmini__stat-v { font-family: var(--font-data); font-size: 14px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cc-clanmini__stat--accent .cc-clanmini__stat-v { color: var(--accent); }
.cc-clanmini__chev { color: var(--text-muted); display: grid; place-items: center; }
.cc-clanmini__chev svg { width: 18px; height: 18px; }
.cc-ally .cc-clanmini { grid-template-columns: 44px 1fr auto; gap: 14px; padding: 10px 10px 10px 12px; }
.cc-ally .cc-clanmini__logo { width: 44px; height: 44px; }
.cc-ally .cc-clanmini__meta { gap: 8px; }
.cc-ally .cc-clanmini__stat { padding: 4px 8px; }
.cc-ally .cc-clanmini__stat-ico { width: 20px; height: 20px; }
.cc-ally .cc-clanmini__stat-k { letter-spacing: 0.08em; }
@media (max-width: 560px) {
  .cc-clanmini { grid-template-columns: 46px minmax(0, 1fr); }
  .cc-ally .cc-clanmini { grid-template-columns: 44px minmax(0, 1fr); }
  .cc-clanmini__meta { grid-column: 1 / -1; justify-content: flex-start; }
  .cc-clanmini__pills { flex-wrap: wrap; flex-shrink: 1; min-width: 0; gap: 6px; }
  .cc-clanmini__stats { flex: 1; min-width: 0; }
  .cc-clanmini__stat { flex: 1; min-width: 0; }
  .cc-clanmini__chev { display: none; }
}

/* Alliances search box — clearer magnifying-glass icon */
.cc-ally-toolbar .cc-search svg { color: var(--text-dim); width: 17px; height: 17px; }

.ch-ally-empty { color: var(--text-muted); font-size: 14px; }

.ch-allyclans { position: relative; }
.ch-allyclans__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px 0 6px;
}
.ch-allyclans__track::-webkit-scrollbar { display: none; }
.ch-allyclans__item {
  flex: 0 0 auto;
  width: min(272.5px, 100%);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
}
.ch-allyclans__item:first-child { margin-left: auto; }
.ch-allyclans__item:last-child { margin-right: auto; }
.ch-allyclans__item > .cc-card { flex: 1 1 auto; width: 100%; min-width: 0; }
.ch-allyclans__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--clan-accent, var(--accent)) 60%, rgba(255, 255, 255, 0.25));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--clan-accent, var(--accent)) 70%, rgba(26, 27, 35, 0.9)) 0%,
      color-mix(in srgb, var(--clan-accent, var(--accent)) 38%, rgba(12, 12, 16, 0.95)) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 10px 24px -10px rgba(0, 0, 0, 0.9),
    0 0 18px -6px color-mix(in srgb, var(--clan-accent, var(--accent)) 70%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateY(-50%);
  transition: transform 140ms ease, filter 140ms ease, opacity 160ms ease;
}
.ch-allyclans__nav svg { width: 18px; height: 18px; }
.ch-allyclans__nav--prev { left: -16px; }
.ch-allyclans__nav--next { right: -16px; }
.ch-allyclans__nav:hover { filter: brightness(1.15); transform: translateY(-50%) scale(1.06); }
.ch-allyclans__nav:focus-visible { outline: 2px solid var(--clan-accent, var(--accent)); outline-offset: 2px; }
.ch-allyclans__nav:disabled { opacity: 0; pointer-events: none; }
.ch-allyclans__nav[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ch-allyclans__track { scroll-behavior: auto; }
}

/* ── Clan Reports page ─────────────────────────────────────────────────────── */
.cc-shellwrap { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 40px 24px 96px; }
.cc-shell {
  border-radius: 6px;
  border: 1px solid rgba(150, 160, 200, 0.18);
  background:
    linear-gradient(180deg, rgba(43, 45, 57, 0.94) 0%, rgba(26, 27, 35, 0.96) 100%);
  box-shadow:
    0 50px 100px -30px rgba(0, 0, 0, 0.95),
    0 16px 44px -14px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  overflow: hidden;
}
.cc-pagehero { position: relative; padding: 28px 34px 24px; border-bottom: 1px solid rgba(150, 160, 200, 0.14); }
.cc-pagehero__banner {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 130% at 100% 0%, var(--hero-glow-r, rgba(220, 70, 70, 0.14)), transparent 55%),
    radial-gradient(120% 130% at 0% 0%, var(--hero-glow-l, rgba(100, 120, 255, 0.16)), transparent 55%);
  pointer-events: none;
}
.cc-pagehero--img .cc-pagehero__banner {
  background:
    linear-gradient(90deg, rgba(26, 27, 35, 0.94) 0%, rgba(26, 27, 35, 0.72) 55%, rgba(26, 27, 35, 0.45) 100%),
    linear-gradient(0deg, rgba(26, 27, 35, 0.9) 0%, transparent 60%),
    var(--hero-img) center / cover no-repeat;
}
.cc-pagehero__inner { position: relative; }
.cc-pagehero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 8px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}
.cc-pagehero__sub { font-family: var(--font-ui); font-size: 16px; line-height: 1.3; color: var(--text-dim); margin: 0; max-width: 680px; }

.cc-shellwrap--narrow { max-width: 1040px; }
.cc-shell--scene { position: relative; isolation: isolate; }
.cc-shell__scene { position: absolute; z-index: -1; top: 0; right: 0; width: 78%; aspect-ratio: 1130 / 626; background: var(--scene) right top / cover no-repeat; opacity: 0.5; filter: saturate(0.9) brightness(0.8); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%), linear-gradient(180deg, #000 25%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 50%), linear-gradient(180deg, #000 25%, transparent 100%); mask-composite: intersect; pointer-events: none; }
@media (max-width: 640px) { .cc-shell__scene { width: 160%; opacity: 0.35; } }
.cc-shell--scene > .cc-pagehero { border-bottom: 0; }
.cc-shell--scene > .cc-reports__how { padding-top: 8px; }
.cc-reports__how, .cc-reports__cases { padding: 26px 34px; border-bottom: 1px solid rgba(150, 160, 200, 0.1); }
.cc-reports__cases { border-bottom: 0; }
.cc-reports__h {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 16px;
}

.cc-reports__steps { margin-top: 14px; }
.cc-pillar--step { min-height: 250px; padding-top: 22px; }
.cc-pillar__num {
  position: absolute;
  top: -34px;
  right: -26px;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 190px;
  line-height: 1;
  color: transparent;
  background: linear-gradient(165deg, rgba(150, 162, 255, 0.9) 0%, rgba(128, 144, 255, 0.78) 50%, rgba(100, 120, 255, 0.62) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, 0.45) 54%, transparent 71%);
  mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, 0.45) 54%, transparent 71%);
  pointer-events: none;
}
.cc-pillar--step .cc-pillar__title {
  margin-top: 84px;
  margin-bottom: 10px;
  font-size: 22px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.6);
}
.cc-pillar--step .cc-pillar__body { font-size: 18px; line-height: 1.3; }
.cc-reports__hero { width: fit-content; max-width: 100%; }
.cc-reports__intro {
  width: 0;
  min-width: 100%;
  margin: 6px 0 0;
  font-family: var(--font-read);
  font-size: 18px;
  line-height: 0.95;
  color: var(--text-dim);
}
.cc-reports__steps .cc-pillar:first-child .cc-pillar__num { right: -52px; }

.cc-reports__cta { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0 12px; margin-top: 28px; }
.cc-reports__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 34px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 21px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 140ms;
}
.cc-rsearch { display: contents; }
.cc-reports__cta > .cc-reports__submit { grid-row: 1; grid-column: 1; }
.cc-rsearch__input {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  height: 0;
  padding: 0 16px;
  opacity: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--well);
  box-shadow: var(--well-shadow);
  color: var(--text);
  font-family: var(--font-field);
  font-size: 16px;
  transition: height 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms, margin 240ms;
}
.cc-rsearch.is-open .cc-rsearch__input { height: 54px; margin-top: 10px; opacity: 1; }
.cc-rsearch__input::placeholder { color: var(--text-muted); }
.cc-rsearch__input:focus { outline: none; box-shadow: var(--well-shadow), 0 0 0 3px rgba(100, 120, 255, 0.22); }
.cc-rsearch__btn {
  grid-row: 1;
  grid-column: 2;
  height: 54px;
  min-width: 128px;
  padding: 0 26px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 21px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .cc-rsearch__input { transition: none; } }
@media (max-width: 640px) {
  .cc-reports__cta { grid-template-columns: minmax(0, 1fr); gap: 10px 0; }
  .cc-reports__cta > .cc-reports__submit, .cc-rsearch__input, .cc-rsearch__btn { grid-row: auto; grid-column: 1; }
  .cc-rsearch__input { order: 1; }
  .cc-rsearch.is-open .cc-rsearch__input { margin-top: 0; }
  .cc-reports__list { grid-template-columns: minmax(0, 1fr); }
}
.cc-reports__check-result { max-width: 560px; margin: 0 auto; text-align: center; }
.cc-reports__check-result:not(:empty) { margin-top: 16px; }
.cc-checkres {
  --res-tone: 150, 160, 200;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(var(--res-tone), 0.08), transparent 70%),
    linear-gradient(180deg, #1c1d23, #15161a);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 40px -22px rgba(0, 0, 0, 0.95),
    0 4px 12px -6px rgba(0, 0, 0, 0.6);
}
.cc-checkres--clear { --res-tone: 110, 210, 150; }
.cc-checkres--hit { --res-tone: 248, 113, 113; }
.cc-checkres__t { margin: 0; font-family: var(--font-ui); font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; color: rgb(var(--res-tone)); text-shadow: var(--carved-text); }
.cc-checkres__s { margin: 4px 0 0; font-family: var(--font-read); font-size: 16px; color: var(--text-dim); }
.cc-checkres__s b { font-weight: 400; color: var(--text); }
.cc-checkres__slots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.cc-checkres__slot {
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: var(--carved);
  box-shadow: var(--carved-shadow);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-shadow: var(--carved-text);
}
.cc-checkres__slot b { font-weight: 400; margin-right: 3px; }
.cc-checkres__slot--verified b { color: #f87171; }
.cc-checkres__slot--reviewing b { color: #aab4ff; }
.cc-checkres__note { margin: 12px 0 0; font-family: var(--font-read); font-size: 15px; color: var(--text-muted); }
.cc-checkres__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.cc-checkres__act {
  padding: 8px 14px; border-radius: var(--radius-md); background: var(--raised); box-shadow: var(--raised-shadow);
  font-family: var(--font-ui); font-size: 15px; color: var(--text-dim); text-shadow: var(--raised-text); text-decoration: none;
}
.cc-checkres__act:hover { background: var(--raised-hover); color: var(--text); }
.cc-checkres__act:active { box-shadow: var(--pressed-shadow); }

.cc-reports__note { font-family: var(--font-read); font-size: 16px; color: var(--text-muted); margin: -6px 0 4px; }
.cc-reports__note a { color: var(--accent); }
.cc-reports__group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 22px 0 10px;
}
.cc-reports__count {
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--carved);
  box-shadow: var(--carved-shadow);
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--text);
  text-shadow: var(--carved-text);
}
.cc-reports__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 12px; }
@media (max-width: 640px) { .cc-reports__list { grid-template-columns: 1fr; } }

.cc-case {
  --case-tone: 150, 160, 200;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #1c1d23, #15161a);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 40px -22px rgba(0, 0, 0, 0.95),
    0 4px 12px -6px rgba(0, 0, 0, 0.6);
  transition: transform 160ms ease, background 160ms ease;
}
.cc-case--verified { --case-tone: 248, 113, 113; }
.cc-case--reviewing { --case-tone: 120, 138, 255; }
.cc-case--submitted { --case-tone: 170, 176, 200; }
.cc-case--dismissed { --case-tone: 120, 124, 140; }
a.cc-case:hover { transform: translateY(-2px); background: linear-gradient(180deg, #212229, #18191e); }
.cc-case__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; }
.cc-case__top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cc-case__name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.1;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.cc-case__age { flex-shrink: 0; font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.04em; color: var(--text-muted); }
.cc-case__meta { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.cc-case__summary {
  margin: 2px 0 0;
  font-family: var(--font-read);
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.cc-case__evidence { margin-top: auto; padding-top: 2px; font-family: var(--font-data); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #aab4ff; }
.cc-case__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  text-align: center;
  border-left: 1px solid rgba(150, 160, 200, 0.08);
}
.cc-case__stage { font-family: var(--font-ui); font-size: 14px; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--case-tone)); text-shadow: 0 1px 0 #000; }
.cc-case__votes { display: flex; gap: 12px; }
.cc-case__tally { display: flex; flex-direction: column; align-items: center; font-family: var(--font-data); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.cc-case__tally b { font-weight: 500; font-size: 20px; line-height: 1.1; color: var(--text); }
.cc-case__tally--up b { color: #8fdca3; }
.cc-case__tally--down b { color: #f0a0a0; }
.cc-case__concluded { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

.cc-reports__pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
.cc-reports__pager-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.cc-reports__pager-page { font-family: var(--font-ui); font-size: 15px; letter-spacing: 0.04em; color: var(--text-muted); }
.cc-reports__empty {
  border-radius: var(--radius-lg);
  padding: 40px 20px;
  text-align: center;
  background: var(--carved);
  box-shadow: var(--carved-shadow);
  text-shadow: var(--carved-text);
}
.cc-reports__empty-t { font-family: var(--font-ui); font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 4px; }
.cc-reports__empty-s { font-family: var(--font-read); font-size: 16px; color: var(--text-muted); margin: 0; }
@media (max-width: 640px) {
  .cc-pagehero, .cc-reports__how, .cc-reports__cases { padding-left: 20px; padding-right: 20px; }
}


.cc-report__hidden { color: var(--text-muted); }

.cc-report__section { padding: 24px 34px; border-bottom: 1px solid rgba(150, 160, 200, 0.1); display: grid; gap: 16px; }
.cc-report__section--last, .cc-shell > .cc-report__section:last-child { border-bottom: 0; }
@media (max-width: 640px) { .cc-report__section { padding: 20px; } }
.cc-report__h {
  font-family: var(--font-ui);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.cc-report__block { display: grid; gap: 6px; }
.cc-report__label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cc-report__text { font-family: var(--font-read); font-size: 18px; line-height: 1.35; color: var(--text); margin: 0; overflow-wrap: anywhere; }
.cc-report__text--lead { font-size: 20px; }
.cc-report__case { gap: 22px; }
.cc-report__main { display: grid; gap: 18px; min-width: 0; }
.cc-report__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
@media (max-width: 760px) { .cc-report__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-report__fact { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--carved); box-shadow: var(--carved-shadow); }
.cc-report__fact dt { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.cc-report__fact dd { margin: 0; font-family: var(--font-ui); font-size: 16px; color: var(--text); text-shadow: var(--carved-text); overflow-wrap: anywhere; }
.cc-report__fact dd.cc-report__fact-mono { font-family: var(--font-data); font-size: 14px; }
.cc-report__fact dd.cc-report__fact-stage--verified { color: #f87171; }
.cc-report__fact dd.cc-report__fact-stage--reviewing { color: #aab4ff; }
.cc-report__fact dd.cc-report__fact-stage--dismissed { color: var(--text-muted); }
.cc-report__fact dd.cc-report__fact-up,
.cc-report__fact dd.cc-report__fact-down { font-family: var(--font-data); font-size: 18px; font-weight: 500; line-height: 1.1; }
.cc-report__fact dd.cc-report__fact-up { color: #8fdca3; }
.cc-report__fact dd.cc-report__fact-down { color: #f0a0a0; }
.cc-report__text--pre { white-space: pre-line; color: var(--text-dim); }
.cc-report__evidence { justify-self: start; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: var(--radius-md); font-family: var(--font-ui); font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; }

.cc-report__votes { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-report__vote {
  height: 40px;
  padding: 0 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.cc-report__noteform, .cc-report__stageform { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.cc-report__textarea {
  flex: 1 1 100%;
  width: 100%;
  min-height: 64px;
  resize: vertical;
  background: var(--well);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-field);
  font-size: 16px;
  line-height: 1.45;
  padding: 11px 13px;
  box-shadow: var(--well-shadow);
  transition: box-shadow 120ms;
}
.cc-report__input {
  width: 100%;
  height: 44px;
  background: var(--well);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-field);
  font-size: 16px;
  padding: 0 13px;
  box-shadow: var(--well-shadow);
  transition: box-shadow 120ms;
}
.cc-report__textarea:focus, .cc-report__input:focus { outline: none; box-shadow: var(--well-shadow), 0 0 0 3px rgba(100, 120, 255, 0.22); }
.cc-report__textarea::placeholder, .cc-report__input::placeholder { color: var(--text-muted); }
.cc-report__form { gap: 18px; }
.cc-report__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cc-report__field { display: grid; gap: 8px; min-width: 0; }
.cc-report__error { margin: -10px 0 0; font-family: var(--font-read); font-size: 16px; color: var(--danger); }
.cc-report__actions { display: flex; justify-content: flex-start; padding-top: 4px; }
.cc-report__drop { position: relative; border-radius: var(--radius-md); background: var(--well); box-shadow: var(--well-shadow); cursor: pointer; overflow: hidden; transition: box-shadow 120ms; }
.cc-report__drop:hover, .cc-report__drop:focus-visible, .cc-report__drop.border-accent { outline: none; box-shadow: var(--well-shadow), 0 0 0 3px rgba(100, 120, 255, 0.22); }
.cc-report__drop-empty { display: grid; justify-items: center; gap: 4px; padding: 26px 16px; text-align: center; }
.cc-report__drop-t { font-family: var(--font-read); font-size: 18px; color: var(--text-dim); }
.cc-report__drop-s { font-family: var(--font-data); font-size: 12px; color: var(--text-muted); }
.cc-report__drop .cc-report__error { margin: 0; padding: 0 16px 12px; text-align: center; }
.cc-report__check { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 100%; font-family: var(--font-read); font-size: 16px; color: var(--text-dim); cursor: pointer; }
.cc-report__check input { width: 16px; height: 16px; accent-color: var(--accent); }
.cc-report__decisions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cc-report__decision { padding: 12px 14px; border-radius: var(--radius-md); background: var(--carved); box-shadow: var(--carved-shadow); }
.cc-report__decision-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cc-report__decision-stage { font-family: var(--font-ui); font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); text-shadow: var(--carved-text); }
.cc-report__decision-by { font-family: var(--font-data); font-size: 12px; color: var(--text-muted); }
.cc-report__decision-reason { margin-top: 6px; font-family: var(--font-read); font-size: 17px; line-height: 1.3; color: var(--text-dim); white-space: pre-line; }
.cc-report__select {
  background: var(--well);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-field);
  font-size: 16px;
  padding: 10px 14px;
  box-shadow: var(--well-shadow);
  cursor: pointer;
}
.cc-report__select:focus { outline: none; box-shadow: var(--well-shadow), 0 0 0 3px rgba(100, 120, 255, 0.22); }
.cc-report__btn {
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.cc-report__hint { font-family: var(--font-read); font-size: 16px; line-height: 1.3; color: var(--text-muted); margin: 0; }
.cc-report__hint--lead { color: var(--text-dim); }
.cc-report__notes { display: grid; gap: 10px; }
.cc-report__note {
  border-radius: var(--radius-md);
  background: var(--carved);
  box-shadow: var(--carved-shadow);
  padding: 12px 14px;
  display: grid;
  gap: 5px;
}
.cc-report__note-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-report__note-user { font-family: var(--font-ui); font-size: 14px; color: var(--text); letter-spacing: 0.02em; }
.cc-report__note-age { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); }

.cc-report__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.cc-report__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cc-report__col > .cc-report__error { margin-top: -10px; }
.cc-report__col .cc-report__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .cc-report__col .cc-report__row { grid-template-columns: minmax(0, 1fr); } }
.cc-report__field--grow { flex: 1 1 auto; display: flex; flex-direction: column; }
.cc-report__textarea--tall { flex: 1 1 0; min-height: 140px; }
.cc-report__form > .cc-report__actions { padding-top: 0; }
.cc-report__actions .cc-report__btn { height: 46px; padding: 0 26px; font-size: 18px; }
.cc-report__label .cc-report__count { float: right; letter-spacing: 0.06em; color: var(--text-muted); }
@media (max-width: 820px) {
  .cc-report__cols { grid-template-columns: minmax(0, 1fr); }
}
.cc-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cc-shot { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: var(--carved); box-shadow: var(--carved-shadow); }
.cc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cc-shot__rm { position: absolute; top: 6px; right: 6px; height: 26px; padding: 0 9px; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity 140ms; }
.cc-shot:hover .cc-shot__rm, .cc-shot__rm:focus-visible { opacity: 1; }
@media (hover: none) { .cc-shot__rm { opacity: 1; } }
.cc-shot--pending { order: 99; display: none; place-items: center; font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); text-shadow: var(--carved-text); }
.upload-multi.is-uploading .cc-shot--pending { display: grid; }
.upload-multi .cc-report__drop-empty { padding: 20px 16px; }

.cc-report__body { display: grid; gap: 24px; }
.cc-report__body--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 760px) { .cc-report__body--split { grid-template-columns: minmax(0, 1fr); } }
.cc-report__shots { display: grid; gap: 8px; min-width: 0; }
.cc-report__shotgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cc-report__shotgrid--one { grid-template-columns: minmax(0, 1fr); }
.cc-report__shot { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--carved); box-shadow: var(--carved-shadow); padding: 5px; }
.cc-report__shotgrid--one .cc-report__shot { aspect-ratio: auto; }
.cc-report__shot img { display: block; width: 100%; height: 100%; border-radius: var(--radius-sm); object-fit: cover; object-position: top; }
.cc-report__shotgrid--one .cc-report__shot img { height: auto; max-height: 520px; object-fit: contain; }

.cc-report__duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.cc-report__duo--solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .cc-report__duo { grid-template-columns: minmax(0, 1fr); } }
.cc-report__panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cc-report__panel .cc-report__votes { min-height: 40px; }
.cc-report__panel .cc-report__hint--lead { min-height: 40px; display: flex; align-items: center; }
.cc-report__panelform { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.cc-report__panelform .cc-report__textarea { flex: 1 1 auto; min-height: 92px; }
.cc-report__panelform .cc-report__btn { align-self: flex-start; }

.cc-apply-wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 24px 20px 56px; }
.cc-apply {
  border-radius: 8px;
  border: 1px solid rgba(150, 160, 200, 0.18);
  background: linear-gradient(180deg, rgba(43, 45, 57, 0.94) 0%, rgba(26, 27, 35, 0.96) 100%);
  box-shadow:
    0 50px 100px -30px rgba(0, 0, 0, 0.95),
    0 16px 44px -14px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  overflow: hidden;
}
.cc-apply__hero { position: relative; padding: 14px 34px 12px; border-bottom: 1px solid rgba(150, 160, 200, 0.14); }
.cc-apply__hero-banner {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--clan-accent, #6478ff) 16%, transparent), transparent 55%),
    radial-gradient(120% 130% at 0% 0%, rgba(100, 120, 255, 0.16), transparent 55%);
  pointer-events: none;
}
.cc-apply__hero-inner { position: relative; display: flex; align-items: center; gap: 16px; }
.cc-apply__logo {
  flex-shrink: 0;
  width: 62px; height: 62px;
  border-radius: 10px;
  display: grid; place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 26px;
  box-shadow: var(--well-shadow);
}
.cc-apply__logo img { width: 100%; height: 100%; object-fit: cover; }
.cc-apply__ident { min-width: 0; }
.cc-apply__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}
.cc-apply__body { padding: 16px 34px 20px; }
@media (max-width: 640px) { .cc-apply__hero, .cc-apply__body { padding-left: 20px; padding-right: 20px; } }
.cc-apply__intro {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-dim);
  white-space: pre-line;
  margin: 0 0 22px;
  padding: 14px 16px;
  border-left: 2px solid rgba(100, 120, 255, 0.4);
  background: rgba(100, 120, 255, 0.06);
  border-radius: 0 6px 6px 0;
}
.cc-apply__form { display: grid; gap: 11px; }
.cc-apply__field { display: grid; gap: 4px; }
.cc-apply__q { font-family: var(--font-ui); font-size: 16px; letter-spacing: 0.02em; color: var(--text); }
.cc-apply__textarea {
  width: 100%;
  min-height: 50px;
  resize: vertical;
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-field);
  font-size: 16px;
  line-height: 1.4;
  padding: 9px 12px;
  box-shadow: var(--well-shadow);
  transition: border-color 120ms, box-shadow 120ms;
}
.cc-apply__textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--well-focus); }
.cc-apply__submit {
  width: 100%;
  padding: 13px 24px;
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 140ms, transform 120ms;
  margin-top: 4px;
}
.cc-apply__submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cc-apply__note { font-family: var(--font-ui); font-size: 14px; color: var(--text-muted); margin: 0; text-align: center; }

.cc-dash-wrap--wide { max-width: 900px; }
.cc-thread__source { display: inline-block; margin-top: 8px; font-family: var(--font-ui); font-size: 14px; color: var(--accent); text-decoration: none; }
.cc-thread__source:hover { text-decoration: underline; }

.cc-thread__h {
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 14px;
}
.cc-thread__h--comments { display: flex; align-items: center; gap: 9px; }
.cc-thread__h--comments span {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  color: var(--bg);
  background: var(--accent);
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cc-thread__application {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  padding: 20px 22px;
  margin-bottom: 26px;
}
.cc-thread__qa { display: grid; gap: 16px; margin: 0; }
.cc-thread__qa-row { display: grid; gap: 4px; }
.cc-thread__q { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.cc-thread__a { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; color: var(--text); margin: 0; white-space: pre-line; }

.cc-thread__comments { display: grid; gap: 16px; margin-bottom: 26px; }
.cc-thread__msg { display: flex; gap: 12px; align-items: flex-start; }
.cc-thread__msg.is-mine { flex-direction: row-reverse; }
.cc-thread__avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 16px;
}
.cc-thread__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cc-thread__bubble {
  flex: 1;
  min-width: 0;
  max-width: 82%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 11px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.cc-thread__msg.is-mine .cc-thread__bubble {
  border-color: rgba(100, 120, 255, 0.4);
  background: linear-gradient(180deg, rgba(100, 120, 255, 0.16), rgba(100, 120, 255, 0.08));
}
.cc-thread__msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.cc-thread__msg-user { font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.02em; color: var(--text); }
.cc-thread__msg-age { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.cc-thread__msg-text { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--text-dim); white-space: pre-line; }

.cc-thread__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.cc-thread__btn {
  padding: 11px 22px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 120ms, filter 120ms;
}
.cc-thread__btn:hover { border-color: #4a5270; }
.cc-thread__btn--accept, .cc-thread__btn--send {
  border-color: #3d49ac;
  background: linear-gradient(180deg, #5665dd 0%, #4552c4 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 24px -12px rgba(60, 78, 210, 0.6);
}
.cc-thread__btn--accept:hover, .cc-thread__btn--send:hover { filter: brightness(1.08); border-color: #3d49ac; }
.cc-thread__reply { display: grid; gap: 12px; justify-items: start; padding-top: 20px; border-top: 1px solid rgba(150, 160, 200, 0.12); }
.cc-thread__textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-field);
  font-size: 16px;
  line-height: 1.45;
  padding: 12px 14px;
  box-shadow: var(--well-shadow);
  transition: border-color 120ms, box-shadow 120ms;
}
.cc-thread__textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--well-focus); }
.cc-thread__textarea::placeholder { color: var(--text-muted); }

/* ── Dashboard pages (inbox, account) ──────────────────────────────────────── */
.cc-dash-wrap { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding: 40px 20px 80px; }
.cc-dash {
  border-radius: 6px;
  border: 1px solid rgba(150, 160, 200, 0.18);
  background: linear-gradient(180deg, rgba(43, 45, 57, 0.94) 0%, rgba(26, 27, 35, 0.96) 100%);
  box-shadow:
    0 50px 100px -30px rgba(0, 0, 0, 0.95),
    0 16px 44px -14px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  overflow: hidden;
}
.cc-dash__hero { position: relative; padding: 32px 32px 24px; border-bottom: 1px solid rgba(150, 160, 200, 0.14); }
.cc-dash__hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 130% at 0% 0%, rgba(100, 120, 255, 0.16), transparent 55%);
}
.cc-dash__title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 8px 0 8px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}
.cc-dash__sub { position: relative; font-family: var(--font-ui); font-size: 16px; line-height: 1.5; color: var(--text-dim); margin: 0; max-width: 560px; }
.cc-dash__body { padding: 24px 32px 30px; }
.cc-dash__body--sections { padding: 0; }
@media (max-width: 640px) { .cc-dash__hero, .cc-dash__body { padding-left: 20px; padding-right: 20px; } }

.cc-dash__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cc-dash__chip {
  padding: 7px 15px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  transition: border-color 140ms, color 140ms, background 140ms, box-shadow 140ms;
}
.cc-dash__chip:hover { color: var(--text); border-color: #4a5270; background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); }
.cc-dash__chip.is-active {
  color: #dfe4ff;
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(100, 120, 255, 0.24), rgba(100, 120, 255, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(100, 120, 255, 0.25), 0 4px 14px -6px rgba(100, 120, 255, 0.5);
}

.cc-dash__empty {
  border: 1px dashed rgba(150, 160, 200, 0.22);
  border-radius: var(--radius-lg);
  padding: 56px 20px;
  text-align: center;
}
.cc-dash__empty-mark { width: 54px; height: 54px; margin: 0 auto 12px; object-fit: contain; opacity: 0.65; }
.cc-dash__empty-t { color: var(--text-dim); margin: 0 0 4px; }
.cc-dash__empty-s { font-size: 13px; color: var(--text-muted); margin: 0; }

.cc-dash__threads { display: grid; gap: 8px; }
.cc-dash__thread {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(150, 160, 200, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 40%), var(--surface);
  text-decoration: none;
  transition: border-color 140ms, background 140ms, transform 120ms;
}
.cc-dash__thread:hover { transform: translateY(-1px); }
.cc-dash__thread.is-unread { border-color: rgba(120, 135, 255, 0.5); background: rgba(100, 120, 255, 0.05); }
.cc-dash__thread-main { min-width: 0; flex: 1; }
.cc-dash__thread-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cc-dash__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.cc-dash__tag {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
}
.cc-dash__thread-clan { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-dash__thread-status { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.cc-dash__thread-subject { font-family: var(--font-ui); font-size: 16px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-dash__thread.is-unread .cc-dash__thread-subject { color: #fff; }
.cc-dash__thread-preview { font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cc-dash__thread-age { font-family: var(--font-data); font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

.cc-dash__section { padding: 26px 32px; border-bottom: 1px solid rgba(150, 160, 200, 0.1); }
.cc-dash__section:last-child { border-bottom: 0; }
.cc-dash__section--danger { background: linear-gradient(180deg, rgba(220, 60, 60, 0.06), transparent 60%); }
@media (max-width: 640px) { .cc-dash__section { padding-left: 20px; padding-right: 20px; } }
.cc-dash__h { font-family: var(--font-ui); font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); margin: 0 0 14px; }
.cc-dash__h--danger { color: #ff8f8f; }
.cc-dash__section-sub { font-family: var(--font-ui); font-size: 14px; color: var(--text-dim); margin: 0 0 14px; }
.cc-dash__section-sub a { color: var(--accent); }

.cc-dash__profile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0 0 18px; }
@media (max-width: 520px) { .cc-dash__profile { grid-template-columns: 1fr; } }
.cc-dash__profile dt { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.cc-dash__profile dd { font-family: var(--font-ui); font-size: 16px; color: var(--text); margin: 0; }
.cc-dash__mono { font-family: var(--font-data); font-size: 13px !important; }

.cc-dash__clanlinks { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-dash__clanbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: filter 140ms, transform 120ms;
}
.cc-dash__clanbtn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cc-dash__clanbtn-logo { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
.cc-dash__clanbtn svg { width: 15px; height: 15px; }

.cc-dash__form { display: grid; gap: 12px; }
.cc-dash__form--danger { max-width: 380px; }
.cc-dash__check { display: flex; align-items: center; gap: 11px; font-family: var(--font-ui); font-size: 14px; color: var(--text-dim); cursor: pointer; }
.cc-dash__check input { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }
.cc-dash__dangerlabel { font-family: var(--font-ui); font-size: 14px; color: var(--text-dim); display: block; }
.cc-dash__dangerlabel strong { color: var(--text); }
.cc-dash__input {
  width: 100%;
  margin-top: 6px;
  background: linear-gradient(180deg, #06070d 0%, #0a0d16 100%);
  border: 1px solid #1c2130;
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 10px 13px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 10px 20px -12px rgba(0, 0, 0, 0.85);
}
.cc-dash__input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(100, 120, 255, 0.16); }
.cc-dash__btn {
  justify-self: start;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  transition: filter 140ms, transform 120ms;
}
.cc-dash__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cc-dash__btn--ghost {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: none;
}
.cc-dash__btn--ghost:hover { border-color: var(--accent); }
.cc-dash__btn--danger {
  background: transparent;
  border-color: rgba(220, 60, 60, 0.4);
  color: #ff8f8f;
  box-shadow: none;
  font-size: 14px;
}
.cc-dash__btn--danger:hover { background: rgba(220, 60, 60, 0.12); filter: none; }

/* Bot analytics */
.an-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 720px) { .an-stats { grid-template-columns: repeat(2, 1fr); } }
.an-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(28,28,32,0.92) 0%, rgba(20,20,22,0.92) 100%);
  padding: 14px 16px;
}
.an-stat__label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.an-stat__value {
  font-family: var(--font-data);
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
  margin-top: 4px;
}
.an-stat__delta { font-size: 12px; margin-top: 2px; color: var(--text-dim); }
.an-stat__delta.is-up { color: #6ee7a8; }
.an-stat__delta.is-down { color: var(--danger); }
.an-stat__delta.is-flat { color: var(--text-dim); }
.an-stat__delta-note { color: var(--text-dim); margin-left: 4px; }

.an-chart { position: relative; width: 100%; }
.an-svg { width: 100%; height: 190px; display: block; overflow: visible; }
.an-legend { display: flex; gap: 16px; margin-bottom: 8px; font-size: 12px; color: var(--text-dim); }
.an-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.an-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.an-tip {
  position: absolute;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--surface-2);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius-md);
  padding: 6px 9px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.an-tip__day { color: var(--text-dim); margin-bottom: 3px; }
.an-tip__row { display: flex; align-items: center; gap: 6px; }

.an-heat-grid { display: flex; flex-direction: column; gap: 3px; }
.an-heat-row {
  display: grid;
  grid-template-columns: 34px repeat(24, 1fr);
  gap: 3px;
  align-items: center;
}
.an-heat-row--head .an-heat-hour { font-size: 10px; color: var(--text-dim); text-align: left; }
.an-heat-day { font-size: 11px; color: var(--text-dim); font-family: var(--font-data); }
.an-heat-cell {
  height: 16px;
  border-radius: 3px;
  background: var(--accent);
}

.an-table-wrap { overflow-x: auto; margin-top: 12px; }
.an-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-table th, .an-table td {
  text-align: right;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.an-table th:first-child, .an-table td:first-child { text-align: left; color: var(--text-dim); }
.an-table th { color: var(--text-dim); font-weight: 500; }

/* ============================================================
   Section-card header overrides (kept last so they win)
   ============================================================ */
.cc-landing-news__title,
.cc-landing-browse__title,
.cc-landing-ally__title,
.cc-wall__title,
.cc-eventsrow__title {
  line-height: 1.02;
  text-shadow:
    0 3px 6px rgba(0, 0, 0, 0.9),
    0 8px 26px rgba(0, 0, 0, 0.72),
    0 0 34px rgba(110, 130, 255, 0.3);
}

.cc-landing-news__head,
.cc-landing-browse__head,
.cc-landing-ally__head,
.cc-wall__head,
.cc-eventsrow__head,
.cc-ally-head { margin-bottom: 10px; }

@media (max-width: 560px) {
  .cc-landing-news__title,
  .cc-landing-browse__title,
  .cc-landing-ally__title,
  .cc-wall__title,
  .cc-eventsrow__title {
    font-size: 18px;
    white-space: nowrap;
  }
  .cc-landing-news__head,
  .cc-landing-browse__head,
  .cc-landing-ally__head,
  .cc-wall__head,
  .cc-eventsrow__head,
  .cc-ally-head { gap: 12px; }
  .cc-sectionrule { min-width: 14px; }
}

/* Depth system: buttons are raised, pills are carved */
.btn-secondary,
.cc-wizard__btn,
.cc-intro-card__cta--ghost,
.ch-join--edit,
.cc-report__btn,
.cc-reports__pager-link,
.ch-rail__btn,
.cc-womquick__btn,
.cc-thread__btn,
.ch-members__more,
.cc-pagination__btn,
.cc-dash__btn.cc-dash__btn--ghost,
.cc-newsbtn,
.ch-linkgrid__btn,
.ch-ed__barbtn,
.ch-review__reply-btn,
.cc-wm-rsn__btn,
.cc-wm-upload__btn,
.cc-match-secondary,
.cc-rsearch__btn,
.cc-shot__rm,
.cc-compare-close,
.cc-report__vote,
.cc-report__evidence,
.cc-compare-bar__cancel,
.cc-compare-pop__clear,
.cc-compare-pop__close,
.cc-compare__remove,
.cc-hero-owner-pill {
  background: var(--raised);
  border: 1px solid transparent;
  box-shadow: var(--raised-shadow);
  color: #e4e6ee;
  text-shadow: var(--raised-text);
}
.btn-secondary:hover:not(:disabled),
.cc-wizard__btn:hover:not(:disabled),
.cc-intro-card__cta--ghost:hover:not(:disabled),
.ch-join--edit:hover:not(:disabled),
.cc-report__btn:hover:not(:disabled),
.cc-reports__pager-link:hover:not(:disabled),
.ch-rail__btn:hover:not(:disabled),
.cc-womquick__btn:hover:not(:disabled),
.cc-thread__btn:hover:not(:disabled),
.ch-members__more:hover:not(:disabled),
.cc-pagination__btn:hover:not(:disabled),
.cc-dash__btn.cc-dash__btn--ghost:hover:not(:disabled),
.cc-newsbtn:hover:not(:disabled),
.ch-linkgrid__btn:hover:not(:disabled),
.ch-ed__barbtn:hover:not(:disabled),
.ch-review__reply-btn:hover:not(:disabled),
.cc-wm-rsn__btn:hover:not(:disabled),
.cc-wm-upload__btn:hover:not(:disabled),
.cc-match-secondary:hover:not(:disabled),
.cc-rsearch__btn:hover:not(:disabled),
.cc-shot__rm:hover:not(:disabled),
.cc-compare-close:hover:not(:disabled),
.cc-report__vote:hover:not(:disabled),
.cc-report__evidence:hover:not(:disabled),
.cc-compare-bar__cancel:hover:not(:disabled),
.cc-compare-pop__clear:hover:not(:disabled),
.cc-compare-pop__close:hover:not(:disabled),
.cc-compare__remove:hover:not(:disabled),
.cc-hero-owner-pill:hover:not(:disabled) {
  background: var(--raised-hover);
  border-color: transparent;
  color: #fff;
}
.btn-primary,
.cc-wizard__btn.cc-wizard__btn--primary,
.cc-intro-card__cta--primary,
.cc-browse-more__btn,
.cc-eventcard__more,
.cc-compare-bar__go,
.cc-cm__send,
.cc-reports__submit,
.cc-report__btn.cc-report__btn--primary,
.cc-apply__submit,
.cc-womquick__go,
.cc-thread__btn.cc-thread__btn--accept,
.cc-cookie__btn,
.cc-error__btn,
.cc-bot__cta,
.cc-dash__btn,
.cc-dash__clanbtn,
.cc-match-submit,
.cc-newsbtn.cc-newsbtn--primary,
.cc-thread__btn.cc-thread__btn--send {
  background: var(--raised-primary);
  border: 1px solid transparent;
  box-shadow: var(--raised-primary-shadow);
  color: #fff;
  text-shadow: var(--raised-text);
}
.btn-primary:hover:not(:disabled),
.cc-wizard__btn.cc-wizard__btn--primary:hover:not(:disabled),
.cc-intro-card__cta--primary:hover:not(:disabled),
.cc-browse-more__btn:hover:not(:disabled),
.cc-eventcard__more:hover:not(:disabled),
.cc-compare-bar__go:hover:not(:disabled),
.cc-cm__send:hover:not(:disabled),
.cc-reports__submit:hover:not(:disabled),
.cc-report__btn.cc-report__btn--primary:hover:not(:disabled),
.cc-apply__submit:hover:not(:disabled),
.cc-womquick__go:hover:not(:disabled),
.cc-thread__btn.cc-thread__btn--accept:hover:not(:disabled),
.cc-cookie__btn:hover:not(:disabled),
.cc-error__btn:hover:not(:disabled),
.cc-bot__cta:hover:not(:disabled),
.cc-dash__btn:hover:not(:disabled),
.cc-dash__clanbtn:hover:not(:disabled),
.cc-match-submit:hover:not(:disabled),
.cc-newsbtn.cc-newsbtn--primary:hover:not(:disabled),
.cc-thread__btn.cc-thread__btn--send:hover:not(:disabled) {
  background: var(--raised-primary-hover);
  border-color: transparent;
  color: #fff;
}
.ch-join--cta,
.ch-rail__btn.ch-rail__btn--save,
.ch-review-form__btn,
.ch-reply-form__btn,
.ch-card__addbtn,
.cc-ally__cta {
  border-color: transparent;
  box-shadow: var(--raised-shadow);
  text-shadow: var(--raised-text);
}
.btn-secondary:active:not(:disabled),
.cc-wizard__btn:active:not(:disabled),
.cc-intro-card__cta--ghost:active:not(:disabled),
.ch-join--edit:active:not(:disabled),
.cc-report__btn:active:not(:disabled),
.cc-rsearch__btn:active:not(:disabled),
.cc-shot__rm:active:not(:disabled),
.cc-reports__pager-link:active:not(:disabled),
.ch-rail__btn:active:not(:disabled),
.cc-womquick__btn:active:not(:disabled),
.cc-thread__btn:active:not(:disabled),
.ch-members__more:active:not(:disabled),
.cc-pagination__btn:active:not(:disabled),
.cc-dash__btn.cc-dash__btn--ghost:active:not(:disabled),
.cc-newsbtn:active:not(:disabled),
.ch-linkgrid__btn:active:not(:disabled),
.ch-ed__barbtn:active:not(:disabled),
.ch-review__reply-btn:active:not(:disabled),
.cc-wm-rsn__btn:active:not(:disabled),
.cc-wm-upload__btn:active:not(:disabled),
.cc-match-secondary:active:not(:disabled),
.cc-compare-close:active:not(:disabled),
.cc-report__vote:active:not(:disabled),
.cc-report__evidence:active:not(:disabled),
.cc-compare-bar__cancel:active:not(:disabled),
.cc-compare-pop__clear:active:not(:disabled),
.cc-compare-pop__close:active:not(:disabled),
.cc-compare__remove:active:not(:disabled),
.cc-hero-owner-pill:active:not(:disabled),
.btn-primary:active:not(:disabled),
.cc-wizard__btn.cc-wizard__btn--primary:active:not(:disabled),
.cc-intro-card__cta--primary:active:not(:disabled),
.cc-browse-more__btn:active:not(:disabled),
.cc-eventcard__more:active:not(:disabled),
.cc-compare-bar__go:active:not(:disabled),
.cc-cm__send:active:not(:disabled),
.cc-reports__submit:active:not(:disabled),
.cc-report__btn.cc-report__btn--primary:active:not(:disabled),
.cc-apply__submit:active:not(:disabled),
.cc-womquick__go:active:not(:disabled),
.cc-thread__btn.cc-thread__btn--accept:active:not(:disabled),
.cc-cookie__btn:active:not(:disabled),
.cc-error__btn:active:not(:disabled),
.cc-bot__cta:active:not(:disabled),
.cc-dash__btn:active:not(:disabled),
.cc-dash__clanbtn:active:not(:disabled),
.cc-match-submit:active:not(:disabled),
.cc-newsbtn.cc-newsbtn--primary:active:not(:disabled),
.cc-thread__btn.cc-thread__btn--send:active:not(:disabled),
.ch-join--cta:active:not(:disabled),
.ch-rail__btn.ch-rail__btn--save:active:not(:disabled),
.ch-review-form__btn:active:not(:disabled),
.ch-reply-form__btn:active:not(:disabled),
.ch-card__addbtn:active:not(:disabled),
.cc-ally__cta:active:not(:disabled) {
  box-shadow: var(--pressed-shadow);
  transform: translateY(0);
}
.ch-tag-pill,
.cc-type-pill,
.ch-req,
.cc-brick__want,
.cc-compare-bar__chip,
.cc-compare__chip,
.cc-compare__status {
  background: var(--carved);
  border: 1px solid transparent;
  box-shadow: var(--carved-shadow);
  text-shadow: var(--carved-text);
}
.ch-tag-pill:hover,
.cc-type-pill:hover,
.ch-req:hover,
.cc-brick__want:hover {
  border-color: transparent;
}
.cc-wm-pill span {
  background: var(--raised);
  border: 1px solid transparent;
  box-shadow: var(--raised-shadow);
  color: #fff;
  text-shadow: var(--raised-text);
}
.cc-wm-pill span:hover {
  background: var(--raised-hover);
  border-color: transparent;
}
.ch-info__stat,
.ch-msum__cell,
.ch-kctile,
.ch-gained__played,
.ch-staff-item,
.ch-act,
.ch-social-bar,
.ch-hero__metatop,
.ch-kc__modes,
.ch-comps__modes {
  background: var(--carved);
  border: 1px solid transparent;
  box-shadow: var(--carved-shadow);
}
.ch-staff-item:hover,
.ch-kctile:hover,
a.ch-gained__played:hover {
  background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%);
  border-color: transparent;
}
.ch-cdrop__btn,
.ch-mdir,
.ch-cal__nav,
.ch-review__thumb,
.ch-kcmode.is-active,
.ch-compmode.is-active {
  background: var(--raised);
  border: 1px solid transparent;
  box-shadow: var(--raised-shadow);
  text-shadow: var(--raised-text);
}
.ch-cdrop__btn:hover,
.ch-mdir:hover,
.ch-cal__nav:hover,
.ch-review__thumb:hover {
  background: var(--raised-hover);
  border-color: transparent;
}
.ch-cdrop.is-open .ch-cdrop__btn,
.ch-cdrop__btn:active,
.ch-mdir:active,
.ch-cal__nav:active,
.ch-review__thumb:active {
  background: var(--carved);
  border-color: transparent;
  box-shadow: var(--pressed-shadow);
}
.ch-kcmode.is-active,
.ch-compmode.is-active {
  color: #fff;
}
.ch-review__thumb.is-on {
  background: var(--carved);
  border-color: transparent;
  box-shadow: var(--pressed-shadow);
}
.ch-newsitem:not(.ch-newsitem--cover) {
  background: var(--carved);
  box-shadow: var(--carved-shadow);
}
.ch-newsitem,
.ch-newsitem:hover,
.ch-newsitem:active,
.ch-newsitem:focus-visible,
.ch-allyclans__nav {
  border-color: transparent;
}
.ch-newsitem:not(.ch-newsitem--cover):hover {
  background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%);
  box-shadow: var(--carved-shadow);
  transform: none;
}
.ch-review,
.ch-reply,
.ch-raidcard,
.ch-compcard,
.ch-comp-past {
  background: var(--carved);
  border: 1px solid transparent;
  box-shadow: var(--carved-shadow);
}
.ch-raidcard::before { display: none; }
.ch-comp-past {
  border-radius: var(--radius-md);
  padding: 8px 10px;
}
.ch-comp-past + .ch-comp-past { margin-top: 6px; }
.ch-compcard:hover,
.ch-comp-past:hover {
  background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%);
  border-color: transparent;
}
.cc-landing-footer { position: relative; z-index: 2; }
.ch-compcard__board { gap: 3px; }
.ch-compcard__pl { font-size: 16px; line-height: 1; padding: 5px 10px; }
.ch-compcard__pos { font-size: 16px; width: 18px; }
.ch-compcard__gain { font-family: var(--font-game); font-size: 20px; color: var(--clan-amount, var(--clan-accent, var(--accent))); }
.ch-compcard__gainu { font-family: var(--font-ui); font-size: 12px; }
.ch-compcard__bg,
.ch-raidcard__bg {
  top: -24px;
  right: -22px;
  width: 200px;
  height: 200px;
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(200deg, #000 20%, transparent 78%);
  mask-image: linear-gradient(200deg, #000 20%, transparent 78%);
}
.ch-gained__controls { flex-wrap: nowrap; }
.ch-gained__played { min-width: 0; padding: 5px 10px; }
.ch-msum__v { font-size: 16px; }
.ch-msum__k { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.06em; color: var(--text-dim); }
.ch-msum__ico { width: 16px; height: 16px; }
.ch-makeup { gap: 3px; }
.ch-makeup__seg {
  height: 32px;
  min-width: 3.9rem;
  padding: 0 9px;
  gap: 5px;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  justify-content: center;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),
    0 4px 10px -3px rgba(0, 0, 0, 0.6);
}
.ch-makeup__seg.ch-makeup--main { color: #fff; }
.ch-makeup__ico { width: auto; height: 16px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)); }
.ch-makeup__seg > .ch-makeup__lbl, .ch-makeup__seg > .ch-makeup__n { position: relative; top: 1px; }
.ch-makeup--main { background: #5a6cf2; }
.ch-makeup--ironman { background: #747e8e; }
.ch-makeup--hardcore { background: #b83c4d; }
.ch-makeup--ultimate { background: #3d88c4; }
.ch-makeup--gim { background: #429e66; }
.cc-toast {
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 16px;
  border: 1px solid transparent;
  background: var(--raised);
  box-shadow: var(--raised-shadow), 0 16px 36px -14px rgba(0, 0, 0, 0.8);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #eef0f6;
  text-shadow: var(--raised-text);
}
.cc-toast::before { display: none; }
.cc-toast__msg { padding-top: 0; line-height: 1.25; }
.ch-review__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ch-review__tools .ch-review__del,
.ch-review__tools .ch-reply__del { margin-left: 0; }
.ch-review__tool,
.ch-review__del button,
.ch-reply__del button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--raised);
  box-shadow: var(--raised-shadow);
  color: var(--text-muted);
  cursor: pointer;
}
.ch-review__tool--sm,
.ch-reply__del button { width: 22px; height: 22px; }
.ch-review__tool svg { width: 13px; height: 13px; }
.ch-review__tool--sm svg { width: 11px; height: 11px; }
.ch-review__tool:hover { background: var(--raised-hover); color: var(--text); border-color: transparent; }
.ch-review__del button:hover,
.ch-reply__del button:hover { background: var(--raised-hover); color: #ff6b6b; border-color: transparent; }
.ch-edit-form { margin: 0 0 12px; }
.cc-cm__cedit,
.cc-cm__cdel {
  margin-left: 2px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}
.cc-cm__cedit:hover { color: var(--text); }
.cc-cm__cdel:hover { color: #ff6b6b; }
.cc-cm__editbox { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; }
.cc-cm__editbox textarea { width: 100%; min-height: 60px; resize: vertical; }
.cc-cm__editrow { display: flex; gap: 8px; justify-content: flex-end; }
@media (min-width: 641px) {
  .ch-hero__ident { flex-wrap: wrap; }
  .ch-hero__lead { flex: 1 1 0; min-width: min-content; }
  .ch-name { overflow-wrap: normal; }
}
.ch-raidcard__bg { opacity: 0.16; }
@container cardslot (max-width: 480px) {
  .ch-raidcard__bg { width: 96px; height: 96px; top: -10px; right: -8px; opacity: 0.12; }
  .ch-compcard__bg { width: 130px; height: 130px; top: -14px; right: -12px; opacity: 0.18; }
  .ch-raidcard__head { padding-right: 84px; }
  .ch-raidcard__total { font-size: 22px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
}
.cc-report__vote.cc-report__vote.is-active { background: var(--carved); box-shadow: var(--pressed-shadow); }
.cc-report__vote.cc-report__vote--up.is-active { color: #8fdca3; }
.cc-report__vote.cc-report__vote--down.is-active { color: #f0a0a0; }

.cc-report__deleteform { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cc-report__btn.cc-report__btn--danger { color: #ff8f8f; }
.cc-report__btn.cc-report__btn--danger:hover:not(:disabled) { color: #ffb0b0; background: linear-gradient(180deg, #4a2c33 0%, #3a2329 100%); }

@media (max-width: 640px) {
  .ch-req-row, .ch-tag-list { gap: 5px; }
  .ch-req { min-height: 30px; padding: 3px 9px; gap: 5px; font-size: 11px; letter-spacing: 0.04em; }
  .ch-req b { font-size: 15px; }
  .ch-req__ico { width: 15px; height: 15px; }
  .ch-req--note { font-size: 13px; white-space: normal; }
  .ch-tag-pill { padding: 4px 9px; gap: 5px; font-size: 13px; }
  .ch-tag-pill__ico { width: 14px; height: 14px; }
}


.ch-ggrid { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ch-gallery--grid .ch-ggrid { display: grid; }
.ch-gallery--grid .ch-gallery { display: none; }
.ch-ggrid__item { position: relative; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; border: 0; border-radius: var(--radius-md); background-color: var(--surface-2); background-size: cover; background-position: center; cursor: zoom-in; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.7); transition: filter 140ms; }
.ch-ggrid__item:hover { filter: brightness(1.08); }
.ch-ggrid__item:focus-visible { outline: 2px solid var(--clan-accent, var(--accent)); outline-offset: 2px; }
.ch-ggrid__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 11, 16, 0.62); font-family: var(--font-ui); font-size: 20px; color: #fff; text-shadow: 1px 1px 0 #000; }

.ch-hero__meta .ch-hero__metatop {
  gap: 8px;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ch-hero__metatop .ch-hero__recruit {
  justify-content: center;
  background: var(--carved);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--carved-shadow);
  text-shadow: var(--carved-text);
}
.ch-hero__metatop .ch-join--cta {
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}
@media (max-width: 640px) {
  .ch-hero__meta { width: 100%; align-items: stretch; }
  .ch-hero__meta .ch-hero__metatop { width: 100%; justify-content: center; }
  .ch-hero__metatop > * { flex: 1 1 0; min-width: 0; }
}

.dash-remrow__warn { margin-top: 3px; font-size: 12px; color: var(--warning); overflow-wrap: anywhere; }
.dash-remrow--failed .dash-remrow__msg { color: var(--text-dim); }

/* Why us page */
.cc-why { padding-bottom: 12px; overflow: hidden; }
.cc-why:has(> .cc-why__end:last-child) { padding-bottom: 0; }
.cc-why__hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: end; padding: 28px 40px 0; }
.cc-why__scene { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 62%; background: var(--scene) center / cover no-repeat; opacity: 0.55; filter: saturate(0.9) brightness(0.8); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 50%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 50%, transparent 100%); mask-composite: intersect; pointer-events: none; }
.cc-why__hero > .cc-why__herocopy, .cc-why__hero > .cc-why__clerk { position: relative; z-index: 1; }
.cc-why__herocopy { align-self: center; padding: 0 0 110px; }
.cc-why__title { margin: 0 0 16px; font-family: var(--font-display); font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.02; text-transform: uppercase; color: var(--text); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); }
.cc-why__title span { color: var(--accent); }
.cc-why__lede { margin: 0 0 24px; max-width: 640px; font-family: var(--font-read); font-size: 22px; line-height: 1.15; color: var(--text-dim); }
.cc-why__lede a { color: var(--accent); }
.cc-why__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.cc-why__clerk { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
.cc-why__clerk { --clerk-h: 340px; }
.cc-why__point > .cc-why__clerk { -webkit-mask-image: none; mask-image: none; }
.cc-why__hero > .cc-why__clerk img { width: 100%; height: auto; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.22)); }
.cc-why__clerk img { display: block; width: auto; max-width: 100%; height: var(--clerk-h); object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55)); }
.cc-why__clerk { -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
.cc-why__clerk { padding-top: 34px; }
.cc-why__clerkbox { position: relative; display: block; }
.cc-why__hero .cc-why__clerkbox { width: 100%; }
.cc-why__say { position: absolute; left: var(--hx, 50%); bottom: calc(100% - var(--hy, 0%) + 6px); transform: translateX(-50%); width: max-content; max-width: 240px; font-family: var(--font-game); font-size: 22px; line-height: 1.05; color: #ffff00; text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0, 0, 0, 0.6); text-align: center; }
.cc-why__point--flip > .cc-why__clerk .cc-why__say { left: calc(100% - var(--hx, 50%)); }
.cc-why__hero .cc-why__lede { line-height: 0.95; margin-bottom: 30px; }
.cc-why__sechead { padding: 0 40px; margin-top: -24px; }
.cc-why__point { display: grid; grid-template-columns: 240px minmax(0, 4fr) minmax(0, 7fr); grid-template-areas: "clerk text screen"; gap: 28px; align-items: center; padding: 22px 64px 22px 40px; }
.cc-why__point > .cc-why__clerk { justify-self: end; }
.cc-why__point--flip { padding: 22px 40px 22px 64px; }
.cc-why__point--flip > .cc-why__clerk { justify-self: start; }
.cc-why__point--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) 240px; grid-template-areas: "screen text clerk"; }
.cc-why__point > .cc-why__clerk { grid-area: clerk; position: relative; align-self: center; }
.cc-why__point > .cc-why__clerk .cc-why__say { font-size: 18px; max-width: 220px; }
.cc-why__point--flip > .cc-why__clerk img { transform: scaleX(-1); }
.cc-why__pointhead { grid-area: text; min-width: 0; }
.cc-why__point > .cc-why__screen { grid-area: screen; }
.cc-why__facts { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; font-family: var(--font-read); font-size: 20px; line-height: 0.95; color: var(--text-dim); }
.cc-why__facts li { display: flex; align-items: flex-start; gap: 8px; }
.cc-why__facts li::before { content: ""; flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; background: url("../img/icons/arrow.png") center / 13px 11px no-repeat; image-rendering: pixelated; }
.cc-why__point:not(.cc-why__point--flip) .cc-why__facts li { display: block; }
.cc-why__point:not(.cc-why__point--flip) .cc-why__facts li::before { display: inline-block; width: 15px; height: 15px; margin: 0 8px 0 0; vertical-align: -2px; }
.cc-why__pointhead .cc-why__h2 { line-height: 0.92; }
.cc-why__pointhead .cc-why__key { margin: 0 0 12px; font-size: clamp(1.2rem, 1.7vw, 1.75rem); text-wrap: balance; }
.cc-why__point:not(.cc-why__point--flip) .cc-why__pointhead { text-align: right; }

.cc-why__key { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #ffffff 30%, #aab5ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.9)); overflow-wrap: normal; word-break: keep-all; }
.cc-why__h2 { margin: 0 0 10px; font-family: var(--font-read); font-size: 28px; font-weight: 400; line-height: 1.05; color: var(--text); text-wrap: balance; }
.cc-why__screen { position: relative; width: 100%; max-width: 760px; justify-self: center; border-radius: 8px; box-shadow: 0 28px 56px -24px rgba(0, 0, 0, 0.95), 0 10px 20px -12px rgba(0, 0, 0, 0.7); }
.cc-why__glass { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 8px; overflow: hidden; background: radial-gradient(120% 90% at 20% 0%, #1c1f2c 0%, #12141c 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.cc-why__glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 28%, rgba(255, 255, 255, 0) 29%, rgba(255, 255, 255, 0) 100%); }
.cc-why__glass, .cc-why__glass * { pointer-events: none; user-select: none; cursor: default; transition: none !important; animation: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.cc-why__glass .ch-card { margin: 0; }
.cc-why__bricks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.cc-why__bricks .cc-brick { margin: 0; }
.cc-mini-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #6478ff, #3b2f8f); font-family: var(--font-ui); font-size: 14px; color: #fff; }
.cc-mini-av--reddit { background: #ff4500; font-size: 13px; }
.cc-why__dash { margin: 0; }
.cc-why__dash .cc-dash__section { padding: 18px 22px; }
.cc-why__dash .cc-dash__btn { display: inline-flex; }
.cc-why__cards .cc-card__panels { height: 60px; }
.cc-why__cards .cc-card__desc { -webkit-line-clamp: 3; }
.cc-why__glass > * { align-self: stretch; }
.cc-why__pills { margin: 0; }
.cc-why__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cc-why__cards .cc-card__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cc-why__card .ch-info__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cc-why__makeup { margin-top: 14px; }
.cc-why__editor { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: start; }
.cc-why__toolkit { display: flex; flex-direction: column; gap: 8px; }
.cc-why__toolkit .ch-toolkit__chip { cursor: default; }
.cc-why__toolkit .ch-toolkit__chip:first-of-type { border-color: var(--accent); transform: translateX(8px) rotate(-1.5deg); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.9); }
.cc-why__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cc-why__slot { padding: 4px; }
.cc-why__slot--w3 { grid-column: span 3; }
.cc-why__slot--w2 { grid-column: span 2; }
.cc-why__slot .ch-ed__bar { cursor: default; }
.cc-why__minicard { padding: 12px 14px; font-family: var(--font-read); font-size: 17px; line-height: 1.25; color: var(--text-dim); }
.cc-why__evcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cc-why__anstats { margin: 0; }
.cc-why__chartcard { margin: 0; padding: 14px 16px 0; }
.cc-why__chartcard .cc-mock__chart { margin-top: 10px; background: none; box-shadow: none; padding: 0; }
.cc-why__botdash { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; }
.cc-why__botdash .dash-nav { position: static; }
.cc-why__botdash .dash-nav > span:not(.dash-nav__group) { display: block; padding: 6px 10px; border-radius: 6px; font-family: var(--font-ui); font-size: 15px; color: var(--text-dim); }
.cc-why__botdash .dash-nav > span.is-active { background: rgba(100, 120, 255, 0.16); color: var(--text); }
.cc-why__botdash .cvb__preview { margin: 0; }
.cc-why__ally { grid-template-columns: 200px minmax(0, 1fr); margin-top: 36px; }
.cc-why__ally .cc-ally__name { font-size: 20px; }
.cc-why__match { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; padding: 26px 18px; }
.cc-why__game { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; text-align: center; }
.cc-why__match .cc-match-game__logo { width: 84px; height: 84px; }
.cc-why__gamename { font-family: var(--font-ui); font-size: 16px; line-height: 1.2; color: var(--text-dim); text-wrap: balance; }
.cc-why__end { position: relative; overflow: hidden; display: block; margin: 10px 0 0; padding: 110px 32px 84px; text-align: center; }
.cc-why__endbg { position: absolute; inset: 0; background: var(--scene) center 35% / cover no-repeat; opacity: 0.6; filter: saturate(0.9) brightness(0.75); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%); mask-image: linear-gradient(180deg, transparent 0%, #000 42%); }
.cc-why__endbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 27, 35, 0.2), rgba(26, 27, 35, 0.55)), radial-gradient(ellipse 60% 70% at 50% 55%, rgba(100, 120, 255, 0.14), transparent 70%); }
.cc-why__end .cc-why__h2 { margin-bottom: 12px; font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.05; text-transform: uppercase; }
.cc-why__endcopy { position: relative; max-width: 680px; margin: 0 auto; }
.cc-why__end .cc-why__lede { margin: 0 auto 26px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); }
.cc-why__end .cc-why__ctas { justify-content: center; }
.cc-mock__chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 10px 12px 0; border-radius: 4px; background: var(--carved); box-shadow: var(--carved-shadow); }
.cc-mock__chart i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #8090ff, #4552c4); transform-origin: bottom; }
.cc-why__offer { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 28px; position: relative; z-index: 2; margin-top: -114px; padding: 8px 34px 84px; border-bottom: 0; }
.cc-why__offer .cc-bot__col { grid-row: span 3; }
.cc-why__offer .cc-bot__col .cc-why__key { font-size: clamp(1.1rem, 1.7vw, 1.6rem); white-space: nowrap; }
.cc-why__offer .cc-bot__ticks { padding: 22px 24px; }
.cc-why__offercta { display: flex; justify-content: center; margin-top: 26px; }
.cc-why__features { position: relative; margin-top: 18px; }
.cc-why__tabs { justify-content: center; gap: 6px; padding: 0 40px; }
.cc-why__rail { position: relative; }
.cc-why__track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cc-why__track::-webkit-scrollbar { display: none; }
.cc-why__track > .cc-why__point { flex: 0 0 100%; min-width: 0; align-content: center; scroll-snap-align: start; scroll-snap-stop: always; }
.cc-why__nav--prev { left: 10px; }
.cc-why__nav--next { right: 10px; }
@media (max-width: 1100px) {
  .cc-why__offer { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 40px; }
  .cc-why__offer .cc-bot__col { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 900px) {
  .cc-why__tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 2px 22px; }
  .cc-why__tabs::-webkit-scrollbar { display: none; }
  .cc-why__tabs .cc-filter-pill { flex: none; }
  .cc-why__offer { margin-top: -72px; }
  .cc-why__track { align-items: flex-start; overflow-y: hidden; }
  .cc-why__track > .cc-why__point { content-visibility: auto; contain-intrinsic-size: auto 640px; }
  .cc-why__track .cc-why__key { filter: none; }
  .cc-why__track .cc-why__screen { box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.9); }
  .cc-why__nav { display: none; }
}
@media (max-width: 640px) {
  .cc-why__offer { margin-top: -40px; padding: 8px 20px 64px; }
  .cc-why__tabs { padding: 2px 20px; }
  .cc-why__track > .cc-why__point, .cc-why__track > .cc-why__point--flip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "screen"; gap: 18px; padding: 22px 20px 8px; }
  .cc-why__track > .cc-why__point > .cc-why__clerk { display: none; }
  .cc-why__track .cc-why__pointhead, .cc-why__track .cc-why__point:not(.cc-why__point--flip) .cc-why__pointhead { text-align: left; }
  .cc-why__track .cc-why__pointhead .cc-why__key { font-size: 1.25rem; }
}
@media (max-width: 900px) {
  .cc-why__hero { grid-template-columns: minmax(0, 1fr) 190px; padding: 28px 22px 0; }
  .cc-why__point { grid-template-columns: 160px minmax(0, 1fr); grid-template-areas: "clerk text" "screen screen"; gap: 20px 18px; padding: 18px 22px; }
  .cc-why__point--flip { grid-template-columns: minmax(0, 1fr) 160px; grid-template-areas: "text clerk" "screen screen"; }
  .cc-why__point > .cc-why__clerk, .cc-why__point--flip > .cc-why__clerk { justify-self: center; }
  .cc-why__clerk { --clerk-h: 250px; }
  .cc-why__sechead { padding: 0 22px; margin-top: -12px; }
  .cc-why__point:not(.cc-why__point--flip) .cc-why__pointhead { text-align: left; }
  .cc-why__point:not(.cc-why__point--flip) .cc-why__facts li { display: flex; }
  .cc-why__point:not(.cc-why__point--flip) .cc-why__facts li::before { margin: 1px 0 0; }

  .cc-why__end { margin: 10px 0 0; padding: 80px 20px 56px; }
}
@media (max-width: 640px) {
  .cc-why__hero { grid-template-columns: minmax(0, 1fr); }
  .cc-why__hero .cc-why__clerk { display: none; }
  .cc-why__herocopy { padding: 20px 0 40px; }
  .cc-why__ctas { flex-wrap: nowrap; gap: 8px; }
  .cc-why__ctas .cc-intro-card__cta { flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 6px; font-size: 13px; line-height: 1.15; letter-spacing: 0.02em; text-align: center; white-space: normal; text-wrap: balance; }
  .cc-why__end { margin: 10px 0 0; padding: 64px 14px 44px; }
  .cc-why__scene { width: 100%; opacity: 0.35; }
  .cc-why__h2 { font-size: 24px; }
  .cc-why__point { grid-template-columns: 120px minmax(0, 1fr); }
  .cc-why__point--flip { grid-template-columns: minmax(0, 1fr) 120px; }
  .cc-why__clerk { --clerk-h: 190px; }
  .cc-why__point > .cc-why__clerk img { filter: none; }
  .cc-why__pointhead .cc-why__key { font-size: clamp(0.8rem, 3.7vw, 1.05rem); }
  .cc-why__cards .cc-card:nth-child(2) { display: none; }
  .cc-why__point > .cc-why__clerk .cc-why__say { font-size: 13px; max-width: 130px; }
  .cc-why__facts { font-size: 17px; gap: 8px; }
  .cc-why__screen { border-radius: 8px; }
  .cc-why__glass { padding: 12px; }
  .cc-why__cards, .cc-why__evcards, .cc-why__editor, .cc-why__botdash, .cc-why__ally { grid-template-columns: minmax(0, 1fr); }
  .cc-why__card .ch-info__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-why__bricks { grid-template-columns: minmax(0, 1fr); }
  .cc-why__bricks .cc-brick:nth-child(2) { display: none; }
  .cc-why__toolkit { flex-direction: row; flex-wrap: wrap; }
  .cc-why__toolkit .ch-toolkit__chip { width: auto; gap: 8px; }
  .cc-why__botdash .dash-nav { display: none; }
  .cc-why__match { gap: 10px; padding: 20px 6px; }
  .cc-why__match .cc-match-game__logo { width: 56px; height: 56px; }
  .cc-why__gamename { font-size: 13px; }
}

/* Clan motif */
.ch-motif { position: absolute; z-index: 3; top: 0; right: 28px; pointer-events: none; width: clamp(56px, 8vw, 116px); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); }
.ch-motif__vex { display: block; width: 100%; height: auto; overflow: visible; }
.ch-motif__cloth { fill: var(--motif, #282828); }
.ch-motif--black { --motif: #282828; }
.ch-motif--orange { --motif: #d09038; }
.ch-motif--blue { --motif: #303068; }
.ch-motif--red { --motif: #981010; }
.ch-motif--green { --motif: #789008; }
.ch-motif--yellow { --motif: #d0c848; }
.ch-motif--lightblue { --motif: #98c8f8; }
.ch-motif--purple { --motif: #9868b0; }
.ch-motif__ico { position: absolute; left: 50%; width: 44%; height: auto; transform: translate(-50%, -50%); image-rendering: pixelated; }
.ch-motif__ico--top { top: 23%; }
.ch-motif__ico--bottom { top: 59.5%; }
.ch-hero__banner--empty + .ch-motif { width: 52px; }
@media (max-width: 640px) {
  .ch-motif { right: 10px; width: 34px; }
}
.ch-motifpick { margin-top: 14px; }
.ch-motifpick__sws { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ch-motifpick__sw { width: 22px; height: 22px; border-radius: 4px; border: 0; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.6); }
.ch-motifpick__sw.is-on { box-shadow: 0 0 0 2px #16161a, 0 0 0 4px var(--clan-accent, var(--accent)); }
.ch-motifpick__sw--none { background: repeating-linear-gradient(45deg, #2a2a30 0 4px, #1c1c21 4px 8px); }
.ch-motifpick__sw--black { background: #282828; }
.ch-motifpick__sw--orange { background: #d09038; }
.ch-motifpick__sw--blue { background: #303068; }
.ch-motifpick__sw--red { background: #981010; }
.ch-motifpick__sw--green { background: #789008; }
.ch-motifpick__sw--yellow { background: #d0c848; }
.ch-motifpick__sw--lightblue { background: #98c8f8; }
.ch-motifpick__sw--purple { background: #9868b0; }
.ch-motifpick__tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.ch-motifpick__tab { flex: 1; padding: 6px 8px; border-radius: 4px; border: 0; background: var(--carved); box-shadow: var(--carved-shadow); font-family: var(--font-ui); font-size: 13px; color: var(--text-dim); cursor: pointer; }
.ch-motifpick__tab.is-on { background: var(--raised); box-shadow: var(--raised-shadow); color: var(--text); }
.ch-motifpick__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.ch-motifpick__ico { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; overflow: hidden; padding: 3px; border-radius: 4px; border: 0; background: var(--carved); box-shadow: var(--carved-shadow); cursor: pointer; }
.ch-motifpick__ico img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.ch-motifpick__ico--none { font-family: var(--font-ui); font-size: 11px; color: var(--text-muted); }
.ch-motifpick__ico.is-on { background: rgba(100, 120, 255, 0.22); box-shadow: inset 0 0 0 2px var(--clan-accent, var(--accent)); }
.cc-motifwiz { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.cc-motifwiz label { position: relative; }
.cc-motifwiz input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cc-motifwiz .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-motifwiz .ch-motifpick__sw { width: 32px; height: 32px; }
.cc-motifwiz .ch-motifpick__sw:has(input:checked) { box-shadow: 0 0 0 2px #16161a, 0 0 0 4px var(--accent); }
.cc-motifwiz .ch-motifpick__ico:has(input:checked) { background: rgba(100, 120, 255, 0.22); box-shadow: inset 0 0 0 2px var(--accent); }
.cc-motifwiz label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-motifwiz__label { display: block; margin-bottom: 6px; font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
.cc-motifwiz__grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }

.cc-pagecard,
.cc-shell,
.cc-article,
.cc-dash,
.cc-apply,
.cc-auth-card,
.cc-wizard,
.cc-error__card,
.dash-card:not(.cdash-attn):not(.cdash-danger),
.srv-card,
.cc-card,
.cc-brick,
.cc-clanmini,
.cc-ally,
.cc-pillar,
.cc-newscard,
.cc-newshero,
.cc-feedrow,
.cc-eventcard,
.srv-tile,
.cc-intg__card,
.tk-card { border-color: transparent; }

.cc-pagecard:not(.cc-sectioncard),
.cc-shell,
.cc-article,
.cc-dash,
.cc-apply,
.cc-auth-card,
.cc-wizard,
.cc-error__card,
.dash-card,
.srv-card { box-shadow: var(--panel-shadow); }

.cc-card,
.cc-brick,
.cc-clanmini,
.cc-ally,
.cc-pillar,
.cc-newscard,
.cc-newshero,
.cc-feedrow,
.cc-eventcard,
.srv-tile,
.cc-intg__card,
.tk-card { box-shadow: var(--card-shadow); }

.cc-clanmini:hover,
.srv-tile:hover,
.srv-card:hover,
.cc-feedrow:hover,
.cc-article-more .cc-newscard:hover { border-color: transparent; box-shadow: var(--card-shadow-hover); }

.cdash-kpi,
.cdash-mini,
.cdash-event,
.cdash-seg,
.cc-tag-picker,
.cc-help-faq details,
.ch-faq__item {
  background: var(--carved);
  border-color: transparent;
  box-shadow: var(--carved-shadow);
}

.cdash-act,
.cc-legal .cc-help-toc a {
  border-color: transparent;
  box-shadow: var(--raised-shadow);
  text-shadow: var(--raised-text);
}
.cdash-act:not(.cdash-act--hot),
.cc-legal .cc-help-toc a { background: var(--raised); }
.cdash-act:not(.cdash-act--hot):hover,
.cc-legal .cc-help-toc a:hover { border-color: transparent; background: var(--raised-hover); }
.cdash-act--hot { box-shadow: var(--raised-primary-shadow); }
.cdash-act--hot:hover { border-color: transparent; }
.cdash-act.is-off:hover { border-color: transparent; background: var(--raised); }

.cdash-link {
  background: var(--raised);
  border-color: transparent;
  box-shadow: var(--raised-shadow);
  text-shadow: var(--raised-text);
}
.cdash-link:hover,
.cdash-link--danger:hover,
.cdash-link--ok:hover { border-color: transparent; background: var(--raised-hover); }
.cdash-filter {
  background: var(--carved);
  border-color: transparent;
  box-shadow: var(--carved-shadow);
  text-shadow: var(--carved-text);
}
.cdash-filter:hover { border-color: transparent; }
.cdash-filter.is-on {
  background: var(--raised);
  border-color: transparent;
  box-shadow: var(--raised-shadow);
  text-shadow: var(--raised-text);
}

.cc-bot__ghost {
  background: var(--raised);
  border-color: transparent;
  box-shadow: var(--raised-shadow);
  text-shadow: var(--raised-text);
}
.cc-bot__ghost:hover { border-color: transparent; background: var(--raised-hover); }

/* Account + inbox pages */
.cc-acct__lede { margin: -4px 0 22px; font-family: var(--font-read); font-size: 20px; line-height: 1.3; color: var(--text-dim); }
.cc-acct__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.cc-acct__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  box-shadow: var(--card-shadow);
}
.cc-acct__panel--danger { background: linear-gradient(180deg, rgba(220, 60, 60, 0.09), rgba(220, 60, 60, 0.02)); }
.cc-acct__h { margin: 0; font-family: var(--font-ui); font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.cc-acct__h--danger { color: #ff8f8f; }
.cc-acct__sub { margin: -6px 0 0; font-family: var(--font-read); font-size: 18px; line-height: 1.3; color: var(--text-dim); }
.cc-acct__sub a { color: var(--accent); }
.cc-acct__profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.cc-acct__stat { min-width: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--carved); box-shadow: var(--carved-shadow); }
.cc-acct__stat dt { margin-bottom: 4px; font-family: var(--font-data); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.cc-acct__stat dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: 18px; color: var(--text); text-shadow: var(--carved-text); }
.cc-acct__stat dd.is-data { font-family: var(--font-data); font-size: 14px; }
.cc-acct__clans { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-acct__clan {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 14px; border-radius: var(--radius-md);
  background: var(--raised); box-shadow: var(--raised-shadow);
  font-family: var(--font-ui); font-size: 16px; color: var(--text); text-shadow: var(--raised-text); text-decoration: none;
}
.cc-acct__clan:hover { background: var(--raised-hover); }
.cc-acct__clan img { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
.cc-acct__checks { display: grid; gap: 6px; }
.cc-acct__check {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-md);
  background: var(--carved); box-shadow: var(--carved-shadow);
  font-family: var(--font-ui); font-size: 16px; color: var(--text-dim); cursor: pointer;
}
.cc-acct__check:has(input:checked) { color: var(--text); }
.cc-acct__check input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--accent); }
.cc-acct__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.cc-acct__danger { display: grid; gap: 10px; }
.cc-acct__danger label { font-family: var(--font-ui); font-size: 16px; color: var(--text-dim); }
.cc-acct__danger strong { color: var(--text); font-weight: 400; }
.cc-acct__danger .cc-dash__input { margin-top: 6px; }
@media (max-width: 900px) {
  .cc-acct__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .cc-acct__profile { grid-template-columns: minmax(0, 1fr); }
}

.cc-inbox__search { margin: 0 0 14px; }
.cc-inbox__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cc-inbox__list { display: grid; gap: 10px; }
.cc-inbox__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 16px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  box-shadow: var(--card-shadow);
  transition: background 140ms, transform 120ms;
}
.cc-inbox__row:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)); }
.cc-inbox__link { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.cc-inbox__main { min-width: 0; display: grid; gap: 6px; }
.cc-inbox__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.cc-inbox__tag {
  padding: 3px 8px; border-radius: 4px; background: var(--carved); box-shadow: var(--carved-shadow);
  font-family: var(--font-data); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}
.cc-inbox__clan { font-family: var(--font-ui); font-size: 16px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-inbox__status { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cc-inbox__subject { margin: 0; font-family: var(--font-ui); font-size: 18px; line-height: 1.15; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-inbox__row.is-unread .cc-inbox__subject { color: #fff; }
.cc-inbox__preview { margin: 0; font-family: var(--font-read); font-size: 18px; line-height: 1.2; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-inbox__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(100, 120, 255, 0.6); flex-shrink: 0; }
.cc-inbox__side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; }
.cc-inbox__age { font-family: var(--font-data); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.cc-inbox__del {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--radius-md); background: var(--raised); box-shadow: var(--raised-shadow);
  color: var(--text-dim); cursor: pointer;
}
.cc-inbox__del:hover { background: var(--raised-hover); color: #ff8f8f; }
.cc-inbox__del:active { box-shadow: var(--pressed-shadow); }
.cc-inbox__del svg { width: 16px; height: 16px; }
.cc-inbox__check { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; align-self: center; cursor: pointer; }
.cc-inbox__check input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 0;
  border-radius: 4px; background: var(--carved); box-shadow: var(--carved-shadow); cursor: pointer;
}
.cc-inbox__check input:checked {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.cc-inbox__check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-inbox__bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 0 18px; }
.cc-inbox__selall span { font-family: var(--font-ui); font-size: 16px; color: var(--text-dim); }
.cc-inbox__bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-inbox__bulk-btn {
  padding: 8px 14px; border: 0; border-radius: var(--radius-md); background: var(--raised); box-shadow: var(--raised-shadow);
  font-family: var(--font-ui); font-size: 16px; color: var(--text-dim); text-shadow: var(--raised-text); cursor: pointer;
}
.cc-inbox__bulk-btn:hover { background: var(--raised-hover); color: var(--text); }
.cc-inbox__bulk-btn:active { box-shadow: var(--pressed-shadow); }

.cc-thread__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 20px; }
.cc-thread__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.cc-thread__tools form { margin: 0; }
.cc-thread__bubble { border: 0; background: var(--carved); box-shadow: var(--carved-shadow); }
.cc-thread__msg.is-mine .cc-thread__bubble { background: linear-gradient(180deg, rgba(100, 120, 255, 0.16), rgba(100, 120, 255, 0.08)); box-shadow: var(--carved-shadow); }
.cc-thread__msg-user { font-size: 16px; }
.cc-thread__msg-age { font-size: 12px; }
.cc-thread__msg-text { font-family: var(--font-read); font-size: 18px; line-height: 1.25; color: var(--text); }
.cc-thread__msg-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.cc-thread__a { font-family: var(--font-read); font-size: 18px; line-height: 1.25; }
.cc-thread__avatar { border: 0; box-shadow: var(--carved-shadow); }
.cc-thread__application { border: 0; background: var(--carved); box-shadow: var(--carved-shadow); }
.cc-dash__btn.cc-dash__btn--danger {
  border: 0;
  background: linear-gradient(180deg, #c24848 0%, #9a3030 100%);
  box-shadow: var(--raised-shadow);
  color: #fff;
  text-shadow: var(--raised-text);
}
.cc-dash__btn.cc-dash__btn--danger:hover { background: linear-gradient(180deg, #d05252 0%, #a83636 100%); filter: none; }
.cc-inbox__chips .cc-dash__chip {
  border: 0;
  background: var(--raised);
  box-shadow: var(--raised-shadow);
  color: var(--text-dim);
  text-shadow: var(--raised-text);
  font-size: 16px;
}
.cc-inbox__chips .cc-dash__chip:hover { background: var(--raised-hover); color: var(--text); }
.cc-inbox__chips .cc-dash__chip.is-active { background: var(--carved); box-shadow: var(--pressed-shadow); color: var(--accent); }
.cc-inbox__flag {
  padding: 3px 8px; border-radius: 4px; background: var(--carved); box-shadow: var(--carved-shadow);
  font-family: var(--font-data); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #ffc861;
}
.cc-thread__arrival { margin-bottom: 22px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--carved); box-shadow: var(--carved-shadow); }
.cc-thread__arrival .cc-thread__actions { margin: 12px 0 0; }
.cc-thread__arrival-q { margin: 0; font-family: var(--font-ui); font-size: 18px; color: var(--text); }
.cdash-edits { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.cdash-edits__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: var(--radius-md); background: var(--carved); box-shadow: var(--carved-shadow); }
.cdash-edits__who { font-family: var(--font-ui); font-size: 16px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdash-edits__role { margin-left: 6px; font-family: var(--font-data); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cdash-edits__what { font-family: var(--font-ui); font-size: 14px; color: var(--text-dim); }
.cdash-edits__when { font-family: var(--font-data); font-size: 12px; color: var(--text-muted); }
.cc-apply__input { min-height: 0; height: 44px; resize: none; }
.cc-thread__history { margin-bottom: 22px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--carved); box-shadow: var(--carved-shadow); }
.cc-thread__rsn { margin-left: 8px; font-family: var(--font-data); font-size: 12px; letter-spacing: 0.06em; color: var(--text-muted); text-transform: none; }
.cc-thread__history-sum { margin: 0 0 12px; font-family: var(--font-read); font-size: 18px; color: var(--text); }
.cc-thread__history-list { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.cc-thread__history-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--raised); box-shadow: var(--raised-shadow); }
.cc-thread__history-clan { font-family: var(--font-ui); font-size: 16px; color: var(--text); text-decoration: none; }
.cc-thread__history-clan:hover { color: var(--accent); }
.cc-thread__history-when { font-family: var(--font-data); font-size: 12px; color: var(--text-muted); }
.cc-thread__history-note { margin: 0; font-family: var(--font-ui); font-size: 14px; color: var(--text-muted); }
.cc-wallfilter { margin-bottom: 12px; }
.cc-wallfilter .cc-panel-wrap.open { margin-top: 14px; }
.cc-wallfilter__clear { justify-content: flex-end; align-self: end; }
.cc-wallfilter__clear .cc-filter-clear { align-self: flex-start; text-decoration: none; }
.cc-wallfilter__meta { margin-top: 2px; line-height: 1; }
.cc-wallfilter__count { font-family: var(--font-ui); font-size: 16px; letter-spacing: 0.04em; color: var(--text-muted); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }

/* Bot dashboard pass: one control size, one label style, depth system */
.dash-ui { --ctl-h: 38px; }
.dash-ui .dash-card { padding: 22px 24px; }
.dash-ui .dash-card__title { font-family: var(--font-ui); font-size: 20px; letter-spacing: 0.02em; margin: 0 0 6px; }
.dash-ui .dash-card__hint,
.dash-ui .cc-field__help { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.dash-ui .dash-card__hint { margin: 0 0 16px; }
.dash-ui .cc-field__help { margin: 6px 0 0; }
.dash-ui .dash-subhead {
  margin: 4px 0 12px; font-family: var(--font-ui); font-size: 16px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim);
}
.dash-ui .dash-subhead--flush { margin: 0; }
.dash-ui label.block,
.dash-ui .cvb__accent > span,
.dash-ui .cvb__preview-label,
.dash-ui .cvb-block-roles__label {
  display: block; margin: 0 0 6px; font-family: var(--font-data); font-size: 11px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.dash-ui .dash-fields { gap: 14px 16px; align-items: start; }
.dash-ui .dash-field { justify-content: flex-start; }

.dash-ui input[type=text]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui input[type=number]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui input[type=url]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui input[type=search]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui input[type=datetime-local]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui input:not([type]):not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui select:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui textarea:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui .csel__trigger {
  width: 100%; min-height: var(--ctl-h); padding: 8px 12px; border: 1px solid transparent;
  border-radius: var(--radius-md); background: var(--well); box-shadow: var(--well-shadow);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--text);
}
.dash-ui input[type=text]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui input[type=number]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui input[type=url]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui input[type=search]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui input[type=datetime-local]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui input:not([type]):not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui select:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *),
.dash-ui .csel__trigger { height: var(--ctl-h); }
.dash-ui textarea:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *) { min-height: 76px; resize: vertical; }
.dash-ui input:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *)::placeholder,
.dash-ui textarea:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *)::placeholder { color: var(--text-muted); }
.dash-ui input:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *):focus,
.dash-ui select:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *):focus,
.dash-ui textarea:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *):focus,
.dash-ui .csel.is-open .csel__trigger { outline: none; border-color: transparent; box-shadow: var(--well-focus); }
.dash-ui input[type=file]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *) { height: auto; padding: 6px; font-size: 13px; }
.dash-ui input[type=file]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *)::file-selector-button {
  margin-right: 10px; padding: 6px 12px; border: 0; border-radius: var(--radius-sm);
  background: var(--raised); box-shadow: var(--raised-shadow); color: var(--text);
  font-family: var(--font-ui); font-size: 14px; cursor: pointer;
}
.dash-ui input[type=checkbox]:not(:is(.cvb-block, [data-cvb-roles], .cvb-emoji) *) { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }
.dash-ui .cvb-check,
.dash-ui label.flex,
.dash-ui .dash-check { font-family: var(--font-sans); font-size: 14px; line-height: 1.35; color: var(--text-dim); gap: 8px; }

.dash-ui .btn-primary {
  height: 40px; padding: 0 20px; font-family: var(--font-ui); font-size: 16px; font-weight: 400;
  letter-spacing: 0.02em; text-shadow: var(--raised-text);
}
.dash-ui .cvb__add,
.dash-ui .cvb-mini {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0;
  border-radius: var(--radius-md); background: var(--raised); box-shadow: var(--raised-shadow);
  font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.02em; color: var(--text-dim);
  text-shadow: var(--raised-text);
}
.dash-ui .cvb__add:hover,
.dash-ui .cvb-mini:hover { background: var(--raised-hover); color: var(--text); }
.dash-ui .cvb__add:active,
.dash-ui .cvb-mini:active { box-shadow: var(--pressed-shadow); }
.dash-ui .cvb__empty { border: 0; background: var(--carved); box-shadow: var(--carved-shadow); font-family: var(--font-sans); font-size: 13px; }
.dash-ui .cvb__preview { border: 0; box-shadow: var(--card-shadow); }
.dash-ui .cvb__accent { display: inline-flex; align-items: center; gap: 10px; }
.dash-ui .cvb__accent > span { margin: 0; }

.dash-ui .tk-card { border: 0; background: var(--carved); box-shadow: var(--carved-shadow); }
.dash-ui .tk-card__name { font-family: var(--font-ui); font-size: 16px; font-weight: 400; }
.dash-ui .tk-card__icon:empty { display: none; }
.dash-ui .dash-remrow { border: 0; background: var(--carved); box-shadow: var(--carved-shadow); }
.dash-ui .voice-access__row { border: 0; background: var(--carved); box-shadow: var(--carved-shadow); gap: 10px; padding: 12px 14px; }
.dash-ui .voice-access__row .cvb-check { font-size: 14px; align-items: flex-start; }
.dash-ui details > summary { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.12em; }
.dash-ui .botdash__back { font-family: var(--font-ui); font-size: 14px; }
.dash-ui .botdash__sub { font-family: var(--font-read); font-size: 18px; }
.dash-ui .dash-foot { margin-top: 18px; padding-top: 16px; }
.dash-ui .bot-grid,
.dash-ui .tk-config-grid { align-items: start; gap: 14px 16px; }
.dash-ui .bot-grid label,
.dash-ui .tk-config-grid label.block { margin: 0 0 6px; }
.dash-ui .bot-grid__checks,
.dash-ui .tk-config-check { align-self: end; min-height: var(--ctl-h); gap: 8px 20px; }
.dash-ui .bot-grid__checks .cvb-check,
.dash-ui .tk-config-check .cvb-check { font-size: 14px; }
.dash-ui .rolepick .csel,
.dash-ui .rolepick > select,
.dash-ui .dash-field > .csel,
.dash-ui .dash-field > select,
.dash-ui .dash-field > input { max-width: none; }
.dash-ui .ev-remind { border: 0; background: var(--carved); box-shadow: var(--carved-shadow); }
.dash-ui .ev-remind__row + .ev-remind__row { border-top-color: rgba(255, 255, 255, 0.05); }
.dash-ui .ev-remind__row input { width: 210px; flex: none; }
.dash-ui .ev-remind__title { font-family: var(--font-ui); font-size: 16px; }
.dash-ui .bot-grid__hint { font-family: var(--font-sans); font-size: 13px; color: var(--text-dim); }
@media (max-width: 560px) { .dash-ui .ev-remind__row input { width: 100%; } }
.dash-ui .cdash-linkinput input.cc-field__input { padding-left: 42px; }
.dash-ui .cdash-link,
.dash-ui .cdash-filter {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0;
  border-radius: var(--radius-md); background: var(--raised); box-shadow: var(--raised-shadow);
  font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.02em; text-transform: none;
  color: var(--text-dim); text-shadow: var(--raised-text);
}
.dash-ui .cdash-link:hover,
.dash-ui .cdash-filter:hover { background: var(--raised-hover); color: var(--text); }
.dash-ui .cdash-link--danger:hover { color: var(--danger); }
.dash-ui .cdash-filter.is-on { background: var(--carved); box-shadow: var(--pressed-shadow); color: var(--accent); }
.dash-ui .cdash-filter span { font-family: var(--font-data); font-size: 11px; }
.dash-ui .dash-card__hint .cdash-link { height: 24px; padding: 0 8px; vertical-align: baseline; }
.dash-ui .btn-secondary {
  height: 40px; padding: 0 20px; font-family: var(--font-ui); font-size: 16px; font-weight: 400;
  letter-spacing: 0.02em; text-shadow: var(--raised-text);
}
.dash-ui h3.dash-card__title { margin: 24px 0 10px; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.dash-ui .form-label,
.dash-ui .cc-field__label {
  display: block; margin: 0 0 6px; font-family: var(--font-data); font-size: 11px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.dash-ui details > summary.text-xs { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
.dash-ui .form-help { font-family: var(--font-sans); font-size: 13px; color: var(--text-dim); }
.cc-pillars--icons .cc-pillar__bg { filter: url(#cc-art-depth); }

.cdash-logo { width: 76px; height: 76px; min-width: 76px; border: 0; border-radius: 6px; background: var(--carved); box-shadow: var(--card-shadow); }
.cdash-head__id { gap: 18px; }
@media (max-width: 520px) { .cdash-logo { width: 52px; height: 52px; min-width: 52px; } .cdash-head__id { gap: 12px; align-items: flex-start; } }
.cdash-head .botdash__sub { font-family: var(--font-read); font-size: 19px; line-height: 1.2; color: var(--text-dim); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); }
.cdash-pill {
  display: inline-flex; align-items: center; padding: 5px 12px;
  font-family: var(--font-ui); font-size: 15px; letter-spacing: 0.02em; text-transform: capitalize;
  border: 0; border-radius: var(--radius-md); background: var(--carved); box-shadow: var(--carved-shadow); text-shadow: var(--carved-text);
}
.cdash-pill--approved, .cdash-pill--pending, .cdash-pill--rejected { background: var(--carved); border: 0; }

.dash-card.cdash-attn { padding: 12px 16px; border-color: transparent; background: linear-gradient(180deg, rgba(34, 34, 40, 0.94) 0%, rgba(26, 26, 30, 0.94) 100%); box-shadow: var(--card-shadow); }
.cdash-attn::before { display: none; }
.cdash-attn__head { gap: 8px; margin-bottom: 4px; }
.cdash-attn__title { font-family: var(--font-ui); font-size: 17px; color: #f3cd6a; text-shadow: 1px 1px 0 #000; }
.cdash-attn__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: 13px; color: #1c1405; background: #e8b84a; box-shadow: none;
}
.cdash-attn__item { gap: 12px; padding: 6px 0; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0; background: none; box-shadow: none; }
.cdash-attn__item:first-child { border-top: 0; }
.cdash-attn__icon, .cdash-attn__item--applications .cdash-attn__icon {
  width: 22px; height: 22px; border: 0; border-radius: 0; background: none; box-shadow: none; color: #f3cd6a;
}
.cdash-attn__item--applications .cdash-attn__icon, .cdash-attn__item--arrivals .cdash-attn__icon { color: #a9b4ff; }
.cdash-attn__icon svg { width: 20px; height: 20px; }
.cdash-attn__icon img { width: 20px; height: 20px; }
.cdash-attn__body { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.cdash-attn__label { font-family: var(--font-ui); font-size: 16px; color: var(--text); text-shadow: 1px 1px 0 #000; }
.cdash-attn__detail { font-family: var(--font-read); font-size: 15px; line-height: 1.2; color: var(--text-muted); }
.cdash-attn__btn {
  min-width: 0; padding: 7px 14px; border: 0; border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.04em; color: var(--text);
  background: var(--raised); box-shadow: var(--raised-shadow); text-shadow: var(--raised-text);
}
.cdash-attn__btn:hover { color: #fff; border: 0; background: var(--raised-hover); }
@media (max-width: 520px) { .cdash-attn__btn { margin-left: 34px; } .cdash-attn__body { flex-basis: calc(100% - 34px); } }

.dash-card.cdash-dock { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; padding: 10px; }
.dash-card.cdash-dock > .cdash-act, .dash-card.cdash-dock > .cdash-act-form { width: 100%; min-width: 0; height: 44px; }
.cdash-act__meta { display: none; }
.cdash-act-form > .cdash-act { width: 100%; }
.cdash-act {
  min-height: 0; width: auto; flex-direction: row; justify-content: center; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px; text-align: left; border-radius: var(--radius-md);
}
.cdash-act svg, .cdash-act img { width: 20px; height: 20px; flex-shrink: 0; margin: 0; color: #b9c1ff; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.8)); }
.cdash-act__icons { flex-shrink: 0; gap: 4px; }
.cdash-act__icons img { width: 18px; height: 18px; }
.cdash-act__text { display: flex; flex-direction: column; min-width: 0; }
.cdash-act__label { font-family: var(--font-ui); font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdash-act__meta { font-family: var(--font-read); font-size: 14px; line-height: 1.1; color: var(--text-muted); text-shadow: 1px 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdash-act--hot svg { color: #fff; }
.cdash-act--hot .cdash-act__meta { color: #dfe3ff; }
.cdash-act__badge { position: static; transform: none; margin-left: 2px; font-family: var(--font-ui); font-size: 12px; height: 18px; min-width: 18px; border-radius: var(--radius-md); background: var(--raised-primary); box-shadow: var(--raised-primary-shadow); }

.cdash-kpis { gap: 8px; }
.cdash-kpi { gap: 2px; padding: 10px 14px; border-radius: var(--radius-md); }
.cdash-kpi__key { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.05em; color: var(--text-muted); text-shadow: var(--carved-text); }
.cdash-kpi__val { font-family: var(--font-game); font-size: 26px; font-weight: 400; line-height: 0.95; color: var(--accent); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75), 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.cdash-kpi__sub { font-family: var(--font-read); font-size: 14px; line-height: 1.15; color: var(--text-dim); }
.cdash-kpi .cdash-delta { font-family: var(--font-read); }
.cdash-overview .dash-card__title { font-family: var(--font-ui); font-size: 20px; }
.cdash-overview .dash-card__hint,
.cdash-overview .cdash-empty { font-family: var(--font-read); font-size: 16px; line-height: 1.3; color: var(--text-dim); }
.cdash-overview .cdash-mini { gap: 2px; padding: 10px 14px; border-radius: var(--radius-md); }
.cdash-overview .cdash-mini__val { font-family: var(--font-game); font-size: 24px; font-weight: 400; line-height: 0.95; color: var(--accent); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75), 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.cdash-overview .cdash-mini__val.is-up { color: #8d9bff; }
.cdash-overview .cdash-mini__val.is-down { color: #fbbf24; }
.cdash-overview .cdash-mini__key { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); text-shadow: var(--carved-text); }
.cdash-overview .cdash-mini__key .cdash-delta { font-family: var(--font-ui); }
.cdash-overview :is(.cdash-note, .cdash-legend__item, .cdash-subhead, .cdash-row__meta, .cdash-line__x, .cdash-line__y, .cdash-bar__label, .cdash-tag) { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.04em; }
.cdash-overview .cdash-note .cdash-delta { font-family: var(--font-ui); }
.cdash-overview .cdash-rank__n { font-family: var(--font-ui); font-size: 13px; }
.cdash-overview :is(.cdash-rank__name, .cdash-move__rsn) { font-family: var(--font-read); font-size: 16px; }
.cdash-overview .cdash-rank__val { font-family: var(--font-game); font-size: 18px; color: var(--accent); }
.cdash-overview .cdash-seg__btn { font-size: 13px; }

.cc-wizard {
  border: 0; border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(43, 45, 57, 0.95) 0%, rgba(26, 27, 35, 0.97) 100%),
    radial-gradient(ellipse 120% 90% at 15% 0%, rgba(100, 120, 255, 0.08), transparent 60%);
  box-shadow: var(--panel-shadow);
}
.cc-wizard__nav { background: rgba(0, 0, 0, 0.16); border-right: 0; border-radius: 6px 0 0 6px; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.35), inset -2px 0 0 rgba(255, 255, 255, 0.03); padding: 14px 12px; gap: 6px; }
.cc-wizard__step-btn { border: 0; border-radius: var(--radius-md); padding: 10px 12px; }
.cc-wizard__step-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.035); }
.cc-wizard__step-btn.is-active { background: var(--raised); box-shadow: var(--raised-shadow); text-shadow: var(--raised-text); }
.cc-wizard__step-btn:disabled { opacity: 0.6; }
.cc-wizard__step-title { font-size: 17px; }
.cc-wizard__panel-header { border-bottom: 0; padding-bottom: 14px; margin-bottom: 14px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.035); }
.cc-wizard__panel-title { text-shadow: 1px 1px 0 #000; }
.cc-wizard__panel-hint { color: var(--text-dim); }

.cc-wizard .cc-field__label { color: var(--text-dim); }
.cc-wizard .cc-field__input,
.cc-wizard .cc-field__textarea,
.cc-wizard .cc-field__select,
.cc-wizard .cc-field .csel__trigger {
  border: 0; border-radius: var(--radius-md);
  background: var(--carved); box-shadow: var(--carved-shadow); color: var(--text);
}
.cc-wizard .cc-field__input:focus,
.cc-wizard .cc-field__textarea:focus,
.cc-wizard .cc-field__select:focus,
.cc-wizard .cc-field .csel.is-open .csel__trigger { border: 0; outline: none; box-shadow: var(--carved-shadow), 0 0 0 2px rgba(100, 120, 255, 0.45); }
.cc-wizard .cc-field__input::placeholder,
.cc-wizard .cc-field__textarea::placeholder { color: #80849a; }
.cc-wizard .cc-field .csel__menu { border: 0; border-radius: var(--radius-md); background: linear-gradient(180deg, #2b2d39, #22242e); box-shadow: var(--panel-shadow); }
.cc-wizard .cc-field .csel__opt { border-radius: var(--radius-md); }

.cc-wizard .cc-womquick__btn { border: 0; border-radius: var(--radius-md); background: var(--raised); box-shadow: var(--raised-shadow); text-shadow: var(--raised-text); }
.cc-wizard .cc-womquick__btn:hover,
.cc-wizard .cc-womquick__btn[aria-expanded="true"] { border: 0; background: var(--raised-hover); }
.cc-wizard .cc-womquick__panel { border: 0; background: var(--carved); box-shadow: var(--carved-shadow); }

.cc-wizard__footer { border-top: 0; background: rgba(0, 0, 0, 0.16); border-radius: 0 0 6px 0; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.03); }
@media (max-width: 860px) { .cc-wizard__footer { border-radius: 0 0 6px 6px; } }
.cc-wizard__step-counter { font-family: var(--font-ui); font-size: 15px; letter-spacing: 0.03em; color: var(--text-muted); text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.cc-wizard__btn { border: 0; border-radius: var(--radius-md); background: var(--raised); box-shadow: var(--raised-shadow); color: var(--text); text-shadow: var(--raised-text); }
.cc-wizard__btn:hover:not(:disabled) { border: 0; background: var(--raised-hover); }
.cc-wizard__btn--primary { background: var(--raised-primary); box-shadow: var(--raised-primary-shadow); color: #fff; }
.cc-wizard__btn--primary:hover:not(:disabled) { background: var(--raised-primary-hover); }
.cc-wizard__btn:disabled { opacity: 0.45; }
.cc-motifwiz .ch-motifpick__sw { border-radius: var(--radius-md); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 3px 8px -4px rgba(0, 0, 0, 0.8); transition: transform 120ms; }
.cc-motifwiz .ch-motifpick__sw:has(input:checked) { transform: translateY(-2px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 6px 12px -5px rgba(0, 0, 0, 0.9); }
.cc-motifwiz .ch-motifpick__ico { border: 0; border-radius: var(--radius-md); background: var(--carved); box-shadow: var(--carved-shadow); }
.cc-motifwiz .ch-motifpick__ico:hover { background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%); }
.cc-motifwiz .ch-motifpick__ico:has(input:checked) { background: var(--raised-primary); box-shadow: var(--raised-primary-shadow); color: #fff; }
.cc-motifwiz__label { font-size: 15px; text-shadow: 1px 1px 0 #000; }
.cc-wizard__opt { margin-left: 6px; font-family: var(--font-read); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text-muted); text-shadow: none; }
.cc-wizard__panel-title .cc-wizard__opt { font-size: 17px; }

.cc-motifprev { position: relative; height: 190px; margin: 0 0 18px; border-radius: var(--radius-md); overflow: hidden; background: var(--carved); box-shadow: var(--carved-shadow); }
.cc-motifprev__banner { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cc-motifprev__banner.is-empty { background: radial-gradient(ellipse 80% 120% at 20% 0%, rgba(100, 120, 255, 0.18), transparent 60%), linear-gradient(180deg, #2b2d39 0%, #1b1c24 100%); }
.cc-motifprev__banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(10, 11, 16, 0.85) 100%); }
.cc-motifprev__name { position: absolute; left: 20px; bottom: 16px; z-index: 2; font-family: var(--font-display); font-size: clamp(20px, 3vw, 30px); line-height: 1; color: var(--text); text-transform: uppercase; text-shadow: 0 2px 0 #000, 0 2px 12px rgba(0, 0, 0, 0.7); max-width: calc(100% - 150px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-motifprev .ch-motif { right: 28px; width: 96px; }
@media (max-width: 640px) { .cc-motifprev { height: 150px; } .cc-motifprev .ch-motif { right: 14px; width: 64px; } .cc-motifprev__name { max-width: calc(100% - 100px); } }

.cc-wizard__proof { margin-top: 16px; }
.cc-wizard .upload-widget .form-label { display: block; margin-bottom: 6px; font-family: var(--font-data); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.cc-wizard .upload-widget .dropzone { border: 0; border-radius: var(--radius-md); background: var(--carved); box-shadow: var(--carved-shadow); }
.cc-wizard .upload-widget .dropzone:hover { background: linear-gradient(180deg, #2a2b36 0%, #22232d 100%); }
.cc-wizard .upload-widget .empty { padding: 26px 20px; }
.cc-wizard .upload-widget .empty > div:first-of-type { font-family: var(--font-ui); font-size: 16px; color: var(--text); }
.cc-wizard .upload-widget .empty > div:last-of-type { font-family: var(--font-read); font-size: 15px; color: var(--text-muted); }
.cc-wizard .upload-widget summary { font-family: var(--font-read); font-size: 15px; }
.cc-wizard .upload-widget .upload-error { border-top: 0; font-family: var(--font-read); font-size: 15px; }

.cc-article-wrap, .cc-article-more { max-width: 1040px; }
.cc-sharebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 22px 0 0; }
.cc-sharebar__views { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 15px; color: var(--text-dim); text-shadow: 1px 1px 0 #000; }
.cc-sharebar__views svg { width: 17px; height: 17px; }
.cc-sharebar__links { display: inline-flex; gap: 6px; }
.cc-sharebar__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; min-width: 32px; padding: 0 9px;
  border: 0; border-radius: var(--radius-md); cursor: pointer; text-decoration: none;
  font-family: var(--font-ui); font-size: 14px; color: var(--text);
  background: var(--raised); box-shadow: var(--raised-shadow); text-shadow: var(--raised-text);
}
.cc-sharebar__btn:hover { background: var(--raised-hover); color: #fff; }
.cc-sharebar__btn svg { width: 16px; height: 16px; }
.cc-article-more__title { font-size: 18px; }
.cc-article-more__grid { gap: 14px; }
.cc-article-more .cc-newscard { display: flex; flex-direction: column; border: 0; border-radius: 6px; overflow: hidden; box-shadow: var(--card-shadow); }
.cc-article-more .cc-newscard:hover { box-shadow: var(--card-shadow-hover); }
.cc-article-more .cc-newscard__cover { aspect-ratio: 16 / 8; height: auto; }
.cc-article-more .cc-newscard__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.cc-article-more .cc-newscard__date { font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.04em; color: var(--text-muted); text-shadow: 1px 1px 0 #000; }
.cc-article-more .cc-newscard__headline { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.12; }
.cc-article-more .cc-newscard__excerpt { margin: 0 0 4px; font-family: var(--font-read); font-size: 17px; line-height: 1.25; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cc-article-more .cc-newsbtn { margin-top: auto; align-self: flex-start; }
.cc-newscard__cover--blank { background: url('/static/img/cc-logo.png') center / 34% no-repeat, radial-gradient(ellipse 80% 120% at 50% 0%, rgba(100, 120, 255, 0.16), transparent 65%), linear-gradient(180deg, #2b2d39 0%, #1b1c24 100%); opacity: 0.85; }
.cc-wallpager { display: flex; justify-content: center; gap: 10px; margin: 18px 0 4px; }
.cc-wallpager__btn { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: var(--radius-md); font-family: var(--font-ui); font-size: 15px; color: var(--text); text-decoration: none; background: var(--raised); box-shadow: var(--raised-shadow); text-shadow: var(--raised-text); }
.cc-wallpager__btn:hover { background: var(--raised-hover); color: #fff; }
/* Mobile pass 2026-10-11 */
.ch-card--members .ch-card__hrow:not(:has(.ch-gameswitch)) { flex-wrap: nowrap; }
.ch-card--members .ch-card__hrow:not(:has(.ch-gameswitch)) .ch-card__h { flex: 0 0 auto; white-space: nowrap; }
.ch-card--members .ch-card__hrow:not(:has(.ch-gameswitch)) .ch-members__controls { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
@container memberscard (max-width: 360px) {
  .ch-card--members .ch-cdrop__btn, .ch-card--members .ch-mdir { padding-left: 8px; padding-right: 8px; gap: 6px; }
}
@media (max-width: 640px) {
  .cc-article__title { font-size: 26px; line-height: 1.04; }
  .cc-article__body-wrap { padding: 22px 20px 36px; }
  .cc-article__body { font-size: 21px; line-height: 1.38; }
  .cc-article__body p { margin-bottom: 16px; }
  .cc-article__body h2 { font-size: 22px; line-height: 1.1; margin: 28px 0 10px; }
  .cc-article__body h3 { font-size: 20px; line-height: 1.1; margin: 22px 0 8px; }
  .cc-article__body li { margin-bottom: 6px; }
  .cc-article-more { padding: 32px 16px 56px; }
  .cc-article-more__head { gap: 12px; }
  .cc-article-more__title { white-space: normal; font-size: 20px; line-height: 1.1; min-width: 0; }
  .cc-article-more__rule { display: none; }

  .ch-hero__lead { display: flex; align-items: flex-start; gap: 14px; }
  .ch-hero__lead .ch-logo { width: var(--ch-logo-fit, 88px); height: var(--ch-logo-fit, 88px); min-width: var(--ch-logo-fit, 88px); margin-top: 0; }
  .ch-ident__text { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; flex: 1 1 0; min-width: 0; min-height: var(--ch-logo-fit, 88px); }
  .ch-name { align-self: auto; overflow-wrap: normal; word-break: normal; }
  .ch-tagline { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ch-ident__bars { margin-top: 6px; }
  .ch-hero__metatop .ch-join { white-space: nowrap; justify-content: center; padding: 0 12px; }
}
@media (max-width: 820px) {
  .cc-intro-card__title { text-align: center; white-space: nowrap; font-size: min(2rem, calc((100vw - 92px) / 13.6)); letter-spacing: 0; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.7); }
  .cc-intro-scene { margin-bottom: -56px; }
  .cc-intro-card__body { position: relative; z-index: 4; }
  .cc-intro-card__body p { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 0, 0, 0.7); }
  .cc-intro-card__ctas { flex-wrap: nowrap; }
  .cc-intro-card__cta { flex: 1 1 0; min-width: 0; justify-content: center; padding: 14px 8px; font-size: 14px; letter-spacing: 0.02em; text-align: center; white-space: nowrap; }
}

.dash-notice {
  margin: 0 0 12px;
  padding: 13px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(34, 34, 40, 0.94) 0%, rgba(26, 26, 30, 0.94) 100%);
  box-shadow: var(--card-shadow);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}

@media (max-width: 820px) {
  .dash-grid { gap: 14px; }
  .dash-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    margin: 0 -24px;
    padding: 10px 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-padding-inline: 24px;
    background: rgba(11, 12, 18, 0.94);
    box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.8);
  }
  .dash-nav::-webkit-scrollbar { display: none; }
  .dash-nav a { flex: none; white-space: nowrap; padding: 7px 12px; font-size: 13px; }
  .dash-nav__group {
    flex: none;
    width: 1px;
    height: 18px;
    margin: 0 6px;
    padding: 0;
    font-size: 0;
    background: var(--border);
  }
  .dash-nav__group::after { display: none; }
  .dash-nav__group:first-child,
  .dash-nav__sep { display: none; }
  .dash-nav form { flex: none; }
  .dash-nav__logout { width: auto; white-space: nowrap; }
  .dash-grid [id] { scroll-margin-top: 72px; }
}

html:root select:not(.csel__native):not([multiple]):where(:not([data-no-csel]):not([data-nav-select]):not(.form-select)) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23a3a6b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 6px 4px;
  padding-right: 30px;
}

/* Editor rail */
.ch-rail {
  width: min(292px, calc(100vw - 24px));
  border: 1px solid transparent;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(48, 50, 63, 0.98) 0%, rgba(36, 38, 48, 0.98) 100%);
  box-shadow: var(--panel-shadow);
}
.ch-rail__head {
  padding: 4px 4px 4px 14px;
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.ch-rail__brand { font-size: 13px; letter-spacing: 0.12em; color: var(--text-muted); }
.ch-rail__tools { display: inline-flex; align-items: center; gap: 0; }
.ch-rail__x { width: 28px; height: 28px; border-radius: var(--radius-md); }
.ch-rail__x svg { width: 14px; height: 14px; }
.ch-rail__x:hover { background: rgba(255, 255, 255, 0.07); box-shadow: none; }
.ch-rail__minv { display: none; }
.ch-rail.is-collapsed .ch-rail__minv { display: inline; }
.ch-rail.is-collapsed .ch-rail__scroll { display: none; }
.ch-rail__scroll { padding: 4px 14px 10px; }
.ch-rail__sec { padding: 0; border-bottom: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 0 rgba(255, 255, 255, 0.03); }
.ch-rail__sec:last-child { box-shadow: none; }
.ch-rail__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 2px 12px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.ch-rail__sum::-webkit-details-marker { display: none; }
.ch-rail__sum::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat;
  color: var(--text-muted);
  transition: color 120ms;
}
.ch-rail__sec[open] > .ch-rail__sum::after { background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat; }
.ch-rail__sum:hover::after { color: var(--text); }
.ch-rail__sum:focus-visible { outline: 2px solid var(--clan-accent, var(--accent)); outline-offset: 2px; border-radius: var(--radius-sm); }
.ch-rail__sum .ch-rail__h { margin: 0; font-size: 16px; color: var(--text); text-shadow: var(--raised-text); }
.ch-rail__body { padding: 0 0 16px; }
.ch-rail__tray { gap: 6px; }
.ch-rail__blocks { gap: 6px; }

.ch-rail .ch-rail__add,
.ch-rail .ch-toolkit__add,
.ch-rail .ch-toolkit__chip {
  padding: var(--btn-sm-pad);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--raised);
  box-shadow: var(--raised-shadow);
  color: #e4e6ee;
  font-family: var(--font-ui);
  font-size: var(--btn-sm-font);
  text-shadow: var(--raised-text);
  text-decoration: none;
  transition: background 120ms;
}
.ch-rail .ch-rail__add:hover,
.ch-rail .ch-toolkit__add:hover,
.ch-rail .ch-toolkit__chip:hover { background: var(--raised-hover); border-color: transparent; }
.ch-rail .ch-rail__add:active,
.ch-rail .ch-toolkit__add:active { box-shadow: var(--pressed-shadow); }
.ch-rail .ch-toolkit__chip { padding: 9px 12px; }
.ch-rail .ch-toolkit__empty { margin: 0; color: var(--text-muted); }

.ch-rail .ch-rail__bin {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  padding: 6px 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  transition: color 120ms, background 120ms;
}
.ch-rail .ch-rail__bin > .ch-slot { display: none !important; }
.ch-rail .ch-rail__bin.is-over,
.ch-rail .ch-rail__bin:has(> .ch-slot) {
  color: #ff8a8a;
  background: rgba(248, 113, 113, 0.08);
}

.ch-rail .ch-toolkit__h { margin: 14px 0 10px; font-size: 13px; }
.ch-rail .ch-toolkit__h:first-child { margin-top: 0; }
.ch-rail .ch-toolkit__thumb { border: 0; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.8); }
.ch-rail .ch-toolkit__field--inline input[type="color"] {
  border: 0;
  padding: 0;
  background: none;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.8);
}

.ch-rail__foot {
  padding: 12px 14px;
  border-top: 0;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.45), 0 -1px 0 rgba(255, 255, 255, 0.04);
}
.ch-rail.is-collapsed .ch-rail__foot { box-shadow: none; }

.ch-grid.is-sorting .ch-slot__body { pointer-events: none; }
.ch-grid.is-sorting .ch-slot__body * { animation-play-state: paused !important; transition: none !important; }
.ch-slot.ch-slot--ghost { opacity: 1; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--clan-accent, var(--accent)) 10%, transparent); }
.ch-slot.ch-slot--ghost > * { visibility: hidden; }
.ch-slot--float {
  max-height: 300px;
  overflow: hidden;
  opacity: 0.94;
  pointer-events: none;
  will-change: transform;
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.95);
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}

.ch-kc__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Site news editor */
.cc-editor__btn { display: inline-flex; align-items: center; justify-content: center; }
.cc-editor__btn svg { width: 16px; height: 16px; }
.cc-newsed { max-width: 880px; margin: 0 auto; }
.cc-newsed__head { display: grid; gap: 4px; margin: 4px 0 20px; }
.cc-newsed__head .botdash__title { margin: 0; }
.cc-newsed__panel {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(30, 31, 39, 0.97) 0%, rgba(20, 21, 27, 0.97) 100%);
  box-shadow: var(--panel-shadow);
}
.cc-newsed__cover { position: relative; }
.cc-newsed__drop {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 21 / 6;
  min-height: 150px;
  padding: 0;
  border: 0;
  background: linear-gradient(135deg, rgba(100, 120, 255, 0.10), rgba(255, 255, 255, 0.02) 60%);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
}
.cc-newsed__drop .cc-news-cover__preview {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background-size: cover;
  background-position: center;
}
.cc-newsed__drop .cc-news-cover__preview.has-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 14, 0.55);
  opacity: 0;
  transition: opacity 160ms;
}
.cc-newsed__drop:hover .cc-news-cover__preview.has-img::after,
.cc-newsed__drop:focus-visible .cc-news-cover__preview.has-img::after { opacity: 1; }
.cc-newsed__drophint { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; text-shadow: var(--raised-text); }
.cc-newsed__dropadd, .cc-newsed__dropchange { font-family: var(--font-ui); font-size: 19px; letter-spacing: 0.04em; }
.cc-newsed__dropsub { font-size: 13px; color: var(--text-muted); }
.cc-newsed__dropchange { display: none; }
.cc-newsed__drop:has(.has-img) .cc-newsed__dropadd,
.cc-newsed__drop:has(.has-img) .cc-newsed__dropsub { display: none; }
.cc-newsed__drop:has(.has-img) .cc-newsed__drophint { opacity: 0; transition: opacity 160ms; }
.cc-newsed__drop:has(.has-img) .cc-newsed__dropchange { display: block; }
.cc-newsed__drop:has(.has-img):hover .cc-newsed__drophint,
.cc-newsed__drop:has(.has-img):focus-visible .cc-newsed__drophint { opacity: 1; }
.cc-newsed__drop:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cc-newsed__coverbar { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; }
.cc-newsed__coverbar .cc-news-cover__status:empty { display: none; }
.cc-newsed__coverbar .cc-news-cover__status { padding: 4px 10px; border-radius: var(--radius-md); background: rgba(8, 9, 14, 0.75); }
.cc-newsed__remove {
  padding: var(--btn-sm-pad);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--raised);
  box-shadow: var(--raised-shadow);
  color: #ff8a8a;
  font-family: var(--font-ui);
  font-size: var(--btn-sm-font);
  text-shadow: var(--raised-text);
  cursor: pointer;
}
.cc-newsed__remove:hover { background: var(--raised-hover); }
.cc-newsed__body { display: grid; gap: 8px; padding: 22px 26px 6px; }
.cc-newsed__label { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.cc-newsed__label + * { margin-bottom: 14px; }
.cc-newsed__title {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--well);
  box-shadow: var(--well-shadow);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 24px;
  outline: none;
}
.cc-newsed__title::placeholder { color: var(--text-muted); opacity: 0.6; }
.cc-newsed__title:focus { box-shadow: var(--well-focus); }
.cc-newsed__editor { border: 0; border-radius: var(--radius-md); background: var(--well); box-shadow: var(--well-shadow); }
.cc-newsed__editor .cc-editor__toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  gap: 4px;
  padding: 8px;
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
.cc-newsed__editor .cc-editor__btn { height: 32px; min-width: 32px; border: 0; border-radius: var(--radius-md); color: var(--text-dim); }
.cc-newsed__editor .cc-editor__btn:hover { background: var(--raised-hover); box-shadow: var(--raised-shadow); color: var(--text); }
.cc-newsed__editor .cc-editor__sep { background: rgba(255, 255, 255, 0.08); margin: 6px 4px; }
.cc-newsed__editor .cc-editor__area { min-height: 360px; padding: 20px 22px; font-size: 16px; }
.cc-newsed__editor .cc-editor__emoji { border-top: 0; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.45); }
.cc-newsed__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 14px 26px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.45), 0 -1px 0 rgba(255, 255, 255, 0.04);
}
.cc-newsed__opts { display: flex; gap: 22px; flex-wrap: wrap; }
.cc-newsed__opt { display: inline-flex; align-items: center; gap: 9px; color: var(--text-dim); font-size: 15px; cursor: pointer; }
.cc-newsed__opt input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.cc-newsed__opt:has(input:checked) { color: var(--text); }
.cc-newsed__actions { display: flex; gap: 10px; }
.cc-newsed__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 110px; }
@media (max-width: 640px) {
  .cc-newsed__body { padding: 18px 16px 6px; }
  .cc-newsed__foot { padding: 14px 16px; }
  .cc-newsed__actions { width: 100%; }
  .cc-newsed__btn { flex: 1; }
  .cc-newsed__drop { aspect-ratio: 16 / 7; }
}

/* Gained card styles */
[data-gained-style="columns"] .ch-gstyle:not(.ch-gstyle--columns),
[data-gained-style="rows"] .ch-gstyle:not(.ch-gstyle--rows),
[data-gained-style="podium"] .ch-gstyle:not(.ch-gstyle--podium) { display: none; }
.ch-gstyle--columns .ch-gchart__axis { margin-top: 28px; }
.ch-gstyle--columns .ch-gchart__cols { padding-top: 28px; }
.ch-gstyle--columns .ch-gchart__cols::before {
  top: 28px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) left top / 100% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) left 50% / 100% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)) left bottom / 100% 1px no-repeat;
}
.ch-gcol__bar {
  position: relative;
  width: 70%;
  max-width: 36px;
  border-radius: 0;
  background: linear-gradient(180deg, var(--clan-accent, var(--accent)) 0, color-mix(in srgb, var(--clan-accent, var(--accent)) 35%, transparent) 100%);
  box-shadow: none;
  transition: height 500ms cubic-bezier(0.16, 1, 0.3, 1), filter 160ms;
}
.ch-gcol:hover .ch-gcol__bar { filter: brightness(1.15); }
.ch-gcol__foot { gap: 0; padding-top: 9px; }
.ch-gcol__val {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  font-size: 19px;
  line-height: 1;
  color: var(--text);
}
.ch-gcol__val .ch-gcol__unit { color: var(--text-muted); }
.ch-gcol__unit { font-size: 16px; }
.ch-gcol__nrow { line-height: 1.1; }
.ch-gcol__full { display: none; }
@container cardslot (min-width: 940px) {
  .ch-gcol__full { display: inline; }
  .ch-gcol__short { display: none; }
  .ch-gcol__val .ch-gcol__unit { display: none; }
}
.ch-grows { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.ch-grow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 6px 12px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--carved);
  box-shadow: var(--carved-shadow);
}
.ch-grows:not(.ch-grows--plain) .ch-grow::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--clan-accent, var(--accent)) 8%, transparent), color-mix(in srgb, var(--clan-accent, var(--accent)) 24%, transparent));
  pointer-events: none;
}
.ch-grow > * { position: relative; }
.ch-grow__pos { min-width: 16px; font-family: var(--font-game); font-size: 16px; color: var(--text-muted); text-align: center; }
.ch-grow__ico { width: 20px; height: 18px; flex-shrink: 0; object-fit: contain; image-rendering: pixelated; }
.ch-grow__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: 16px; color: var(--text); text-shadow: var(--carved-text); }
.ch-grow__val { flex-shrink: 0; font-family: var(--font-game); font-size: 18px; color: var(--clan-amount, var(--clan-accent, var(--accent))); font-variant-numeric: tabular-nums; text-shadow: var(--carved-text); }
.ch-grow__unit { font-size: 13px; color: var(--text-muted); }
@container cardslot (max-width: 360px) {
  .ch-grow { gap: 7px; padding: 6px 9px; }
  .ch-grow__unit { display: none; }
}

.ch-review.is-pending .ch-review__body { color: var(--text-dim); }
.ch-review__pending { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; font-size: 13px; color: var(--warning, #e0a800); }
.ch-review__pending form { margin: 0; }
.ch-review__approve {
  padding: var(--btn-sm-pad);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--raised-primary);
  box-shadow: var(--raised-primary-shadow);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--btn-sm-font);
  text-shadow: var(--raised-text);
  cursor: pointer;
}
.ch-review__approve:hover { background: var(--raised-primary-hover); }
.ch-review-note { margin: 10px 0 8px; font-size: 14px; color: var(--text-muted); }

/* Accent pixel icons */
.cc-pxicon { --px: var(--clan-accent, var(--accent)); display: inline-block; flex-shrink: 0; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); }
.cc-pxicon .px-k { fill: #000001; }
.cc-pxicon .px-s { fill: color-mix(in srgb, var(--px) 40%, #000); }
.cc-pxicon .px-b { fill: color-mix(in srgb, var(--px) 66%, #000); }
.cc-pxicon .px-h { fill: color-mix(in srgb, var(--px) 92%, #000); }
.cc-pxicon .px-w { fill: color-mix(in srgb, var(--px) 55%, #fff); }
.cc-card__info-item .cc-pxicon.cc-pxicon--thumbs { width: 12px; height: 11px; }
.cc-card__info-item .cc-pxicon.cc-card__info-ico--members { width: 18px; height: 14px; }
.cc-card__info-item .cc-pxicon.cc-card__info-ico--eye { width: 16px; height: 10px; }

.ch-card--reviews .ch-shell p { font-family: var(--font-ui); font-size: 19px; letter-spacing: 0.02em; color: var(--text-dim); }
.ch-card--reviews .ch-review-form .ch-review-input textarea { font-size: 17px; line-height: 1.35; }
.ch-card--reviews .ch-review-form .ch-review-input textarea::placeholder { font-size: 17px; }
.ch-review-note { font-family: var(--font-ui); font-size: 16px; }

.ch-gpodwrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; gap: 18px; padding-top: 6px; }
.ch-gpodwrap:not(:has(.ch-grows)) { grid-template-columns: minmax(0, 1fr); }
.ch-gpodwrap .ch-grows { padding-top: 0; }
.ch-gpodwrap .ch-grow { min-height: 30px; padding: 3px 2px; background: none; box-shadow: none; border-radius: 0; }
.ch-gpod { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 6px; }
.ch-gpod__col { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; text-align: center; line-height: 1; }
.ch-gpod__cup { width: 30px; height: 32px; margin-bottom: 2px; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)); }
.ch-gpod__who { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; min-width: 0; }
.ch-gpod__ico { width: 16px; height: 14px; flex-shrink: 0; object-fit: contain; image-rendering: pixelated; }
.ch-gpod__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: 14px; line-height: 1.1; color: var(--text); }
.ch-gpod__val { font-family: var(--font-game); font-size: 24px; line-height: 0.95; color: var(--clan-amount, var(--clan-accent, var(--accent))); font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7); }
.ch-gpod__col--4 .ch-gpod__val, .ch-gpod__col--5 .ch-gpod__val { font-size: 20px; }
.ch-gpod__block {
  display: grid;
  place-items: center;
  width: 100%;
  margin-top: 5px;
  border-radius: 4px 4px 0 0;
  background: var(--raised);
  box-shadow: var(--raised-shadow);
  font-family: var(--font-game);
  font-size: 22px;
  color: var(--clan-amount, var(--clan-accent, var(--accent)));
  text-shadow: var(--raised-text);
}
.ch-gpod__col--1 .ch-gpod__block { height: 76px; font-size: 28px; }
.ch-gpod__col--2 .ch-gpod__block { height: 60px; }
.ch-gpod__col--3 .ch-gpod__block { height: 50px; }
.ch-gpod__col--4 .ch-gpod__block { height: 40px; font-size: 18px; color: var(--text-dim); }
.ch-gpod__col--5 .ch-gpod__block { height: 32px; font-size: 18px; color: var(--text-dim); }
@container cardslot (max-width: 640px) {
  .ch-gpodwrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

.ch-comps__row.is-single .ch-compcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center; }
.ch-comps__row.is-single .ch-compcard > :not(.ch-compcard__head):not(.ch-compcard__stats):not(.ch-compcard__bg) { grid-column: 1 / -1; }
.ch-comps__row.is-single .ch-compcard__stats { margin: 0; position: relative; }
.ch-comps__row.is-single .ch-compcard__head + .ch-compcard__stats ~ * { margin-top: 14px; }
@container cardslot (max-width: 640px) {
  .ch-comps__row.is-single .ch-compcard { display: flex; align-items: stretch; }
  .ch-comps__row.is-single .ch-compcard__stats { margin: 14px 0 12px; }
  .ch-comps__row.is-single .ch-compcard__head + .ch-compcard__stats ~ * { margin-top: 0; }
}

.cc-article__body li { margin-bottom: 6px; line-height: 1.5; }
.cc-article__body li > p { margin: 0; }
.cc-article__body li > p + p { margin-top: 6px; }
.cc-article__body p:has(+ ul), .cc-article__body p:has(+ ol) { margin-bottom: 8px; }
.cc-article__body code { font-family: inherit; font-size: inherit; padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); text-shadow: none; }
.cc-editor__area li > p { margin: 0; }
.cc-editor__area code { font-family: inherit; font-size: inherit; padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }

/* Admin analytics */
.an-periods { display: flex; gap: 8px; margin-bottom: 16px; }
.an-period { padding: var(--btn-sm-pad); border-radius: var(--radius-lg); background: var(--raised); box-shadow: var(--raised-shadow); color: #e4e6ee; font-family: var(--font-ui); font-size: var(--btn-sm-font); text-shadow: var(--raised-text); text-decoration: none; }
.an-period:hover { background: var(--raised-hover); }
.an-period.is-on { background: var(--carved); box-shadow: var(--pressed-shadow); color: var(--accent); }
.an-stats.an-stats--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.an-stats.an-stats--six { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 900px) { .an-stats.an-stats--five, .an-stats.an-stats--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .an-stats.an-stats--five, .an-stats.an-stats--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.an-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 900px) { .an-pair, .an-trio { grid-template-columns: minmax(0, 1fr); } }
.an-bars { display: flex; flex-direction: column; gap: 8px; }
.an-bar { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr) 56px; align-items: center; gap: 10px; font-size: 14px; }
.an-bar__label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bar__track { height: 10px; border-radius: 3px; background: var(--carved); box-shadow: var(--carved-shadow); overflow: hidden; }
.an-bar__fill { display: block; height: 100%; background: var(--accent); }
.an-bar__value { text-align: right; font-family: var(--font-game); font-size: 16px; color: var(--text); }
.an-table--grid th, .an-table--grid td { text-align: right; }
.an-table td a { color: var(--text); text-decoration: none; }
.an-table td a:hover { color: var(--accent); }
.an-muted { color: var(--text-muted); font-size: 12px; }

.cc-hub__intro { max-width: 70ch; margin: 2px 0 18px; font-family: var(--font-read); font-size: 16px; line-height: 1.15; color: var(--text-dim); }
.cc-hub__nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.cc-hub__nav .cc-toolbar__btn { text-decoration: none; }
.cc-hub__n { margin-left: 2px; font-family: var(--font-data); font-size: 12px; color: var(--text-muted); }
.cc-hub__nav .is-active .cc-hub__n { color: inherit; }
.cc-hub__emptysub { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.cc-hub__emptysub a, .cc-hub__faq a { color: var(--accent); }
.cc-hub__tablewrap { overflow-x: auto; }
.cc-hub__table { width: 100%; min-width: 640px; border-collapse: collapse; font-family: var(--font-ui); font-size: 14px; }
.cc-hub__table th, .cc-hub__table td { padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; color: var(--text-dim); }
.cc-hub__table tbody tr:last-child th, .cc-hub__table tbody tr:last-child td { border-bottom: 0; }
.cc-hub__table thead th { font-family: var(--font-data); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cc-hub__table tbody th { font-weight: 400; }
.cc-hub__table tbody th a { color: var(--text); text-decoration: none; }
.cc-hub__table tbody th a:hover { color: var(--accent); }
.cc-hub__tips { display: grid; gap: 6px; margin: 0; padding-left: 20px; font-family: var(--font-read); font-size: 16px; line-height: 1.15; color: var(--text-dim); }
.cc-hub__faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 36px; margin: 0; }
.cc-hub__faq dt { margin-bottom: 4px; font-family: var(--font-ui); font-size: 15px; color: var(--text); }
.cc-hub__faq dd { margin: 0; font-family: var(--font-read); font-size: 16px; line-height: 1.15; color: var(--text-dim); }
@media (max-width: 720px) { .cc-hub__faq { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cc-hub__nav { gap: 6px; } .cc-hub__nav .cc-toolbar__btn { padding: 8px 12px; } }
.cc-cardpick { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.cc-cardpick__fields { display: grid; gap: 14px; }
.cc-cardpick__preview { width: 340px; }
@media (max-width: 860px) { .cc-cardpick { grid-template-columns: 1fr; } .cc-cardpick__preview { width: 100%; max-width: 360px; } }
.cc-dots { display: inline-flex; margin-left: 2px; }
.cc-dots span:nth-child(2) { animation: cc-dot-2 1.5s steps(1, end) infinite; }
.cc-dots span:nth-child(3) { animation: cc-dot-3 1.5s steps(1, end) infinite; }
@keyframes cc-dot-2 { 0% { opacity: 0; } 33.3%, 100% { opacity: 1; } }
@keyframes cc-dot-3 { 0%, 33.3% { opacity: 0; } 66.6%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc-dots span { animation: none !important; } }
.cc-ally-head .cc-thread__title { white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }
@media (max-width: 640px) { .cc-ally-head .cc-thread__title { font-size: 18px; } .cc-thread__tools { margin-left: 0; width: 100%; } }
.ch-agenda__row.has-cover { position: relative; overflow: hidden; isolation: isolate; }
.ch-agenda__row.has-cover::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--ev-cover) center / cover no-repeat; opacity: 0.55; }
.ch-agenda__row.has-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 94%, transparent) 0%, color-mix(in srgb, var(--surface) 78%, transparent) 55%, color-mix(in srgb, var(--surface) 40%, transparent) 100%); }

.ch-newsfeat { position: relative; display: flex; align-items: flex-end; min-height: 120px; margin-bottom: 12px; border-radius: var(--radius-md); overflow: hidden; text-decoration: none; background: var(--feat-img, none) center / cover no-repeat, var(--surface-2); box-shadow: var(--carved-shadow); }
.ch-newsfeat__fade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 15, 22, 0.97) 10%, rgba(14, 15, 22, 0.66) 55%, rgba(14, 15, 22, 0.18) 100%); transition: background 160ms; }
.ch-newsfeat:hover .ch-newsfeat__fade { background: linear-gradient(0deg, rgba(14, 15, 22, 0.94) 10%, rgba(14, 15, 22, 0.55) 55%, rgba(14, 15, 22, 0.08) 100%); }
.ch-newsfeat__body { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; }
.ch-newsfeat__meta { font-family: var(--font-ui); font-size: 15px; line-height: 1; color: var(--clan-accent, var(--accent)); text-shadow: 1px 1px 0 #000; }
.ch-newsfeat__title { font-family: var(--font-ui); font-size: 20px; line-height: 1.1; color: #fff; text-shadow: 1px 1px 0 #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ch-newsfeat__desc { font-family: var(--font-read); font-size: 16px; line-height: 1.15; color: rgba(226, 230, 240, 0.86); text-shadow: 1px 1px 0 #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-card__req--fit { container-type: inline-size; }
.cc-card__req--fit .cc-card__req-val { font-size: clamp(11px, calc((100cqi - 28px) / (var(--len, 6) * 0.5)), 24px); }
.cc-card__req--fit .cc-card__req-val--text { overflow: visible; text-overflow: clip; }
.ch-cdrop__menu { padding: 6px; border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7); scrollbar-width: none; }
.ch-cdrop__menu::-webkit-scrollbar { display: none; }
.ch-cdrop__opt { position: relative; gap: 9px; padding: 8px 14px 8px 16px; border-radius: var(--radius-lg); font-size: 15px; line-height: 1.2; letter-spacing: 0; white-space: nowrap; transition: background 80ms, color 80ms; }
.ch-cdrop__opt::before { content: ""; position: absolute; left: 6px; top: 50%; width: 3px; height: 60%; border-radius: 2px; background: var(--clan-accent, var(--accent)); transform: translateY(-50%) scaleY(0); transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1); }
.ch-cdrop__opt:hover, .ch-cdrop__opt.is-active { color: var(--text); background: var(--surface-2); }
.ch-cdrop__opt.is-active::before { transform: translateY(-50%) scaleY(1); }
.ch-cdrop__group { padding: 10px 16px 4px; font-size: 12px; }

.ch-rail__more { position: relative; align-self: stretch; width: 100%; height: 0; z-index: 2; }
.ch-rail__more[hidden] { display: none; }
.ch-rail__more::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none; background: linear-gradient(180deg, rgba(36, 38, 48, 0) 0%, rgba(36, 38, 48, 0.96) 85%); }
.ch-rail__morebtn { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 30px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--raised); box-shadow: var(--raised-shadow); color: var(--text-dim); cursor: pointer; animation: ch-rail-nudge 1.6s ease-in-out infinite; }
.ch-rail__morebtn:hover { background: var(--raised-hover); color: var(--text); }
.ch-rail__morebtn svg { width: 14px; height: 14px; }
@keyframes ch-rail-nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 2px); } }
@media (prefers-reduced-motion: reduce) { .ch-rail__morebtn { animation: none; } }

.an-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.an-cardhead .dash-card__title { margin: 0; }
.an-clanpick { width: 240px; max-width: 100%; }
.an-focusnote { margin: 0 0 10px; font-family: var(--font-ui); font-size: 15px; color: var(--text-dim); }