body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}.drawboard{display:flex;height:100vh;text-align:center;width:100%}.drawboard-content{flex-grow:1;height:100%;overflow:hidden;position:relative;width:90%}.drawboard-overlay{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.drawboard-header-container{pointer-events:auto;position:relative;z-index:1}.drawboard-header{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#282c34e6;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.drawboard-link{color:#61dafb}@media (max-width:768px){.drawboard-content{width:100%}}.menu{background-color:var(--background-secondary);box-shadow:2px 0 5px #0000001a;box-sizing:border-box;display:flex;flex-direction:column;font-size:.9rem;height:100vh;overflow-y:auto;padding:16px;transition:transform .3s ease;width:200px;z-index:1000}.menu-branding{align-items:center;border-bottom:1px solid #f0f0f0;display:flex;margin-bottom:20px;padding-bottom:12px}.logo-image{height:32px;margin-right:8px;object-fit:contain;width:32px}.logo-text{color:#333;font-size:1.2rem;font-weight:500;letter-spacing:-.5px}.menu-tools{gap:18px;padding:10px 0}.menu-tool-item,.menu-tools{display:flex;flex-direction:column}.menu-tool-item{align-items:center;border-radius:8px;cursor:pointer;padding:12px 8px;transition:background-color .2s ease}.menu-tool-item:hover{background-color:#f0f0f0}.menu-tool-item:active{background-color:#e0e0e0}.tool-icon{align-items:center;display:flex;height:32px;justify-content:center;margin-bottom:8px;width:32px}.area-icon{color:#2e8b57;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));transition:transform .2s ease,filter .2s ease}.area-icon svg{height:100%;width:100%}.menu-tool-item:hover .area-icon{filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));transform:translateY(-2px)}.box-icon{color:#4a6baf;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));transition:transform .2s ease,filter .2s ease}.box-icon svg{height:100%;width:100%}.menu-tool-item:hover .box-icon{filter:drop-shadow(0 4px 4px rgba(0,0,0,.3));transform:translateY(-2px)}.connect-icon{color:#4a6baf;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));transition:transform .2s ease,filter .2s ease}.connect-icon svg{height:100%;width:100%}.menu-tool-item:hover .connect-icon{filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));transform:translateY(-2px)}.target-icon{color:#e94e77;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));transition:all .3s ease}.target-icon svg{height:100%;width:100%}.menu-tool-item:hover .target-icon{filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));transform:translateY(-2px) rotate(45deg)}.menu-tool-item:active .target-icon{transform:scale(.9)}.tool-label{color:#333;font-size:.85rem;font-weight:500;text-align:center}.menu ul{list-style-type:none;padding:0}.menu li{align-items:center;cursor:pointer;display:flex;padding:8px 0;position:relative;transition:color .3s ease}.menu li:hover{color:#61dafb}.menu-icon{display:inline-block;font-size:1.2rem;margin-right:5px}.menu-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tooltip{background:#333;border-radius:4px;color:#fff;font-size:.8rem;left:100%;margin-left:10px;padding:5px 10px;position:absolute;top:0;white-space:nowrap;z-index:1000}.tooltip:before{border-bottom:5px solid #0000;border-right:5px solid #333;border-top:5px solid #0000;content:"";left:-5px;position:absolute;top:50%;transform:translateY(-50%)}@media (max-width:768px){.menu{font-size:.8rem;left:0;padding:12px;position:fixed;top:0;transform:translateX(-100%);transition:transform .3s ease;width:80px;z-index:100}.menu.open{transform:translateX(0)}.menu-text{display:none}.menu-icon{margin-right:0;text-align:center;width:100%}.menu li{justify-content:center;margin-bottom:8px;min-height:48px}.menu-tool-item{border-radius:12px;margin-bottom:12px;min-height:64px;padding:16px 8px}.tool-icon{height:36px;margin-bottom:6px;width:36px}.tool-text{font-size:11px;font-weight:500}.menu-branding{align-items:center;flex-direction:column;margin-bottom:16px;padding:16px 8px}.logo-image{height:36px;margin-bottom:6px;margin-right:0;width:36px}.logo-text{font-size:1rem}.buy-coffee-container{display:none}}@media (max-width:768px) and (orientation:portrait){.menu{align-items:center;background-color:var(--background-secondary);box-shadow:0 2px 8px #00000026;display:flex;flex-direction:row;height:auto;left:0;max-height:120px;min-height:70px;overflow-x:auto;overflow-y:hidden;padding:8px 16px;position:fixed;right:0;top:0;transform:translateY(-100%);transition:transform .3s ease;width:100%;z-index:100}.menu.open{transform:translateY(0)}.menu-branding{align-items:center;border-bottom:none;border-right:1px solid #f0f0f0;flex-direction:row;margin-bottom:0;margin-right:16px;min-width:fit-content;padding:0 12px 0 0}.logo-image{height:28px;margin-bottom:0;margin-right:6px;width:28px}.logo-text{font-size:.9rem;font-weight:600;white-space:nowrap}.menu-tools{flex:1 1;flex-direction:row;gap:8px;min-width:0;padding:0}.menu-tool-item{align-items:center;border-radius:8px;flex-shrink:0;justify-content:center;margin-bottom:0;min-height:50px;min-width:60px;padding:8px 12px}.tool-icon{height:24px;margin-bottom:3px;width:24px}.tool-text{font-size:10px;font-weight:600;line-height:1.1;text-align:center}.file-input-container{display:none}.menu~*{padding-top:70px}}@media (max-width:768px) and (orientation:landscape){.menu{font-size:.8rem;height:100vh;left:0;padding:8px;position:fixed;top:0;transform:translateX(-100%);transition:transform .3s ease;width:70px;z-index:100}.menu.open{transform:translateX(0)}.menu-branding{align-items:center;flex-direction:column;margin-bottom:12px;padding:8px 4px}.logo-image{height:32px;margin-bottom:4px;margin-right:0;width:32px}.logo-text{font-size:.8rem;text-align:center}.menu-tools{flex-direction:column;gap:8px;padding:0}.menu-tool-item{border-radius:8px;margin-bottom:8px;min-height:50px;padding:12px 6px}.tool-icon{height:28px;margin-bottom:4px;width:28px}.tool-text{font-size:9px;font-weight:500;text-align:center}}@media (max-width:768px){.load-options{margin-top:20px}.radio-option{border-radius:8px;gap:16px;margin-bottom:12px;min-height:56px;padding:16px 12px}.radio-option input[type=radio]{height:20px;width:20px}.radio-option span{font-size:16px;line-height:1.3}}.form-group{margin-bottom:16px}.form-control{transition:border-color .2s}textarea.form-control{min-height:80px}.form-error{border-color:#e74c3c}.error-message{color:#e74c3c}.form-help{color:#777;font-size:12px;font-style:italic;margin-top:4px}.thumbnail-input-container{margin-bottom:10px;position:relative}.thumbnail-preview{background-color:#f9f9f9;border:1px solid #eee;border-radius:6px;margin-top:15px;padding:15px;text-align:center}.thumbnail-preview img{border:1px solid #0000001a;border-radius:4px;box-shadow:0 2px 4px #0000001a;max-height:150px;max-width:100%;object-fit:contain}.error-message{color:#d32f2f;font-size:12px;margin-top:4px}.form-control.error{border-color:#d32f2f}.form-actions{gap:10px;margin-top:20px}.save-btn{background-color:#1976d2;border-radius:4px;cursor:pointer;font-weight:500;padding:8px 16px}.save-btn:hover{background-color:#1565c0}.cancel-btn{background-color:#e0e0e0;border:none;border-radius:4px;cursor:pointer;font-weight:500;padding:8px 16px}.cancel-btn:hover{background-color:#d5d5d5}.file-input{border:1px dashed #ccc;padding:10px}.file-input:hover{background-color:#f0f5ff;border-color:#4a6baf}.file-upload-info{margin-top:4px}.contact-section{margin-bottom:8px;margin-top:auto}.contact-toggle-btn{align-items:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid #dee2e6;border-radius:8px;color:#495057;cursor:pointer;display:flex;font-size:.85rem;font-weight:500;gap:8px;justify-content:space-between;overflow:hidden;padding:10px 12px;position:relative;transition:all .2s ease;width:100%}.contact-toggle-btn:hover{background:linear-gradient(135deg,#e9ecef,#dee2e6);border-color:#adb5bd;box-shadow:0 2px 4px #0000001a;color:#212529;transform:translateY(-1px)}.contact-toggle-btn:active{box-shadow:0 1px 2px #0000001a;transform:translateY(0)}.chevron,.contact-icon{flex-shrink:0}.chevron{transition:transform .2s ease}.chevron-up{transform:rotate(180deg)}.chevron-down{transform:rotate(0deg)}.contact-content{background:#f8f9fa;border-radius:6px;margin-top:4px;overflow:hidden;transition:all .3s ease}.contact-visible{border:1px solid #dee2e6;max-height:100px;opacity:1}.contact-hidden{border:1px solid #0000;max-height:0;opacity:0}.contact-info{padding:12px;text-align:center}.contact-info a{color:#4a6baf;font-size:.8rem;font-weight:500;text-decoration:none;transition:color .2s ease;word-break:break-all}.contact-info a:hover{color:#3a5a9f;text-decoration:underline}.buy-coffee-container{display:flex;justify-content:center;margin-top:0;padding:16px 0}.buy-coffee-button{transition:transform .2s ease}.buy-coffee-button:hover{transform:scale(1.03)}.buy-coffee-button:active{transform:scale(.97)}@media screen and (max-width:768px){.buy-coffee-container{display:none}}@media (orientation:portrait) and (max-width:768px){.menu{align-items:center!important;background:#fff!important;border-bottom:1px solid #e0e0e0!important;bottom:auto!important;box-shadow:0 2px 10px #0000001a!important;flex-direction:row!important;height:80px!important;justify-content:space-around!important;left:0!important;padding:8px 12px!important;position:fixed!important;right:0!important;top:0!important;transform:translateX(0)!important;width:100vw!important;z-index:10000!important}.tool-button{align-items:center;background:#f8f9fa!important;border:1px solid #e9ecef!important;border-radius:12px;color:#495057!important;flex-direction:column;height:60px;justify-content:center;margin:0 2px;min-height:60px;min-width:60px;padding:4px;width:60px}.tool-button:hover{background:#e9ecef!important;border-color:#dee2e6!important}.tool-button.active{background:#007bff!important;border-color:#007bff!important;color:#fff!important}.tool-icon{height:24px;margin-bottom:2px;width:24px}.tool-text{color:inherit;font-size:10px;font-weight:500;line-height:1;text-align:center}.submenu{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:0;box-shadow:0 4px 20px #00000026;flex-direction:row;flex-wrap:wrap;gap:8px;height:auto;left:0;padding:12px;position:fixed;right:0;top:80px;width:100vw}.submenu,.submenu-item{align-items:center;justify-content:center}.submenu-item{border-radius:8px;flex-direction:column;margin:2px;min-height:50px;min-width:70px;padding:8px 12px}.submenu-icon{height:20px;margin-bottom:2px;width:20px}.submenu-text{font-size:9px;font-weight:500;line-height:1;text-align:center}.buy-coffee-container,.contact-section,.menu-branding{display:none!important}}.modal-overlay{align-items:center;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#0009;bottom:0;display:flex;justify-content:center;left:0;overflow:auto;position:fixed;right:0;top:0;z-index:2000}.modal-content{animation:slideIn .3s ease;background-color:#fff;border-radius:12px;box-shadow:0 10px 25px #00000026;margin:auto;max-width:420px;overflow:hidden;position:relative;transform-origin:center;width:100%}.modal-header{background:linear-gradient(90deg,#f8f9fa,#fff);border-bottom:1px solid #eaeaea;justify-content:space-between;padding:18px 24px}.modal-header,.modal-header h2{align-items:center;display:flex}.modal-header h2{color:#333;font-size:1.25rem;font-weight:600;gap:10px;margin:0;max-width:320px;overflow:hidden;text-overflow:ellipsis}.modal-close-btn{align-items:center;background:none;border:none;border-radius:50%;color:#999;cursor:pointer;display:flex;font-size:1.5rem;height:28px;justify-content:center;margin-right:-8px;padding:0;transition:all .2s ease;width:28px}.modal-close-btn:hover{background-color:#0000000d;color:#555}.modal-body{padding:24px}.modal-footer{border-top:1px solid #eaeaea;display:flex;gap:12px;justify-content:flex-end;padding:16px 24px 20px}.modal-cancel-btn,.modal-close-btn-full,.modal-save-btn{border:none;border-radius:6px;cursor:pointer;font-size:.95rem;font-weight:500;padding:10px 18px;transition:all .2s ease}.modal-close-btn-full{background-color:#f0f0f0;border:1px solid #ddd;color:#333;text-align:center;width:100%}.modal-close-btn-full:hover{background-color:#e0e0e0}.modal-cancel-btn{background-color:#f8f9fa;border:1px solid #ddd;color:#555}.modal-cancel-btn:hover{background-color:#eaeaea}.modal-save-btn{background-color:#4a6baf;box-shadow:0 2px 4px #4a6baf4d;color:#fff}.modal-save-btn:hover{background-color:#3a5a9f;box-shadow:0 4px 8px #4a6baf66;transform:translateY(-1px)}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:.95rem;margin-bottom:8px}.form-control{border:1px solid #ddd;border-radius:6px;box-sizing:border-box;font-size:.95rem;padding:12px 14px;transition:all .2s ease;width:100%}.form-control:focus{border-color:#4a6baf;box-shadow:0 0 0 3px #4a6baf33}.form-error,.form-error:focus{border-color:#dc3545}.form-error:focus{box-shadow:0 0 0 3px #dc354540}.error-message{animation:shake .5s ease;color:#dc3545;font-size:.85rem;margin-top:6px}@keyframes shake{0%,to{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width:768px){.modal-overlay{align-items:center;justify-content:center;padding:20px 16px;z-index:2000}.modal-content{margin:0;max-height:calc(100vh - 100px);max-width:calc(100vw - 32px);overflow-y:auto;width:100%}.modal-header{background:linear-gradient(90deg,#f8f9fa,#fff);padding:16px 20px}.modal-header h2{font-size:1.1rem;max-width:calc(100% - 60px)}.modal-close-btn{font-size:1.6rem;height:36px;margin-right:-4px;width:36px}.modal-body{max-height:calc(100vh - 200px);overflow-y:auto;padding:20px}.modal-footer{background:#fff;border-top:1px solid #eaeaea;flex-direction:column-reverse;gap:12px;padding:16px 20px 20px}.modal-cancel-btn,.modal-save-btn{font-size:1rem;min-height:48px;padding:14px 20px;width:100%}.form-control{font-size:16px;min-height:48px;padding:14px 16px}.form-control[autofocus],.modal-content[data-prevent-autofocus=true] .form-control[autofocus]{pointer-events:none}.form-control:focus{border-color:#4a6baf;box-shadow:0 0 0 3px #4a6baf1a;outline:none}.form-group label{font-size:1rem;margin-bottom:10px}.file-input{align-items:center;background-color:#fafafa;border:2px dashed #ddd;display:flex;min-height:56px;padding:12px 16px!important}textarea.form-control{min-height:120px;resize:vertical}}@media (max-width:480px){.modal-overlay{padding:10px;z-index:2000}.modal-content{max-height:calc(100vh - 60px);max-width:calc(100vw - 20px)}.modal-header{padding:12px 16px}.modal-header h2{font-size:1rem}.modal-body{max-height:calc(100vh - 160px);padding:16px}.modal-footer{padding:12px 16px 16px}.modal-cancel-btn,.modal-save-btn{min-height:52px;padding:16px 20px}}.drawboard-container{align-items:center;display:flex;height:100%;justify-content:center;overflow:hidden;overscroll-behavior:none;position:relative;width:100%}.drawboard-canvas,.drawboard-container{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}.drawboard-canvas{background-color:#fff;background-image:radial-gradient(circle,#e7e7e7 1px,#0000 0);background-size:10px 10px;box-shadow:0 0 10px #0000001a;cursor:move;height:20000px;position:absolute;touch-action:none;transform-origin:center center;-webkit-user-select:none;user-select:none;width:20000px;will-change:transform,left,top}.guideline{background-color:#0000000f;pointer-events:none;position:absolute}.guideline-horizontal{height:2px;top:50%;transform:translateY(4px);width:100%}.guideline-vertical{height:100%;left:50%;transform:translateX(4px);width:2px}.drag-indicator{background-color:#0009;border-radius:3px;color:#fff;font-size:12px;left:10px;opacity:.8;padding:5px 10px;pointer-events:none;position:absolute;top:10px;z-index:10}.canvas-item{background-color:#fff;border:1px solid #d0d0d0;border-radius:2px;box-shadow:0 2px 4px #0000001a;cursor:move;display:flex;flex-direction:column;position:absolute;touch-action:none;transition:box-shadow .2s ease;-webkit-user-select:none;user-select:none;z-index:2}.box-item{background-color:#fff;border-color:#b8b8b8;z-index:3}.area-item{background-color:#f0fff0;border-color:#b8d8b8;z-index:1}.connections-layer{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:2}.connection-line{stroke:#4a6baf;stroke-width:3px;cursor:pointer;pointer-events:all;transition:stroke-width .2s ease,stroke .2s ease}.connection-line:hover{stroke:#ff4757;stroke-width:4px}.connect-mode-indicator{background-color:#000c;border-left:4px solid #ffc107;border-radius:6px;box-shadow:0 3px 10px #0000004d;color:#fff;font-size:15px;font-weight:500;left:50%;max-width:400px;padding:12px 18px;pointer-events:none;position:absolute;text-align:center;top:60px;transform:translateX(-50%);z-index:20}.canvas-item.connect-mode{cursor:pointer}.canvas-item.source-selected{border-color:#4a6baf;box-shadow:0 0 0 2px #4a6baf,0 2px 4px #0003}.item-thumbnail{border:1px solid #0000001a;border-radius:4px;height:32px;margin-right:8px;object-fit:cover;vertical-align:middle;width:32px}.item-caption{align-items:center;background-color:#ffffffe6;border-radius:4px 4px 0 0;box-shadow:0 1px 3px #0000001a;cursor:pointer;display:flex;font-weight:500;padding:6px 8px;position:relative;-webkit-user-select:none;user-select:none}.item-caption,.item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-title{flex:1 1}.box-item .item-title:hover{color:#4a6baf;text-decoration:underline}.delete-item-btn{align-items:center;background:none;border:none;border-radius:4px;color:#999;cursor:pointer;display:flex;justify-content:center;margin-left:8px;opacity:.7;padding:3px;transition:all .2s ease}.delete-item-btn:hover{background-color:#e74c3c1a;color:#e74c3c;opacity:1}.delete-item-btn:active{transform:scale(.9)}.delete-item-btn svg{display:block}.item-description{color:#555;font-size:13px;line-height:1.4;max-height:130px;overflow-y:auto;padding:10px;text-align:left;white-space:pre-wrap}.box-details{padding:0}.box-details-title{color:#333;font-size:16px;line-height:1.4;margin-bottom:15px}.box-details-content{display:flex;flex-direction:column;gap:10px}.details-content{background-color:#f7f9fc;border-radius:6px;font-size:14px;margin:0;padding:15px}.details-content.description{color:#333;line-height:1.6;max-height:300px;overflow-y:auto;white-space:pre-wrap}.connected-boxes-section{border-top:1px solid #e1e4e8;margin-top:20px;padding-top:15px}.section-title{color:#333;font-size:16px;font-weight:500;margin-bottom:12px}.no-connections{color:#666;font-size:14px;font-style:italic;margin:10px 0;padding:15px;text-align:center}.connected-boxes-list,.no-connections{background-color:#f7f9fc;border-radius:6px}.connected-boxes-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;padding:10px}.connected-box-item{align-items:center;background-color:#fff;border:1px solid #e1e4e8;border-radius:4px;display:flex;justify-content:space-between;padding:8px 12px;transition:background-color .2s,transform .1s}.connected-box-item:hover{background-color:#f0f7ff;border-color:#4a90e2;transform:translateY(-1px)}.connected-box-content{align-items:center;cursor:pointer;display:flex;flex:1 1}.connected-box-thumbnail{border:1px solid #0000001a;border-radius:4px;height:32px;margin-right:12px;object-fit:cover;width:32px}.connected-box-name{color:#333;font-size:14px;font-weight:500}.delete-connection-btn{align-items:center;background:none;border:none;border-radius:3px;color:#666;cursor:pointer;display:flex;justify-content:center;margin-left:8px;padding:4px;transition:all .2s ease}.delete-connection-btn:hover{background-color:#ff4757;color:#fff;transform:scale(1.1)}.delete-connection-btn:active{transform:scale(.95)}.thumbnail-container{margin-bottom:15px}.thumbnail-container img{border:1px solid #e1e4e8;border-radius:6px;box-shadow:0 1px 3px #0000001a;max-height:200px;max-width:100%;object-fit:contain}.box-details-edit{gap:15px}.box-details-edit,.form-group{display:flex;flex-direction:column}.form-group{gap:6px}.form-group label{color:#333;font-size:14px;font-weight:500}.form-control{border:1px solid #ccc;border-radius:4px;font-size:14px;padding:8px 12px;transition:border-color .2s,box-shadow .2s}.form-control:focus{border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e21a;outline:none}textarea.form-control{min-height:100px;resize:vertical}.thumbnail-input-container{display:flex;flex-direction:column;gap:8px}.file-upload-row{align-items:center;display:flex;gap:15px}.file-upload-row .file-input{flex:1 1}.file-input{background-color:#f9f9f9;border:2px dashed #ccc;border-radius:6px;cursor:pointer;padding:12px;transition:all .2s ease}.file-input:hover{background-color:#f0f7ff;border-color:#4a90e2}.file-upload-info{color:#666;font-size:12px;font-style:italic;margin-top:-4px}.current-thumbnail{align-items:center;display:flex;gap:15px;margin-top:12px}.current-thumbnail-label{color:#555;font-size:13px;margin-bottom:0}.thumbnail-preview{align-items:center;background-color:#fff;border:1px solid #e1e4e8;border-radius:4px;box-shadow:0 1px 3px #0000000d;display:inline-flex;justify-content:center;padding:4px}.thumbnail-preview img{border-radius:2px;height:32px;object-fit:cover;width:32px}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:10px}.form-actions button{border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;transition:background-color .2s,transform .1s}.form-actions button:hover{transform:translateY(-1px)}.save-btn{background-color:#4a90e2;border:none;color:#fff}.save-btn:hover{background-color:#3a80d2}.save-btn:disabled{background-color:#a0c1e6;cursor:not-allowed;transform:none!important}.cancel-btn{background-color:#f0f0f0;border:1px solid #ddd;color:#333}.cancel-btn:hover{background-color:#e4e4e4}.storage-notification{animation:fadeInOut 3s ease-in-out forwards;background-color:#4a6bafe6;border-radius:4px;box-shadow:0 2px 10px #0003;color:#fff;font-size:14px;max-width:300px;padding:10px 15px;position:fixed;right:20px;text-align:center;top:20px;z-index:1000}.connect-notification{background-color:#263e7af2;border-left:4px solid #ffc107;box-shadow:0 3px 12px #0000004d;font-size:15px;font-weight:500;max-width:380px;padding:12px 20px;top:25px}@keyframes fadeInOutLong{0%{opacity:0;transform:translateY(-20px)}5%{opacity:1;transform:translateY(0)}95%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-20px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.modal-title-with-thumbnail{align-items:center;display:flex;gap:10px}.modal-thumbnail{border:1px solid #0000001a;border-radius:4px;max-height:50px;max-width:50px;object-fit:contain}.resize-handle{background-color:#4a90e2;border:1px solid #fff;height:8px;position:absolute;width:8px;z-index:10}.resize-handle.nw{cursor:nw-resize;left:-4px;top:-4px}.resize-handle.ne{cursor:ne-resize;right:-4px;top:-4px}.resize-handle.sw{bottom:-4px;cursor:sw-resize;left:-4px}.resize-handle.se{bottom:-4px;cursor:se-resize;right:-4px}.resize-handle.n{cursor:n-resize;left:50%;top:-4px;transform:translateX(-50%)}.resize-handle.e{cursor:e-resize;right:-4px;top:50%;transform:translateY(-50%)}.resize-handle.s{bottom:-4px;cursor:s-resize;left:50%;transform:translateX(-50%)}.resize-handle.w{cursor:w-resize;left:-4px;top:50%;transform:translateY(-50%)}.area-item .resize-handle{display:none;z-index:4}.area-item:hover .resize-handle{display:block}.area-item:hover{z-index:1}@media (max-width:768px){.delete-item-btn{border-radius:6px;margin-left:4px;min-height:44px;min-width:44px;padding:8px}.item-caption{align-items:center;display:flex;min-height:56px;padding:12px}.item-title{font-size:16px;line-height:1.3}.item-description{font-size:14px;line-height:1.4;min-height:60px;padding:12px}.item-thumbnail{height:36px;margin-right:10px;width:36px}.connect-mode-indicator{border-radius:8px;font-size:16px;left:50%;max-width:calc(100vw - 40px);padding:16px 20px;top:40px}.canvas-item{min-height:100px;min-width:150px}.resize-handle{display:none!important}.drag-indicator{border-radius:8px;font-size:14px;left:20px;padding:12px 16px;top:20px}.storage-notification{border-radius:8px;font-size:15px;left:16px;max-width:none;padding:14px 18px;right:16px;text-align:center;top:60px}.connect-notification{font-size:16px;max-width:none;padding:16px 20px;top:70px}.drawboard-canvas{-webkit-user-select:none;user-select:none}.canvas-item,.drawboard-canvas{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}}@media (max-width:480px){.delete-item-btn{min-height:48px;min-width:48px;padding:10px}.item-caption{min-height:60px;padding:14px}.item-title{font-size:15px}.item-description{font-size:13px;padding:14px}.connect-mode-indicator{font-size:15px;max-width:calc(100vw - 20px);padding:14px 18px;top:20px}.canvas-item{min-height:90px;min-width:140px}.drag-indicator{font-size:13px;left:15px;padding:10px 14px;top:15px}}@media (orientation:portrait){.canvas-item{transform:scale(1)}.item-title{font-size:14px}.item-description{font-size:12px}.delete-item-btn{min-height:40px;min-width:40px;padding:6px}.item-caption{min-height:50px;padding:10px}.connect-mode-indicator{font-size:14px;padding:12px 16px;top:120px}.storage-notification{top:100px!important}.connect-notification{top:110px!important}}@media (orientation:landscape){.canvas-item{transform:scale(1)}}@media (max-width:768px) and (orientation:portrait){.item-title{font-size:14px!important;line-height:1.2}.item-description{font-size:12px!important;line-height:1.3;min-height:50px;padding:10px}.delete-item-btn{border-radius:4px;min-height:40px!important;min-width:40px!important;padding:6px!important}.item-caption{min-height:50px!important;padding:10px!important}.item-thumbnail{height:30px;margin-right:8px;width:30px}.connect-mode-indicator{font-size:14px!important;padding:12px 16px!important;top:120px!important}.canvas-item{min-height:80px;min-width:130px}.storage-notification{left:16px;max-width:none;right:16px;top:100px!important}.connect-notification{font-size:16px;max-width:none;padding:16px 20px;top:110px!important}}@media (max-width:768px) and (orientation:landscape){.canvas-item{min-height:100px;min-width:150px}}
/*# sourceMappingURL=main.7768c168.css.map*/