:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; background: #0b0c10; color: #e9eef5; }
.wrap { max-width: 880px; margin: 0 auto; padding: 24px; }
.header h1 { margin: 0 0 6px; font-size: 28px; }
.sub { margin: 0; opacity: 0.8; }

.card {
  margin-top: 18px;
  background: #12141b;
  border: 1px solid #1d2130;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

.label { display: block; margin-bottom: 8px; font-weight: 600; }
.textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #262b3d;
  background: #0f1117;
  color: #e9eef5;
  line-height: 1.4;
}

.row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.row.space { justify-content: space-between; align-items: center; }

.btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #2b3150;
  background: #1a1f33;
  color: #e9eef5;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: #5a2530; background: #2a1116; }
.btn.small { padding: 7px 10px; font-size: 12px; border-radius: 9px; }

.output {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  border: 1px dashed #2b3150;
  background: #0f1117;
  min-height: 54px;
  white-space: pre-wrap;
}

.h2 { margin: 0; font-size: 18px; }

.history { list-style: none; padding: 0; margin: 10px 0 0; }
.item {
  padding: 12px;
  border: 1px solid #1d2130;
  border-radius: 12px;
  background: #0f1117;
  margin-bottom: 10px;
}
.meta { opacity: 0.75; font-size: 12px; margin-bottom: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.tag { padding: 2px 8px; border-radius: 999px; border: 1px solid #2b3150; }
.footer { margin-top: 18px; opacity: 0.7; }