.preview {
  border: 1px solid #d0ddeb;
  border-radius: 12px;
  background: linear-gradient(145deg, #f0f6fc 0%, #ffffff 100%);
  padding: 16px;
}

.preview-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.preview-header strong {
  font-size: 18px;
  color: var(--brand);
}

.preview-header span {
  font-size: 13px;
  color: var(--muted);
}

#product-visual {
  min-height: 200px;
}

.legend {
  margin-top: 8px;
  font-size: 13px;
  color: #5a6a7b;
  border-top: 1px dashed #c9d9eb;
  padding-top: 8px;
}

.dimension-legend {
  margin-top: 12px;
  border: 1px solid #d5e1ee;
  border-radius: 10px;
  background: #f7fbff;
  padding: 10px 10px 8px;
}

.legend-title {
  font-size: 12px;
  font-weight: 700;
  color: #23415e;
  margin-bottom: 8px;
}

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

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-item small {
  color: #567086;
}

.legend-dot {
  display: inline-flex;
  min-width: 22px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.legend-dot.d { background: #f6c453; color: #263238; }
.legend-dot.a { background: #0f766e; }
.legend-dot.b { background: #0891b2; }
.legend-dot.h { background: #4f46e5; }
.legend-dot.t { background: #d64a3a; }
.legend-dot.tw { background: #be123c; }
.legend-dot.tf { background: #c2410c; }
.legend-dot.r { background: #7c3aed; }

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

.profile-item {
  border: 1px solid #d4e0ee;
  border-radius: 10px;
  background: #f8fbff;
  padding: 10px 12px;
}

.profile-item b {
  display: block;
  color: #103a63;
}

.profile-item small {
  color: #5d6f82;
}

.metric-strip {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.metric {
  border: 1px solid #d3deea;
  border-radius: 9px;
  background: #f7fbff;
  padding: 9px;
}

.metric span {
  display: block;
  font-size: 12px;
  color: #627488;
}

.metric b {
  display: block;
  margin-top: 2px;
  color: #173b63;
}

.related-links-box,
.faq-box {
  margin-top: 16px;
  padding: 18px 22px;
}

.related-links-box h2,
.faq-box h2 {
  margin: 0 0 12px;
  font-size: 24px;
  font-family: "Rajdhani", sans-serif;
}

.related-links-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.related-links-grid a {
  text-decoration: none;
  color: #1a4f7d;
  border: 1px solid #d3dfec;
  border-radius: 10px;
  background: #f7fbff;
  padding: 10px;
  font-weight: 700;
  font-size: 14px;
}

.related-links-grid a:hover {
  border-color: #a7c4de;
  background: #eef6ff;
}

.faq-box details {
  border-top: 1px solid #e6edf5;
  padding: 10px 0;
}

.faq-box details:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.faq-box summary {
  cursor: pointer;
  font-weight: 700;
  color: #173b63;
}

.faq-box p {
  margin: 8px 0 0;
  color: #5b7084;
  line-height: 1.6;
  font-size: 14px;
}

footer {
  margin-top: 24px;
  padding: 24px 20px;
  text-align: center;
  color: #5e7286;
  font-size: 13px;
}

.footer-links {
  max-width: 980px;
  margin: 0 auto 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.footer-links a {
  color: #1a4f7d;
  text-decoration: none;
  border-bottom: 1px dashed #8fb1cf;
}

.footer-links a:hover {
  color: #0f3c66;
  border-bottom-color: #0f3c66;
}