/* Demo */
.demo-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); line-height: 1.5; vertical-align: 1px; }
.settings-row.soon { opacity: .55; cursor: default; }
.settings-row.soon:hover { background: transparent; }
.demo-lock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
p.demo-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 18px 0 0; font-size: 13px; color: var(--text-secondary); text-align: center; }
p.demo-note a.badge { text-decoration: none; }
.demo-cta { display: flex; justify-content: center; margin-top: 16px; }
.demo-cta .btn { text-decoration: none; }
.demo-area { margin-top: 26px; }
.demo-area-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 14px; }
.demo-area-head h3 { margin: 0; font-size: 16px; }
.demo-area .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .demo-area .tiles { grid-template-columns: minmax(0, 1fr); } }
.demo-more { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.demo-more-label { margin-right: 4px; }
.demo-more .badge { opacity: .75; }