/* HTML Entities Decoder Pro — matches the Deecliq Data Transfer shape. */
.hed-fit.hed-scope {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 1600px; margin: 0 auto;
  padding: 90px 4vw 60px;
}

.hed-hero { text-align: center; flex-shrink: 0; }
.hed-hero h1 {
  font-size: 1.5rem !important; font-weight: 800 !important;
  color: var(--brand, #8b5cf6) !important;
  margin: 0 0 4px !important;
}
#hedScope .hed-hero p {
  font-size: .85rem !important; color: var(--txt-2, #64748b) !important;
  margin: 0 auto !important; max-width: 760px;
}

#hedScope .hed-card {
  max-width: 100% !important; width: 100%;
  padding: 24px 32px !important;
  background: var(--page-bg, #f8fafc) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  box-shadow: none !important;
  margin: 0 auto !important;
}

.hed-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 700; color: var(--txt, #0f172a); margin-bottom: 10px;
}
.hed-label i { color: var(--brand, #8b5cf6); }
.hed-output-stat { font-weight: 400; color: var(--txt-2, #64748b); font-size: .76rem; }

.hed-textarea {
  width: 100%; height: 220px; resize: vertical;
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  background: var(--surface, #fff); color: var(--txt, #0f172a);
  font-family: 'SFMono-Regular', Consolas, monospace; font-size: .82rem; line-height: 1.6;
  padding: 12px;
}
.hed-textarea:focus { outline: none; border-color: var(--brand, #8b5cf6); }

#hedScope .controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 20px 0; }
#hedScope .btn code {
  font-family: 'SFMono-Regular', Consolas, monospace; font-size: .72rem;
  background: rgba(255,255,255,.18); padding: 1px 5px; border-radius: 5px; margin-left: 2px;
}
#hedScope .btn-primary, #hedScope .btn-success, #hedScope .btn-warning {
  padding: 13px 26px; font-weight: 700; font-size: .95rem; border-radius: 12px;
}

@media (max-width: 768px) {
  .hed-textarea { height: 180px; }
}