.board-container{min-height:100vh;background:var(--background);color:var(--foreground)}.board-header{position:sticky;top:0;z-index:50;padding:1rem 1.5rem;background:var(--background);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.board-header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto}.board-header-left{display:flex;align-items:center;gap:.75rem}.board-logo{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:linear-gradient(135deg,var(--primary) 0%,oklch(.5 .2 260) 100%);border-radius:.5rem;color:#fff}.board-title{font-size:1.125rem;font-weight:700;color:var(--foreground);line-height:1.2;margin:0}.board-subtitle{font-size:.75rem;color:var(--muted-foreground);margin:0}.board-id-text{font-family:monospace;font-weight:600;color:var(--primary)}.board-header-right{display:flex;align-items:center;gap:.75rem}.board-home-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--muted-foreground);background:transparent;border:1px solid var(--border);border-radius:.5rem;text-decoration:none;transition:all .2s ease}.board-home-btn:hover{background:var(--accent);color:var(--accent-foreground);border-color:var(--accent)}.board-main{padding:0;max-width:100%;margin:0;position:relative}.board-content{animation:boardFadeIn .4s ease}@keyframes boardFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.board-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 88px);text-align:center;padding:3rem}.board-empty-icon{display:flex;align-items:center;justify-content:center;width:120px;height:120px;background:var(--muted);color:var(--muted-foreground);border-radius:1rem;margin-bottom:1.5rem}.board-empty-title{font-size:1.5rem;font-weight:600;color:var(--foreground);margin:0 0 .5rem}.board-empty-text{font-size:1rem;color:var(--muted-foreground);margin:0;max-width:360px}.board-section{margin-bottom:3rem}.board-section-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.board-section-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:oklch(from var(--primary) l c h / .1);color:var(--primary);border-radius:.75rem}.board-section-title{font-size:1.25rem;font-weight:600;color:var(--foreground);margin:0}.board-section-count{font-size:.875rem;color:var(--muted-foreground);margin:0}.board-stacks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.board-image-stack{position:relative;cursor:pointer;animation:boardSlideUp .4s ease backwards}@keyframes boardSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.board-image-stack-inner{position:relative;background:var(--card);border:1px solid var(--border);border-radius:.75rem;overflow:hidden;transition:all .3s ease;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.board-image-stack:hover .board-image-stack-inner{transform:translateY(-4px);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;border-color:var(--primary)}.board-image-stack-inner:before,.board-image-stack-inner:after{content:"";position:absolute;background:hsl(var(--background));border:1px solid hsl(var(--border) / .3);border-radius:.75rem;transition:transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.board-image-stack-inner:before{inset:4px;z-index:-1}.board-image-stack-inner:after{inset:8px;background:hsl(var(--muted));border-color:hsl(var(--border) / .2);z-index:-2}.board-image-stack[data-count="1"] .board-image-stack-inner:before,.board-image-stack[data-count="1"] .board-image-stack-inner:after{display:none}.board-image-stack:hover .board-image-stack-inner{transform:translateY(-8px) rotate(1deg)}.board-image-stack:hover .board-image-stack-inner:before{transform:rotate(-1deg) translate(-2px,2px)}.board-image-stack:hover .board-image-stack-inner:after{transform:rotate(-2deg) translate(-4px,4px)}.board-draggable-node.dragging .board-image-stack-inner:before,.board-draggable-node.dragging .board-image-stack-inner:after{transform:none!important}.board-draggable-node.dragging .board-image-stack:hover .board-image-stack-inner{transform:none}.board-image-stack-preview{position:relative;aspect-ratio:4 / 3;overflow:hidden;background:var(--muted)}.board-image-stack-preview img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.board-image-stack:hover .board-image-stack-preview img{transform:scale(1.05)}.board-image-stack-count{position:absolute;top:.75rem;right:.75rem;display:flex;align-items:center;gap:.25rem;padding:.375rem .625rem;font-size:.75rem;font-weight:600;color:#fff;background:#000000b3;backdrop-filter:blur(4px);border-radius:9999px}.board-image-stack-label{padding:1rem;font-size:.875rem;font-weight:500;color:var(--foreground);text-align:center;background:var(--card)}.board-notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem}.board-sticky-note{position:relative;width:100%;aspect-ratio:1;padding:1rem;cursor:pointer;border-radius:.25rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;transition:all .3s ease;animation:boardSlideUp .4s ease backwards}.board-sticky-note:hover{transform:rotate(0) translateY(-4px)!important;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.board-sticky-note-yellow{background:#fbeec9;color:oklch(.35 .1 70)}.board-sticky-note-blue{background:oklch(.92 .05 230);color:oklch(.35 .1 230)}.board-sticky-note-pink{background:oklch(.92 .08 350);color:oklch(.35 .15 350)}.board-sticky-note-green{background:#d0efc9;color:#18460c}.board-sticky-note-purple{background:oklch(.92 .08 290);color:#3e2181}.board-sticky-note-number{font-size:2rem;font-weight:700;line-height:1;margin-bottom:.5rem}.board-sticky-note-preview{font-size:.75rem;line-height:1.4;opacity:.8;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.board-lightbox-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#000000f2;backdrop-filter:blur(8px);animation:boardFadeIn .2s ease}.board-lightbox-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;z-index:10}.board-lightbox-title{color:#fff;font-size:1.125rem;font-weight:500;opacity:.8}.board-lightbox-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:#ffffff1a;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;cursor:pointer;transition:all .2s ease}.board-lightbox-close:hover{background:#fff3}.board-lightbox-nav{position:absolute;display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:#ffffff1a;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;cursor:pointer;transition:all .2s ease;z-index:10}.board-lightbox-nav:hover{background:#fff3;transform:scale(1.1)}.board-lightbox-prev{left:1.5rem;top:50%;transform:translateY(-50%)}.board-lightbox-next{right:1.5rem;top:50%;transform:translateY(-50%)}.board-lightbox-prev:hover,.board-lightbox-next:hover{transform:translateY(-50%) scale(1.1)}.board-lightbox-content{display:flex;align-items:center;justify-content:center;padding:4rem;max-width:100%;max-height:100%}.board-lightbox-image{max-width:100%;max-height:calc(100vh - 160px);object-fit:contain;border-radius:.5rem;box-shadow:0 25px 50px -12px #00000080}.board-lightbox-footer{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1rem 1.5rem;z-index:10}.board-lightbox-counter{color:#fff;font-size:.875rem;opacity:.8}.board-lightbox-actions{display:flex;gap:.5rem}.board-lightbox-action{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#ffffff1a;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:.5rem;color:#fff;cursor:pointer;transition:all .2s ease}.board-lightbox-action:hover{background:#fff3}.board-modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem;background:#00000080;backdrop-filter:blur(4px);animation:boardFadeIn .2s ease}.board-modal{width:100%;max-width:500px;background:var(--card);border:1px solid var(--border);border-radius:1rem;box-shadow:0 25px 50px -12px #00000040;animation:boardScaleIn .3s ease}@keyframes boardScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.board-modal-note{max-width:600px}.board-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}.board-note-header-content{display:flex;align-items:center;gap:1rem}.board-note-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:oklch(from var(--primary) l c h / .1);color:var(--primary);border-radius:.75rem}.board-modal-title{font-size:1.25rem;font-weight:600;color:var(--foreground);margin:0}.board-modal-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:none;color:var(--muted-foreground);cursor:pointer;border-radius:.375rem;transition:all .2s ease}.board-modal-close:hover{background:var(--accent);color:var(--accent-foreground)}.board-modal-body{padding:1.5rem}.board-note-content{padding:1.25rem;background:var(--muted);border-radius:.5rem;font-size:.875rem;line-height:1.6;color:var(--foreground);max-height:400px;overflow-y:auto}.board-note-content-code{font-family:monospace}.board-note-content pre{margin:0;white-space:pre-wrap;word-wrap:break-word}.board-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--border)}.board-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1rem;font-size:.875rem;font-weight:500;border-radius:.5rem;cursor:pointer;transition:all .2s ease;border:none}.board-btn-primary{background:var(--primary);color:var(--primary-foreground)}.board-btn-primary:hover{opacity:.9}.board-btn-ghost{background:transparent;color:var(--muted-foreground);border:1px solid var(--border)}.board-btn-ghost:hover{background:var(--accent);color:var(--accent-foreground)}@media (max-width: 768px){.board-header{padding:.75rem 1rem}.board-header-left{gap:.5rem}.board-logo{width:36px;height:36px}.board-title{font-size:1rem}.board-subtitle,.board-home-btn span{display:none}.board-home-btn{padding:.5rem}.board-main{padding:1rem}.board-stacks-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}.board-notes-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.board-lightbox-nav{width:44px;height:44px;bottom:5rem;top:auto}.board-lightbox-prev{left:1rem;transform:none}.board-lightbox-next{right:1rem;transform:none}.board-lightbox-prev:hover,.board-lightbox-next:hover{transform:scale(1.1)}.board-lightbox-content{padding:1rem}.board-drag-overlay{padding:2rem 1rem}.board-drag-title{font-size:1.25rem}.board-drag-text{font-size:.875rem}.board-upload-status{bottom:1rem;left:1rem;right:1rem}}.board-drag-overlay{position:fixed;inset:0;z-index:200;background:oklch(from var(--primary) l c h / .1);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:3rem;animation:fadeIn .2s ease}.board-drag-content{text-align:center;max-width:420px;padding:3rem;background:var(--background);border:2px dashed var(--primary);border-radius:1rem;box-shadow:0 20px 50px oklch(from var(--foreground) l c h / .15)}.board-drag-icon{display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;background:linear-gradient(135deg,var(--primary),oklch(from var(--primary) calc(l - .1) c calc(h + 20)));border-radius:1.5rem;color:#fff;margin:0 auto 1.5rem;animation:pulse 2s ease infinite}.board-drag-title{font-size:1.5rem;font-weight:700;color:var(--foreground);margin:0 0 .5rem}.board-drag-text{font-size:1rem;color:var(--muted-foreground);margin:0}.board-upload-status{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);z-index:300;animation:slideUp .3s ease}.board-upload-status-content{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;background:var(--popover);border:1px solid var(--border);border-radius:.75rem;box-shadow:0 10px 40px oklch(from var(--foreground) l c h / .15);backdrop-filter:blur(8px)}.board-upload-spinner{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--primary);animation:spin 1s linear infinite}.board-upload-status-text{font-size:.875rem;font-weight:500;color:var(--foreground);white-space:nowrap}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.board-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1.5rem}.board-loading-spinner{width:48px;height:48px;color:var(--primary);animation:spin 1s linear infinite}.board-loading-text{font-size:1rem;color:var(--muted-foreground);margin:0}.passcode-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:oklch(from var(--background) l c h / .85);backdrop-filter:blur(12px);animation:passcodeOverlayFadeIn .3s ease;cursor:pointer}@keyframes passcodeOverlayFadeIn{0%{opacity:0}to{opacity:1}}.passcode-modal{position:relative;width:100%;max-width:520px;background:var(--card);border:1px solid oklch(from var(--border) l c h / .6);border-radius:24px;padding:3rem;box-shadow:0 0 0 1px oklch(from var(--foreground) l c h / .03),0 20px 60px -10px oklch(from var(--foreground) l c h / .15),0 10px 25px -5px oklch(from var(--foreground) l c h / .1);animation:passcodeModalSlideUp .4s cubic-bezier(.16,1,.3,1);cursor:default}@keyframes passcodeModalSlideUp{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.passcode-header{text-align:center;margin-bottom:2rem}.passcode-icon-large{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;background:linear-gradient(135deg,oklch(.65 .22 250),oklch(.55 .25 260));border-radius:20px;color:#fff;margin:0 auto 1.5rem;box-shadow:0 4px 20px oklch(from var(--primary) l c h / .3),inset 0 1px #ffffff1a;animation:passcodeIconBounce .6s cubic-bezier(.34,1.56,.64,1) .1s backwards}@keyframes passcodeIconBounce{0%{opacity:0;transform:scale(.3) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}.passcode-title{font-size:1.75rem;font-weight:700;color:var(--foreground);margin:0 0 .5rem;letter-spacing:-.02em;line-height:1.2}.passcode-subtitle{font-size:.9375rem;color:var(--muted-foreground);margin:0;line-height:1.5}.passcode-board-id{display:inline-block;padding:.125rem .5rem;background:oklch(from var(--primary) l c h / .1);color:var(--primary);border-radius:6px;font-family:var(--font-mono, monospace);font-size:.875rem;font-weight:600;letter-spacing:.025em}.passcode-form{display:flex;flex-direction:column;gap:1.25rem}.passcode-input-group{display:flex;flex-direction:column;gap:.625rem}.passcode-label{font-size:.875rem;font-weight:600;color:var(--foreground);letter-spacing:-.01em}.passcode-input{width:100%;padding:1rem 1.25rem;font-size:1rem;font-family:var(--font-mono, monospace);color:var(--foreground);background:var(--background);border:2px solid var(--border);border-radius:12px;outline:none;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:.05em}.passcode-input::placeholder{color:var(--muted-foreground);opacity:.5;letter-spacing:0}.passcode-input:hover:not(:disabled){border-color:oklch(from var(--border) calc(l + .1) c h);background:oklch(from var(--background) calc(l + .01) c h)}.passcode-input:focus{border-color:var(--primary);background:var(--background);box-shadow:0 0 0 4px oklch(from var(--primary) l c h / .12),0 2px 8px oklch(from var(--primary) l c h / .08)}.passcode-input:disabled{opacity:.5;cursor:not-allowed}.passcode-checkbox{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9375rem;color:var(--foreground);cursor:pointer;user-select:none;padding:.5rem 0;margin:0}.passcode-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--primary);border-radius:4px;margin:0;flex-shrink:0}.passcode-checkbox input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.passcode-error{display:flex;align-items:flex-start;gap:.625rem;padding:1rem 1.25rem;background:oklch(from var(--destructive) l c h / .08);border:1.5px solid oklch(from var(--destructive) l c h / .3);border-radius:12px;color:var(--destructive);font-size:.875rem;line-height:1.5;animation:passcodeErrorShake .4s cubic-bezier(.36,.07,.19,.97)}@keyframes passcodeErrorShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.passcode-error svg{flex-shrink:0;margin-top:2px}.passcode-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:.625rem;padding:1.125rem 2rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,oklch(.65 .22 250),oklch(.55 .25 260));border:none;border-radius:16px;cursor:pointer;outline:none;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px oklch(from var(--primary) l c h / .25),inset 0 1px #ffffff1a;letter-spacing:-.01em;margin-top:.5rem}.passcode-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px oklch(from var(--primary) l c h / .35),inset 0 1px #ffffff26}.passcode-submit:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px oklch(from var(--primary) l c h / .2),inset 0 1px #ffffff1a}.passcode-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}.passcode-spinner{display:inline-flex;animation:spin 1s linear infinite}@media (max-width: 640px){.passcode-modal{padding:2.5rem 2rem;border-radius:20px}.passcode-icon-large{width:72px;height:72px;border-radius:18px}.passcode-title{font-size:1.5rem}.passcode-subtitle{font-size:.875rem}.passcode-input{padding:.875rem 1rem;font-size:.9375rem}.passcode-checkbox{font-size:.875rem}.passcode-submit{padding:1rem 1.75rem;font-size:.9375rem}}@media (prefers-color-scheme: dark){.passcode-modal{box-shadow:0 0 0 1px oklch(from var(--foreground) l c h / .1),0 20px 60px -10px #0009,0 10px 25px -5px #0006}}.board-btn-spinner{display:inline-flex;animation:spin 1s linear infinite}.board-canvas{position:relative;width:100%;height:calc(100vh - 88px);min-height:600px;overflow:hidden;touch-action:none}.board-draggable-node{position:absolute;cursor:grab;user-select:none;touch-action:none;transition:opacity .15s ease}.board-draggable-node.dragging{cursor:grabbing;z-index:1000;opacity:.95}.board-draggable-node .board-image-stack{width:280px;pointer-events:auto}.board-draggable-node .board-sticky-note{width:180px;pointer-events:auto}.board-draggable-node.dragging .board-image-stack,.board-draggable-node.dragging .board-sticky-note{pointer-events:none}.board-save-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#43b0ff,#6684fb);border:none;border-radius:.5rem;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #43b0ff40;margin-right:.75rem}.board-save-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #43b0ff59}.board-save-btn:active:not(:disabled){transform:translateY(0)}.board-save-btn:disabled{opacity:.7;cursor:not-allowed}.board-save-btn svg{flex-shrink:0}.board-save-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse-save{0%,to{box-shadow:0 2px 8px #43b0ff40}50%{box-shadow:0 2px 12px #43b0ff73}}.board-save-btn:not(:disabled){animation:pulse-save 2s ease-in-out infinite}.board-image-stack.drop-target{border:2px dashed var(--primary);transform:scale(1.05);box-shadow:0 0 20px oklch(from var(--primary) l c h / .3);transition:all .2s ease}@media (max-width: 640px){.board-save-btn{padding:.5rem 1rem;font-size:.813rem;margin-right:.5rem}.board-save-btn span{display:none}}
