*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;border-width:0;border-style:solid;border-color:rgb(var(--color-border))}:root,html[data-theme=light]{--color-fill: 251, 254, 251;--color-text-base: 40, 39, 40;--color-accent: 0, 108, 172;--color-card: 230, 230, 230;--color-card-muted: 205, 205, 205;--color-border: 236, 233, 233;--radius: 6px}html{line-height:1.5;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{display:flex;min-height:100svh;flex-direction:column;background-color:rgb(var(--color-fill));color:rgb(var(--color-text-base));font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:inherit}::selection{background-color:rgba(var(--color-accent),.7);color:rgb(var(--color-fill))}::-webkit-scrollbar{width:.75rem}::-webkit-scrollbar-thumb{background-color:rgb(var(--color-card))}::-webkit-scrollbar-track{background-color:rgb(var(--color-fill))}#app{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:20px}header{text-align:center;margin-bottom:24px}.title-row{display:inline-flex;align-items:center;gap:10px}.title-row img{flex-shrink:0;display:block}header h1{font-size:1.8rem;font-weight:700;letter-spacing:-.02em}.subtitle{color:rgba(var(--color-text-base),.65);font-size:.9rem;margin-top:6px}.hidden{display:none!important}button{background:rgb(var(--color-card));color:rgb(var(--color-text-base));border:1px solid rgb(var(--color-border));padding:8px 14px;border-radius:var(--radius);cursor:pointer;font-family:inherit;font-size:.85rem;transition:background .15s,border-color .15s,color .15s}button:hover{background:rgb(var(--color-card-muted));border-color:rgb(var(--color-card-muted))}button.primary{background:rgb(var(--color-accent));border-color:rgb(var(--color-accent));color:rgb(var(--color-fill));width:100%;padding:10px;font-size:.95rem;font-weight:600}button.primary:hover{background:rgba(var(--color-accent),.85);border-color:rgba(var(--color-accent),.85)}button.danger{border-color:rgb(var(--color-border));color:rgb(var(--color-text-base))}button.danger:hover{background:rgb(var(--color-text-base));color:rgb(var(--color-fill));border-color:rgb(var(--color-text-base))}#drop-zone{border:2px dashed rgb(var(--color-card-muted));border-radius:12px;padding:60px 20px;text-align:center;transition:border-color .2s,background .2s;cursor:pointer;background:rgba(var(--color-card),.4)}#drop-zone.dragover{border-color:rgb(var(--color-accent));background:rgba(var(--color-accent),.05)}#drop-zone input{display:none}#drop-zone .link{color:rgb(var(--color-accent));cursor:pointer;text-decoration:underline}#recent-images{margin-top:20px}#recent-images h4{color:rgba(var(--color-text-base),.6);font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}.recent-grid{display:flex;gap:10px;flex-wrap:wrap}.recent-thumb{width:80px;height:80px;border-radius:var(--radius);border:2px solid rgb(var(--color-border));object-fit:cover;cursor:pointer;transition:border-color .15s;background:rgb(var(--color-card))}.recent-thumb:hover{border-color:rgb(var(--color-accent))}#editor-toolbar{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgb(var(--color-border));margin-bottom:12px}#image-info{color:rgba(var(--color-text-base),.6);font-size:.85rem;flex:1}.toolbar-right{display:flex;gap:6px;align-items:center}.ratio-group{display:flex;align-items:center;gap:4px;margin-right:6px}.ratio-group select{background:rgb(var(--color-card));color:rgb(var(--color-text-base));border:1px solid rgb(var(--color-border));border-radius:var(--radius);padding:6px 10px;font-family:inherit;font-size:.82rem;cursor:pointer;outline:none}.ratio-group select:hover,.ratio-group select:focus{border-color:rgb(var(--color-accent))}.flip-btn{padding:6px 8px;font-size:.9rem;line-height:1}#editor-layout{display:grid;grid-template-columns:1fr 340px;gap:16px;height:calc(100vh - 180px)}#canvas-container{position:relative;background:rgb(var(--color-card));border:1px solid rgb(var(--color-border));border-radius:var(--radius);overflow:hidden;cursor:crosshair}#main-canvas{display:block;width:100%;height:100%}#sidebar{display:flex;flex-direction:column;gap:16px;overflow-y:auto}#preview-section{background:rgb(var(--color-card));border:1px solid rgb(var(--color-border));border-radius:var(--radius);padding:14px}#preview-section h3{font-size:.9rem;margin-bottom:10px;font-weight:600}#preview-container{background:rgb(var(--color-text-base));border-radius:var(--radius);overflow:hidden;position:relative;height:200px;cursor:grab}#preview-container:active{cursor:grabbing}#preview-canvas{display:block}#preview-info{color:rgba(var(--color-text-base),.6);font-size:.8rem;margin:8px 0;text-align:center}#preview-controls{display:flex;gap:6px;justify-content:center;margin-bottom:10px}#subimages-section{background:rgb(var(--color-card));border:1px solid rgb(var(--color-border));border-radius:var(--radius);padding:14px;flex:1;overflow-y:auto}#subimages-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}#subimages-header h3{font-size:.9rem;font-weight:600}#subimage-count{color:rgba(var(--color-text-base),.6)}.subimage-item{display:flex;align-items:center;gap:10px;padding:8px;background:rgb(var(--color-fill));border:2px solid rgb(var(--color-border));border-radius:var(--radius);margin-bottom:8px;cursor:pointer;transition:border-color .15s}.subimage-item:hover{border-color:rgb(var(--color-card-muted))}.subimage-item.editing{border-color:rgb(var(--color-accent))}.subimage-item img{width:60px;height:60px;object-fit:contain;border-radius:4px;background:rgb(var(--color-text-base))}.subimage-meta{flex:1;font-size:.8rem;color:rgba(var(--color-text-base),.6)}.subimage-meta .name{color:rgb(var(--color-text-base));font-weight:600;font-size:.85rem}.subimage-actions{display:flex;gap:4px;flex-shrink:0}.subimage-actions button{padding:5px 8px;font-size:.75rem}@media(max-width:900px){#editor-layout{grid-template-columns:1fr;height:auto}#canvas-container{height:50vh}}#lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:rgba(var(--color-text-base),.9);display:flex;align-items:center;justify-content:center}#lightbox.hidden{display:none!important}#lightbox img{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:var(--radius)}#lightbox-close{position:absolute;top:16px;right:16px;font-size:1.2rem;padding:8px 14px;z-index:1001}