:root{--font-family: "Outfit", system-ui, -apple-system, sans-serif;--bg-color: #0F172A;--surface-color: #1E293B;--surface-hover: #334155;--primary-color: #3B82F6;--primary-hover: #2563EB;--text-main: #F1F5F9;--text-muted: #94A3B8;--border-color: #334155;--annotation-color: #DC2626;--radius-lg: 16px;--radius-md: 8px;--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-main);height:100vh;overflow:hidden;display:flex;flex-direction:column}#app{height:100%;display:flex;flex-direction:column}.app-header{padding:1rem 2rem;background-color:var(--surface-color);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;z-index:10}.app-header h1{font-size:1.25rem;font-weight:700;color:var(--text-main)}.controls{display:flex;gap:1rem}.btn{padding:.5rem 1rem;border-radius:var(--radius-md);font-weight:500;cursor:pointer;transition:all .2s ease;border:none;font-family:inherit;display:inline-flex;align-items:center;justify-content:center}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--primary-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background-color:var(--surface-hover);color:var(--text-main)}.btn-secondary:hover{background-color:#475569}.editor-container{flex:1;position:relative;overflow:hidden;background-color:#020617;display:flex;align-items:center;justify-content:center}.drop-zone{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.drop-zone.drag-over{background-color:#3b82f61a;border:2px dashed var(--primary-color)}.empty-state{text-align:center;color:var(--text-secondary);pointer-events:auto;cursor:pointer}.empty-state h2{margin-bottom:.5rem}.empty-state p{color:var(--text-muted)}.empty-state .icon-stack{font-size:3rem;margin-bottom:1rem}.viewport{width:100%;height:100%;overflow:hidden;cursor:grab;display:flex;align-items:center;justify-content:center}.viewport.hidden{display:none}.viewport:active{cursor:grabbing}.content-layer{position:relative;transform-origin:center center;will-change:transform;box-shadow:var(--shadow-lg);-webkit-user-select:none;user-select:none}#targetImage{display:block;max-width:none;pointer-events:none}.separator{width:1px;height:24px;background-color:var(--border-color);margin:0 .5rem}.annotation-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.annotation-wrapper{pointer-events:auto;cursor:move;transition:opacity .2s}.annotation-wrapper.selected{outline:2px dashed rgba(59,130,246,.5);box-shadow:0 0 0 4px #3b82f633;z-index:100}.annotation-wrapper:not(.selected) .rotate-handle{display:none}#addAnnotationBtn{background-color:#22c55e;color:#fff;border-width:0}#addAnnotationBtn:hover:not(:disabled){background-color:#16a34a}@media(max-width:600px){.app-header h1{font-size:0}.app-header h1:before{content:"✈️";font-size:1.5rem}.upload-btn{display:none!important}.controls{gap:.5rem}.btn{padding:.5rem .75rem}.desktop-msg{display:none}}@media(min-width:601px){.mobile-msg{display:none}}.zoom-controls{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);background-color:var(--surface-color);padding:.5rem;border-radius:50px;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow-lg);border:1px solid var(--border-color)}.btn-icon{width:32px;height:32px;border-radius:50%;border:none;background:var(--surface-hover);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.btn-icon:hover{background-color:var(--primary-color)}.hidden{display:none!important}body.dragging-annotation *{cursor:none!important}