#hwcrt-app { font-family: inherit; }

.hwcrt-wrap {
  max-width: 980px;
  margin: 24px auto;
  padding: 0 16px;
}

.hwcrt-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  padding: 18px 18px 16px;
}

.hwcrt-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.hwcrt-body {
  font-size: 15px;
  line-height: 1.5;
}

.hwcrt-section-title {
  font-size: 16px;
  font-weight: 700;
  margin-top: 14px;
  margin-bottom: 8px;
}

.hwcrt-muted {
  color: rgba(0,0,0,0.62);
  font-size: 13px;
  margin-bottom: 10px;
}

.hwcrt-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.16);
  margin-bottom: 12px;
}

.hwcrt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 760px) {
  .hwcrt-grid { grid-template-columns: 1fr; }
}

.hwcrt-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  background: rgba(0,0,0,0.02);
}

.hwcrt-check input { margin-top: 2px; }

.hwcrt-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.hwcrt-btn {
  background: #000;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
}

.hwcrt-btn:hover { opacity: 0.92; }

.hwcrt-btn-secondary {
  background: rgba(0,0,0,0.08);
  color: #000;
}

.hwcrt-warning {
  padding: 12px;
  border-radius: 12px;
  background: rgba(196, 0, 0, 0.06);
  border: 1px solid rgba(196, 0, 0, 0.20);
  font-weight: 700;
}

.hwcrt-list { margin: 10px 0 0 18px; }

.hwcrt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.hwcrt-tag {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.10);
  font-size: 13px;
}

.hwcrt-herb-list { margin-top: 6px; display: grid; gap: 10px; }
.hwcrt-herb {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}

.hwcrt-herb-title { font-weight: 800; margin-bottom: 4px; }
.hwcrt-herb-title a { color: #000; text-decoration: underline; }
.hwcrt-herb-latin { font-weight: 600; font-style: italic; color: rgba(0,0,0,0.70); font-size: 13px; }

.hwcrt-herb-note { font-size: 13px; color: rgba(0,0,0,0.72); margin-top: 6px; }
.hwcrt-herb-caution { font-size: 13px; margin-top: 6px; color: rgba(0,0,0,0.78); }

.hwcrt-blend-list { display: grid; gap: 12px; margin-top: 6px; }
.hwcrt-blend {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
}

.hwcrt-blend-title { font-weight: 800; margin-bottom: 6px; }
.hwcrt-blend-rationale { font-size: 13px; color: rgba(0,0,0,0.72); margin-bottom: 6px; }

.hwcrt-note, .hwcrt-disclaimer {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
}

.hwcrt-disclaimer {
  background: rgba(0,0,0,0.04);
}

.hwcrt-note-title { font-weight: 800; margin-bottom: 6px; }
.hwcrt-note-body { font-size: 13px; color: rgba(0,0,0,0.80); }

.hwcrt-error {
  border-color: rgba(196, 0, 0, 0.28);
  background: rgba(196, 0, 0, 0.04);
  margin-bottom: 12px;
}