@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap");*{margin:0;padding:0;box-sizing:border-box}:root{--bg-deep:#f8fafb;--bg-surface:#fff;--bg-elevated:#f1f5f8;--bg-hover:#e8eef3;--accent-primary:#00d4aa;--accent-primary-glow:rgba(0,212,170,.12);--accent-secondary:#4ecdc4;--accent-warm:#ff6b6b;--accent-marker:#ff4757;--accent-active:#00d4aa;--text-bright:#0f1419;--text-primary:#2d3748;--text-secondary:#64748b;--text-muted:#94a3b8;--border-subtle:rgba(0,0,0,.06);--border-medium:rgba(0,0,0,.1);--border-accent:rgba(0,212,170,.4);--sidebar-width:260px;--header-height:72px;--shadow-sm:0 2px 8px rgba(0,0,0,.08);--shadow-md:0 4px 20px rgba(0,0,0,.12);--shadow-glow:0 0 30px rgba(0,212,170,.15)}body{font-family:DM Sans,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-deep);color:var(--text-primary);min-height:100vh;overflow:hidden}body:before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.02;pointer-events:none;z-index:1000;mix-blend-mode:multiply}body.dragging-hotspot,body.dragging-hotspot *{cursor:-webkit-grabbing!important;cursor:grabbing!important}header{background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);padding:0 2rem;height:var(--header-height);display:flex;justify-content:space-between;align-items:center;position:-webkit-sticky;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0,var(--accent-primary) 20%,var(--accent-primary) 80%,transparent 100%);opacity:.3}header h1{font-size:1.25rem;font-weight:600;color:var(--text-bright);letter-spacing:-.02em}.header-actions,header h1{display:flex;align-items:center;gap:.75rem}.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.5rem;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#0a0e14;border:none;border-radius:0;cursor:pointer;font-size:.875rem;font-weight:600;letter-spacing:.01em;transition:all .2s ease;box-shadow:0 2px 12px rgba(0,212,170,.25)}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,212,170,.4)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-primary.saving{background:var(--bg-elevated);color:var(--text-secondary);box-shadow:none}.btn-logout{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background:transparent;color:var(--text-secondary);border:1px solid var(--border-medium);border-radius:0;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s ease}.btn-logout:hover:not(:disabled){background:var(--bg-hover);border-color:var(--accent-warm);color:var(--accent-warm)}.btn-logout:disabled{opacity:.6;cursor:not-allowed}main{display:flex;height:calc(100vh - var(--header-height));overflow:hidden}.sidebar{width:var(--sidebar-width);background:var(--bg-surface);border-right:1px solid var(--border-subtle);padding:1.5rem;flex-shrink:0;display:flex;flex-direction:column;overflow-y:auto}.sidebar h2{font-family:JetBrains Mono,monospace;font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted);margin-bottom:1.25rem;padding-left:.75rem}.area-list{display:flex;flex-direction:column;gap:4px}.area-item{display:flex;align-items:center;gap:.875rem;padding:.875rem 1rem;border-radius:0;cursor:pointer;transition:all .2s ease;font-size:.9375rem;font-weight:500;color:var(--text-secondary);position:relative;border:1px solid transparent}.area-item:hover{background:var(--bg-hover);color:var(--text-primary)}.area-item.active{background:var(--accent-primary-glow);border-color:var(--border-accent);color:var(--accent-primary)}.area-item:before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid;flex-shrink:0;transition:all .2s ease}.area-item.active:before{background:var(--accent-primary);border-color:var(--accent-primary);box-shadow:0 0 10px var(--accent-primary)}.area-item.no-products{opacity:.5}.content{flex:1 1;padding:2rem;display:flex;flex-direction:column;gap:1.5rem;overflow-y:auto;background:linear-gradient(180deg,var(--bg-deep) 0,#eef2f6 100%)}.image-container{background:var(--bg-surface);border-radius:0;padding:1.5rem;border:1px solid var(--border-subtle);position:-webkit-sticky;position:sticky;top:0;overflow:hidden;z-index:1}.image-container:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 0),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 0);background-size:40px 40px;pointer-events:none}.image-wrapper{position:relative;display:inline-block;max-width:100%;background:var(--bg-deep);border-radius:0;overflow:hidden;box-shadow:var(--shadow-md)}.image-wrapper img{display:block;max-width:100%;max-height:500px;height:auto;width:auto;cursor:crosshair;object-fit:contain}.hotspot-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.hotspot-marker{position:absolute;width:40px;height:40px;transform:translate(-50%,-50%);pointer-events:auto;cursor:-webkit-grab;cursor:grab}.hotspot-marker.dragging{cursor:-webkit-grabbing;cursor:grabbing;z-index:100}.hotspot-marker:before{width:16px;height:16px;background:var(--accent-marker);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px var(--accent-marker),0 4px 12px rgba(255,71,87,.4);transition:all .2s ease}.hotspot-marker:after,.hotspot-marker:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hotspot-marker:after{width:32px;height:32px;border:2px solid var(--accent-marker);border-radius:50%;opacity:.4;animation:marker-pulse 2.5s ease-out infinite}.hotspot-marker.active:before{background:var(--accent-active);box-shadow:0 0 0 2px var(--accent-active),0 4px 12px rgba(0,212,170,.5),0 0 20px rgba(0,212,170,.3)}.hotspot-marker.active:after{border-color:var(--accent-active)}.hotspot-marker.dragging:before{transform:translate(-50%,-50%) scale(1.3);box-shadow:0 0 0 3px var(--accent-active),0 8px 24px rgba(0,212,170,.6)}.hotspot-marker.dragging:after{animation:none;opacity:0}.hotspot-marker:hover:before{transform:translate(-50%,-50%) scale(1.15)}@keyframes marker-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.4}70%{transform:translate(-50%,-50%) scale(1.8);opacity:0}to{transform:translate(-50%,-50%) scale(1.8);opacity:0}}.hotspot-label{top:calc(100% + 8px);background:#1a2029;color:#f0f4f8;padding:.375rem .75rem;border-radius:0;font-size:.75rem;font-weight:500;white-space:nowrap;opacity:0;transition:all .2s ease;pointer-events:none;border:1px solid hsla(0,0%,100%,.1);box-shadow:var(--shadow-md)}.hotspot-label,.hotspot-label:before{position:absolute;left:50%;transform:translateX(-50%)}.hotspot-label:before{content:"";bottom:100%;border:5px solid transparent;border-bottom-color:#1a2029}.hotspot-marker:hover .hotspot-label{opacity:1;transform:translateX(-50%) translateY(2px)}.image-instructions{margin-top:1.25rem;font-size:.8125rem;color:var(--text-muted);display:flex;align-items:center;gap:.5rem}.image-instructions:before{content:"→";color:var(--accent-primary)}.product-section{background:var(--bg-surface);border-radius:0;padding:1.5rem;border:1px solid var(--border-subtle)}.product-section h2{font-size:.9375rem;font-weight:600;margin-bottom:1rem;color:var(--text-bright);display:flex;align-items:center;gap:.625rem}.product-section h2:before{content:"";width:4px;height:16px;background:linear-gradient(180deg,var(--accent-primary),var(--accent-secondary));border-radius:0}.product-list{display:flex;flex-direction:column;gap:6px}.product-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--bg-elevated);border-radius:0;border:1px solid var(--border-subtle);cursor:pointer;transition:all .2s ease}.product-item:hover{background:var(--bg-hover);border-color:var(--border-medium)}.product-item.selected{border-color:var(--accent-primary);background:var(--accent-primary-glow);box-shadow:0 0 20px rgba(0,212,170,.1)}.product-name{flex:1 1;font-weight:500;color:var(--text-bright);font-size:.9375rem}.product-coords{display:flex;gap:.75rem;font-family:JetBrains Mono,monospace;font-size:.8125rem;color:var(--text-secondary)}.coord{display:flex;align-items:center;gap:.375rem}.coord-label{font-weight:500;color:var(--text-muted)}.coord-value{background:#e8eef3;padding:.25rem .625rem;border-radius:0;min-width:52px;text-align:center;border:1px solid var(--border-subtle);color:#00a88a}.product-item.selected .coord-value{background:rgba(0,212,170,.1);border-color:var(--border-accent)}.btn-delete{padding:.375rem .875rem;background:transparent;color:var(--accent-warm);border:1px solid hsla(0,100%,71%,.3);border-radius:0;cursor:pointer;font-size:.75rem;font-weight:500;transition:all .2s ease;opacity:.7}.btn-delete:hover{opacity:1;background:hsla(0,100%,71%,.1);border-color:var(--accent-warm)}.empty-state{text-align:center;padding:3rem;color:var(--text-muted)}.empty-state p{margin-top:.5rem;font-size:.875rem}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:var(--text-muted)}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-subtle);border-top-color:var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(1turn)}}.toast-container{position:fixed;bottom:2rem;right:2rem;display:flex;flex-direction:column;gap:.75rem;z-index:1000}.toast{padding:1rem 1.5rem;border-radius:0;font-size:.875rem;font-weight:500;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:.75rem;animation:toast-in .3s ease}.toast.success{background:#10b981;color:#fff}.toast.error{background:#ef4444;color:#fff}.toast.info{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-medium)}@keyframes toast-in{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-elevated)}::-webkit-scrollbar-thumb{background:#c8d4e0;border-radius:0}::-webkit-scrollbar-thumb:hover{background:#a0aec0}@media (max-width:1024px){.content{padding:1.5rem}.sidebar{width:220px}}@media (max-width:768px){main{flex-direction:column;height:auto;min-height:calc(100vh - var(--header-height))}.sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border-subtle);padding:1rem}.area-list{flex-direction:row;flex-wrap:wrap;gap:.5rem}.area-item{padding:.625rem 1rem;font-size:.8125rem}.content{padding:1rem;overflow:visible}.product-item{flex-wrap:wrap}.product-coords{width:100%;margin-top:.5rem}header{padding:0 1rem}header h1{font-size:1rem}}@keyframes select-glow{0%{box-shadow:0 0 0 0 rgba(0,212,170,.4)}70%{box-shadow:0 0 0 8px rgba(0,212,170,0)}to{box-shadow:0 0 0 8px rgba(0,212,170,0)}}.product-item.selected{animation:select-glow .5s ease-out}.hidden{display:none!important}