/* デモだけの見た目（本番の style.css の色の変数を使う） */
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  background: #FFFBEB; border: 1px solid #FCD34D; color: #78350F; border-radius: 10px; padding: .55rem .8rem; margin: 0 0 12px; font-size: .84rem; line-height: 1.5; }
.demo-bar b { color: #92400E; }
.demo-reset { border: 1px solid #F59E0B; background: #fff; color: #92400E; border-radius: 8px; padding: .3rem .7rem; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.demo-hint { margin: .2rem 0 .8rem; padding: .5rem .7rem; background: #EFF6FF; border-radius: 8px; color: #1E3A8A; font-size: .86rem; line-height: 1.6; }

.demo-samples { background: var(--card, #fff); border: 1px dashed #93C5FD; border-radius: 12px; padding: 12px; margin: 4px 0 14px; }
.demo-samples-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin-bottom: .6rem; }
.demo-samples-head span { font-size: .8rem; color: var(--muted, #64748B); }
.demo-sample-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.demo-sample { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; min-width: 0;
  border: 1px solid var(--border, #E2E8F0); background: #F8FAFC; border-radius: 10px; padding: .6rem .7rem; font: inherit; color: var(--text, #0F172A); cursor: pointer; }
.demo-sample:hover { border-color: var(--primary, #2563EB); background: #EFF6FF; }
.demo-sample:disabled { opacity: .5; cursor: progress; }
.demo-sample .ds-label { font-weight: 700; }
.demo-sample .ds-point { font-size: .8rem; color: var(--primary, #2563EB); font-weight: 700; }
.demo-sample .ds-meta { font-size: .74rem; color: var(--muted, #64748B); }
.demo-samples .hint { margin: .6rem 0 0; font-size: .8rem; color: var(--text-2, #475569); line-height: 1.6; }

.demo-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); display: grid; place-items: center; padding: 16px; z-index: 1000; }
.demo-modal-card { background: #fff; border-radius: 14px; padding: 18px; width: min(420px, 100%); display: flex; flex-direction: column; gap: .5rem; }
.demo-modal-card h2 { margin: 0; font-size: 1.1rem; }
.demo-modal-card p { margin: 0; line-height: 1.6; }
.demo-modal-card .hint { font-size: .78rem; color: var(--muted, #64748B); }
.demo-modal-card .msg { color: var(--ng, #DC2626); min-height: 1.2em; font-size: .85rem; }
.demo-modal-card .row { display: flex; gap: .6rem; justify-content: flex-end; }
.demo-modal-card .row .btn { width: auto; }