.canina-demo {scroll-margin-top:100px}
.canina-demo [hidden] {display:none!important}
.canina-demo .canina-top {display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.canina-demo .canina-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.canina-demo .canina-panel {min-width:0;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.canina-demo .canina-panel h3 {margin-top:0;font-size:1.4rem}
.canina-demo label,.canina-demo legend {font-weight:700}
.canina-demo select {display:block;width:100%;max-width:100%;min-height:48px;padding:10px;margin:6px 0 18px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px}
.canina-demo fieldset {min-width:0;margin:0 0 20px;padding:0;border:0}
.canina-demo .canina-slots {display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:8px;margin-top:12px}
.canina-demo .canina-slot {position:relative;cursor:pointer}
.canina-demo .canina-slot input {position:absolute;width:1px;height:1px;opacity:0}
.canina-demo .canina-slot span {display:block;padding:10px 6px;text-align:center;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.canina-demo .canina-slot input:checked+span {background:var(--terra);color:#fff;border-color:var(--terra)}
.canina-demo .canina-slot input:focus-visible+span {outline:3px solid var(--gold);outline-offset:3px}
.canina-demo button {cursor:pointer}
.canina-demo button:disabled {opacity:.5;cursor:not-allowed}
.canina-demo .canina-bookings {padding:0;list-style:none;margin:16px 0}
.canina-demo .canina-booking {display:grid;gap:5px;padding:16px 0;border-bottom:1px solid var(--line)}
.canina-demo .canina-booking strong {font-size:1.05rem}
.canina-demo .canina-booking small,.canina-demo .canina-empty {color:var(--ink-soft)}
.canina-demo .canina-cancel {justify-self:start;background:transparent;color:var(--ink);border:0;padding:10px 0;text-decoration:underline;min-height:44px;text-align:left}
.canina-demo .canina-status {min-height:58px;padding:12px 0;font-weight:700;scroll-margin-top:100px}
.canina-demo .canina-next {padding:18px;border:1px solid var(--line);border-radius:12px;margin-top:20px}
.canina-demo .canina-next a {white-space:normal;text-align:center}
@media(max-width:760px){.canina-demo .canina-grid{grid-template-columns:1fr}.canina-demo .canina-panel{padding:18px}.canina-demo .canina-slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}