#app{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}.booking{background:var(--color-surface);padding:2.5rem;border-radius:24px;border:1px solid var(--color-border);box-shadow:var(--shadow-md);width:100%;max-width:650px;text-align:center}.booking h1{font-family:var(--font-display);font-size:2rem;font-weight:700;margin-bottom:.5rem;color:var(--color-text)}.drag-dock{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem;padding:1.25rem;background:linear-gradient(135deg,#22c55e0d,#3b82f60d);border-radius:16px;border:2px dashed var(--color-border)}.drag-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:grab;transition:transform .2s,filter .2s;user-select:none;-webkit-user-select:none;touch-action:none}.drag-item:active{cursor:grabbing}.drag-item:hover{transform:scale(1.08)}.drag-item.dragging{opacity:.5;transform:scale(.95)}.drag-item img{width:56px;height:56px;object-fit:contain;border-radius:12px;box-shadow:0 4px 12px #0000001a;pointer-events:none}.drag-item span{font-size:.75rem;font-weight:600;color:var(--color-text-muted)}.drag-hint{font-size:.85rem;color:var(--color-text-muted);margin-bottom:1rem}.period-toggle{display:flex;justify-content:center;margin-top:1.25rem}.period-pill{display:flex;background:var(--color-bg);border:2px solid var(--color-border);border-radius:24px;padding:4px;gap:4px}.period-pill button{padding:.5rem 1.5rem;border:none;background:transparent;color:var(--color-text-muted);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;border-radius:20px}.period-pill button.active{background:var(--color-accent);color:#fff}.period-pill button:hover:not(.active){color:var(--color-text)}.slots-container{display:flex;align-items:center;gap:.75rem}.nav-btn{background:var(--color-bg);border:2px solid var(--color-border);width:40px;height:40px;border-radius:50%;font-size:1.25rem;cursor:pointer;transition:all .2s;color:var(--color-text);flex-shrink:0}.nav-btn:hover{border-color:var(--color-accent);background:var(--color-accent);color:#fff}.nav-btn:disabled{opacity:.3;cursor:not-allowed}.nav-btn:disabled:hover{background:var(--color-bg);border-color:var(--color-border);color:var(--color-text)}.days-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;flex:1}.day-col{text-align:center}.day-header{font-weight:600;font-size:.9rem;color:var(--color-text);margin-bottom:.25rem}.day-date{font-size:.75rem;color:var(--color-text-muted);margin-bottom:.75rem}.day-slots{display:flex;flex-direction:column;gap:.4rem}.slot{padding:.6rem .25rem;border-radius:8px;font-size:.8rem;font-weight:500;transition:all .15s;border:2px solid transparent;position:relative}.slot.available{background:#22c55e14;color:#16a34a;border-color:#22c55e40}.slot.available.drop-ready{animation:pulse 1s infinite;border-style:dashed}@keyframes pulse{0%,to{border-color:#22c55e40}50%{border-color:#22c55e99}}.slot.available.drag-over{background:#22c55e;color:#fff;transform:scale(1.08);border-color:#16a34a;box-shadow:0 4px 16px #22c55e66}.slot.booked{background:var(--color-bg);color:var(--color-text-muted);cursor:not-allowed;opacity:.4}.slot.booked .slot-icon{width:18px;height:18px;margin-right:4px;vertical-align:middle;opacity:.7}.slot.past{background:transparent;color:var(--color-text-muted);opacity:.25;cursor:not-allowed}.confirm-panel{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--color-border)}.confirm-header{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1rem}.confirm-header img{width:40px;height:40px;object-fit:contain}.confirm-time{font-size:1.2rem;font-weight:600;color:var(--color-text)}.confirm-type{font-size:.9rem;color:var(--color-text-muted);margin-bottom:1rem}.booking-form{display:flex;flex-direction:column;gap:.75rem;max-width:280px;margin:0 auto}.booking-form input{padding:.85rem;font-size:1rem;border:2px solid var(--color-border);border-radius:10px;background:var(--color-bg);color:var(--color-text);text-align:center;outline:none;transition:border-color .2s}.booking-form input:focus{border-color:var(--color-accent)}.booking-form input::placeholder{color:var(--color-text-muted)}.confirm-btn{background:var(--color-accent);color:#fff;font-size:1rem;font-weight:600;padding:.85rem;border-radius:10px;border:none;cursor:pointer;transition:all .2s}.confirm-btn:hover{background:var(--color-accent-deep)}.confirm-btn:disabled{opacity:.6;cursor:not-allowed}.cancel-btn{background:transparent;color:var(--color-text-muted);font-size:.9rem;border:none;cursor:pointer;margin-top:.5rem}.cancel-btn:hover{color:var(--color-text)}.success-check{width:80px;height:80px;margin:0 auto 1.5rem;border:4px solid #22c55e;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#22c55e;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}.success-icon{width:48px;height:48px;margin:0 auto 1rem;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes popIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.hint{color:var(--color-text-muted);font-size:.85rem;margin-top:1rem}.loading{color:var(--color-text-muted);padding:3rem}.offline-banner{background:#fef3c7;color:#92400e;padding:.5rem 1rem;border-radius:8px;font-size:.85rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.5rem}.offline-banner:before{content:"⚠️"}.help-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease;padding:1rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.help-modal{background:var(--color-surface);border-radius:20px;padding:2rem;max-width:320px;text-align:center;position:relative;box-shadow:0 20px 60px #0000004d}.help-demo{position:relative;height:120px;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;gap:2rem}.help-icons{display:flex;gap:1rem}.help-icon{width:48px;height:48px;object-fit:contain;border-radius:10px;box-shadow:0 2px 8px #0000001a}.help-icon.highlight{animation:iconPulse 1.5s ease infinite}@keyframes iconPulse{0%,to{transform:scale(1);box-shadow:0 2px 8px #0000001a}50%{transform:scale(1.1);box-shadow:0 4px 16px #22c55e66}}.help-cursor{position:absolute;width:24px;height:24px;animation:cursorMove 2s ease-in-out infinite;pointer-events:none}@keyframes cursorMove{0%{left:75%;top:70%;opacity:1}30%{left:25%;top:30%;opacity:1}50%{left:25%;top:30%;transform:scale(.9);opacity:1}80%{left:75%;top:70%;opacity:.8}to{left:75%;top:70%;opacity:1}}.help-slot{width:50px;height:36px;background:#22c55e1a;border:2px dashed rgba(34,197,94,.4);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#16a34a;font-weight:600;animation:slotPulse 2s ease-in-out infinite}@keyframes slotPulse{0%,30%{background:#22c55e1a}50%,80%{background:#22c55e40}to{background:#22c55e1a}}.help-title{font-size:1.1rem;font-weight:700;color:var(--color-text);margin-bottom:.5rem}.help-text{font-size:.9rem;color:var(--color-text-muted);line-height:1.5;margin-bottom:1.5rem}.help-close{background:var(--color-accent);color:#fff;border:none;padding:.75rem 2rem;border-radius:12px;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .2s}.help-close:hover{background:var(--color-accent-deep)}.drag-ghost{position:fixed;pointer-events:none;z-index:9999;opacity:.9;transform:translate(-50%,-50%) scale(1.1);transition:transform .1s}.drag-ghost img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.3))}@media(max-width:500px){.booking{padding:1.25rem 1rem}.booking h1{font-size:1.5rem}.drag-dock{gap:1.5rem;padding:1rem}.drag-item img{width:48px;height:48px}.slots-container{gap:.4rem}.nav-btn{width:32px;height:32px;font-size:1rem}.days-row{gap:.2rem}.slot{font-size:.7rem;padding:.4rem .1rem}.day-header{font-size:.75rem}.day-date{font-size:.65rem}.period-pill button{padding:.4rem 1rem;font-size:.8rem}}