.tool-shell{--tool-border:var(--tc-border);--tool-border-strong:var(--tc-border-strong);--tool-surface:var(--tc-surface-1);--tool-surface-muted:var(--tc-surface-2);--tool-text-muted:var(--tc-ink-4);--tool-radius:var(--tc-radius-lg);padding:24px 32px 40px;max-width:1200px;margin:0 auto}@media(max-width:1024px){.tool-shell{padding:20px 24px 32px}}@media(max-width:640px){.tool-shell{padding:16px 16px 24px}}.tool-shell__header{margin-bottom:20px}.tool-shell__title{margin:0 0 8px;font-size:28px;font-weight:650;line-height:1.3;letter-spacing:-.015em;color:var(--tc-ink-1);position:relative}.tool-shell__title:after{content:"";display:block;margin-top:10px;width:32px;height:4px;border-radius:var(--tc-radius-pill);background:var(--tc-gradient-brand)}.tool-shell__desc{margin:8px 0 0;color:var(--tc-ink-4);font-size:14px;line-height:1.6;max-width:72ch}.tool-shell__actions,.tool-shell__toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}.tool-shell__controls{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;padding:16px 18px;border:1px solid var(--tool-border);border-radius:var(--tool-radius);background:var(--tool-surface-muted);box-shadow:var(--tc-shadow-sm)}.tool-shell__body{min-height:200px}.tool-empty{display:flex;flex-direction:column;padding:48px 24px;gap:12px;text-align:center;color:var(--tc-ink-4)}.tool-empty,.tool-empty__icon{align-items:center;justify-content:center}.tool-empty__icon{width:56px;height:56px;display:inline-flex;border-radius:50%;background:var(--tc-accent-soft);color:var(--tc-accent);animation:toolEmptyFloat 3.2s ease-in-out infinite}.tool-empty__title{color:var(--tc-ink-2);font-size:15px;font-weight:600}.tool-empty__desc{color:var(--tc-ink-4);font-size:13px;line-height:1.6;max-width:42ch}@keyframes toolEmptyFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.tool-dual{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:768px){.tool-dual{grid-template-columns:1fr}}.tool-dual--stacked{display:block}.tool-dual__pane{display:flex;flex-direction:column;min-width:0}.tool-dual__label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:13px;color:var(--tool-text-muted)}.tool-dual__label-with-meta{display:inline-flex;align-items:baseline;gap:8px;min-width:0}.tool-dual__meta{padding:2px 8px;border-radius:var(--tc-radius-pill);background:var(--tc-accent-soft);color:var(--tc-accent);font-size:11px;font-weight:500;white-space:nowrap}.tool-dual__btns{display:flex;gap:6px}.tool-dual__textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--tool-border-strong);border-radius:var(--tc-radius-md);font-family:var(--tc-font-mono);font-size:13px;line-height:1.5;resize:vertical;background:var(--tool-surface);color:inherit;transition:border-color var(--tc-duration-fast) var(--tc-ease),box-shadow var(--tc-duration-fast) var(--tc-ease)}.tool-dual__textarea::-moz-placeholder{color:var(--tool-text-muted);opacity:.75}.tool-dual__textarea::placeholder{color:var(--tool-text-muted);opacity:.75}.tool-dual__textarea:hover{border-color:var(--tc-border-strong)}.tool-dual__textarea:focus{outline:none;border-color:var(--tc-accent);box-shadow:0 0 0 4px var(--tc-accent-soft)}.tool-dual__textarea--fade{animation:toolDualFade .18s var(--tc-ease)}.tool-dual__hint{margin-top:6px;font-size:12px;color:var(--tool-text-muted);line-height:1.4}@keyframes toolDualFade{0%{opacity:.35}to{opacity:1}}.tc-copy-btn .tc-copy-btn__icon{display:inline-flex;transition:transform var(--tc-duration-slow) cubic-bezier(.34,1.56,.64,1)}.tc-copy-btn.is-copied{color:var(--tc-success)!important;border-color:var(--tc-success)!important}.tc-copy-btn.is-copied .tc-copy-btn__icon{transform:scale(1.15)}.encoding-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:16px;padding:14px 16px;border:1px solid var(--tool-border);border-radius:var(--tool-radius);background:var(--tool-surface-muted);font-size:13px;color:var(--tool-text-muted)}.encoding-now strong{font-size:16px;font-weight:650;color:inherit}.encoding-now strong,.encoding-now__local{font-variant-numeric:tabular-nums}.encoding-fields{display:grid;gap:12px;max-width:720px}.encoding-fields__card{border:1px solid var(--tool-border);border-radius:var(--tool-radius);background:var(--tool-surface);padding:14px 16px}.encoding-fields__input{width:100%!important;display:flex}.encoding-fields .ant-select{min-width:140px}.encoding-output__meta{margin-bottom:8px;font-size:12px;color:var(--tool-text-muted)}.encoding-output__textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--tool-border-strong);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;line-height:1.55;resize:vertical;background:var(--tool-surface);color:inherit;min-height:280px}.encoding-output__textarea::-moz-placeholder{color:var(--tool-text-muted);opacity:.75}.encoding-output__textarea::placeholder{color:var(--tool-text-muted);opacity:.75}.encoding-output__textarea:focus{outline:none;border-color:var(--tc-accent);box-shadow:0 0 0 4px var(--tc-accent-soft)}.tool-control-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}.tool-control-row__label{min-width:72px;font-size:13px;color:var(--tool-text-muted)}.tool-control-row__field{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1;min-width:0}.tool-control-row .ant-select{min-width:140px}.tool-dropzone-upload .ant-upload-drag{border:1.5px dashed var(--tool-border-strong)!important;border-radius:var(--tool-radius)!important;background:var(--tool-surface-muted)!important}.tool-dropzone-upload .ant-upload-drag-hover,.tool-dropzone-upload .ant-upload-drag:hover{border-color:var(--tc-accent)!important}.tool-dropzone-upload .ant-upload-drag-container{display:block}.tool-dropzone{padding:12px 8px;text-align:center;cursor:pointer}.tool-dropzone__icon{font-size:28px;color:var(--tc-accent);margin-bottom:8px}.tool-dropzone__title{font-size:14px;font-weight:500;margin-bottom:4px}.tool-dropzone__file,.tool-dropzone__hint{font-size:12px;color:var(--tool-text-muted)}.tool-dropzone__file{margin-top:10px}.tool-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:768px){.tool-compare{grid-template-columns:1fr}}.tool-compare__card{border:1px solid var(--tool-border);border-radius:var(--tool-radius);background:var(--tool-surface);overflow:hidden;min-height:240px;display:flex;flex-direction:column}.tool-compare__meta{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--tool-border);font-size:12px;color:var(--tool-text-muted)}.tool-compare__badge{color:var(--tc-accent);font-weight:600}.tool-compare__preview{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;min-height:180px;background:linear-gradient(45deg,rgba(0,0,0,.04) 25%,transparent 0) 0 0/16px 16px,linear-gradient(-45deg,rgba(0,0,0,.04) 25%,transparent 0) 0 8px/16px 16px,linear-gradient(45deg,transparent 75%,rgba(0,0,0,.04) 0) 8px -8px/16px 16px,linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.04) 0) -8px 0/16px 16px}[data-theme=dark] .tool-compare__preview{background:linear-gradient(45deg,rgba(255,255,255,.05) 25%,transparent 0) 0 0/16px 16px,linear-gradient(-45deg,rgba(255,255,255,.05) 25%,transparent 0) 0 8px/16px 16px,linear-gradient(45deg,transparent 75%,rgba(255,255,255,.05) 0) 8px -8px/16px 16px,linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.05) 0) -8px 0/16px 16px}.tool-compare__preview img{max-width:100%;max-height:280px;-o-object-fit:contain;object-fit:contain;border-radius:6px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tool-compare__empty{font-size:13px;color:var(--tool-text-muted)}.tool-footer{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.color-tool{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:start}@media(max-width:768px){.color-tool{grid-template-columns:1fr}}.color-tool__swatch-wrap{border:1px solid var(--tool-border);border-radius:var(--tool-radius);overflow:hidden;background:var(--tool-surface)}.color-tool__swatch{width:100%;aspect-ratio:1;min-height:160px}.color-tool__picker{width:100%;height:36px;border:0;border-top:1px solid var(--tool-border);cursor:pointer;padding:0;background:rgba(0,0,0,0)}.color-tool__form{display:grid;gap:12px;border:1px solid var(--tool-border);border-radius:var(--tool-radius);padding:16px;background:var(--tool-surface)}.color-tool__contrast{font-size:13px;color:var(--tool-text-muted);line-height:1.6}.color-tool__level{display:inline-block;margin-left:6px;padding:0 6px;border-radius:4px;font-size:11px;font-weight:600;background:var(--tc-accent-soft);color:var(--tc-accent)}.favicon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:16px}.favicon-grid__card{border:1px solid var(--tool-border);border-radius:var(--tool-radius);background:var(--tool-surface);padding:12px;text-align:center}.favicon-grid__preview{height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;border-radius:6px;background:linear-gradient(45deg,rgba(0,0,0,.04) 25%,transparent 0) 0 0/12px 12px,linear-gradient(-45deg,rgba(0,0,0,.04) 25%,transparent 0) 0 6px/12px 12px}.favicon-grid__preview img{image-rendering:pixelated;max-width:64px;max-height:64px}.favicon-grid__label{font-size:12px;color:var(--tool-text-muted);margin-bottom:8px}.qrcode-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}@media(max-width:768px){.qrcode-layout{grid-template-columns:1fr}}.qrcode-layout__panel{padding:16px;display:grid}.qrcode-layout__panel,.qrcode-layout__preview{border:1px solid var(--tool-border);border-radius:var(--tool-radius);background:var(--tool-surface);gap:12px}.qrcode-layout__preview{padding:20px;flex-direction:column;min-height:280px}.qrcode-layout__canvas,.qrcode-layout__preview{display:flex;align-items:center;justify-content:center}.qrcode-layout__canvas{width:100%;max-width:260px;aspect-ratio:1;border-radius:8px;background:linear-gradient(45deg,rgba(0,0,0,.05) 25%,transparent 0) 0 0/14px 14px,linear-gradient(-45deg,rgba(0,0,0,.05) 25%,transparent 0) 0 7px/14px 14px;border:1px solid var(--tool-border)}.qrcode-layout__canvas img{max-width:100%;height:auto;border-radius:4px;transition:opacity var(--tc-duration-slow) var(--tc-ease)}.tool-dropzone-upload .ant-upload-drag{border:1.5px dashed var(--tc-border-strong)!important;border-radius:var(--tc-radius-xl)!important;transition:border-color var(--tc-duration-base) var(--tc-ease),background-color var(--tc-duration-base) var(--tc-ease)!important}.tool-compare__card{transition:transform var(--tc-duration-base) var(--tc-ease),box-shadow var(--tc-duration-base) var(--tc-ease),border-color var(--tc-duration-base) var(--tc-ease);box-shadow:var(--tc-shadow-sm)}.tool-compare__card:hover{transform:translateY(-2px);box-shadow:var(--tc-shadow-md);border-color:var(--tc-border-strong)}.tool-compare__meta .tool-compare__badge{padding:2px 8px;border-radius:var(--tc-radius-pill);background:var(--tc-accent-soft);color:var(--tc-accent);font-weight:600;font-size:11px}.color-tool__swatch-wrap{position:relative;box-shadow:var(--tc-shadow-sm)}.color-tool__swatch-wrap:before{content:"";position:absolute;top:0;left:0;right:0;height:12px;background:var(--tc-gradient-brand);z-index:1;pointer-events:none}.color-tool__ambient{padding:16px;border-radius:var(--tc-radius-lg);background:var(--tc-ambient,transparent);transition:background .4s var(--tc-ease)}.color-tool__value-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:var(--tc-radius-sm);transition:background-color .4s var(--tc-ease)}.color-tool__value-row.is-flash{background-color:var(--tc-accent-soft)}.qrcode-eye-fade{animation:qrEyeFade .3s var(--tc-ease)}@keyframes qrEyeFade{0%{opacity:.35}to{opacity:1}}.favicon-grid__card{position:relative;transition:transform var(--tc-duration-base) var(--tc-ease),box-shadow var(--tc-duration-base) var(--tc-ease)}.favicon-grid__card:hover{transform:translateY(-2px);box-shadow:var(--tc-shadow-md)}.favicon-grid__card:hover .favicon-grid__actions{opacity:1;transform:translateY(0)}.favicon-grid__actions{display:flex;gap:6px;justify-content:center;margin-top:6px;opacity:0;transform:translateY(4px);transition:opacity var(--tc-duration-base) var(--tc-ease),transform var(--tc-duration-base) var(--tc-ease)}