.tool-page{padding:var(--spacing-lg) 0 var(--spacing-xxl)}.breadcrumb{font-size:var(--font-size-caption);color:var(--color-text-tertiary);margin-bottom:var(--spacing-md)}.tool-header{margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border-light)}.tool-info{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.tool-info-icon{width:48px;height:48px;background:var(--color-primary-light);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0}.tool-info-name{font-size:var(--font-size-h1);font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:var(--line-height-tight);margin-bottom:2px}.tool-info-desc{font-size:var(--font-size-small);color:var(--color-text-secondary)}.tool-body{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--spacing-lg);align-items:start}.input-panel,.output-panel{background:var(--color-bg-primary);border:1px solid var(--color-border-light);border-radius:var(--radius-lg)}.panel-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-md) 0}.panel-title{font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);display:flex;align-items:center;gap:var(--spacing-sm)}.badge{font-size:var(--font-size-caption);color:var(--color-text-tertiary);background:var(--color-bg-secondary);padding:2px 8px;border-radius:var(--radius-full);font-weight:var(--font-weight-normal)}.status-message{display:none;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-small)}.status-success{color:var(--color-success);display:block}.status-error{color:var(--color-error);display:block}.btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:8px 16px;font-size:var(--font-size-small);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-fast);font-family:inherit;line-height:1;white-space:nowrap;text-decoration:none}.btn-sm{padding:5px 12px;font-size:var(--font-size-caption)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover)}.btn-outline{background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}input[type=file]{display:none}.svg-input-area{display:flex;flex-direction:column;gap:var(--spacing-sm)}.svg-textarea{width:100%;min-height:220px;padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-family-mono);font-size:var(--font-size-caption);line-height:var(--line-height-normal);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-secondary);color:var(--color-text-primary);resize:vertical;outline:none;transition:border-color var(--transition-fast)}.svg-textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-light)}.svg-textarea.has-error{border-color:var(--color-error);box-shadow:0 0 0 2px #ff4d4f1a}.svg-dropzone{position:relative}.svg-dropzone.dragover .svg-textarea{border-color:var(--color-primary);background:var(--color-primary-light)}.input-actions{display:flex;gap:var(--spacing-xs);flex-wrap:wrap}.url-input-row{display:flex;gap:var(--spacing-xs);align-items:center}.url-input-row input{flex:1;padding:6px 10px;font-size:var(--font-size-caption);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;font-family:inherit}.url-input-row input:focus{border-color:var(--color-primary)}.settings-section{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--color-border-light)}.settings-section-title{font-size:var(--font-size-small);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}.setting-row{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.setting-row label{font-size:var(--font-size-caption);color:var(--color-text-secondary);min-width:48px;flex-shrink:0}.setting-row input[type=number]{width:72px;padding:4px 8px;font-size:var(--font-size-caption);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;font-family:inherit;text-align:center}.setting-row input[type=number]:focus{border-color:var(--color-primary)}.setting-row input[type=range]{flex:1;max-width:180px;accent-color:var(--color-primary)}.setting-row select{padding:4px 8px;font-size:var(--font-size-caption);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;background:var(--color-bg-primary);font-family:inherit;cursor:pointer}.setting-row select:focus{border-color:var(--color-primary)}.setting-hint{font-size:var(--font-size-caption);color:var(--color-text-tertiary);min-width:36px}.download-btn-wrap{margin-top:var(--spacing-lg)}.preview-container{display:flex;flex-direction:column;gap:var(--spacing-sm);min-height:400px}.preview-wrapper{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:var(--spacing-md);min-height:360px;border:1px solid var(--color-border-light);border-radius:var(--radius-lg);overflow:auto;position:relative}.preview-wrapper.has-bg{background-image:linear-gradient(45deg,#e8e8e8 25%,transparent 25%),linear-gradient(-45deg,#e8e8e8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8e8e8 75%),linear-gradient(-45deg,transparent 75%,#e8e8e8 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.preview-wrapper img{display:block}.preview-info{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-caption);color:var(--color-text-tertiary);padding:var(--spacing-xs) 0}.preview-placeholder{color:var(--color-text-tertiary);font-size:var(--font-size-small);text-align:center}.preview-placeholder svg{display:block;margin:0 auto var(--spacing-sm);opacity:.3}.preview-error{color:var(--color-error);font-size:var(--font-size-small);text-align:center;padding:var(--spacing-md)}.preview-wrapper.has-solid-bg{background-size:auto}@media(max-width:900px){.tool-body{grid-template-columns:1fr}}@media(max-width:600px){.tool-info,.panel-header{flex-direction:column;align-items:flex-start}}