:root{--background: 0 0% 100%;--foreground: 240 10% 3.9%;--card: 0 0% 100%;--card-foreground: 240 10% 3.9%;--popover: 0 0% 100%;--popover-foreground: 240 10% 3.9%;--primary: 240 5.9% 10%;--primary-foreground: 0 0% 98%;--secondary: 240 4.8% 95.9%;--secondary-foreground: 240 5.9% 10%;--muted: 240 4.8% 95.9%;--muted-foreground: 240 3.8% 46.1%;--accent: 240 4.8% 95.9%;--accent-foreground: 240 5.9% 10%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--warning: 38 92% 50%;--warning-foreground: 0 0% 98%;--success: 142 76% 36%;--success-foreground: 0 0% 98%;--border: 240 5.9% 90%;--input: 240 5.9% 90%;--ring: 240 5.9% 10%;--radius: .625rem;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / .05);--shadow-md: 0 4px 6px -1px hsl(0 0% 0% / .1), 0 2px 4px -2px hsl(0 0% 0% / .1);--shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / .1), 0 4px 6px -4px hsl(0 0% 0% / .1);--shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / .1), 0 8px 10px -6px hsl(0 0% 0% / .1);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--z-dropdown: 50;--z-sticky: 100;--z-overlay: 200;--z-modal: 300;--z-toast: 400}.dark{--background: 240 10% 3.9%;--foreground: 0 0% 98%;--card: 240 10% 6%;--card-foreground: 0 0% 98%;--popover: 240 10% 6%;--popover-foreground: 0 0% 98%;--primary: 0 0% 98%;--primary-foreground: 240 5.9% 10%;--secondary: 240 3.7% 15.9%;--secondary-foreground: 0 0% 98%;--muted: 240 3.7% 15.9%;--muted-foreground: 240 5% 64.9%;--accent: 240 3.7% 15.9%;--accent-foreground: 0 0% 98%;--destructive: 0 62.8% 30.6%;--destructive-foreground: 0 0% 98%;--border: 240 3.7% 15.9%;--input: 240 3.7% 15.9%;--ring: 240 4.9% 83.9%;--shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / .2);--shadow-md: 0 4px 6px -1px hsl(0 0% 0% / .3), 0 2px 4px -2px hsl(0 0% 0% / .2);--shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / .3), 0 4px 6px -4px hsl(0 0% 0% / .2)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}body{font-family:var(--font-sans);font-size:.9375rem;line-height:1.6;color:hsl(var(--foreground));background-color:hsl(var(--background));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100dvh}#app{min-height:100dvh;display:flex;flex-direction:column}img,svg{display:block;max-width:100%}button,input,textarea,select{font:inherit;color:inherit;border:none;outline:none;background:none}button{cursor:pointer;-webkit-user-select:none;user-select:none}a{color:inherit;text-decoration:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:hsl(var(--muted-foreground) / .3);border-radius:99px}::selection{background:hsl(var(--warning) / .3);color:hsl(var(--foreground))}h1{font-size:1.875rem;font-weight:700;line-height:1.2;letter-spacing:-.025em}h2{font-size:1.5rem;font-weight:600;line-height:1.3;letter-spacing:-.02em}h3{font-size:1.25rem;font-weight:600;line-height:1.4}h4{font-size:1.0625rem;font-weight:600;line-height:1.4}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.8125rem;line-height:1.25rem}.text-base{font-size:.9375rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-muted{color:hsl(var(--muted-foreground))}.text-warning{color:hsl(var(--warning))}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pinDrop{0%{transform:translateY(-20px) scale(0);opacity:0}60%{transform:translateY(2px) scale(1.1);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}.animate-fade-in{animation:fadeIn var(--transition-normal) forwards}.animate-slide-up{animation:slideUp var(--transition-slow) forwards}.animate-scale-in{animation:scaleIn var(--transition-normal) forwards}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;border-radius:var(--radius);font-size:.875rem;font-weight:500;min-height:2.75rem;padding:.625rem 1.25rem;transition:all var(--transition-fast);position:relative;overflow:hidden}.btn:active{transform:scale(.97)}.btn-primary{background-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}.btn-primary:hover{background-color:hsl(var(--primary) / .9)}.btn-secondary{background-color:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}.btn-secondary:hover{background-color:hsl(var(--secondary) / .8)}.btn-outline{border:1px solid hsl(var(--border));background:transparent;color:hsl(var(--foreground))}.btn-outline:hover{background-color:hsl(var(--accent))}.btn-ghost{background:transparent;color:hsl(var(--foreground))}.btn-ghost:hover{background-color:hsl(var(--accent))}.btn-destructive{background-color:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}.btn-destructive:hover{background-color:hsl(var(--destructive) / .9)}.btn-warning{background-color:hsl(var(--warning));color:hsl(var(--warning-foreground))}.btn-warning:hover{background-color:hsl(var(--warning) / .9)}.btn-icon{min-height:2.5rem;min-width:2.5rem;padding:0}.btn-lg{min-height:3.25rem;padding:.75rem 1.75rem;font-size:1rem;border-radius:calc(var(--radius) + 2px)}.btn-sm{min-height:2.25rem;padding:.375rem .875rem;font-size:.8125rem}.btn:disabled{opacity:.5;pointer-events:none}.fab{position:fixed;bottom:calc(5rem + var(--safe-bottom));right:1.25rem;width:3.5rem;height:3.5rem;border-radius:50%;background:hsl(var(--warning));color:hsl(var(--warning-foreground));box-shadow:var(--shadow-lg),0 0 hsl(var(--warning) / .4);display:flex;align-items:center;justify-content:center;z-index:var(--z-sticky);transition:all var(--transition-fast)}.fab:hover{transform:scale(1.05);box-shadow:var(--shadow-xl),0 0 0 8px hsl(var(--warning) / .15)}.fab:active{transform:scale(.95)}.fab svg{width:1.5rem;height:1.5rem}.card{background:hsl(var(--card));color:hsl(var(--card-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.card-interactive{cursor:pointer}.card-interactive:hover{box-shadow:var(--shadow-md);border-color:hsl(var(--ring) / .3)}.card-interactive:active{transform:scale(.98)}.card-header{padding:var(--spacing-md) var(--spacing-md) var(--spacing-sm)}.card-content{padding:var(--spacing-sm) var(--spacing-md)}.card-footer{padding:var(--spacing-sm) var(--spacing-md) var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-sm)}.input{display:flex;width:100%;min-height:2.75rem;padding:.5rem .75rem;background:transparent;border:1px solid hsl(var(--input));border-radius:var(--radius);font-size:.9375rem;color:hsl(var(--foreground));transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input::placeholder{color:hsl(var(--muted-foreground))}.input:focus{border-color:hsl(var(--ring));box-shadow:0 0 0 2px hsl(var(--ring) / .2)}.textarea{display:flex;width:100%;min-height:5rem;padding:.5rem .75rem;background:transparent;border:1px solid hsl(var(--input));border-radius:var(--radius);font-size:.9375rem;color:hsl(var(--foreground));resize:vertical;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.textarea::placeholder{color:hsl(var(--muted-foreground))}.textarea:focus{border-color:hsl(var(--ring));box-shadow:0 0 0 2px hsl(var(--ring) / .2)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.form-label{font-size:.8125rem;font-weight:500;color:hsl(var(--foreground))}.modal-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:#0009;backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;padding:var(--spacing-md);animation:fadeIn var(--transition-fast) forwards}@media(min-width:640px){.modal-overlay{align-items:center}}.modal-content{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow-xl);width:100%;max-width:28rem;max-height:85dvh;overflow-y:auto;animation:slideUp var(--transition-normal) forwards}@media(min-width:640px){.modal-content{animation:scaleIn var(--transition-normal) forwards}}.modal-header{padding:var(--spacing-lg) var(--spacing-lg) var(--spacing-sm)}.modal-header h3{font-size:1.125rem;font-weight:600}.modal-header p{font-size:.8125rem;color:hsl(var(--muted-foreground));margin-top:var(--spacing-xs)}.modal-body{padding:var(--spacing-sm) var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md)}.modal-footer{padding:var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);display:flex;justify-content:flex-end;gap:var(--spacing-sm)}.toast-container{position:fixed;bottom:calc(5.5rem + var(--safe-bottom));left:50%;transform:translate(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--spacing-sm);pointer-events:none;width:calc(100% - 2rem);max-width:24rem}.toast{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:var(--spacing-sm) var(--spacing-md);box-shadow:var(--shadow-lg);font-size:.875rem;display:flex;align-items:center;gap:var(--spacing-sm);pointer-events:auto;animation:slideUp var(--transition-normal) forwards}.toast.toast-leaving{animation:fadeOut var(--transition-fast) forwards}.toast-success{border-left:3px solid hsl(var(--success))}.toast-error{border-left:3px solid hsl(var(--destructive))}.toast-info{border-left:3px solid hsl(var(--ring))}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.375rem;height:1.375rem;padding:0 .375rem;border-radius:99px;font-size:.6875rem;font-weight:600;line-height:1}.badge-warning{background:hsl(var(--warning));color:hsl(var(--warning-foreground))}.badge-muted{background:hsl(var(--muted));color:hsl(var(--muted-foreground))}.bottom-sheet-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:#00000080;backdrop-filter:blur(4px);animation:fadeIn var(--transition-fast) forwards}.bottom-sheet{position:fixed;bottom:0;left:0;right:0;z-index:calc(var(--z-modal) + 1);background:hsl(var(--card));border-top:1px solid hsl(var(--border));border-radius:calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0;max-height:70dvh;overflow-y:auto;padding-bottom:var(--safe-bottom);animation:slideUp var(--transition-normal) forwards}.bottom-sheet-handle{width:2.5rem;height:.25rem;background:hsl(var(--muted-foreground) / .3);border-radius:99px;margin:.625rem auto .375rem}.bottom-sheet-header{padding:var(--spacing-sm) var(--spacing-lg);font-weight:600}.bottom-sheet-body{padding:0 var(--spacing-md) var(--spacing-md)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl);text-align:center;gap:var(--spacing-md);color:hsl(var(--muted-foreground));flex:1}.empty-state svg{width:4rem;height:4rem;opacity:.4}.empty-state p{font-size:.9375rem}.skeleton{background:linear-gradient(90deg,hsl(var(--muted)) 25%,hsl(var(--muted-foreground) / .1),hsl(var(--muted)) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius)}.separator{height:1px;background:hsl(var(--border));width:100%}.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm);padding:var(--spacing-md)}.photo-card{position:relative;border-radius:var(--radius);overflow:hidden;background:hsl(var(--muted));aspect-ratio:1;cursor:pointer;transition:transform var(--transition-fast)}.photo-card:active{transform:scale(.97)}.photo-card img{width:100%;height:100%;object-fit:cover}.photo-card-overlay{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-sm);background:linear-gradient(transparent,#000000b3);color:#fff}.photo-card-overlay .text-xs{opacity:.8}.photo-card-pin{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm)}.lang-switcher{display:flex;background:hsl(var(--muted));border-radius:var(--radius);padding:2px;gap:1px}.lang-switcher button{padding:.25rem .5rem;border-radius:calc(var(--radius) - 2px);font-size:.75rem;font-weight:500;color:hsl(var(--muted-foreground));transition:all var(--transition-fast)}.lang-switcher button.active{background:hsl(var(--background));color:hsl(var(--foreground));box-shadow:var(--shadow-sm)}.progress-bar{width:100%;height:4px;background:hsl(var(--muted));border-radius:99px;overflow:hidden}.progress-bar-fill{height:100%;background:hsl(var(--warning));border-radius:99px;transition:width var(--transition-normal)}.app-header{position:sticky;top:0;z-index:var(--z-sticky);background:hsl(var(--background) / .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid hsl(var(--border));padding-top:var(--safe-top)}.app-header-inner{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);min-height:3.25rem}.app-header-title{flex:1;font-size:1.0625rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-header-actions{display:flex;align-items:center;gap:var(--spacing-xs)}.btn-back{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--radius);transition:background var(--transition-fast)}.btn-back:hover{background:hsl(var(--accent))}.btn-back svg{width:1.25rem;height:1.25rem}.app-content{flex:1;display:flex;flex-direction:column}.bottom-bar{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-sticky);background:hsl(var(--background) / .9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid hsl(var(--border));padding-bottom:var(--safe-bottom)}.bottom-bar-inner{display:flex;align-items:center;justify-content:space-around;padding:var(--spacing-sm) var(--spacing-md);gap:var(--spacing-xs)}.bottom-bar-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius);font-size:.6875rem;font-weight:500;color:hsl(var(--muted-foreground));transition:all var(--transition-fast);min-width:3.5rem}.bottom-bar-btn:hover,.bottom-bar-btn.active{color:hsl(var(--foreground));background:hsl(var(--accent))}.bottom-bar-btn svg{width:1.375rem;height:1.375rem}.page-home{padding-bottom:calc(4.5rem + var(--safe-bottom))}.page-home-header{padding:var(--spacing-lg) var(--spacing-md) var(--spacing-md)}.page-home-header h1{font-size:1.625rem;margin-bottom:var(--spacing-xs)}.reports-list{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:0 var(--spacing-md) var(--spacing-md)}.report-card{display:flex;gap:var(--spacing-md);padding:var(--spacing-md)}.report-card-thumb{width:3.75rem;height:3.75rem;border-radius:calc(var(--radius) - 2px);background:hsl(var(--muted));flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.report-card-thumb img{width:100%;height:100%;object-fit:cover}.report-card-thumb svg{width:1.5rem;height:1.5rem;color:hsl(var(--muted-foreground))}.report-card-info{flex:1;min-width:0}.report-card-title{font-size:.9375rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-card-desc{font-size:.8125rem;color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}.report-card-meta{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-xs);font-size:.75rem;color:hsl(var(--muted-foreground))}.report-card-meta svg{width:.875rem;height:.875rem}.page-report{padding-bottom:calc(4.5rem + var(--safe-bottom))}.blueprint-section{margin:var(--spacing-md);border-radius:var(--radius);border:1px dashed hsl(var(--border));overflow:hidden;position:relative;cursor:pointer;transition:border-color var(--transition-fast)}.blueprint-section:hover{border-color:hsl(var(--warning) / .5)}.blueprint-placeholder{padding:var(--spacing-xl);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);color:hsl(var(--muted-foreground));font-size:.875rem}.blueprint-placeholder svg{width:2.5rem;height:2.5rem;opacity:.5}.blueprint-preview{width:100%;max-height:12rem;object-fit:contain;background:hsl(var(--muted))}.section-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-md) var(--spacing-sm)}.section-header h3{font-size:.9375rem}.page-photo-view{display:flex;flex-direction:column;min-height:100dvh}.photo-viewer{background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.photo-viewer--canvas{padding:0}.photo-canvas-wrap{position:relative;display:block;line-height:0}#photo-canvas{display:block}#annot-canvas{position:absolute;inset:0;cursor:crosshair;touch-action:none}.draw-toolbar{display:flex;flex-direction:column;background:hsl(var(--card));border-bottom:1px solid hsl(var(--border));flex-shrink:0}.draw-toolbar-row{display:flex;align-items:center;padding:5px var(--spacing-sm);gap:var(--spacing-xs)}.draw-toolbar-row+.draw-toolbar-row{border-top:1px solid hsl(var(--border) / .5)}.draw-toolbar-spacer{flex:1}.draw-toolbar-section{display:flex;align-items:center;gap:3px;flex-shrink:0}.draw-tool-btn{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--radius);color:hsl(var(--muted-foreground));transition:all var(--transition-fast);flex-shrink:0}.draw-tool-btn svg{width:1.125rem;height:1.125rem}.draw-tool-btn:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}.draw-tool-btn.active{background:hsl(var(--warning) / .15);color:hsl(var(--warning));box-shadow:inset 0 0 0 1.5px hsl(var(--warning) / .6)}.draw-color-swatch{width:1.625rem;height:1.625rem;border-radius:50%;border:2px solid transparent;transition:all var(--transition-fast);flex-shrink:0}.draw-color-swatch:hover{transform:scale(1.15)}.draw-color-swatch.active{border-color:hsl(var(--foreground));transform:scale(1.2);box-shadow:0 0 0 3px hsl(var(--background)),0 0 0 5px hsl(var(--foreground) / .4)}.draw-stroke-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}.draw-stroke-label{font-size:.6875rem;color:hsl(var(--muted-foreground));white-space:nowrap}.draw-stroke-slider{width:6rem;accent-color:hsl(var(--warning));cursor:pointer}.draw-action-btn{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--radius);color:hsl(var(--muted-foreground));transition:all var(--transition-fast);flex-shrink:0}.draw-action-btn svg{width:1.125rem;height:1.125rem}.draw-action-btn:hover{background:hsl(var(--accent));color:hsl(var(--foreground))}.draw-reset-row{display:none;border-top:1px solid hsl(var(--destructive) / .2);background:hsl(var(--destructive) / .06);padding:5px var(--spacing-sm);animation:fadeIn var(--transition-fast) forwards}.draw-reset-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);width:100%;min-height:2rem;border-radius:var(--radius);font-size:.8125rem;font-weight:500;color:hsl(var(--destructive));transition:all var(--transition-fast);padding:0 var(--spacing-sm)}.draw-reset-btn:hover{background:hsl(var(--destructive) / .12)}.draw-reset-btn:active{transform:scale(.98)}.draw-reset-btn svg{width:1rem;height:1rem;flex-shrink:0}.photo-details{padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md);padding-bottom:calc(6rem + var(--safe-bottom))}.photo-meta{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.8125rem;color:hsl(var(--muted-foreground))}.photo-onboarding-bar{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-sticky);background:hsl(var(--background) / .92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid hsl(var(--border));padding:var(--spacing-sm) var(--spacing-md);padding-bottom:calc(var(--spacing-sm) + var(--safe-bottom));display:flex;gap:var(--spacing-sm)}.photo-onboarding-bar .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs)}.photo-onboarding-bar .btn svg{width:1.125rem;height:1.125rem;flex-shrink:0}.page-markup{display:flex;flex-direction:column;height:100dvh}.markup-canvas-container{flex:1;position:relative;overflow:hidden;background:hsl(var(--muted));touch-action:none}.markup-canvas-container canvas{display:block}.markup-toolbar{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-top:1px solid hsl(var(--border));background:hsl(var(--background));padding-bottom:calc(var(--spacing-sm) + var(--safe-bottom))}.markup-toolbar .btn{flex:1}.pin-popup{position:absolute;z-index:var(--z-dropdown);background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:var(--spacing-sm);width:12rem;animation:scaleIn var(--transition-fast) forwards;transform-origin:bottom center}.pin-popup img{width:100%;border-radius:calc(var(--radius) - 2px);aspect-ratio:4/3;object-fit:cover;margin-bottom:var(--spacing-xs)}.pin-popup-text{font-size:.75rem;color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.page-enter{animation:slideInRight var(--transition-normal) forwards}.page-enter-back{animation:slideInLeft var(--transition-normal) forwards}