body{font-family:Inter,sans-serif;background-color:#f7f7f7;min-height:100vh;margin:0;padding:0;overflow:hidden}#root{height:100vh}#main-app-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}#canvas-container{position:relative;box-shadow:0 10px 20px #00000026;background-color:#fff;overflow:hidden;touch-action:none;transition:width .3s ease,height .3s ease;flex-shrink:0}#canvas-container .canvas-container,#canvas-container canvas{width:100%!important;height:100%!important}.action-button{cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.action-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 6px #00000026}.preset-color{width:28px;height:28px;border-radius:50%;cursor:pointer;transition:transform .1s,box-shadow .1s;border:3px solid transparent}.preset-color:hover{transform:scale(1.1)}.preset-color.selected{border-color:#4f46e5;box-shadow:0 0 0 2px #fff}.loader{border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:30px;height:30px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.brush-tool{position:relative}.brush-tool:before{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:4px 8px;background-color:#333;color:#fff;border-radius:4px;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;margin-bottom:4px;z-index:10}.brush-tool:hover:before{opacity:1}.library-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#11182799;z-index:50;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:1rem}.library-modal{background-color:#fff;border-radius:1rem;width:100%;max-width:800px;height:90vh;max-height:700px;box-shadow:0 25px 50px -12px #00000040;display:flex;flex-direction:column;overflow:hidden}.library-header{padding:1rem 1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.library-close-btn{font-size:2rem;font-weight:300;color:#6b7280;background:none;border:none;cursor:pointer;line-height:1}.library-content{flex-grow:1;overflow-y:auto;padding:1.5rem}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1.5rem}.folder-card,.image-card{cursor:pointer;border-radius:.5rem;transition:transform .2s ease,box-shadow .2s ease;overflow:hidden}.folder-card{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#f9fafb;padding:.75rem;border:1px solid #e5e7eb;aspect-ratio:1 / 1;text-align:center;gap:.5rem}.folder-card-name{font-size:.875rem;font-weight:500;color:#4b5563;word-break:break-word}.folder-card:hover{transform:translateY(-4px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.image-card{aspect-ratio:1 / 1;background-color:#e5e7eb;border:1px solid #d1d5db}.image-card img{width:100%;height:100%;object-fit:cover}.image-card:hover{transform:scale(1.05);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.back-button{background-color:#f3f4f6;color:#4b5563;font-weight:500;padding:.5rem 1rem;border-radius:9999px;border:none;cursor:pointer;margin-bottom:1.5rem;transition:background-color .2s}.back-button:hover{background-color:#e5e7eb}.library-footer{padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid #e5e7eb;display:flex;justify-content:center;flex-shrink:0}.library-modal.about-modal{max-width:700px;max-height:800px}.about-content{color:#374151;line-height:1.6}.about-content h3{border-bottom:2px solid #e0e7ff;padding-bottom:.25rem}.about-content ul{padding-left:1rem}.about-content li::marker{color:#6366f1}#left-sidebar::-webkit-scrollbar{width:4px}#left-sidebar::-webkit-scrollbar-track{background:transparent}#left-sidebar::-webkit-scrollbar-thumb{background-color:#cbd5e1;border-radius:4px}#left-sidebar::-webkit-scrollbar-thumb:hover{background-color:#94a3b8}