:root{--bg-primary:#0d1117;--bg-secondary:#161b22;--bg-tertiary:#21262d;--bg-hover:#30363d;--text-primary:#e6edf3;--text-secondary:#8b949e;--text-muted:#6e7681;--accent-primary:#58a6ff;--accent-secondary:#388bfd;--accent-success:#3fb950;--accent-warning:#d29922;--accent-danger:#f85149;--accent-purple:#a371f7;--border-color:#30363d;--border-light:#21262d;--shadow-sm:0 1px 2px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 8px 24px rgba(0,0,0,0.5);--shadow-glow:0 0 20px rgba(88,166,255,0.3);--border-radius-sm:6px;--border-radius-md:10px;--border-radius-lg:16px;--transition-fast:0.15s ease;--transition-normal:0.25s ease;--transition-slow:0.4s ease;--input-background:#0d1117;--input-border:#30363d;--input-focus:#58a6ff;--gradient-primary:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--gradient-accent:linear-gradient(135deg,#58a6ff 0%,#a371f7 100%);--gradient-success:linear-gradient(135deg,#3fb950 0%,#2ea043 100%);--gradient-danger:linear-gradient(135deg,#f85149 0%,#da3633 100%)}[data-theme="light"]{--bg-primary:#ffffff;--bg-secondary:#f6f8fa;--bg-tertiary:#eaeef2;--bg-hover:#d0d7de;--text-primary:#1f2328;--text-secondary:#656d76;--text-muted:#8c959f;--accent-primary:#0969da;--accent-secondary:#0550ae;--accent-success:#1a7f37;--accent-warning:#9a6700;--accent-danger:#cf222e;--accent-purple:#8250df;--border-color:#d0d7de;--border-light:#eaeef2;--shadow-sm:0 1px 2px rgba(31,35,40,0.08);--shadow-md:0 4px 12px rgba(31,35,40,0.12);--shadow-lg:0 8px 24px rgba(31,35,40,0.16);--shadow-glow:0 0 20px rgba(9,105,218,0.2);--input-background:#ffffff;--input-border:#d0d7de;--input-focus:#0969da;--gradient-primary:linear-gradient(135deg,#0969da 0%,#8250df 100%);--gradient-accent:linear-gradient(135deg,#0969da 0%,#8250df 100%)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;transition:background-color var(--transition-normal),color var(--transition-normal)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:5px}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px;border:2px solid var(--bg-secondary)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.main-container{max-width:900px;margin:0 auto;padding:24px;animation:fadeInUp 0.5s ease-out}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border-color)}.header h1{font-size:1.75rem;font-weight:600;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;gap:12px}.header h1::before{content:"\f5c3";font-family:"Font Awesome 7 Free";font-weight:900;-webkit-text-fill-color:var(--accent-primary);font-size:1.5rem}.theme-toggle{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.theme-toggle::before{content:"\f186";font-family:"Font Awesome 7 Free";font-weight:900;font-size:16px}[data-theme="light"] .theme-toggle::before{content:"\f185"}.theme-toggle:active{transform:scale(0.96);background:var(--bg-hover)}@media (hover:hover){.theme-toggle:hover{background:var(--bg-hover);border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}}.tab-navigation{display:flex;gap:8px;margin-bottom:24px;padding:6px;background:var(--bg-secondary);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);overflow-x:auto}.tab-button{flex:1;min-width:max-content;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:transparent;color:var(--text-secondary);border:none;border-radius:var(--border-radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.tab-button[data-tab="ascii-unicode"]::before{content:"\f121";font-family:"Font Awesome 7 Free";font-weight:900}.tab-button[data-tab="qq-emoji"]::before{content:"\f118";font-family:"Font Awesome 7 Free";font-weight:400}.tab-button[data-tab="control-chars"]::before{content:"\f11c";font-family:"Font Awesome 7 Free";font-weight:400}.tab-button.active{background:var(--accent-primary);color:#ffffff;box-shadow:var(--shadow-md)}.tab-button:active{transform:scale(0.97)}@media (hover:hover){.tab-button:not(.active):hover{background:var(--bg-hover);color:var(--text-primary)}}.tab-content{display:none;animation:fadeIn 0.3s ease}.tab-content.active{display:block}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);padding:24px;margin-bottom:20px;transition:all var(--transition-normal)}@media (hover:hover){.section:hover{border-color:var(--border-color);box-shadow:var(--shadow-md)}}.section h2{font-size:1.15rem;font-weight:600;color:var(--text-primary);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;gap:10px}.section h2::before{content:"\f0e7";font-family:"Font Awesome 7 Free";font-weight:900;color:var(--accent-primary);font-size:1rem}.section p{color:var(--text-secondary);font-size:14px;margin-bottom:16px;line-height:1.7}label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:6px;margin-top:14px}label:first-of-type{margin-top:0}input[type="text"],input[type="number"],textarea{width:100%;padding:12px 16px;background:var(--input-background);color:var(--text-primary);border:1px solid var(--input-border);border-radius:var(--border-radius-md);font-size:14px;font-family:inherit;transition:all var(--transition-fast);margin-bottom:12px}input[type="text"]:focus,input[type="number"]:focus,textarea:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px rgba(88,166,255,0.15)}input::placeholder,textarea::placeholder{color:var(--text-muted)}textarea{min-height:100px;resize:vertical}select{width:100%;padding:12px 40px 12px 16px;background:var(--input-background);color:var(--text-primary);border:1px solid var(--input-border);border-radius:var(--border-radius-md);font-size:14px;font-family:inherit;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b949e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;transition:all var(--transition-fast);margin-bottom:12px}select:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px rgba(88,166,255,0.15)}.select2-container--default .select2-selection--single{height:44px;padding:8px 16px;background:var(--input-background);border:1px solid var(--input-border);border-radius:var(--border-radius-md);transition:all var(--transition-fast)}.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--text-primary);line-height:26px;padding-left:0}.select2-container--default .select2-selection--single .select2-selection__arrow{height:42px;right:12px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--text-secondary) transparent transparent transparent}.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--input-focus);box-shadow:0 0 0 3px rgba(88,166,255,0.15)}.select2-container--default .select2-results__option{padding:10px 16px;color:var(--text-primary)}.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--accent-primary);color:#ffffff}.select2-dropdown{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);overflow:hidden}.select2-search--dropdown .select2-search__field{background:var(--input-background);color:var(--text-primary);border:1px solid var(--input-border);border-radius:var(--border-radius-sm);padding:10px 14px}.select2-search--dropdown .select2-search__field:focus{outline:none;border-color:var(--input-focus)}.select2-results{background:var(--bg-secondary)}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;font-family:inherit;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.section>button:not(.copy-button):not(.clear-button),#btnConvertAscii,#btnConvertUnicode,#btnGenerateConvert,#btnGenerateSingle,#btnGenerateSequence,#btnReverseEmoji,#btnGenerateText{background:var(--gradient-accent);color:#ffffff;margin-top:8px;margin-bottom:16px;box-shadow:var(--shadow-sm)}.section>button:not(.copy-button):not(.clear-button)::before,#btnConvertAscii::before,#btnConvertUnicode::before{content:"\f2f1";font-family:"Font Awesome 7 Free";font-weight:900}#btnGenerateConvert::before,#btnGenerateSingle::before,#btnGenerateSequence::before{content:"\f0d0";font-family:"Font Awesome 7 Free";font-weight:900}#btnReverseEmoji::before{content:"\f002";font-family:"Font Awesome 7 Free";font-weight:900}#btnGenerateText::before{content:"\f1fc";font-family:"Font Awesome 7 Free";font-weight:900}.section>button:not(.copy-button):not(.clear-button):active,#btnConvertAscii:active,#btnConvertUnicode:active,#btnGenerateConvert:active,#btnGenerateSingle:active,#btnGenerateSequence:active,#btnReverseEmoji:active,#btnGenerateText:active{transform:scale(0.97);box-shadow:none}@media (hover:hover){.section>button:not(.copy-button):not(.clear-button):hover,#btnConvertAscii:hover,#btnConvertUnicode:hover,#btnGenerateConvert:hover,#btnGenerateSingle:hover,#btnGenerateSequence:hover,#btnReverseEmoji:hover,#btnGenerateText:hover{transform:translateY(-2px);box-shadow:var(--shadow-md),var(--shadow-glow)}}.copy-button{background:var(--accent-success);color:#ffffff;margin-right:8px}.copy-button::before{content:"\f0c5";font-family:"Font Awesome 7 Free";font-weight:400}.copy-button:active{transform:scale(0.97);background:#2ea043}@media (hover:hover){.copy-button:hover{background:#2ea043;transform:translateY(-2px);box-shadow:var(--shadow-md)}}.clear-button{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color)}.clear-button::before{content:"\f2ed";font-family:"Font Awesome 7 Free";font-weight:400}.clear-button:active{transform:scale(0.97);background:var(--bg-hover)}@media (hover:hover){.clear-button:hover{color:var(--accent-danger);border-color:var(--accent-danger);background:rgba(248,81,73,0.1)}}.output{background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:var(--border-radius-md);padding:16px;margin-bottom:16px;min-height:60px;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;font-size:14px;color:var(--text-primary);word-break:break-all;white-space:pre-wrap;line-height:1.7;position:relative}.output:empty::before{content:"结果将在这里显示...";color:var(--text-muted);font-style:italic;font-family:inherit}#reverseOutput{max-height:300px;overflow-y:auto;overflow-x:hidden}#sequenceOutput,#numberOutput{max-height:180px;overflow-y:auto;overflow-x:hidden}#asciiOutput,#unicodeOutput,#singleEmojiOutput,#text-inserter-output{max-height:120px;overflow-y:auto;overflow-x:hidden}.image-preview{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:var(--border-radius-md);margin-bottom:16px;min-height:50px;max-height:220px;overflow-y:auto;align-content:flex-start}.image-preview:empty{display:none}.image-preview img{height:40px;width:40px;object-fit:contain;border-radius:var(--border-radius-sm);background:var(--bg-secondary);padding:4px;transition:transform var(--transition-fast);flex-shrink:0}@media (hover:hover){.image-preview img:hover{transform:scale(1.3);z-index:10;box-shadow:var(--shadow-md)}}.direct-copy-section{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px 18px;background:var(--bg-tertiary);border:1px solid var(--border-light);border-radius:var(--border-radius-md);margin-bottom:12px}.direct-copy-section span{font-size:14px;color:var(--text-secondary)}.direct-copy-section code{background:var(--bg-primary);color:var(--accent-purple);padding:3px 8px;border-radius:var(--border-radius-sm);font-family:"SFMono-Regular",Consolas,monospace;font-size:13px;border:1px solid var(--border-color)}.direct-copy-section .copy-button{padding:8px 16px;font-size:13px}.control-char-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.control-char-buttons button{background:var(--bg-tertiary);color:var(--accent-primary);border:1px solid var(--accent-primary);padding:10px 18px}.control-char-buttons button::before{content:"\f067";font-family:"Font Awesome 7 Free";font-weight:900;font-size:12px}.control-char-buttons button:active{transform:scale(0.97);background:var(--accent-primary);color:#ffffff}@media (hover:hover){.control-char-buttons button:hover{background:var(--accent-primary);color:#ffffff}}.reverse-item{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px dashed var(--border-light)}.reverse-item:last-child{border-bottom:none;padding-bottom:0}.reverse-item img{width:44px;height:44px;border-radius:var(--border-radius-sm);background:var(--bg-secondary);padding:4px;flex-shrink:0}.reverse-item span{font-size:13px;color:var(--text-secondary);line-height:1.6}.reverse-img-error{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px dashed var(--border-color);border-radius:var(--border-radius-sm);color:var(--text-muted);font-size:11px;font-family:"SFMono-Regular",Consolas,monospace;flex-shrink:0}.copy-alert{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--accent-success);color:#ffffff;padding:14px 28px;border-radius:var(--border-radius-lg);font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:all 0.35s cubic-bezier(0.68,-0.55,0.265,1.55);z-index:9999;display:flex;align-items:center;gap:10px}.copy-alert::before{content:"\f00c";font-family:"Font Awesome 7 Free";font-weight:900;font-size:16px}.copy-alert.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}@media (max-width:768px){.main-container{padding:16px}.header{flex-direction:column;align-items:flex-start}.header h1{font-size:1.4rem}.tab-navigation{flex-direction:column}.tab-button{justify-content:flex-start;padding:14px 18px}.section{padding:18px}.section h2{font-size:1.05rem}button{width:100%;justify-content:center}.copy-button,.clear-button{flex:1}.section>.copy-button,.section>.clear-button{margin-bottom:8px}.direct-copy-section{flex-direction:column;align-items:flex-start}.direct-copy-section .copy-button{width:100%}}.button-group{display:flex;gap:10px;flex-wrap:wrap}.button-group .copy-button,.button-group .clear-button{flex:1;min-width:120px}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}.loading{animation:pulse 1.5s ease-in-out infinite}[data-tooltip]{position:relative}[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-8px);background:var(--bg-tertiary);color:var(--text-primary);padding:8px 12px;border-radius:var(--border-radius-sm);font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transition:all var(--transition-fast);pointer-events:none;box-shadow:var(--shadow-md);border:1px solid var(--border-color);z-index:100}@media (hover:hover){[data-tooltip]:hover::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-4px)}}