.cmtbox-wrap {
  --cmtbox-saffron: #C97A1E;
  --cmtbox-saffron-dark: #A6531A;
  --cmtbox-cream: #FFFDF7;
  --cmtbox-cream2: #FFF6E8;
  --cmtbox-text: #3a2c1a;
  --cmtbox-border: #EBCB8E;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  color: var(--cmtbox-text);
  max-width: 900px;
  margin: 0 auto;
}
.cmtbox-wrap * { box-sizing: border-box; }

.cmtbox-topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(135deg, var(--cmtbox-saffron) 0%, var(--cmtbox-saffron-dark) 100%);
  color: #fff;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(166,83,26,0.25);
}
.cmtbox-title {
  font-weight: 700;
  font-size: 17px;
  margin-right: auto;
}
.cmtbox-langtoggle { display: flex; gap: 6px; }
.cmtbox-lang-btn {
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.cmtbox-lang-btn.active { background: #fff; color: var(--cmtbox-saffron-dark); }

.cmtbox-topbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.cmtbox-btn {
  border: none;
  border-radius: 24px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.cmtbox-btn-primary { background: #fff; color: var(--cmtbox-saffron-dark); }
.cmtbox-btn-outline { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid #fff; }
.cmtbox-btn-admin { background: #6b2b12; color: #fff; }

.cmtbox-public-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cmtbox-loading, .cmtbox-empty {
  text-align: center;
  color: #8a6d4a;
  padding: 18px;
  font-size: 14px;
}
.cmtbox-card {
  background: var(--cmtbox-cream);
  border: 1px solid var(--cmtbox-border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(107,43,18,0.06);
}
.cmtbox-card .cmtbox-name { font-weight: 700; color: var(--cmtbox-saffron-dark); font-size: 14.5px; }
.cmtbox-card .cmtbox-date { font-size: 11.5px; color: #8a6d4a; float: right; }
.cmtbox-card .cmtbox-text { margin-top: 6px; font-size: 14.5px; color: var(--cmtbox-text); font-weight: 600; white-space: pre-wrap; word-break: break-word; }

/* ===== Popup overlay: fixed to viewport, appended to document.body ===== */
.cmtbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58,44,26,0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 14px;
  z-index: 999999;
}
.cmtbox-modal {
  background: var(--cmtbox-cream);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  padding: 22px 22px 26px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  position: relative;
}
.cmtbox-modal.cmtbox-modal-wide { max-width: 980px; }
.cmtbox-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--cmtbox-saffron-dark);
  font-weight: 700;
}
.cmtbox-modal h3 {
  margin: 0 0 14px;
  color: var(--cmtbox-saffron-dark);
  font-size: 19px;
  border-bottom: 2px solid var(--cmtbox-saffron);
  padding-bottom: 8px;
}
.cmtbox-field { margin-bottom: 12px; }
.cmtbox-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--cmtbox-saffron-dark);
  margin-bottom: 4px;
}
.cmtbox-field input[type=text],
.cmtbox-field input[type=tel],
.cmtbox-field textarea {
  width: 100%;
  border: 2px solid var(--cmtbox-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cmtbox-text);
  background: #fff;
}
.cmtbox-field input:focus,
.cmtbox-field textarea:focus {
  outline: none;
  border-color: var(--cmtbox-saffron);
  background: #FFF9C4;
}
.cmtbox-field textarea { min-height: 90px; resize: vertical; }
.cmtbox-aadhar-boxes { display: flex; gap: 8px; }
.cmtbox-aadhar-boxes input {
  width: 33%;
  text-align: center;
  letter-spacing: 2px;
}
.cmtbox-submit-row { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.cmtbox-msg { margin-top: 10px; font-size: 13.5px; font-weight: 700; padding: 8px 10px; border-radius: 8px; }
.cmtbox-msg-ok { background: #E6F6E0; color: #2c6e1f; }
.cmtbox-msg-err { background: #FBE4E1; color: #a1291a; }
.cmtbox-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.cmtbox-tab {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-radius: 8px 8px 0 0;
  background: var(--cmtbox-cream2);
  border: 2px solid var(--cmtbox-border);
  border-bottom: none;
  font-weight: 700;
  cursor: pointer;
  color: #8a6d4a;
}
.cmtbox-tab.active { background: #fff; color: var(--cmtbox-saffron-dark); border-color: var(--cmtbox-saffron); }
.cmtbox-hide { display: none !important; }

/* Admin panel */
.cmtbox-admin-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cmtbox-stat {
  flex: 1;
  min-width: 90px;
  background: var(--cmtbox-cream2);
  border: 1px solid var(--cmtbox-border);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.cmtbox-stat .num { font-size: 20px; font-weight: 800; color: var(--cmtbox-saffron-dark); }
.cmtbox-stat .lbl { font-size: 11.5px; color: #8a6d4a; font-weight: 700; }

.cmtbox-admin-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.cmtbox-admin-toolbar select, .cmtbox-admin-toolbar input[type=text] {
  border: 2px solid var(--cmtbox-border); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-weight: 700; color: var(--cmtbox-text);
}
.cmtbox-bulkbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cmtbox-mini-btn {
  border: none; border-radius: 18px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; color: #fff;
}
.cmtbox-mini-btn.lock { background: #2c8a3d; }
.cmtbox-mini-btn.unlock { background: #a67c1e; }
.cmtbox-mini-btn.reject { background: #b3541e; }
.cmtbox-mini-btn.delete { background: #c0392b; }
.cmtbox-mini-btn.edit { background: #d98c2b; }
.cmtbox-mini-btn.logout { background: #6b2b12; }

.cmtbox-admin-table-wrap { overflow-x: auto; }
.cmtbox-admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmtbox-admin-table th, .cmtbox-admin-table td {
  border: 1px solid var(--cmtbox-border);
  padding: 8px;
  text-align: left;
  word-break: break-word;
  vertical-align: top;
}
.cmtbox-admin-table th { background: var(--cmtbox-cream2); color: var(--cmtbox-saffron-dark); font-weight: 700; }
.cmtbox-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; color: #fff; }
.cmtbox-badge.pending { background: #a67c1e; }
.cmtbox-badge.public { background: #2c8a3d; }
.cmtbox-badge.rejected { background: #c0392b; }
.cmtbox-row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.cmtbox-edit-strip { display: none; background: #FFF9C4; }
.cmtbox-edit-strip.show { display: table-row; }
.cmtbox-edit-strip textarea, .cmtbox-edit-strip input[type=text] {
  width: 100%; border: 2px solid var(--cmtbox-border); border-radius: 6px; padding: 6px; font-weight: 700;
}

@media (max-width: 640px) {
  .cmtbox-topbar { flex-direction: column; align-items: stretch; }
  .cmtbox-title { text-align: center; margin-right: 0; }
  .cmtbox-topbtns { justify-content: center; }
}