.tool-main{flex-direction:column;flex:1;width:100%;max-width:100%;padding:0;display:flex;overflow:hidden}.tool-header{border-bottom:1px solid var(--color-border);background-color:var(--color-surface-raised);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:1.5rem 2rem;display:flex}.tool-header__title{flex-direction:column;gap:.25rem;display:flex}.tool-title{color:var(--color-text-title);margin:0;font-size:1.3rem;font-weight:700}.tool-subtitle{color:var(--color-text-muted);margin:0;font-size:.85rem}.ctrl-label{color:var(--color-text-secondary);-webkit-user-select:none;user-select:none;align-items:center;gap:.45rem;font-size:.82rem;display:flex}.ctrl-number{background-color:var(--color-surface-raised);border:1px solid var(--color-border);width:4.5rem;color:var(--color-text-primary);text-align:center;-moz-appearance:textfield;border-radius:5px;outline:none;padding:.25rem .4rem;font-size:.82rem}.ctrl-number::-webkit-inner-spin-button{opacity:.4}.ctrl-number::-webkit-outer-spin-button{opacity:.4}.ctrl-number:focus{border-color:var(--color-accent)}.ctrl-range{width:90px;accent-color:var(--color-accent);cursor:pointer}.view-toggle{border:1px solid var(--color-border);border-radius:6px;display:flex;overflow:hidden}.view-toggle__btn{border:none;border-right:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;background:0 0;padding:.35rem .85rem;font-size:.82rem;font-weight:500;transition:background-color .15s,color .15s}.view-toggle__btn:last-child{border-right:none}.view-toggle__btn:hover{background-color:var(--color-surface-deep);color:var(--color-text-primary)}.view-toggle__btn.is-active{background-color:var(--color-accent-bg);color:var(--color-accent)}.drop-row{border-bottom:1px solid var(--color-border);flex-shrink:0;grid-template-columns:1fr 1fr;display:grid}.drop-zone{background-color:var(--color-surface-deep);cursor:pointer;outline:none;justify-content:center;align-items:center;min-height:180px;transition:background-color .15s,border-color .15s;display:flex;position:relative}.drop-zone:first-child{border-right:1px solid var(--color-border)}.drop-zone:focus-visible{box-shadow:inset 0 0 0 2px var(--color-accent)}.drop-zone.is-dragover{background-color:var(--color-accent-bg);box-shadow:inset 0 0 0 2px var(--color-accent)}.drop-zone.is-error{box-shadow:inset 0 0 0 2px var(--color-danger)}.drop-zone__error-msg{color:var(--color-danger);text-align:center;max-width:90%;font-size:.78rem;line-height:1.4}.drop-zone__inner{pointer-events:none;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;width:100%;height:100%;padding:1.5rem;display:flex}.drop-zone__inner:has(.drop-zone__preview){pointer-events:auto;gap:.35rem}.drop-zone__icon{opacity:.35;font-size:2.2rem;line-height:1}.drop-zone__title{color:var(--color-text-faint);letter-spacing:.02em;font-size:.95rem;font-weight:600}.drop-zone__hint{color:var(--color-text-ghost);font-size:.78rem}.drop-zone__file-input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.drop-zone__preview{object-fit:contain;border:1px solid var(--color-border);border-radius:4px;max-width:100%;max-height:140px;display:block}.drop-zone__filename{color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;max-width:28ch;font-size:.78rem;overflow:hidden}.drop-zone__dims{color:var(--color-text-faint);font-variant-numeric:tabular-nums;font-size:.73rem}.drop-zone__clear-btn{border:1px solid var(--color-border);color:var(--color-text-muted);cursor:pointer;pointer-events:auto;z-index:1;background:0 0;border-radius:5px;margin-top:.2rem;padding:.2rem .55rem;font-size:.73rem;transition:color .15s,border-color .15s;position:relative}.drop-zone__clear-btn:hover{color:var(--color-danger);border-color:var(--color-danger)}.diff-stats{background-color:var(--color-surface-raised);border-bottom:1px solid var(--color-border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:1.25rem;padding:.55rem 1.25rem;font-size:.8rem;display:flex}.diff-stats__item{font-variant-numeric:tabular-nums;font-weight:600}.diff-stats__item--del{color:var(--color-danger)}.diff-stats__item--unchanged{color:var(--color-text-muted);font-weight:400}.diff-stats__item--info{color:var(--color-text-secondary);font-weight:400}.diff-stats__item--warn{color:var(--color-warning)}.diff-stats__item--ok{color:var(--color-success)}.diff-stats__identical{color:var(--color-success);font-weight:600}.diff-stats__computing{color:var(--color-text-muted);font-size:.8rem;font-style:italic}.diff-stats__error{color:var(--color-danger);font-weight:600}.canvas-toolbar{background-color:var(--color-surface-raised);border-bottom:1px solid var(--color-border);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 1.25rem;display:flex}.zoom-controls{align-items:center;gap:.4rem;display:flex}.zoom-btn{background-color:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.9rem;transition:color .15s,border-color .15s;display:flex}.zoom-btn:hover{color:var(--color-text-primary);border-color:var(--color-border)}.zoom-btn--reset{width:auto;padding:0 .6rem;font-size:.75rem}.zoom-level{color:var(--color-text-muted);font-variant-numeric:tabular-nums;text-align:center;min-width:3.5ch;font-size:.8rem}.save-btn{border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;background:0 0;border-radius:6px;padding:.4rem .9rem;font-size:.82rem;font-weight:600;transition:opacity .15s}.save-btn:hover{border-color:var(--color-accent);color:var(--color-text-primary)}.canvas-toolbar__right{align-items:center;gap:.5rem;display:flex}.format-toggle{border:1px solid var(--color-border);border-radius:6px;display:flex;overflow:hidden}.format-toggle__btn{border:none;border-right:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;background:0 0;padding:.35rem .75rem;font-size:.82rem;font-weight:500;transition:background-color .15s,color .15s}.format-toggle__btn:last-child{border-right:none}.format-toggle__btn:hover{background-color:var(--color-surface-deep);color:var(--color-text-primary)}.format-toggle__btn.is-active{background-color:var(--color-accent-bg);color:var(--color-accent)}.format-toggle__btn:disabled{opacity:.4;cursor:not-allowed}.swap-btn{border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border-radius:6px;align-items:center;gap:.35rem;padding:.4rem .9rem;font-size:.82rem;font-weight:600;transition:opacity .15s;display:inline-flex}.swap-btn:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-text-primary)}.swap-btn:disabled{opacity:.4;cursor:not-allowed}.canvas-outer{background-color:var(--color-checker-a);background-image:linear-gradient(45deg, var(--color-checker-b) 25%, transparent 25%), linear-gradient(-45deg, var(--color-checker-b) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--color-checker-b) 75%), linear-gradient(-45deg, transparent 75%, var(--color-checker-b) 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;flex:1;min-height:200px;overflow:auto}.canvas-scroll{box-sizing:border-box;min-width:100%;min-height:100%;padding:1.5rem;display:inline-block}.canvas-stage{transform-origin:0 0;line-height:0;display:inline-block;position:relative}#diff-canvas{image-rendering:pixelated;image-rendering:crisp-edges;box-shadow:var(--shadow-canvas);display:block}@media (width<=700px){.tool-header{flex-direction:column;gap:.75rem;padding:1rem}.drop-row{grid-template-columns:1fr}.drop-zone:first-child{border-right:none;border-bottom:1px solid var(--color-border)}.canvas-toolbar{flex-direction:column;align-items:flex-start;gap:.5rem}}