.page { padding: 40px 20px; max-width: 1280px; margin: 0 auto; }
.page h1 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.page .subtitle { color: #888; margin-bottom: 24px; font-size: 14px; }

label {
  display: block; font-size: 12px; font-weight: 600; color: #aaa;
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;
}
label .limit {
  color: #666; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: normal;
  margin-left: 6px;
  font-family: 'SF Mono', Monaco, monospace;
}
label .limit.warn { color: #fb923c; }
label .limit.err { color: #ff4444; }
label .hint {
  color: #666; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: normal;
  margin-left: 6px;
}

.card {
  background: #141414; border: 1px solid #262626; border-radius: 12px;
  padding: 24px; margin-bottom: 16px;
}
.sec-title { color: #fff; font-size: 15px; margin-bottom: 14px; font-weight: 600; }
.section-title {
  color: #fff; font-size: 13px; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 12px; font-weight: 700;
}

.main-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

.inp { margin-bottom: 14px; }
.inp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inp-row .inp { margin-bottom: 14px; }

input[type="text"], input[type="date"], select, textarea {
  width: 100%; background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 6px;
  color: #e1e1e1; padding: 10px 12px; font-size: 14px;
  font-family: inherit; outline: none; line-height: 1.4;
}
textarea { resize: vertical; min-height: 60px; }
input:focus, select:focus, textarea:focus { border-color: #ff4444; }

.previews { display: flex; flex-direction: column; gap: 14px; }
.preview-item { }
.platform {
  color: #888; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 600; margin-bottom: 6px;
}

.fb-card {
  background: #1e1e1e; border: 1px solid #303030; border-radius: 8px;
  overflow: hidden; max-width: 500px;
}
.fb-img { width: 100%; height: 260px; object-fit: cover; background: #0d0d0d; display: block; }
.fb-body { padding: 10px 12px; }
.fb-url { color: #888; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.fb-title { color: #fff; font-size: 16px; font-weight: 600; margin: 4px 0; line-height: 1.3; }
.fb-desc { color: #aaa; font-size: 14px; line-height: 1.4; }

.tw-card {
  background: #0d0d0d; border: 1px solid #303030; border-radius: 14px;
  overflow: hidden; max-width: 500px;
}
.tw-img { width: 100%; height: 260px; object-fit: cover; background: #0d0d0d; display: block; }
.tw-body { padding: 10px 14px; }
.tw-domain { color: #888; font-size: 13px; }
.tw-title { color: #fff; font-size: 15px; font-weight: 600; margin: 2px 0; line-height: 1.3; }
.tw-desc { color: #aaa; font-size: 13px; line-height: 1.4; }

.tw-card-small {
  display: flex; background: #0d0d0d; border: 1px solid #303030; border-radius: 14px;
  overflow: hidden; max-width: 500px; min-height: 130px;
}
.tw-img-small { width: 130px; height: auto; object-fit: cover; background: #0d0d0d; flex-shrink: 0; }
.tw-body-small { padding: 10px 14px; flex: 1; }
.tw-body-small .tw-domain { color: #888; font-size: 13px; }
.tw-body-small .tw-title { color: #fff; font-size: 15px; font-weight: 600; margin: 2px 0; line-height: 1.3; }
.tw-body-small .tw-desc { color: #aaa; font-size: 13px; line-height: 1.4; }

.discord-card {
  background: #2b2d31; border-left: 4px solid #ff4444; border-radius: 4px;
  padding: 10px 14px; max-width: 500px;
}
.discord-site { color: #b5b5b5; font-size: 12px; }
.discord-title { color: #00a8fc; font-size: 15px; font-weight: 600; margin: 4px 0; }
.discord-desc { color: #d0d0d0; font-size: 13px; line-height: 1.4; margin-bottom: 8px; }
.discord-img { max-width: 100%; border-radius: 4px; display: block; background: #0d0d0d; }

.output-card { margin-top: 16px; }
.output-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px;
}
.output-head .sec-title { margin: 0; }
.actions { display: flex; gap: 8px; }

#output {
  background: #0d0d0d; border: 1px solid #222; border-radius: 8px;
  padding: 14px 16px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: 13px; line-height: 1.6; color: #e1e1e1;
  overflow-x: auto; white-space: pre;
}
#output .tag { color: #66aaff; }
#output .attr { color: #ff9a4a; }
#output .val { color: #4ade80; }

.warnings { margin-top: 12px; }
.warn-item {
  padding: 8px 12px; background: rgba(251,146,60,0.08);
  border: 1px solid rgba(251,146,60,0.3); color: #fb923c;
  border-radius: 6px; font-size: 13px; margin-top: 6px;
}

@media (max-width: 1000px) {
  .main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .inp-row { grid-template-columns: 1fr; }
  .fb-img, .tw-img { height: 180px; }
}