:root{--primary-color:#3498db;--primary-dark:#2980b9;--secondary-color:#2ecc71;--accent-color:#e74c3c;--text-color:#333;--text-light:#777;--text-secondary:#777;--bg-color:#fff;--bg-light:#f5f7fa;--bg-dark:#2c3e50;--border-color:#e1e4e8;--card-bg:#fff;--card-shadow:0 2px 6px #0000001a;--card-border:transparent;--card-hover-shadow:0 4px 12px #0000001f;--card-hover-transform:translateY(-3px);--heading-color:#333;--shadow:0 4px 6px #0000001a;--icon-color:#3498db;--header-shadow:0 2px 4px #0000001a;--header-bg:#fff;--footer-link-hover:#3498db;--footer-shadow:0 0px 4px #0000001a;--radius:8px;--transition:all .3s ease;--font-sans:"Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--input-bg:#f5f7fa;--input-focus-shadow:#3498db33;--code-bg:#f5f7fa;--toggle-bg:#f5f7fa}[data-theme=dark]{--primary-color:#3498db;--primary-dark:#2980b9;--secondary-color:#2ecc71;--accent-color:#e74c3c;--text-color:#f5f7fa;--text-light:#bdc3c7;--text-secondary:#bdc3c7;--bg-color:#121921;--bg-light:#1a252f;--bg-dark:#0a1016;--border-color:#4b6584;--card-bg:#263747;--card-shadow:0 4px 12px #00000080;--card-border:1px solid #4a7297;--card-hover-shadow:0 8px 20px #3498db4d;--card-hover-transform:translateY(-5px);--heading-color:#5dade2;--shadow:0 4px 6px #0000004d;--icon-color:#5dade2;--header-shadow:0 2px 8px #00000080;--header-bg:#121921;--footer-link-hover:#3498db;--footer-shadow:0 0px 8px #00000080;--input-bg:#263747;--input-focus-shadow:#3498db80;--code-bg:#263747;--toggle-bg:#1a252f}*{box-sizing:border-box;margin:0;padding:0;transition:color .3s,background-color .3s,border-color .3s,box-shadow .3s,transform .3s}body{font-family:var(--font-sans);color:var(--text-color);background-color:var(--bg-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.6}.container{box-sizing:border-box;max-width:1200px;margin:0 auto;padding:0 20px}.tool-content-container{width:100%;max-width:100%;margin:0 auto;padding:10px 15px 30px}.tool-fullscreen{width:100%;max-width:100%}.full-width-header{background-color:var(--header-bg);width:100%;color:var(--text-color);box-shadow:var(--header-shadow);border-bottom:var(--card-border)}.header-container{justify-content:space-between;align-items:center;max-width:100%;margin:0 auto;padding:10px 20px;display:flex}.logo{color:var(--primary-color);flex-shrink:0;align-items:center;font-size:1.5rem;font-weight:700;text-decoration:none;display:flex}.logo img{height:30px;margin-right:.5rem}.tool-info{text-align:center;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;margin:-15px 20px;display:flex}.tool-info h1{color:var(--primary-color);margin:0;font-size:1.3rem}.tool-info p{color:var(--text-light);margin:0;font-size:.85rem}.nav-links{flex-shrink:0;align-items:center;gap:1.5rem;display:flex}.nav-links a{color:var(--text-color);transition:var(--transition);text-decoration:none}.nav-links a:hover{color:var(--primary-color)}#theme-toggle{border-radius:var(--radius);background-color:var(--toggle-bg);border:1px solid var(--border-color);cursor:pointer;color:var(--text-color);align-items:center;padding:5px 10px;display:flex}#theme-toggle:hover{background-color:var(--primary-color);color:#fff}.page-title{text-align:center;color:var(--text-color);text-shadow:0 1px 2px #0000001a;margin:2rem 0 .5rem;font-size:2rem}.page-description{color:var(--text-light);text-align:center;margin-bottom:2rem;margin-left:auto;margin-right:auto}.search-container{max-width:600px;margin:2rem auto}.search-input{border:1px solid var(--border-color);border-radius:var(--radius);width:100%;transition:var(--transition);background-color:var(--input-bg);color:var(--text-color);outline:none;padding:.75rem 1rem;font-size:1rem}.search-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--input-focus-shadow)}.tool-grid{width:100%;margin-bottom:3rem}.tool-group{width:100%;margin-bottom:2rem}.group-title{border-bottom:1px solid var(--border-color);color:var(--text-color);margin-bottom:1rem;margin-left:20px;margin-right:20px;padding-bottom:.5rem;font-size:1.25rem;font-weight:600}.tools-container{flex-wrap:wrap;gap:24px;margin-bottom:20px;padding:0 20px;display:flex}.tool-card{background-color:var(--card-bg);box-shadow:var(--card-shadow);border:var(--card-border);color:var(--text-color);border-radius:8px;flex-direction:column;flex:0 0 calc(33.333% - 16px);padding:1rem 1.5rem;text-decoration:none;transition:all .3s;display:flex}.tool-card:hover{transform:var(--card-hover-transform);box-shadow:var(--card-hover-shadow);border-color:var(--primary-color);background-color:var(--card-bg)}.tool-card .tool-header{align-items:flex-start;display:flex}.tool-card h3{color:var(--heading-color);margin:0 0 0 .75rem;font-size:1.3rem;font-weight:600}.tool-card p{color:var(--text-secondary);margin:.5rem 0 0;font-size:.85rem;line-height:1.4}.tool-header{align-items:center;display:flex}.tool-icon{color:var(--icon-color);margin-right:10px;font-size:18px}.tool-content{background-color:var(--bg-color);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;margin-bottom:2rem;padding:2rem}.form-label{margin-bottom:.5rem;font-weight:500;display:block}.form-control{border:1px solid var(--border-color);background-color:var(--input-bg);width:100%;color:var(--text-color);font-family:var(--font-mono);resize:vertical;border-radius:4px;padding:.75rem;font-size:.75rem;line-height:1.3;transition:border-color .3s}.form-control:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--input-focus-shadow);outline:none}textarea.form-control{min-height:120px}.btn{background-color:var(--primary-color);color:#fff;border-radius:var(--radius);cursor:pointer;transition:var(--transition);border:none;padding:.75rem 1.5rem;font-size:1rem}.btn:hover{background-color:var(--primary-dark)}.btn-secondary{background-color:var(--secondary-color)}.btn-secondary:hover{background-color:#27ae60}.btn-accent{background-color:var(--accent-color)}.btn-accent:hover{background-color:#c0392b}.btn-group{flex-wrap:wrap;gap:.75rem;display:flex}.result-container{background-color:var(--bg-light);border:1px solid var(--border-color);border-radius:var(--radius);margin-top:1.5rem;padding:1rem}pre,code{font-family:var(--font-mono);background-color:var(--code-bg);color:var(--text-color);border-radius:4px;font-size:.75rem;line-height:1.3}pre{white-space:pre-wrap;word-wrap:break-word;padding:.75rem;overflow-x:auto}code{padding:.2rem .4rem}footer{background-color:var(--header-bg);color:var(--text-color);box-shadow:var(--footer-shadow);border-top:var(--card-border);border-bottom:var(--card-border);margin-top:3rem;padding:2rem 0}.footer-content{flex-wrap:wrap;justify-content:space-between;gap:2rem;display:flex}.footer-links h3{margin-bottom:1rem;font-size:1.25rem}.footer-links ul{list-style:none}.footer-links li{margin-bottom:.5rem}.footer-links a{color:var(--text-color);transition:var(--transition);text-decoration:none}.footer-links a:hover{color:var(--footer-link-hover)}.footer-bottom{text-align:center;color:var(--text-light);flex-wrap:wrap;justify-content:center;align-items:center;padding:0 20px;display:flex}.footer-bottom span,.footer-bottom a{margin:0 15px}.footer-link{color:var(--text-color);text-decoration:none}.footer-link:hover{color:var(--footer-link-hover);text-decoration:underline}@media (width<=992px){.tool-card{flex:0 0 calc(50% - 12px)}.tools-container{gap:20px}}@media (width<=768px){.tools-container{padding:0 10px}.group-title{margin-left:10px;margin-right:10px}.footer-content{flex-direction:column;gap:1.5rem}.tool-content-container{padding:0 1rem}.btn-group{flex-direction:column}.header-content{flex-wrap:wrap;justify-content:center;gap:10px}.tool-info{order:3;width:100%;margin:10px 0 0}}@media (width<=576px){.tool-card{flex:0 0 100%}}.tool-card:hover .tool-icon,.tool-card:hover h3{color:var(--primary-dark)}.related-tools{width:100%;max-width:100%;margin-top:2rem;padding:0}.related-tools .group-title{border-bottom:1px solid var(--border-color);margin-left:0;margin-right:0;padding-bottom:.5rem;padding-left:0;padding-right:0;font-size:1.25rem}.related-tools .tools-container{flex-wrap:wrap;justify-content:space-between;gap:20px;margin:20px 0;padding:0;display:flex}.related-tools .tool-card{flex:0 0 calc(33.333% - 14px);margin:0}.tool-content.related-tools{background-color:var(--bg-color);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:2rem;padding:1.5rem}@media (width<=992px){.related-tools .tool-card{flex:0 0 calc(50% - 10px)}}@media (width<=576px){.related-tools .tool-card{flex:0 0 100%}}.action-button.primary,button.primary,.btn.primary,.button.primary{background-color:var(--primary-color,#1976d2);color:#fff!important}[data-theme=light] .action-button.primary,[data-theme=light] button.primary,[data-theme=light] .btn.primary,[data-theme=light] .button.primary{background:linear-gradient(45deg,#1565c0,#1976d2);color:#fff!important}[data-theme=dark] .action-button.primary,[data-theme=dark] button.primary,[data-theme=dark] .btn.primary,[data-theme=dark] .button.primary{background:linear-gradient(45deg,#1976d2,#2196f3);color:#fff!important}select{background-color:var(--input-bg);color:var(--text-color);border:1px solid var(--border-color);border-radius:var(--radius);transition:var(--transition);padding:5px;font-size:14px}select:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--input-focus-shadow);outline:none}[data-theme=dark] select{background-color:var(--bg-light);color:var(--text-light);border-color:var(--border-color)}.app>main.container,.app main.container,.app main.container .tool-content-container{box-sizing:border-box;width:100%;max-width:100%}html{scrollbar-width:thin;scrollbar-color:var(--primary-dark) #0000000f}html::-webkit-scrollbar{width:10px;height:10px}body::-webkit-scrollbar{width:10px;height:10px}textarea::-webkit-scrollbar{width:10px;height:10px}pre::-webkit-scrollbar{width:10px;height:10px}.CodeMirror-vscrollbar::-webkit-scrollbar{width:10px;height:10px}.CodeMirror-hscrollbar::-webkit-scrollbar{width:10px;height:10px}html::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary-color), var(--primary-dark));background-clip:padding-box;border:2px solid #0000;border-radius:8px}body::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary-color), var(--primary-dark));background-clip:padding-box;border:2px solid #0000;border-radius:8px}textarea::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary-color), var(--primary-dark));background-clip:padding-box;border:2px solid #0000;border-radius:8px}pre::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary-color), var(--primary-dark));background-clip:padding-box;border:2px solid #0000;border-radius:8px}.CodeMirror-vscrollbar::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary-color), var(--primary-dark));background-clip:padding-box;border:2px solid #0000;border-radius:8px}.CodeMirror-hscrollbar::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary-color), var(--primary-dark));background-clip:padding-box;border:2px solid #0000;border-radius:8px}html::-webkit-scrollbar-track{background:var(--bg-light);border-radius:8px}body::-webkit-scrollbar-track{background:var(--bg-light);border-radius:8px}textarea::-webkit-scrollbar-track{background:var(--bg-light);border-radius:8px}pre::-webkit-scrollbar-track{background:var(--bg-light);border-radius:8px}.CodeMirror-vscrollbar::-webkit-scrollbar-track{background:var(--bg-light);border-radius:8px}.CodeMirror-hscrollbar::-webkit-scrollbar-track{background:var(--bg-light);border-radius:8px}[data-theme=dark] html,[data-theme=dark] body{scrollbar-color:var(--primary-color) #ffffff0f}[data-theme=dark] html::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary-dark), var(--primary-color))}[data-theme=dark] body::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary-dark), var(--primary-color))}[data-theme=dark] textarea::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary-dark), var(--primary-color))}[data-theme=dark] pre::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary-dark), var(--primary-color))}[data-theme=dark] .CodeMirror-vscrollbar::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary-dark), var(--primary-color))}[data-theme=dark] .CodeMirror-hscrollbar::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--primary-dark), var(--primary-color))}[data-theme=dark] html::-webkit-scrollbar-track{background:var(--bg-dark)}[data-theme=dark] body::-webkit-scrollbar-track{background:var(--bg-dark)}[data-theme=dark] textarea::-webkit-scrollbar-track{background:var(--bg-dark)}[data-theme=dark] pre::-webkit-scrollbar-track{background:var(--bg-dark)}[data-theme=dark] .CodeMirror-vscrollbar::-webkit-scrollbar-track{background:var(--bg-dark)}[data-theme=dark] .CodeMirror-hscrollbar::-webkit-scrollbar-track{background:var(--bg-dark)}.cm-field-auto .CodeMirror{border-radius:4px;width:100%;height:auto;min-height:12rem}.cm-field-auto .CodeMirror-scroll{min-height:12rem;overflow:auto hidden!important}.theme-toggle-container{display:inline-block;position:relative}.theme-button{background-color:var(--toggle-bg,#f5f7fa);border:1px solid var(--border-color,#e1e4e8);border-radius:var(--radius,8px);cursor:pointer;color:var(--text-color,#333);white-space:nowrap;align-items:center;min-width:100px;padding:6px 10px;transition:all .2s;display:flex}.theme-button:hover{background-color:var(--primary-color,#3498db);color:#fff}.theme-icon{margin-right:4px;font-size:14px}.dropdown-arrow{margin-left:6px;font-size:10px}.theme-dropdown{background-color:var(--card-bg,#fff);border:1px solid var(--border-color,#e1e4e8);border-radius:var(--radius,8px);z-index:1000;width:160px;margin-top:5px;position:absolute;top:100%;right:0;box-shadow:0 4px 12px #00000026}body{overflow-x:hidden}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.theme-dropdown[style*="display: block"]{animation:.2s fadeIn}.theme-option{color:#333;align-items:center;padding:8px 12px;text-decoration:none;transition:background-color .2s;display:flex;position:relative}.theme-option-text{color:#333}.theme-option:hover{background-color:#f5f7fa}.theme-option.active{background-color:#3498db1a;font-weight:500}.theme-option.active:after{content:"✓";color:#3498db;position:absolute;right:12px}[data-theme=dark] .theme-button{color:#f5f7fa;background-color:#1a252f}[data-theme=dark] .theme-dropdown{background-color:#263747;border-color:#4b6584}[data-theme=dark] .theme-option,[data-theme=dark] .theme-option-text{color:#f5f7fa}[data-theme=dark] .theme-option:hover{background-color:#1a252f}[data-theme=dark] .theme-option.active{background-color:#5dade233}[data-theme=dark] .theme-option.active:after{color:#5dade2}html:not([data-theme=dark]) .theme-option[data-theme=dark] .theme-option-text{color:#333!important}[data-theme=dark] .theme-option .theme-option-text{color:#f5f7fa!important}html:not([data-theme=dark]) .theme-option:not([data-theme=dark]) .theme-option-text{color:#333!important}:root{--primary-color:#007bff;--danger-color:#dc3545;--text-on-primary:#fff;--text-on-danger:#fff}[data-theme=dark]{--primary-color:#375a7f;--danger-color:#a94442;--text-on-primary:#fff;--text-on-danger:#fff}.tool-icon{background-color:#3498db1a;border-radius:8px;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.tool-icon i{color:var(--primary-color);font-size:24px}.icon-code-braces:before{content:"{ }";font-family:Courier New,monospace;font-weight:700}.icon-check-circle:before{content:"✓";font-weight:700}.icon-file-code:before{content:"</>";font-family:Courier New,monospace;font-weight:700}.icon-file-xml:before{content:"<>";font-family:Courier New,monospace;font-weight:700}.icon-database:before{content:"▤";font-weight:700}.icon-refresh:before{content:"↻";font-weight:700}.icon-exchange:before{content:"⇄";font-weight:700}.icon-clock:before{content:"⏱"}.icon-palette:before{content:"🎨"}.icon-code:before{content:"≡";font-weight:700}.icon-table:before{content:"☰";font-weight:700}.icon-ruler:before{content:"📏"}.icon-file-diff:before{content:"⊿";font-weight:700}.icon-compare:before{content:"⇄";font-weight:700}.icon-image-compare:before{content:"⊡";font-weight:700}.icon-database-plus:before{content:"⊕";font-weight:700}.icon-key:before{content:"🔑"}.icon-lock:before{content:"🔒"}.icon-text:before{content:"Aa";font-weight:700}.icon-link:before{content:"🔗"}.icon-code-tags:before{content:"&";font-weight:700}.icon-shield:before{content:"🛡️"}.icon-earth:before{content:"🌐"}.icon-format-align-left:before{content:"≡";font-weight:700}.icon-regex:before{content:".*";font-family:Courier New,monospace;font-weight:700}.icon-calendar-clock:before{content:"📅"}.icon-markdown:before{content:"MD";font-weight:700}.icon-markdown-poster:before{content:"🖼️"}.icon-shield-key:before{content:"🔐"}.icon-web:before{content:"🌐"}.icon-connection:before{content:"⟺";font-weight:700}.icon-dns:before{content:"📋"}.icon-map-marker:before{content:"📍"}.icon-calendar-check:before{content:"📅";font-weight:700}.icon-img-to-ico:before{content:"🖼️"}.icon-batch-resize:before{content:"⧉";font-weight:700}.icon-img-base64:before{content:"🖼️"}.icon-qrcode:before{content:"🔲"}