:root{--color-primary:#42b883;--color-primary-dark:#2c8a65;--color-primary-hover:#369870;--color-primary-light:#42b88314;--color-primary-glow:#42b8834d;--color-accent:#8b5cf6;--color-accent-light:#8b5cf61f;--color-accent-glow:#8b5cf64d;--color-danger:#ef4444;--color-danger-light:#ef44441a;--color-warning:#f59e0b;--color-warning-light:#f59e0b1a;--color-info:#3b82f6;--color-success:#10b981;--color-success-light:#10b9811a;--color-purple:#8b5cf6;--color-purple-light:#8b5cf61a;--color-text:#0f172a;--color-text-secondary:#475569;--color-text-muted:#94a3b8;--color-text-link:#42b883;--color-border:#e2e8f0;--color-border-strong:#cbd5e1;--color-border-input:#cbd5e1;--color-border-sidebar:#0f172a14;--glass-bg:#ffffffb3;--glass-border:#0f172a14;--glow-cyan:#42b8834d;--glow-purple:#8b5cf64d;--glow-orb-opacity:.1;--color-shadow:#0f172a14;--color-shadow-dark:#0f172a3d;--shadow-xs:0 1px 2px #0f172a0d;--shadow-sm:0 1px 2px #0f172a0f;--shadow-md:0 4px 6px -1px #0f172a14;--shadow-lg:0 10px 25px -5px #0f172a1a;--shadow-glow:0 0 16px var(--glow-cyan);--shadow-glow-purple:0 0 18px var(--glow-purple);--color-bg:#f8fafc;--color-bg-grid:#0f172a0d;--color-bg-card:#ffffffb3;--color-bg-card-solid:#fff;--color-bg-card-soft:#f8fafc;--color-bg-sidebar:#ffffffb3;--color-bg-code:#0f172a;--color-bg-output:#f8fafc;--color-bg-output-hover:#f1f5f9;--color-bg-hover:#42b8830f;--color-bg-tag:#f1f5f9;--color-bg-footer:#fff9;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-pill:999px;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:3rem;--spacing-2xl:4rem;--font-sans:"Inter", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2.25rem;--font-size-4xl:3rem;--gradient-primary:linear-gradient(135deg, #42b883 0%, #8b5cf6 100%);--gradient-primary-soft:linear-gradient(135deg, #42b8831f 0%, #8b5cf61f 100%);--gradient-border:linear-gradient(135deg, #42b88366, #8b5cf666);--gradient-text:linear-gradient(135deg, #42b883 0%, #8b5cf6 100%);--gradient-neon:linear-gradient(135deg, #42b883 0%, #8b5cf6 100%);--content-max:800px;--transition-fast:.2s ease;--transition-normal:.3s ease;font-family:var(--font-sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--color-text);background-color:var(--color-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);background-image:linear-gradient(var(--color-bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-bg-grid) 1px, transparent 1px);background-position:-1px -1px;background-size:48px 48px;background-attachment:fixed;min-width:320px;min-height:100vh;margin:0;position:relative}body:before{content:"";background:var(--color-primary);filter:blur(90px);width:420px;height:420px;opacity:var(--glow-orb-opacity);pointer-events:none;z-index:0;border-radius:50%;position:fixed;top:-120px;left:-120px}body:after{content:"";background:var(--color-accent);filter:blur(90px);width:380px;height:380px;opacity:var(--glow-orb-opacity);pointer-events:none;z-index:0;border-radius:50%;position:fixed;bottom:-100px;right:-100px}#app{z-index:1;width:100%;min-height:100vh;position:relative}h1,h2,h3,h4,h5,h6{color:var(--color-text);margin-bottom:1rem}a{color:var(--color-primary);transition:color var(--transition-fast)}.tool-container{background:#fcfcfc;border-radius:8px;max-width:1800px;margin:0 auto;padding:2rem}.tool-container>h2{text-align:center;color:var(--color-text);margin-bottom:.5rem;font-size:1.75rem;font-weight:700}.tool-description{text-align:center;color:var(--color-text-secondary);margin-bottom:2rem}.section-card,.card{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--spacing-lg);border:1px solid var(--glass-border);position:relative;overflow:hidden}.card:after{content:"";background:var(--gradient-neon);transform-origin:top;width:0;transition:transform .3s;position:absolute;top:0;bottom:0;left:0;transform:scaleY(0)}.card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-glow), var(--shadow-lg);transform:translateY(-4px)}.card:hover:after{transform:scaleY(1)}.section-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.section-header h3{color:var(--color-text);margin:0;font-size:1.05rem;font-weight:600}.converter{flex-wrap:wrap;align-items:flex-start;gap:1.5rem;display:flex}.converter .input-group{flex:1;min-width:300px}.converter .arrow{color:var(--color-primary);filter:drop-shadow(0 0 6px var(--color-primary-glow));align-self:center;font-size:2rem;font-weight:700}.converter-container{flex-wrap:wrap;gap:1.5rem;display:flex}.converter-container .input-section,.converter-container .output-section{flex:1;min-width:350px}.error-message{color:var(--color-danger);margin-top:.5rem;font-size:.875rem}.btn{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:none;justify-content:center;align-items:center;gap:.3rem;padding:.55rem 1.1rem;font-family:inherit;font-size:.875rem;font-weight:500;display:inline-flex}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff;box-shadow:0 2px 8px #42b88340}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn-success{background:var(--color-primary);color:#fff;box-shadow:0 2px 8px #42b88340}.btn-success:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 14px #42b88366}.btn-warning{color:#fff;background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);box-shadow:0 2px 8px #f59e0b40}.btn-warning:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 14px #f59e0b66}.btn-purple{color:#fff;background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);box-shadow:0 2px 8px #8b5cf640}.btn-purple:hover:not(:disabled){box-shadow:var(--shadow-glow-purple);transform:translateY(-1px)}.btn-secondary{background:var(--glass-bg);-webkit-backdrop-filter:blur(8px);color:var(--color-text);border:1px solid var(--glass-border)}.btn-secondary:hover:not(:disabled){border-color:var(--color-primary);box-shadow:var(--shadow-glow);color:var(--color-primary);transform:translateY(-1px)}.btn-copy{background:var(--color-primary);color:#fff;box-shadow:0 2px 6px #42b88333}.btn-copy:hover:not(:disabled){box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn-danger{color:#fff;background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow:0 2px 8px #ef444440}.btn-danger:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 14px #ef444466}.btn-sm{padding:.35rem .75rem;font-size:.8rem}.mode-btn{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-card-solid);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text);padding:.65rem .9rem;font-family:inherit;font-size:.9rem}.mode-btn:hover{border-color:var(--color-primary);background:var(--color-bg-hover)}.mode-btn.active{background:var(--color-primary);color:#fff;border-color:#0000;box-shadow:0 2px 8px #42b8834d}textarea{border:1px solid var(--color-border);border-radius:var(--radius-md);resize:vertical;width:100%;font-size:.95rem;font-family:var(--font-mono);white-space:pre-wrap;word-wrap:break-word;background:var(--color-bg-card-soft);min-height:200px;max-height:500px;color:var(--color-text);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:.85rem;overflow:auto}textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light);background:var(--color-bg-card-solid);outline:none}textarea[readonly]{background:var(--color-bg-output);color:var(--color-text)}.output-area{border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;font-size:.9rem;font-family:var(--font-mono);background:var(--color-bg-output);white-space:pre-wrap;word-wrap:break-word;min-height:200px;color:var(--color-text);padding:.85rem;line-height:1.6;overflow:auto}.input-field{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-card-solid);width:100%;color:var(--color-text);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:.7rem .85rem;font-family:inherit;font-size:.95rem}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light);outline:none}.select-field{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-card-solid);color:var(--color-text);cursor:pointer;padding:.7rem .85rem;font-family:inherit;font-size:.875rem}.select-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light);outline:none}.upload-area{border:2px dashed var(--color-border-strong);border-radius:var(--radius-lg);cursor:pointer;width:100%;min-height:200px;transition:all var(--transition-fast);background:var(--color-bg-card-soft);justify-content:center;align-items:center;display:flex}.upload-area:hover{border-color:var(--color-primary);background:var(--color-bg-hover)}.upload-area.has-file{border-color:var(--color-success);background:var(--color-success-light)}.upload-content{text-align:center;padding:2rem}.upload-icon{margin-bottom:1rem;font-size:3rem;display:block}.upload-text{color:var(--color-text-secondary);margin-bottom:.5rem;font-size:1.1rem}.upload-hint{color:var(--color-text-muted);font-size:.875rem}.center-narrow{max-width:600px;margin:0 auto}.center-narrow-top{max-width:600px;margin:1.5rem auto 0}.hidden-input{display:none}.flex-row{gap:.5rem;display:flex}.flex-row-lg{gap:.75rem;display:flex}.flex-1{flex:1}.text-center{text-align:center}.mt-sm{margin-top:.5rem}.mt-md{margin-top:.75rem}.mt-lg{margin-top:1rem}.mb-lg{margin-bottom:1.5rem}.w-full{width:100%}.page-title{text-align:center;color:var(--color-text);letter-spacing:-.02em;margin-bottom:.5rem;font-size:2rem;font-weight:700}.page-subtitle{text-align:center;color:var(--color-text-secondary);margin-bottom:2rem;font-size:1.1rem}.section-title{color:var(--color-text);border-bottom:2px solid var(--color-primary);align-items:center;gap:.75rem;margin-bottom:1.5rem;padding-bottom:.75rem;font-size:1.4rem;font-weight:600;display:flex}.section-title .icon{font-size:1.2rem}.toast{color:#fff;border-radius:var(--radius-md);z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172aeb;padding:.9rem 1.6rem;font-size:.9rem;animation:.3s ease-out toastFadeIn;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 30px #0f172a4d,0 0 0 1px #42b8834d}.toast.toast-leaving{animation:.3s ease-in forwards toastFadeOut}@keyframes toastFadeIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.85)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes toastFadeOut{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.85)}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--color-bg-card-soft)}::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:var(--radius-pill);border:2px solid var(--color-bg-card-soft)}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}:root{--el-color-primary:#42b883;--el-color-primary-light-3:#7acda8;--el-color-primary-light-5:#a0dbc1;--el-color-primary-light-7:#c6eada;--el-color-primary-light-8:#d9f2e3;--el-color-primary-light-9:#ecf8f3;--el-color-primary-dark-2:#359369;--el-border-radius-base:8px;--el-font-family:var(--font-sans)}.el-button--primary{--el-button-bg-color:#42b883;--el-button-border-color:#42b883;--el-button-hover-bg-color:#369870;--el-button-hover-border-color:#369870;--el-button-active-bg-color:#2c8a65;--el-button-active-border-color:#2c8a65}.el-input__wrapper{border-radius:var(--radius-md)!important}.el-card{border-radius:var(--radius-lg)!important}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (width<=768px){.tool-container{padding:1rem}.converter{flex-direction:column}.converter .input-group{min-width:100%}.converter-container{flex-direction:column}.converter-container .input-section,.converter-container .output-section{min-width:100%}.page-title{font-size:1.5rem}.page-subtitle{font-size:.9rem}}