/* "What it looks like" pictures on documentation pages (see DocPreviews): drawn in HTML, dark like Discord. */
.dp { margin: 1.5rem 0; padding: 1rem; border-radius: 0.9rem; background: #1c1c21; border: 1px solid #2a2a31; color: #ececf1; font-size: 0.95rem; line-height: 1.45; }
.dp figcaption { margin-top: 0.75rem; color: #9a9aa6; font-size: 0.85rem; }
.dp-muted { color: #9a9aa6; font-size: 0.85rem; }
.dp-msg { display: flex; gap: 0.75rem; align-items: flex-start; }
.dp-av { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #f97316; display: inline-block; }
.dp-av-big { width: 3.4rem; height: 3.4rem; border: 3px solid #1c1c21; }
.dp-av-own { background: #14b8a6; }
.dp-body { min-width: 0; }
.dp-head { margin-bottom: 0.15rem; }
.dp-tag { font-size: 0.65rem; background: #4752c4; color: #fff; border-radius: 3px; padding: 0 0.3rem; vertical-align: 0.1em; }
.dp-mention { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; border-radius: 3px; padding: 0 0.15rem; }
.dp-embed { margin-top: 0.4rem; padding: 0.6rem 0.8rem; border-left: 4px solid #f97316; background: #16161a; border-radius: 4px; }
.dp-embed-title { font-weight: 600; margin-bottom: 0.15rem; }
.dp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; margin-top: 0.5rem; }
.dp-fields b { display: block; font-size: 0.8rem; color: #c9c9d3; }
.dp-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.dp-btn { background: #4e5058; color: #fff; border-radius: 4px; padding: 0.25rem 0.9rem; font-size: 0.85rem; }
.dp-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.dp-profile { border-radius: 0.7rem; overflow: hidden; background: #16161a; border: 1px solid #2a2a31; }
.dp-own { border-color: #7a3d12; }
.dp-banner { height: 3.2rem; background: #2a2a31; }
.dp-banner-own { background: #0f766e; }
.dp-profile-body { padding: 0 0.8rem 0.8rem; margin-top: -1.5rem; }
.dp-level { display: flex; gap: 1rem; align-items: center; padding: 0.8rem; margin-bottom: 0.9rem; border-radius: 0.8rem; background: #131316; border: 1px solid #2a2a31; }
.dp-level-main { flex: 1; min-width: 0; }
.dp-chip { font-size: 0.8rem; border: 1px solid #c2570f; color: #fdba74; border-radius: 999px; padding: 0 0.55rem; margin-left: 0.3rem; }
.dp-level-bar { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0; font-size: 0.85rem; }
.dp-level-bar i { flex: 1; height: 0.5rem; border-radius: 999px; background: #3a3a44; overflow: hidden; display: block; }
.dp-level-bar i b { display: block; height: 100%; background: linear-gradient(90deg, #f97316, #fbbf24); }
.dp-level-week { text-align: center; border-left: 1px solid #2a2a31; padding-left: 1rem; display: grid; }
.dp-level-week b { font-size: 1.4rem; }
@media (max-width: 520px) { .dp-level { flex-wrap: wrap; } .dp-level-week { border-left: 0; padding-left: 0; } .dp-fields { grid-template-columns: 1fr; } }