.ccg-wrap{max-width:980px;margin:30px auto;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.ccg-panel{background:#11151a;color:#f5f7fa;border:1px solid #2b3138;border-radius:22px;padding:24px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.ccg-brand{font-size:64px;font-weight:900;line-height:1;color:#f0c75e}
.ccg-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ccg-grid>div,.ccg-section{background:#181d23;border:1px solid #2b3138;border-radius:16px;padding:18px}
.ccg-wrap input,.ccg-wrap select,.ccg-wrap button{width:100%;box-sizing:border-box;border-radius:12px;padding:12px;border:1px solid #39414b;font:inherit}
.ccg-wrap input,.ccg-wrap select{background:#0d1014;color:#fff;margin:7px 0 10px}
.ccg-wrap button{background:#f0c75e;color:#17130a;font-weight:800;cursor:pointer}
.ccg-wrap .ccg-secondary{margin-top:16px;background:transparent;color:#fff}
.ccg-top{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.ccg-top>div{background:#181d23;border:1px solid #2b3138;border-radius:14px;padding:12px}
.ccg-label{display:block;font-size:11px;color:#98a4b3;text-transform:uppercase;letter-spacing:.1em}
.ccg-status{padding:12px 14px;border-radius:12px;background:#232a32;margin-bottom:16px}
.ccg-section{margin-top:14px}
.ccg-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ccg-cards{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ccg-card{width:74px!important;height:104px!important;padding:8px!important;background:#fafafa!important;color:#15171a!important;display:flex!important;flex-direction:column;justify-content:space-between;align-items:flex-start;border:2px solid transparent!important}
.ccg-card b{font-size:28px;align-self:center}
.ccg-card.red{color:#c72e3b!important}
.ccg-card.selected{border-color:#f0c75e!important;transform:translateY(-4px)}
.ccg-card.build{background:#f0c75e!important;color:#17130a!important;width:100px!important}
.ccg-card small{font-size:10px}
.ccg-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.ccg-msg{color:#f0c75e;min-height:22px}
.ccg-score-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #2b3138}
.ccg-score-row:last-child{border-bottom:0}
@media(max-width:700px){.ccg-grid,.ccg-top,.ccg-actions{grid-template-columns:1fr}.ccg-card{width:62px!important;height:90px!important}}

.ccg-wrap button {
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.2;
  text-transform: none;
}
.ccg-wrap button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.ccg-diagnostic{font-size:12px;color:#ffb36b;margin-top:10px}
.ccg-diagnostic.ok{color:#79d28b}

.ccg-build-stack{
  width:140px!important;
  min-height:132px;
  position:relative;
  background:transparent!important;
  border:2px solid transparent!important;
  padding:8px!important;
  color:#fff!important;
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.ccg-build-stack.selected{
  border-color:#f0c75e!important;
  border-radius:14px;
}
.ccg-build-label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  color:#f0c75e;
}
.ccg-stack{
  position:relative;
  display:block;
  width:96px;
  height:108px;
}
.ccg-stack-card{
  position:absolute;
  left:calc(var(--stack-i) * 10px);
  top:calc(var(--stack-i) * 10px);
  width:74px;
  height:104px;
  border-radius:12px;
  background:#fafafa;
  color:#15171a;
  border:1px solid #d7d7d7;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  padding:8px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  pointer-events:none;
}
.ccg-stack-card.red{color:#c72e3b}
.ccg-stack-card b{font-size:26px;align-self:center}

.ccg-drag-help{color:#aeb8c4;font-size:13px;margin-top:14px}
.ccg-floor-zone{
  min-height:140px;
  padding:14px;
  border:1px dashed #3b444f;
  border-radius:14px;
  transition:.15s ease;
}
.ccg-floor-zone.drop-target-zone{
  border-color:#f0c75e;
  background:rgba(240,199,94,.07);
}
.ccg-card.draggable,
.ccg-floor-card{
  width:74px;
  height:104px;
  border-radius:12px;
  background:#fafafa;
  color:#15171a;
  border:2px solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.24);
  padding:8px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  user-select:none;
}
.ccg-card.draggable{cursor:grab}
.ccg-card.draggable.dragging{opacity:.45;cursor:grabbing}
.ccg-floor-card.red,.ccg-card.draggable.red{color:#c72e3b}
.ccg-floor-card b,.ccg-card.draggable b{font-size:26px;align-self:center}
.ccg-floor-card.selected{border-color:#f0c75e}
.ccg-floor-card.drop-target,.ccg-build-stack.drop-target{
  outline:3px solid rgba(240,199,94,.55);
  outline-offset:3px;
}

.ccg-build-area{
  margin-bottom:18px;
  padding:16px;
  border:2px solid #f0c75e;
  border-radius:16px;
  background:rgba(240,199,94,.08);
}
.ccg-build-status{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:10px;
}
.ccg-build-status strong{
  color:#f0c75e;
  font-size:18px;
}
.ccg-build-live{
  animation:ccgBuildPulse 1.6s ease-in-out infinite;
}
.ccg-floor-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:8px;
}
.ccg-floor-heading h3{
  margin:2px 0 0;
}
.ccg-floor-note{
  color:#8f9aa7;
  font-size:12px;
  text-align:right;
}
@keyframes ccgBuildPulse{
  0%,100%{filter:none}
  50%{filter:brightness(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .ccg-build-live{animation:none}
}
@media(max-width:700px){
  .ccg-floor-heading{align-items:flex-start;flex-direction:column}
  .ccg-floor-note{text-align:left}
}

.ccg-build-equation{
  display:block;
  margin-top:2px;
  font-size:13px;
  font-weight:800;
  color:#e9edf2;
}
.ccg-stack-card{
  z-index:var(--stack-z);
}