/* Hero direction C: show the drag-to-group moment. */
.hero-drag-visual { min-width: 0; }
.hero-drag-window { position: relative; transform: perspective(1200px) rotateY(-4deg) rotateX(2deg); }
.hero-drag-window:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
.drag-demo-body { min-height: 380px; }
.drag-sidebar { width: 172px; flex-shrink: 0; padding: 14px 10px; background: rgba(120,120,128,.06); border-right: 1px solid var(--border); }
.drag-nav-item { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; padding: 7px 8px; border-radius: 6px; color: var(--text-secondary); font-size: 12px; }
.drag-nav-item b { margin-left: auto; color: var(--text-tertiary); font-size: 10px; font-weight: 500; }
.drag-nav-item.drop-target { color: #9a5c00; background: rgba(255,149,0,.1); box-shadow: inset 0 0 0 1px rgba(255,149,0,.68); }
.drag-nav-item.tag-purple span:first-child { color: #5856D6; }.drag-nav-item.tag-red span:first-child { color: #FF3B30; }.drag-nav-item.tag-green span:first-child { color: #34C759; }
.drag-nav-item.sync-target { margin-top: 9px; color: var(--accent); background: rgba(0,122,255,.09); }
.drag-contact-list { flex: 1; min-width: 0; position: relative; background: var(--surface); }
.drag-list-header { height: 47px; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.drag-list-header strong { display: block; font-size: 14px; }.drag-list-header span { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 10px; }
.drag-contact-row { position: relative; display: flex; align-items: center; gap: 9px; height: 54px; padding: 8px 14px; border-bottom: 1px solid rgba(0,0,0,.055); }
.drag-contact-row > span { min-width: 0; }.drag-contact-row b { display: block; font-size: 12px; font-weight: 600; }.drag-contact-row small { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 10px; }.drag-contact-row em { margin-left: auto; color: #FF3B30; font-size: 10px; font-style: normal; font-weight: 600; }
.drag-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; color: #fff; font-size: 12px; font-style: normal; font-weight: 700; }.avatar-blue { background: #007AFF; }.avatar-red { background: #FF3B30; }.avatar-green { background: #34C759; }
.contact-placeholder { opacity: .25; }.drag-lifted { z-index: 2; margin: 0 8px; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 28px rgba(0,0,0,.17); transform: translate(-34px,-10px) rotate(-2deg); }
.drag-toast { position: absolute; top: 58px; right: 16px; z-index: 4; max-width: 210px; padding: 9px 12px; border-radius: 9px; background: #1D1D1F; box-shadow: 0 12px 26px rgba(0,0,0,.22); color: #fff; font-size: 11px; line-height: 1.35; }
.drag-timeline { position: absolute; z-index: 3; right: 7%; bottom: -29px; left: 7%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); white-space: nowrap; font-size: 11px; font-weight: 600; }.drag-timeline i { width: 22px; height: 1px; background: var(--border-strong); }.timeline-applied { color: #34C759; }.timeline-pending { color: #007AFF; }.timeline-conflict { color: #FF3B30; }
@media (max-width: 640px) { .drag-demo-body { min-height: 290px; }.drag-sidebar { display: block; width: 126px; padding: 10px 6px; }.drag-nav-item { gap: 4px; padding: 6px 5px; font-size: 9px; }.drag-nav-item b { font-size: 8px; }.drag-contact-row { height: 48px; padding-inline: 9px; }.drag-contact-row b { font-size: 10px; }.drag-contact-row small,.drag-contact-row em { font-size: 8px; }.drag-avatar { width: 27px; height: 27px; flex-basis: 27px; font-size: 10px; }.drag-lifted { transform: translate(-20px,-7px) rotate(-2deg); }.drag-toast { top: 48px; right: 8px; max-width: 145px; font-size: 9px; }.drag-timeline { right: 2%; left: 2%; gap: 4px; padding: 8px 7px; font-size: 8px; }.drag-timeline i { width: 9px; } }