body { font-family: 'Prompt', sans-serif; margin: 0; padding: 0; background-color: #ffffff; }
#root { width: 100%; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }

.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.fade-in { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.scanner-beam { width: 100%; height: 2px; background: #3b82f6; position: absolute; box-shadow: 0 0 20px 3px #3b82f6; animation: scan 2.5s infinite ease-in-out; }
@keyframes scan { 0% { top: 5%; } 50% { top: 95%; } 100% { top: 5%; } }
.cassette-body { box-shadow: 0 10px 25px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.8); }
.inner-shadow { box-shadow: inset 0 2px 6px rgba(0,0,0,0.2); }

.canvas-area { position: relative; width: 100%; display: flex; justify-content: center; touch-action: none; }
.canvas-wrapper { position: relative; max-width: 100%; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; background: #fff;}
canvas { display: block; max-width: 100%; height: auto; }
.spot-marker { position: absolute; width: 50px; height: 50px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; user-select: none; }
.spot-inner { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.spot-dot { width: 4px; height: 4px; background: #fff; border-radius: 50%; }

.marker-c { border-color: #3b82f6; } .marker-c .spot-inner { background: rgba(59,130,246,0.4); }
.marker-t1 { border-color: #ef4444; } .marker-t1 .spot-inner { background: rgba(239,68,68,0.4); }
.marker-t2 { border-color: #10b981; } .marker-t2 .spot-inner { background: rgba(16,185,129,0.4); }
.marker-t3 { border-color: #f59e0b; } .marker-t3 .spot-inner { background: rgba(245,158,11,0.4); }