*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5;color:#e0e0e0;background:#1e1e1e}#root{width:100%;height:100%;display:flex;flex-direction:column}button{font-family:inherit;font-size:.9rem;cursor:pointer;border-radius:4px}input[type=file]{cursor:pointer}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#464647;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#5a5a5b}::selection{background:#4a5a8a;color:#fff}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: no-preference){*{transition:background-color .15s ease,color .15s ease,border-color .15s ease}}.image-canvas{display:flex;flex-direction:column;height:100%;width:100%;padding:2rem;gap:0}.canvas-container{background-color:#1a1a1a;background-image:linear-gradient(45deg,#2d2d2d 25%,transparent 25%),linear-gradient(-45deg,#2d2d2d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2d2d2d 75%),linear-gradient(-45deg,transparent 75%,#2d2d2d 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;border-radius:4px;padding:1rem;display:flex;align-items:center;justify-content:center;flex:1;overflow:auto;box-shadow:inset 0 0 8px #00000080}.canvas{max-width:100%;max-height:100%;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:2px;box-shadow:0 4px 16px #00000080}.controls{background:#2d2d2d;border-radius:4px;padding:1rem;margin-top:1rem;box-shadow:0 2px 8px #0000004d}.controls h3{margin:0 0 .75rem;color:#e0e0e0;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.controls .button-group{display:flex;gap:.5rem;flex-wrap:wrap}.btn-png,.btn-jpg,.btn-gb7{background:#3a3a3a;color:#e0e0e0;border:1px solid #464647;font-weight:500;transition:all .2s ease;flex:1;min-width:100px;padding:.6rem .8rem;font-size:.85rem}.btn-png:hover:not(:disabled){background:#4a5a8a;border-color:#5a7aaa;box-shadow:0 2px 8px #5a7aaa4d}.btn-jpg:hover:not(:disabled){background:#5a4a6a;border-color:#7a6a8a;box-shadow:0 2px 8px #7a6a8a4d}.btn-gb7:hover:not(:disabled){background:#3a5a4a;border-color:#4a8a6a;box-shadow:0 2px 8px #4a8a6a4d}.downloading{color:#7dd3fc;font-weight:500;margin-top:.5rem;text-align:center;font-size:.85rem;animation:pulse 1.5s ease-in-out infinite}@media (max-width: 768px){.image-canvas{padding:1rem}.canvas-container{padding:.5rem}.controls{margin-top:.75rem;padding:.75rem}.controls .button-group{gap:.4rem}.btn-png,.btn-jpg,.btn-gb7{min-width:80px;padding:.5rem .6rem;font-size:.8rem}}.image-upload{display:flex;flex-direction:column;height:100%;padding:1.5rem 1rem}.upload-area{background:#333333;border:2px dashed #3a3a3a;border-radius:6px;padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:all .3s ease;flex-shrink:0}.upload-area:hover{border-color:#464647;background:#3a3a3a}.upload-icon{font-size:2.5rem;margin-bottom:.75rem}.upload-area h2{margin:0 0 .25rem;color:#e0e0e0;font-size:1rem;font-weight:600}.upload-area p{margin:.25rem 0;color:#999;font-size:.85rem}.upload-area p.highlight{color:#777;font-style:italic;font-size:.8rem;margin-top:.5rem}.upload-area p.loading{color:#7dd3fc;font-weight:700;margin-top:.75rem;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.error{background:rgba(239,68,68,.1);color:#fca5a5;padding:.75rem;border-radius:4px;border-left:3px solid #f87171;font-size:.8rem;margin-top:.75rem;flex-shrink:0}.button-group{display:flex;gap:.75rem;justify-content:center;margin-top:1rem;flex-wrap:wrap;flex-shrink:0}.btn{padding:.6rem 1rem;border:1px solid #464647;border-radius:4px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;background:#3a3a3a;color:#e0e0e0}.btn:hover:not(:disabled){background:#464647;border-color:#555}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-reset{background:#3a3a3a;color:#e0e0e0;border:1px solid #464647}.btn-reset:hover:not(:disabled){background:#464647;border-color:#555}@media (max-width: 768px){.image-upload,.upload-area{padding:1rem}.button-group{flex-direction:column}.btn{width:100%}}.status-bar{display:flex;flex-direction:column;gap:0}.status-bar.compact{flex-direction:row;gap:2rem;align-items:center}.status-content{display:flex;flex-direction:column;gap:1rem}.status-bar.compact .status-content{flex-direction:row;gap:2rem;flex-wrap:wrap}.status-item{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}.status-bar.compact .status-item{flex-direction:row;gap:.5rem;align-items:center}.status-item strong{font-weight:600;color:#e0e0e0}.status-bar.compact .status-item strong{font-weight:600}.status-label{color:#999;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}.status-value{color:#e0e0e0;font-weight:500;font-size:.95rem;font-family:Monaco,Menlo,monospace}.status-bar.compact{background:transparent;padding:0;border:none;color:#999;font-size:.8rem}@media (max-width: 768px){.status-item{font-size:.85rem}.status-value{font-size:.9rem}.status-bar.compact .status-item{flex-direction:column}}.app{display:flex;flex-direction:column;height:100vh;background:#1e1e1e}.app-header{background:#2d2d2d;color:#fff;padding:1rem 1.5rem;border-bottom:1px solid #3a3a3a;box-shadow:0 2px 4px #0000004d}.app-header h1{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:.5px}.app-container{display:flex;flex:1;gap:0;overflow:hidden}.left-panel{width:280px;background:#252526;border-right:1px solid #3a3a3a;overflow-y:auto;padding:0;box-shadow:inset -2px 0 4px #0000004d}.main-content{flex:1;display:flex;align-items:center;justify-content:center;background:#1e1e1e;overflow:auto;position:relative}.canvas-placeholder{display:flex;align-items:center;justify-content:center;color:#666;font-size:1.2rem;text-align:center;height:100%;width:100%}.canvas-placeholder p{margin:0}.right-panel{width:320px;background:#252526;border-left:1px solid #3a3a3a;overflow-y:auto;padding:1.5rem;box-shadow:inset 2px 0 4px #0000004d}.right-panel h3{margin:0 0 1.5rem;color:#fff;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #3a3a3a;padding-bottom:.75rem}.panel-content{color:#fff}.app-footer{background:#2d2d2d;border-top:1px solid #3a3a3a;padding:.75rem 1.5rem;font-size:.85rem;box-shadow:0 -2px 4px #0000004d}.left-panel::-webkit-scrollbar,.right-panel::-webkit-scrollbar{width:8px}.left-panel::-webkit-scrollbar-track,.right-panel::-webkit-scrollbar-track{background:#1a1a1a}.left-panel::-webkit-scrollbar-thumb,.right-panel::-webkit-scrollbar-thumb{background:#464647;border-radius:4px}.left-panel::-webkit-scrollbar-thumb:hover,.right-panel::-webkit-scrollbar-thumb:hover{background:#5a5a5b}@media (max-width: 1200px){.left-panel{width:240px}.right-panel{width:280px;padding:1rem}}@media (max-width: 768px){.app-container{flex-direction:column}.left-panel,.right-panel{width:100%;border:none;max-height:200px;border-bottom:1px solid #3a3a3a}.left-panel{border-right:none;box-shadow:inset 0 -2px 4px #0000004d}.right-panel{border-left:none;box-shadow:inset 0 2px 4px #0000004d}}