.demo-wide{width:min(1040px,100vw - 32px);margin-left:50%;transform:translate(-50%)}.demo-intro{max-width:720px;margin:0 auto 8px}.demo-safe{background:var(--accent-soft);border-radius:10px;margin:8px 0 0;padding:8px 14px;font-size:.9rem}.demo-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:16px 0 12px;display:flex}.demo-tabs{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px;display:inline-flex}.demo-tabs button{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;min-height:40px;padding:8px 16px;font-size:.9rem;font-weight:700}.demo-tabs button[aria-selected=true]{background:var(--accent);color:var(--accent-ink)}.demo-reset{border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;cursor:pointer;border-radius:999px;min-height:40px;padding:8px 14px;font-size:.85rem}.demo-stage{grid-template-columns:minmax(0,391px);justify-content:center;gap:16px;display:grid}.pane__label{color:var(--muted);text-align:center;margin:0 0 8px;font-size:.85rem;font-weight:700}@media (width<=959px){.demo-stage[data-view=customer] .pane--admin,.demo-stage[data-view=admin] .pane--customer{display:none}.demo-stage[data-view=admin]{grid-template-columns:minmax(0,1fr);justify-content:stretch}}@media (width>=960px){.demo-tabs{display:none}.demo-toolbar{justify-content:flex-end}.demo-stage{grid-template-columns:391px minmax(0,1fr);align-items:start;gap:32px}.pane__label{text-align:left}}.phone{background:var(--surface);border:8px solid #20262a;border-radius:38px;flex-direction:column;width:391px;max-width:100%;height:720px;margin:0 auto;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000026}@media (prefers-color-scheme:dark){.phone{border-color:#3a4440;box-shadow:0 10px 30px #00000080}}@media (width<=420px){.phone{border-width:4px;border-radius:24px}}.phone__bar{background:var(--surface);border-bottom:1px solid var(--line);flex:none;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px 10px;display:flex}.phone__title{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:.95rem;font-weight:800;overflow:hidden}.phone__x{color:var(--muted);background:var(--bg);user-select:none;border-radius:50%;place-items:center;width:28px;height:28px;font-size:1.2rem;line-height:1;display:grid}.phone__body{background:var(--bg);-webkit-overflow-scrolling:touch;flex:1;position:relative;overflow-y:auto}.scr{align-content:start;gap:12px;padding:14px;display:grid}.scr h3{margin:0;font-size:1.05rem}.stepbar{gap:4px;display:flex}.stepbar i{background:var(--line);border-radius:4px;flex:1;height:4px}.stepbar i.on{background:var(--accent)}.back{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;justify-self:start;min-height:32px;padding:0;font-size:.85rem}.d-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}.d-pick{text-align:left;width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;justify-content:space-between;align-items:center;gap:10px;min-height:56px;padding:12px 14px;display:flex}.d-pick[aria-pressed=true],.d-pick.on{border-color:var(--accent);background:var(--accent-soft)}.d-pick b{display:block}.d-pick small{color:var(--muted)}.d-price{white-space:nowrap;font-weight:800}.d-btn{border:1px solid var(--accent);background:var(--accent);min-height:48px;color:var(--accent-ink);font:inherit;cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:6px;width:100%;padding:10px 16px;font-weight:800;display:inline-flex}.d-btn:disabled{opacity:.4;cursor:not-allowed}.d-btn--ghost{background:var(--surface);color:var(--text);border-color:var(--line)}.d-btn--sm{width:auto;min-height:40px;padding:6px 14px;font-size:.88rem}.d-btn--warn{background:var(--surface);color:#b3261e;border-color:#e0a8a4}.d-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.d-kv{grid-template-columns:5.5em 1fr;gap:6px 8px;margin:0;font-size:.92rem;display:grid}.d-kv dt{color:var(--muted)}.d-kv dd{margin:0;font-weight:600}.d-field{gap:4px;font-size:.9rem;display:grid}.d-field input{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;min-height:48px;padding:12px;font-size:16px}.d-note{color:var(--muted);margin:0;font-size:.8rem}.d-ok{text-align:center;padding:8px 0}.d-ok .big{font-size:2.4rem;line-height:1.2}.d-tag{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 8px;font-size:.72rem;font-weight:800;line-height:1.6;display:inline-block}.d-tag--soft{background:var(--accent-soft);color:var(--text)}.d-tag--gray{background:var(--line);color:var(--muted)}.chips{background:var(--surface);border-bottom:1px solid var(--line);z-index:2;gap:6px;padding:10px 14px;display:flex;position:sticky;top:0;overflow-x:auto}.chips button{border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;cursor:pointer;border-radius:999px;flex:none;min-height:36px;padding:6px 14px;font-size:.88rem;font-weight:700}.chips button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.dategrid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.dategrid button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);cursor:pointer;text-align:center;border-radius:10px;gap:0;min-height:56px;padding:8px 2px;display:grid}.dategrid button small{color:var(--muted)}.dategrid button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.dategrid button:disabled{opacity:.45;cursor:not-allowed}.slotgrid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.slotgrid button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);cursor:pointer;border-radius:10px;min-height:44px;padding:8px 0;font-weight:700}.slotgrid button[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.slotgrid button:disabled{opacity:.4;background:var(--bg);cursor:not-allowed;text-decoration:line-through}.qty{align-items:center;gap:4px;display:inline-flex}.qty button{border:1px solid var(--line);background:var(--surface);width:36px;height:36px;color:var(--text);font:inherit;cursor:pointer;border-radius:50%;font-size:1.1rem;font-weight:800}.qty span{text-align:center;min-width:1.6em;font-weight:800}.sticky-foot{background:linear-gradient(to top, var(--bg) 70%, transparent);gap:8px;margin-top:auto;padding:10px 14px 14px;display:grid;position:sticky;bottom:0}.admin{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);gap:14px;padding:16px;display:grid}.admin h3{margin:0;font-size:1.05rem}.admin__head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.admin .d-btn{width:auto}.daybar{gap:6px;display:flex;overflow-x:auto}.daybar button{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);cursor:pointer;text-align:center;border-radius:10px;flex:none;min-height:48px;padding:6px 10px;font-size:.85rem}.daybar button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);font-weight:800}.daybar button small{color:var(--muted);display:block}.tl{grid-template-columns:3.2em repeat(2,minmax(0,1fr));gap:0 6px;font-size:.85rem;display:grid}.tl__h{text-align:center;padding:4px 0 6px;font-weight:800}.tl__times,.tl__col{height:576px;position:relative}.tl__times span{color:var(--muted);font-size:.75rem;position:absolute;left:0;transform:translateY(-50%)}.tl__col{background:repeating-linear-gradient(to bottom, transparent 0, transparent 63px, var(--line) 63px, var(--line) 64px);border:1px solid var(--line);border-radius:8px}.tl__ev{background:var(--accent-soft);border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:6px;padding:2px 6px;line-height:1.35;position:absolute;left:3px;right:3px;overflow:hidden}.tl__ev b{font-size:.82rem}.tl__ev small{color:var(--muted);display:block}.tl__ev--new{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);border-left-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-soft);animation:.5s ease-out pop}.tl__ev--new small{color:var(--accent-ink);opacity:.9}.tl__closed{text-align:center;color:var(--muted);padding:40px 0}@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.03)}to{transform:scale(1)}}.alist{gap:8px;margin:0;padding:0;list-style:none;display:grid}.alist li{border:1px solid var(--line);background:var(--bg);border-radius:10px;gap:6px;padding:10px 12px;display:grid}.alist li.is-new{border-color:var(--accent);background:var(--accent-soft)}.alist .d-row>span{overflow-wrap:anywhere}.toast{z-index:5;color:#fff;background:#20262a;border-radius:12px;padding:10px 14px;font-size:.88rem;animation:.4s ease-out pop;position:absolute;top:10px;left:12px;right:12px}.demo-below{gap:24px;max-width:720px;margin:32px auto 0;display:grid}.demo-below h2{font-size:1.15rem}.demo-links{flex-wrap:wrap;gap:8px 16px;margin-top:12px;display:flex}.demo-list{gap:12px;margin:0 0 24px;padding:0;list-style:none;display:grid}.demo-list li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);gap:8px;padding:16px;display:grid}.demo-list h2{margin:0;font-size:1.1rem}.demo-list p{margin:0}.demo-list .btn{justify-self:start}.mcard{color:#fff;background:linear-gradient(135deg,#7a4b1e,#c98a3c);border-radius:18px;gap:10px;padding:16px;display:grid;box-shadow:0 6px 14px #0000002e}.mcard[data-rank=silver]{background:linear-gradient(135deg,#4b5a63,#9fb1ba)}.mcard[data-rank=gold]{background:linear-gradient(135deg,#8a6a00,#e8bf3a)}.mcard__top{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.mcard__rank{background:#ffffff40;border-radius:999px;padding:0 12px;font-size:.85rem;font-weight:800}.mcard__code{background:#fff;border-radius:10px;justify-self:center;padding:8px;line-height:0}.mcard__code svg{width:132px;height:132px}.mcard__pt{font-size:1.8rem;font-weight:800;line-height:1.1}.mcard__pt small{font-size:.8rem;font-weight:600}.mbar{background:#ffffff4d;border-radius:999px;height:8px;overflow:hidden}.mbar i{background:#fff;height:100%;display:block}.stamps{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.stamps i{aspect-ratio:1;border:2px dashed var(--line);border-radius:50%;place-items:center;font-size:1.3rem;font-style:normal;display:grid}.stamps i.on{border:2px solid var(--accent);background:var(--accent-soft)}.stamps i.last{border-color:var(--muted)}.stamps i.pop{animation:.6s ease-out pop}.coupon{background:var(--surface);border:1px dashed var(--accent);border-radius:12px;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;display:flex}.coupon.used{border-color:var(--line);opacity:.6}.coupon b{display:block}.coupon small{color:var(--muted)}.overlay{z-index:6;background:#0009;place-items:center;padding:20px;display:grid;position:absolute;inset:0}.overlay__in{background:var(--surface);text-align:center;border-radius:18px;gap:10px;width:100%;padding:24px 18px;animation:.5s ease-out pop;display:grid}.overlay__in .big{font-size:3rem;line-height:1}.confetti{letter-spacing:6px;animation:.8s ease-out pop}.mtable{border-collapse:collapse;width:100%;font-size:.88rem}.mtable th,.mtable td{text-align:left;border-bottom:1px solid var(--line);padding:8px 6px}.mtable tr.me td{background:var(--accent-soft);font-weight:700}.mtable-wrap{overflow-x:auto}