.gre-frontend,
.gre-editor {
  /* Base card */
  --gre-bg: #ffffff;
  --gre-ink: #1f2a37;
  --gre-muted: #8b95a1;
  --gre-accent: #ffb020;
  --gre-success: #16a34a;
  --gre-warning: #f59e0b;
  --gre-danger: #ef4444;

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--gre-ink);
  max-width: 720px;
  margin: 18px auto;
  padding: 18px;
  box-sizing: border-box;
  background: var(--gre-bg);
  border-radius: 12px;
  border: 1px solid rgba(18,24,32,0.04);
  box-shadow: 0 6px 18px rgba(12,18,24,0.04);
}

.gre-summary {
  margin-bottom: 0.75rem;
  color: #2b2f36;
  font-size: 1rem;
}

.gre-aspect-list,
.gre-aspects {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gre-aspect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 6px;
  border-bottom: 1px solid rgba(15,20,25,0.03);
}

.gre-aspect:last-child {
  border-bottom: none;
}

.gre-aspect-name,
.gre-label {
  font-weight: 600;
  color: var(--gre-ink);
}

/* stars */
.gre-stars {
  display: inline-flex;
  gap: 6px;
}
.gre-stars button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  padding: 4px 6px;
  border-radius: 6px;
  transition: transform 160ms ease, background 160ms ease;
}
.gre-stars button:hover {
  transform: translateY(-3px);
  background: rgba(34,46,60,0.04);
}
.gre-stars button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(34,144,255,0.08);
}
.gre-stars .active {
  color: var(--gre-accent);
  transform: translateY(-4px) scale(1.02);
}

/* average */
.gre-average {
  margin-top: 12px;
  text-align: center;
}
.gre-average strong {
  padding: 8px 12px;
  border-radius: 999px;
  color: white;
  font-weight: 700;
}
.gre-badge-green {
  background: var(--gre-success);
}
.gre-badge-yellow {
  background: var(--gre-warning);
  color: #111;
}
.gre-badge-orange {
  background: #f97316;
}
.gre-badge-red {
  background: var(--gre-danger);
}

/* disabled */
.gre-disabled {
  color: var(--gre-muted);
  font-style: italic;
}

/* Editor tweaks (avoid double card look in Gutenberg editor) */
.edit-post-visual-editor .gre-editor {
  box-shadow: none;
  border: none;
  padding: 12px 0;
}

/* small responsive */
@media (max-width: 520px) {
  .gre-frontend,
  .gre-editor {
    padding: 12px;
    margin: 12px;
  }
  .gre-aspect-name,
  .gre-label {
    width: 130px;
    font-size: 0.95rem;
  }
  .gre-stars button {
    font-size: 1rem;
    padding: 3px 5px;
  }
}