body {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#0b1220;
  background:#fafbfc;
}
.wrap {
  width:min(900px, 92vw);
  margin: 24px auto;
}
.admin-mode #page-title {
  color:#b91c1c;
}
.hdr {
  display:flex;
  align-items:center;
  gap:10px;
}
.sum {
  color:#475569;
}
.bar {
  height:10px;
  background:#e6eef7;
  border-radius:6px;
  overflow:hidden;
}
.bar > i {
  display:block;
  height:100%;
  background:#ff9900;
}
.grid {
  display:grid;
  grid-template-columns: 110px 1fr 48px;
  gap:.5rem .75rem;
  align-items:center;
}
.panel {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:16px;
  margin:16px 0;
}
.pill {
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:#eef6ff;
  color:#004b8a;
  font-weight:700;
}
.btn {
  appearance:none;
  border:1px solid #cfd8e3;
  background:#fff;
  padding:.55rem .9rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
}
.btn.primary {
  background:#0b6488;
  color:#fff;
  border-color:#0b6488;
}
.btn.small {
  font-size:.85rem;
  padding:.35rem .7rem;
}
.btn-danger {
  background:#b91c1c;
  color:#fff;
  border-color:#b91c1c;
}
.help {
  color:#475569;
  font-size:.92rem;
}
.ok {
  color:#036b26;
}
.err {
  color:#9b1c1c;
}

.form-row {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
}
.form-row input[type="text"],
.form-row input[type="email"] {
  flex:1 1 240px;
  padding:.5rem .65rem;
  border:1px solid #cfd8e3;
  border-radius:10px;
}
textarea {
  width:100%;
  min-height:120px;
  padding:.6rem .7rem;
  border:1px solid #cfd8e3;
  border-radius:10px;
  resize:vertical;
}

.hidden {
  display:none !important;
}

/* Stars with partial fill for header avg */
.jit-stars {
  position:relative;
  display:inline-block;
  line-height:1;
}
.jit-stars::before {
  content:'★★★★★';
  color:#e2e8f0;
  letter-spacing:1px;
}
.jit-stars::after {
  content:'★★★★★';
  color:#ff9900;
  letter-spacing:1px;
  position:absolute;
  inset:0;
  width:var(--fill,0%);
  overflow:hidden;
  white-space:nowrap;
}

/* Placeholder color for name, email, and review */
#name::placeholder,
#email::placeholder,
#body::placeholder {
  color: black;
  font-weight: bold;
  opacity: 1;
}
#name:focus::placeholder,
#email:focus::placeholder,
#body:focus::placeholder {
  color: #64748b;
}
#name::-webkit-input-placeholder,
#email::-webkit-input-placeholder,
#body::-webkit-input-placeholder {
  color: black;
  font-weight: bold;
}
#name:-ms-input-placeholder,
#email:-ms-input-placeholder,
#body:-ms-input-placeholder {
  color: black;
  font-weight: bold;
}
#name::-ms-input-placeholder,
#email::-ms-input-placeholder,
#body::-ms-input-placeholder {
  color: black;
  font-weight: bold;
}

/* Threads as big pills */
.thread {
  margin:2px -16px;
  padding:12px 16px;
  border-bottom: 1px solid gray;
  border-radius: 10px;
}
.thread-even {
  background:#e6eef7;
}
.thread-odd {
  background:#e4ddd6;
}

.thread-header {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  font-size:.9rem;
  color:#4b5563;
  margin-bottom:.25rem;
}
.thread-header span.stars {
  font-weight:700;
}
.thread-header span.lang {
  font-style:italic;
}
.thread-header .spacer {
  flex:1 1 auto;
}

.thread-details summary {
  cursor:pointer;
  font-weight:600;
  list-style:none;
  outline:none;
}
.thread-details summary::-webkit-details-marker {
  display:none;
}

.thread-details summary::before {
  content:"▸ ";
  font-size:.9rem;
}
.thread-details[open] summary::before {
  content:"▾ ";
}

.original-text {
  font-size:.9rem;
  margin:.4rem 0 .2rem 3rem;
  padding:.35rem .5rem;
  border-radius:6px;
  background: #fff;
}
.translated-text {
  margin:.2rem 0 .4rem 0;
}

.reply-block {
  margin-top:.35rem;
  margin-left: 28px;
  border-left:2px solid #e7eef7;
  padding-left: 12px;
}

details.reply > summary {
  cursor:pointer;
  list-style:none;
  font-weight:700; /* View replies is bold */
}
details.reply > summary::-webkit-details-marker {
  display:none;
}

.reply-item-meta {
  font-size:.8rem;
  color:#6b7280;
  margin-bottom:.15rem;
}
input[name="name"]::placeholder {
  color: #b35151!important;
}
input[name="email"]::placeholder {
  color: #b35151!important;
}
textarea[name="text"]::placeholder {
  color: #b35151!important;
}