.utility-tool-page{max-width:70rem;margin:0 auto;padding:var(--space-8) var(--space-4) var(--space-12);display:grid;gap:var(--space-8)}.utility-tool-page__workspace{display:grid;gap:var(--space-4)}.utility-tool-page__workspace h2,.tool-body-copy h2,.tool-body-copy p{margin:0}.tool-body-copy{display:grid;gap:var(--space-3)}.tool-body-copy p{color:var(--color-text-secondary)}.utility-tool{border:1px solid var(--color-border);border-radius:var(--radius-panel);background:var(--color-surface);padding:var(--space-4);display:grid;gap:var(--space-4)}.utility-tool input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.dropzone{border:2px dashed var(--color-border-strong);border-radius:var(--radius-card);background:var(--color-surface-raised);padding:var(--space-6);text-align:center;display:grid;gap:var(--space-2);justify-items:center;transition:background-color var(--motion-duration-fast) var(--motion-ease-standard),border-color var(--motion-duration-fast) var(--motion-ease-standard)}.dropzone--dragging{border-color:var(--color-primary);background:var(--color-primary-subtle)}.dropzone p{margin:0;color:var(--color-text-secondary)}.dropzone__browse{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--color-primary-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-primary-hover);padding:var(--space-2) var(--space-4);font:inherit;font-size:var(--font-size-label);font-weight:600;cursor:pointer}.utility-tool__status,.utility-tool__error-wrap{min-height:1.5rem}.utility-tool__status p{margin:0;color:var(--color-text-secondary);font-size:var(--font-size-label);font-weight:500}.utility-tool__error{margin:0;color:var(--color-error);font-size:var(--font-size-label);font-weight:600}.utility-tool__preview{margin:0;border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface-raised);padding:var(--space-2);overflow:hidden}.utility-tool__preview img,.utility-tool__preview canvas{display:block;width:100%;height:auto;max-height:min(70vh,28rem);object-fit:contain;border-radius:var(--radius-input);background:#fff}.utility-tool__textarea,.utility-tool__input{width:100%;border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-surface);color:var(--color-text-primary);padding:var(--space-3);font:inherit;font-size:var(--font-size-body)}.utility-tool__textarea{min-height:8rem;resize:vertical;font-family:var(--font-family-mono, "SFMono-Regular", "SF Mono", Menlo, monospace);font-size:.9rem;line-height:1.4}.utility-tool__button-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}.utility-tool__button{min-height:44px;border:1px solid var(--color-primary-border);border-radius:var(--radius-card);background:var(--color-primary);color:#fff;padding:var(--space-2) var(--space-4);font:inherit;font-size:var(--font-size-label);font-weight:600;cursor:pointer}.utility-tool__button--secondary{background:var(--color-surface);color:var(--color-primary-hover)}.utility-tool__button:disabled{opacity:.55;cursor:not-allowed}.utility-tool__stats{margin:0;display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}.utility-tool__stats div{border:1px solid var(--color-border);border-radius:var(--radius-input);padding:var(--space-2);background:var(--color-surface-raised)}.utility-tool__stats dt{font-size:var(--font-size-micro);color:var(--color-text-secondary);margin:0}.utility-tool__stats dd{margin:var(--space-1) 0 0;font-size:var(--font-size-label);color:var(--color-text-primary);font-weight:700}.utility-tool__table-wrap{overflow-x:auto}.utility-tool__table{width:100%;border-collapse:collapse}.utility-tool__table th,.utility-tool__table td{text-align:left;border-top:1px solid var(--color-border);padding:var(--space-2);vertical-align:top}.utility-tool__table th{width:12rem;color:var(--color-text-secondary);font-size:var(--font-size-caption);font-weight:600}.utility-tool__table td{color:var(--color-text-primary);font-size:var(--font-size-body);overflow-wrap:anywhere}.utility-tool__note{margin:0;color:var(--color-text-secondary)}.utility-tool__color-readout{display:grid;gap:var(--space-2)}.utility-tool__color-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.utility-tool__swatch{width:3rem;height:3rem;border-radius:var(--radius-input);border:1px solid var(--color-border)}.utility-tool__palette{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}.utility-tool__palette-item{display:grid;gap:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-2);background:var(--color-surface-raised)}.utility-tool__palette-color{width:100%;height:3rem;border-radius:var(--radius-input);border:1px solid var(--color-border)}.utility-tool__calc-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}@media(prefers-reduced-motion:reduce){.dropzone{transition:none}}