:root {
                    --primary: #7c3aed;
                    --bg: #f5f3ff;
                    --card: #ffffff;
                    --text: #2e1065;
                    --border: #ddd6fe;
                }
 
                body {
                    font-family: 'Segoe UI', Inter, sans-serif;
                    background: var(--bg);
                    color: var(--text);
                    font-size: 14px;
                    margin: 0;
                    padding: 20px;
                }
 
                .translator-section h2 {
                    font-size: 1.5rem;
                    font-weight: bold;
                    margin-bottom: 1rem;
                    color: var(--primary);
                    text-align: center;
                }
 
                .translator-section .card {
                    background: var(--card);
                    border: 1px solid var(--border);
                    padding: 20px;
                    border-radius: 12px;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                    margin-bottom: 20px;
                }
 
                .translator-section .controls {
                    display: flex;
                    gap: 15px;
                    flex-wrap: wrap;
                    align-items: flex-end;
                    margin-bottom: 15px;
                }
 
                .translator-section .control-group {
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                    flex: 1;
                    min-width: 150px;
                }
 
                .translator-section .control-group label {
                    font-weight: 700;
                    font-size: 13px;
                    color: #5b21b6;
                }
 
                .translator-section input[type="file"],
                .translator-section select,
                .translator-section input[type="number"] {
                    padding: 10px;
                    border-radius: 6px;
                    border: 1px solid #c4b5fd;
                    font-size: 14px;
                    background: #fff;
                    width: 100%;
                    box-sizing: border-box;
                }
 
                .translator-section .checkbox-group input {
                    width: 18px;
                    height: 18px;
                    cursor: pointer;
                    accent-color: var(--primary);
                }
 

                .translator-section button {
                    padding: 0 20px;
                    border-radius: 6px;
                    border: none;
                    cursor: pointer;
                    font-weight: 700;
                    transition: all 0.2s;
                    color: white;
                    background: var(--primary);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 6px;
                    height: 42px;
                }
 
                .translator-section button:hover:not(:disabled) {
                    opacity: 0.9;
                    transform: translateY(-1px);
                }
 
                .translator-section button:disabled {
                    background: #cbd5e1;
                    cursor: not-allowed;
                }
 
                .translator-section .btn-secondary {
                    background: #64748b;
                }
 
                .translator-section .btn-success {
                    background: #16a34a;
                }
 
                .translator-section .progress-container {
                    margin-top: 20px;
                    background: #e2e8f0;
                    border-radius: 8px;
                    height: 24px;
                    overflow: hidden;
                    position: relative;
                }
 
                .translator-section .progress-bar {
                    height: 100%;
                    background: linear-gradient(90deg, #7c3aed, #a78bfa);
                    width: 0%;
                    transition: width 0.2s;
                }
 
                .translator-section .progress-text {
                    position: absolute;
                    width: 100%;
                    text-align: center;
                    top: 0;
                    line-height: 24px;
                    font-size: 12px;
                    color: #fff;
                    font-weight: bold;
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
                }
 
                .translator-section .log-console {
                    background: #1e1e1e;
                    color: #e5e5e5;
                    font-family: Consolas, monospace;
                    font-size: 12px;
                    height: 160px;
                    overflow-y: auto;
                    padding: 12px;
                    border-radius: 8px;
                    margin-top: 15px;
                    border: 1px solid #333;
                }
 
                .translator-section .log-item {
                    border-bottom: 1px solid #333;
                    padding: 2px 0;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: flex;
                    align-items: center;
                }
 
                .translator-section .tag {
                    padding: 2px 6px;
                    border-radius: 4px;
                    font-size: 10px;
                    margin-right: 8px;
                    font-weight: bold;
                    min-width: 50px;
                    text-align: center;
                }
 
                .translator-section .tag-auto {
                    background: #8b5cf6;
                    color: #fff;
                }
 
                .translator-section .tag-en {
                    background: #2563eb;
                    color: #fff;
                }
 
                .translator-section .tag-ja {
                    background: #dc2626;
                    color: #fff;
                }
 
                .translator-section .tag-zh {
                    background: #ea580c;
                    color: #fff;
                }
 
                .translator-section .tag-ko {
                    background: #0891b2;
                    color: #fff;
                }
 
                .translator-section .tag-skip {
                    background: #4b5563;
                    color: #bbb;
                }
 
                .translator-section .tag-ok {
                    background: #059669;
                    color: #fff;
                }
 
                .translator-section .tag-exist {
                    background: #059669;
                    color: #fff;
                    border: 1px solid #fff;
                }
 
                .translator-section textarea {
                    width: 100%;
                    height: 250px;
                    padding: 12px;
                    border: 1px solid #c4b5fd;
                    border-radius: 8px;
                    font-family: Consolas, monospace;
                    background: #fff;
                    color: #333;
                    resize: vertical;
                    box-sizing: border-box;
                }

                .editor-textarea {
                    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
                    line-height: 1.5;
                    resize: vertical;
                }
 
                .wrap-on {
                    white-space: pre-wrap;
                }
 
                .wrap-off {
                    white-space: pre;
                    overflow-x: auto;
                }
 
                :root {
                    --neon-cyan: #00ffff;
                    --neon-magenta: #ff00ff;
                    --neon-green: #39ff14;
                    --neon-red: #ff1b1b;
                    --neon-yellow: #f1f759;
                    --bg-primary: #02001a;
                    --bg-secondary: rgba(14, 2, 54, 0.4);
                    --text-primary: #e0e0e0;
                    --text-secondary: #a3a1b9;
                    --border-color: rgba(0, 255, 255, 0.3);
                }
 
                * {
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                    -webkit-tap-highlight-color: transparent;
                }
 
                html {
                    scrollbar-width: thin;
                    scrollbar-color: var(--neon-cyan) var(--bg-primary);
                }
 
                body {
                    color: var(--text-primary);
                    font-family: 'Roboto Mono', monospace;
                    line-height: 1.7;
                    padding: 16px;
                    overflow-x: hidden;
                    min-height: 100vh;
                    background: #13233d;
                    background: linear-gradient(145deg,
                            rgba(18, 37, 60, 1) 0%,
                            rgba(36, 10, 56, 1) 25%,
                            rgba(63, 16, 88, 1) 45%,
                            rgba(47, 25, 82, 1) 60%,
                            rgba(22, 42, 72, 1) 80%,
                            rgba(14, 32, 54, 1) 100%);
                    background-blend-mode: screen;
                    background-size: cover;
                    background-attachment: fixed;
                    min-height: 100vh;
                }
 
                #particles-js {
                    position: fixed;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    z-index: 0;
                    pointer-events: none;
                    cursor: none;
                }
 
                h2 {
                    font-family: 'Turret Road', sans-serif;
                    text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
                    letter-spacing: 2px;
                }
 
                h1 {
                    font-size: 2rem;
                    text-align: center;
                    margin-bottom: 5px;
                    color: #fff;
                    margin-top: 20px;
                }
 
                h2 {
                    font-size: 1.5rem;
                    margin-bottom: 20px;
                    color: #fff;
                    border-bottom: 1px solid var(--border-color);
                    padding-bottom: 10px;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }
 
                .container {
                    max-width: 1000px;
                    margin: 0 auto;
                    display: flex;
                    flex-direction: column;
                    gap: 25px;
                }
 
                .card {
                    border-radius: 16px;
                    padding: 25px;
                    backdrop-filter: blur(1px);
                    -webkit-backdrop-filter: blur(1px);
                    transition: all 0.3s ease-in-out;
                    background: rgba(168, 85, 247, 0.05);
                    border: 1px solid var(--border-color);
                    box-shadow: 0 8px 32px 0 rgba(168, 85, 247, 0.15);
                    animation: slideIn 0.5s ease-out;
                }
 
                .card:hover {
                    background: rgba(168, 85, 247, 0.08);
                    border-color: rgba(168, 85, 247, 0.3);
                    transform: translateY(-5px);
                    box-shadow: 0 12px 40px 0 rgba(168, 85, 247, 0.25);
                }
 
                .form-group {
                    margin-bottom: 20px;
                }
 
                label {
                    display: block;
                    margin-bottom: 8px;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    display: block;
                    font-size: 0.750rem;
                    font-weight: 600;
                    color: rgb(192, 132, 252);
                }
 
                textarea {
                    height: 450px;
                }
 
                select,
                input,
                textarea {
                    width: 100%;
                    padding: 12px 15px;
                    border: 1px solid rgba(192, 132, 252, 0.5);
                    border-radius: 12px;
                    font-size: 1rem;
                    background-color: rgba(168, 85, 247, 0.08);
                    color: var(--text-primary);
                    font-family: 'Roboto Mono', monospace;
                    transition: all 0.2s;
                    box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.1);
                }
 
                select:focus,
                input:focus,
                textarea:focus {
                    border-color: var(--neon-cyan);
                    outline: none;
                    box-shadow: 0 0 10px var(--neon-cyan), inset 0 0 8px rgba(0, 255, 255, 0.3);
                }
 
                textarea:hover,
                .log-container:hover {
                    border-color: var(--neon-cyan);
                }
 
                input[type="file"] {
                    padding: 10px;
                }
 
                input[type="file"]::file-selector-button {
                    background: transparent;
                    border: 1px solid var(--neon-cyan);
                    color: var(--neon-cyan);
                    padding: 8px 12px;
                    border-radius: 5px;
                    cursor: pointer;
                    transition: all 0.2s;
                }
 
                input[type="file"]::file-selector-button:hover {
                    background: var(--neon-cyan);
                    color: var(--bg-primary);
                    box-shadow: 0 0 10px var(--neon-cyan);
                }
 
                button,
                .btn {
                    width: 100%;
                    padding: 14px;
                    border: 1px solid var(--neon-cyan);
                    border-radius: 12px;
                    font-size: 1rem;
                    font-weight: 700;
                    cursor: pointer;
                    transition: all 0.3s;
                    font-family: 'Turret Road', sans-serif;
                    text-transform: uppercase;
                    letter-spacing: 1.5px;
                    position: relative;
                    overflow: hidden;
                    background: transparent;
                    backdrop-filter: blur(2px);
                    color: var(--neon-cyan);
                }
 
                button:disabled,
                .btn:disabled {
                    border-color: var(--text-secondary);
                    color: var(--text-secondary);
                    cursor: not-allowed;
                    text-shadow: none;
                    box-shadow: none;
                }
 
                button:hover:not(:disabled) {
                    background-color: var(--neon-cyan);
                    color: var(--bg-primary);
                    box-shadow: 0 0 20px var(--neon-cyan);
                }
 
                .button-group {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 15px;
                }
 
                @media (min-width: 600px) {
                    .button-group {
                        grid-template-columns: repeat(3, 1fr);
                    }
                }
 
                #startBtn {
                    border-color: var(--neon-green);
                    color: var(--neon-green);
                }
 
                #startBtn:hover:not(:disabled) {
                    background-color: var(--neon-green);
                    box-shadow: 0 0 20px var(--neon-green);
                    color: var(--bg-primary);
                }
 
                #stopBtn {
                    border-color: var(--neon-yellow);
                    color: var(--neon-yellow);
                }
 
                #stopBtn:hover:not(:disabled) {
                    background-color: var(--neon-yellow);
                    box-shadow: 0 0 20px var(--neon-yellow);
                    color: var(--bg-primary);
                }
 
                .progress-container {
                    margin: 20px 0 10px;
                }
 
                progress {
                    width: 100%;
                    height: 10px;
                    border-radius: 5px;
                    background-color: rgba(0, 255, 255, 0.1);
                    border: 1px solid var(--border-color);
                }
 
                progress::-webkit-progress-bar {
                    background-color: transparent;
                    border-radius: 5px;
                }
 
                progress::-webkit-progress-value {
                    background: linear-gradient(90deg, var(--neon-magenta), var(--neon-cyan));
                    border-radius: 5px;
                    transition: width 0.3s ease;
                    box-shadow: 0 0 10px var(--neon-cyan);
                }
 
                #progressText {
                    text-align: center;
                    margin-top: 8px;
                    font-size: 0.9rem;
                    color: var(--text-secondary);
                }
 
                .log-container {
                    max-height: 350px;
                    width: auto;
                    overflow-y: auto;
                    border: 1px solid var(--border-color);
                    border-radius: 12px;
                    padding: 15px;
                    background-color: rgba(2, 0, 26, 0.7);
                    font-size: 0.9rem;
                }
 
                .log-container::-webkit-scrollbar {
                    width: 8px;
                }
 
                .log-container::-webkit-scrollbar-track {
                    background: transparent;
                }
 
                .log-container::-webkit-scrollbar-thumb {
                    background-color: var(--neon-cyan);
                    border-radius: 4px;
                }
 
                .log-entry {
                    margin-bottom: 10px;
                    padding-bottom: 10px;
                    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
                    animation: fadeIn 0.5s ease;
                }
 
                .log-success {
                    color: var(--neon-green);
                }
 
                .log-error {
                    color: var(--neon-red);
                }
 
                .log-warning {
                    color: var(--neon-yellow);
                }
 
                .log-info {
                    color: var(--neon-cyan);
                }
 
                .translation-log {
                    border-left: 2px solid var(--neon-magenta);
                    padding-left: 10px;
                    margin: 8px 0;
                }
 
                .translation-original {
                    color: var(--text-secondary);
                    word-break: break-word;
                }
 
                .translation-result {
                    color: var(--neon-green);
                    word-break: break-word;
                    font-weight: bold;
                }
 
                .translation-original strong,
                .translation-result strong {
                    text-transform: uppercase;
                    font-size: 0.8em;
                    letter-spacing: 1px;
                    color: var(--neon-magenta);
                }
 
                #downloadResultBtn,
                #previewResultBtn {
                    margin-bottom: 10px;
                    border-color: var(--neon-green);
                    color: var(--neon-green);
                }
 
                #downloadResultBtn:hover:not(:disabled),
                #previewResultBtn:hover:not(:disabled) {
                    background-color: var(--neon-green);
                    box-shadow: 0 0 20px var(--neon-green);
                    color: var(--bg-primary);
                }
 
                .help-btn {
                    display: block;
                    border: 1px solid var(--border-color);
                    color: var(--text-secondary);
                    padding: 10px 15px;
                    border-radius: 12px;
                    backdrop-filter: blur(2px);
                    text-decoration: none;
                    margin-bottom: 10px;
                    transition: all 0.2s ease;
                }
 
                .help-btn:hover {
                    border-color: var(--neon-magenta);
                    color: var(--neon-magenta);
                    background: rgba(255, 0, 255, 0.1);
                }
 
                .help-icon {
                    margin-right: 10px;
                }
 
                .modal {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(2, 0, 26, 0.8);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    z-index: 1000;
                    backdrop-filter: blur(10px);
                    padding: 15px;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.3s;
                }
 
                .modal:not(.hidden) {
                    opacity: 1;
                    visibility: visible;
                }
 
                .modal-content {
                    background-color: var(--bg-primary);
                    padding: 30px;
                    border-radius: 12px;
                    width: 100%;
                    max-width: 500px;
                    border: 1px solid var(--neon-red);
                    box-shadow: 0 0 25px rgba(255, 27, 27, 0.5);
                    transform: scale(0.95);
                    transition: transform 0.3s;
                }
 
                .modal:not(.hidden) .modal-content {
                    transform: scale(1);
                }
 
                .modal h3 {
                    font-family: 'Turret Road';
                    color: var(--neon-red);
                    text-shadow: 0 0 10px var(--neon-red);
                }
 
                .modal-footer {
                    margin-top: 25px;
                    display: flex;
                    gap: 15px;
                    justify-content: flex-end;
                }
 
                .modal ul {
                    margin: 15px 0 15px 20px;
                }
 
                .notice-box,
                .usage-tips {
                    padding: 20px;
                }
 
                .notice-list {
                    margin: 12px 0 12px 20px;
                    list-style-type: '» ';
                }
 
                .notice-list li {
                    padding-left: 10px;
                    margin-bottom: 8px;
                }
 
                strong {
                    color: var(--neon-yellow);
                }
 
                .footer-note {
                    text-align: center;
                    font-size: 0.8rem;
                    color: var(--text-secondary);
                    opacity: 0.6;
                    margin-top: 30px;
                    letter-spacing: 1px;
                }
 
                .hidden {
                    display: none !important;
                }
 
                @keyframes fadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(10px);
                    }
 
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
 
                #translationModel {
                    border: 1px solid var(--neon-magenta);
                    color: var(--neon-magenta);
                    font-weight: bold;
                }
 
                #translationModel:focus {
                    box-shadow: 0 0 10px var(--neon-magenta);
                }
 
                .back-btn {
                    display: inline-block;
                    width: auto;
                    padding: 12px 24px;
                    border: 1px solid var(--neon-cyan);
                    border-radius: 9999px;
                    font-size: 1rem;
                    font-weight: 700;
                    font-family: 'Turret Road', sans-serif;
                    text-transform: uppercase;
                    letter-spacing: 1.5px;
                    background: transparent;
                    z-index: 9999;
                    color: var(--neon-cyan);
                    text-decoration: none;
                    transition: all 0.3s ease;
                    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
                }
 
                .back-btn:hover {
                    background-color: var(--neon-cyan);
                    color: var(--bg-primary);
                    box-shadow: 0 0 20px var(--neon-cyan);
                }
 
                .grid-bg {
                    background-image:
                        linear-gradient(rgba(168, 85, 247, 0.1) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(168, 85, 247, 0.1) 1px, transparent 1px);
                    background-size: 50px 50px;
                    position: fixed;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    z-index: 0;
                    opacity: 0.3;
                    pointer-events: none;
                    cursor: none;
                }
 
                .floating {
                    animation: floating 6s ease-in-out infinite;
                }
 
                @keyframes floating {
 
                    0%,
                    100% {
                        transform: translateY(0px);
                    }
 
                    50% {
                        transform: translateY(-20px);
                    }
                }
 
                @keyframes slideIn {
                    from {
                        transform: translateY(30px);
                        opacity: 0;
                    }
 
                    to {
                        transform: translateY(0);
                        opacity: 1;
                    }
                }
 
                @media (min-width: 768px) {
                    h1 {
                        font-size: 4.5rem;
                    }
                }
 
                .tab {
                    padding: 4px 12px;
                    background: transparent;
                    color: #fff;
                    font-size: 14px;
                    user-select: none;
                    transition: 0.2s;
                    border: 1px solid rgba(192, 132, 252, 0.5);
                    border-radius: 12px;
                    background-color: rgba(168, 85, 247, 0.08);
                    color: var(--text-primary);
                    font-family: 'Roboto Mono', monospace;
                    transition: all 0.2s;
                    box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.1);
                }
 
                .tab-bar {
                    background: transparent;
                    position: relative;
                    z-index: 10;
                    display: flex;
                    overflow-x: auto;
                    white-space: nowrap;
                    scrollbar-width: thin;
                }
 
                .progress-wrapper {
                    position: relative;
                    width: 100%;
                    color: #fff;
                }
 
                .progress-container {
                    width: 100%;
                    background-color: transparent;
                    border-radius: 9999px;
                    
                    height: 18px;
                    
                    position: relative;
                    overflow: hidden;
                    border: 1px solid var(--text-secondary);
                    text-align: center;
                    display: flex;
                }
 
                .progress-bar {
                    background-color: var(--neon-green);
                    height: 100%;
                    width: 0%;
                    transition: width 0.3s ease;
                }
 
                .progress-text {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -90%);
                    font-size: 0.875rem;
                    font-weight: 500;
                    pointer-events: none;
                    white-space: nowrap;
                    color: #fff;
                }
 
                .footer-note {
                    text-align: center;
                    font-size: 0.8rem;
                    color: var(--text-secondary);
                    opacity: 0.6;
                    margin-top: 30px;
                    letter-spacing: 1px;
                }
                
                .custom-checkbox {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  cursor: pointer;
                  user-select: none;
                  font-family: Arial, sans-serif;
                  color: rgb(192, 132, 252);
                }
                
                .custom-checkbox input {
                  position: absolute;
                  opacity: 0;
                  width: 0;
                  height: 0;
                }
                
                .checkmark {
                  width: 22px;
                  height: 22px;
                  border-radius: 6px;
                  border: 2px solid var(--neon-magenta);
                  transition: all 0.25s ease;
                  position: relative;
                }
                
                .custom-checkbox:hover .checkmark {
                  border-color: var(--neon-cyan);
                }
                
                .checkmark::after {
                  content: "";
                  position: absolute;
                  width: 7px;
                  height: 14px;
                  border-right: 3px solid white;
                  border-bottom: 3px solid white;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, calc(-50% - 2px));
                
                  opacity: 0;
                  transition: 0.25s;
                }
                
                .custom-checkbox input:checked + .checkmark {
                  background: #4166F5;
                  border-color: transparent;
                }
                
                .custom-checkbox input:checked + .checkmark::after {
                  opacity: 1;
                  transform: translate(-50%, calc(-50% - 2px)) rotate(45deg) scale(1);
                }