body.demo { min-height: 100vh; background: var(--mist); }
.demo-top {
    position: sticky; top: 0; z-index: 20;
    background: rgba(244,247,245,.94); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: space-between;
    height: 72px; padding: 0 28px; gap: 16px;
}
.demo-top .brand { text-decoration: none; }
.demo-actions { display: flex; align-items: center; gap: 14px; }
.demo-actions a { text-decoration: none; font-weight: 600; font-size: 14px; }
.demo-note {
    margin: 0 28px; padding: 10px 14px; border-radius: 12px;
    background: #fff; color: var(--soft); font-size: 14px;
}
.demo-app {
    display: grid; grid-template-columns: 220px 1fr;
    min-height: calc(100vh - 120px); margin-top: 16px;
}
.demo-rail {
    padding: 8px 18px 32px 28px;
}
.demo-rail .mark { margin-bottom: 8px; }
.demo-rail .who { margin-bottom: 22px; }
.demo-sheet { padding: 8px 28px 48px 8px; }
.demo-sheet h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: -.04em;
    font-weight: 700;
}
#sales.demo-grid { grid-template-columns: 1fr; }
.demo-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
}
.product-card, .sale-card {
    background: #fff; border-radius: 22px; overflow: hidden;
}
.product-card img { width: 100%; height: 210px; object-fit: cover; display: block; }
.product-body { padding: 14px 16px 16px; display: grid; gap: 8px; }
.product-body h3 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.25rem; letter-spacing: -.03em;
}
.meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.stock-pill {
    border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700;
    background: var(--mist); color: var(--marine);
}
.stock-pill.low { background: #F8EBE4; color: var(--copper); }
.stock-pill.out { background: #F3E4E1; color: #8C3E22; }
.product-body .btn-copper, .product-body .btn-line { width: 100%; }
.product-body button:disabled {
    background: #E4E8E6; color: #8A9692; cursor: not-allowed; transform: none;
}
.sale-card {
    display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; align-items: center;
    padding: 12px;
}
.sale-card img { width: 88px; height: 88px; object-fit: cover; border-radius: 14px; }
.sale-card span { color: var(--soft); font-size: 13px; display: block; margin-top: 4px; }

.modal {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(26,36,40,.35);
    display: grid; place-items: center; padding: 20px;
}
.modal[hidden] { display: none; }
.dialog {
    width: min(440px, 100%);
    background: var(--paper); border-radius: 24px; padding: 22px;
    box-shadow: 0 24px 60px rgba(26,36,40,.18);
}
.dialog h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.8rem; letter-spacing: -.04em; margin-bottom: 6px;
}
.dialog p.help { color: var(--soft); margin-bottom: 16px; }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field span { font-size: 13px; font-weight: 600; color: var(--soft); }
.field select, .field input {
    border: 1px solid rgba(26,36,40,.14); background: #fff; border-radius: 12px;
    padding: 12px 14px; color: var(--ink);
}
.qty-row { display: flex; align-items: center; gap: 8px; }
.qty-row button {
    width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(26,36,40,.14);
    background: #fff; font-size: 1.2rem;
}
.qty-row strong {
    min-width: 2ch; text-align: center;
    font-family: "Bricolage Grotesque", sans-serif; font-size: 1.6rem;
}
.total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 8px 0 16px; font-weight: 600;
}
.total b {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.8rem; color: var(--marine); letter-spacing: -.03em;
}
.dialog-actions { display: flex; gap: 8px; }
.dialog-actions .btn-copper, .dialog-actions .btn-line { flex: 1; }
#demo-toast {
    position: fixed; right: 20px; bottom: 20px; z-index: 50;
    background: #fff; color: var(--ink);
    box-shadow: 0 12px 30px rgba(26,36,40,.12);
    padding: 14px 16px; border-radius: 14px;
    opacity: 0; transform: translateY(10px); pointer-events: none;
}
#demo-toast.show { animation: toast 2.5s var(--ease); }

@media (max-width: 860px) {
    .demo-app { grid-template-columns: 1fr; }
    .demo-rail { display: flex; gap: 8px; overflow: auto; padding: 8px 16px; }
    .demo-rail .mark, .demo-rail .who { display: none; }
    .demo-rail button { width: auto; white-space: nowrap; }
    .demo-sheet { padding: 8px 16px 40px; }
    .demo-top, .demo-note { margin-left: 0; }
    .demo-note { margin: 0 16px; }
    .demo-top { padding: 0 16px; }
    .demo-actions .quiet { display: none; }
}