:root{--primary-color: #3b82f6;--primary-hover: #2563eb;--primary-active: #1d4ed8;--secondary-color: #60a5fa;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--bg-primary: #ffffff;--bg-secondary: #f9fafb;--bg-tertiary: #f3f4f6;--text-primary: #1f2937;--text-secondary: #4b5563;--text-tertiary: #9ca3af;--text-light: #f9fafb;--border-color: #e5e7eb;--border-hover: #d1d5db;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--radius-sm: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--transition-fast: .15s ease-in-out;--transition-normal: .2s ease-in-out;--transition-slow: .3s ease-in-out}@media (prefers-color-scheme: dark){:root{--bg-primary: #111827;--bg-secondary: #1f2937;--bg-tertiary: #374151;--text-primary: #f9fafb;--text-secondary: #e5e7eb;--text-tertiary: #9ca3af;--border-color: #374151;--border-hover: #4b5563}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-secondary);color:var(--text-primary);line-height:1.6}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app-container{min-height:100vh;padding:var(--space-6);display:flex;flex-direction:column}.header{text-align:center;margin-bottom:var(--space-12);padding:var(--space-8) 0}.header h1{color:var(--primary-color);font-size:var(--text-4xl);font-weight:var(--font-bold);margin-bottom:var(--space-3);letter-spacing:-.025em;transition:color var(--transition-normal)}.header h1:hover{color:var(--primary-hover)}.header p{color:var(--text-secondary);font-size:var(--text-lg);max-width:800px;margin:0 auto}.content-container{min-width:95%;max-width:1600px;margin:0 auto;flex:1}.card{background:var(--bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:var(--space-8);margin-bottom:var(--space-8);transition:all var(--transition-normal);border:1px solid var(--border-color)}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card-title{font-size:var(--text-2xl);font-weight:var(--font-semibold);margin-bottom:var(--space-6);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-3)}.upload-area{border:2px dashed var(--border-color);border-radius:var(--radius-lg);padding:var(--space-12);text-align:center;transition:all var(--transition-normal);background-color:var(--bg-secondary);cursor:pointer}.upload-area:hover{border-color:var(--primary-color);background-color:#3b82f60d}.upload-area.dragging{border-color:var(--primary-color);background-color:#3b82f61a;transform:scale(1.02)}.custom-upload-area{margin:var(--space-6) 0}.upload-zone{border:3px dashed var(--border-color);padding:var(--space-12);text-align:center;transition:all var(--transition-normal);background-color:var(--bg-secondary);cursor:pointer;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}.upload-zone:hover{border-color:var(--primary-color);background-color:#3b82f60d;box-shadow:var(--shadow-md);transform:translateY(-2px)}.upload-zone.dragging{border-color:var(--primary-color);background-color:#3b82f61a;box-shadow:var(--shadow-lg);transform:translateY(-4px) scale(1.02)}.upload-zone h3{margin:0;font-size:var(--text-xl);color:var(--text-primary);font-weight:var(--font-semibold)}.upload-zone p{margin:0;font-size:var(--text-base);color:var(--text-tertiary);line-height:1.4;max-width:80%}.ant-upload-input{display:none!important}.custom-tabs-container{margin-bottom:var(--space-6)}.custom-tabs{display:flex;position:relative;background-color:var(--bg-secondary);border-radius:var(--radius-xl);padding:var(--space-2);overflow:hidden}.custom-tab{flex:1;padding:var(--space-4) var(--space-6);text-align:center;cursor:pointer;border-radius:var(--radius-lg);transition:all var(--transition-normal);position:relative;z-index:2;font-size:var(--text-base);font-weight:var(--font-medium);color:var(--text-secondary)}.custom-tab:hover{color:var(--primary-hover);background-color:#3b82f60d}.custom-tab.active{color:var(--primary-color);font-weight:var(--font-semibold)}.tab-slider{position:absolute;top:var(--space-2);bottom:var(--space-2);left:0;width:47.75%;background-color:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .4s cubic-bezier(.4,0,.2,1),width .4s cubic-bezier(.4,0,.2,1);z-index:1}@media (max-width: 768px){.custom-tab{padding:var(--space-3) var(--space-4);font-size:var(--text-sm)}.tab-slider{top:var(--space-1);bottom:var(--space-1)}}.tab-content-container{position:relative;overflow:hidden;min-height:500px;margin-top:var(--space-6)}.tab-content{position:absolute;top:0;left:0;width:100%;min-height:500px;opacity:0;transform:translate(100%);transition:all .4s cubic-bezier(.4,0,.2,1);visibility:hidden;z-index:1}.tab-content.active{opacity:1;transform:translate(0);visibility:visible;z-index:2}.tab-content.animating.prev-upload:not(.active){transform:translate(-100%);opacity:0}.tab-content.animating.prev-upload.active{transform:translate(0);opacity:1}.tab-content.animating.prev-download:not(.active){transform:translate(100%);opacity:0}.tab-content.animating.prev-download.active{transform:translate(0);opacity:1}.tab-content.animating{visibility:visible!important;z-index:2!important}.code-display{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;margin-top:var(--space-6);transition:all var(--transition-normal);box-shadow:var(--shadow-sm)}.code-display:hover{box-shadow:var(--shadow-md)}.code-display .code{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--primary-color);letter-spacing:4px;margin:var(--space-4) 0;font-family:Courier New,monospace;background:var(--bg-primary);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);display:inline-block;box-shadow:var(--shadow-sm)}.code-display .label{color:var(--text-secondary);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.1em;font-weight:var(--font-medium)}.file-info{margin-top:var(--space-6);background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}.file-info-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4);padding:var(--space-4);background-color:var(--bg-primary);border-radius:var(--radius-md);transition:all var(--transition-fast);border:1px solid var(--border-color)}.file-info-item:hover{border-color:var(--primary-color);box-shadow:var(--shadow-sm)}.file-info-item .label{font-weight:var(--font-medium);color:var(--text-secondary);font-size:var(--text-sm);text-transform:capitalize}.file-info-item .value{color:var(--text-primary);font-weight:var(--font-normal);font-size:var(--text-base)}.download-section{max-width:600px;margin:0 auto}.code-input{width:100%;margin-bottom:var(--space-6)}.code-input input{font-size:var(--text-xl);text-align:center;letter-spacing:4px;padding:var(--space-4)!important;border-radius:var(--radius-lg)!important;border:2px solid var(--border-color)!important;transition:all var(--transition-normal)!important}.code-input input:focus{border-color:var(--primary-color)!important;box-shadow:0 0 0 3px #3b82f61a!important}.btn{transition:all var(--transition-normal);font-weight:var(--font-medium);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-6);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer;border:none;font-size:var(--text-base)}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-primary:active{background:var(--primary-active);transform:translateY(0)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-secondary);border-color:var(--primary-color)}.form-item{margin-bottom:var(--space-6)}.form-label{display:block;margin-bottom:var(--space-2);font-weight:var(--font-medium);color:var(--text-primary);font-size:var(--text-sm)}.form-control{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:var(--text-base);transition:all var(--transition-normal);background:var(--bg-primary);color:var(--text-primary)}.form-control:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3b82f61a}select:focus,.ant-select-selector:focus,.ant-select-selector:focus-within{outline:none!important;box-shadow:0 0 0 3px #3b82f61a!important;border-color:var(--primary-color)!important}.ant-select-item-option-active,.ant-select-item-option-selected{color:var(--primary-color)!important}.ant-select-item-option-selected{background-color:#3b82f60d!important}.progress-bar{width:100%;height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden;margin:var(--space-4) 0}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));border-radius:4px;transition:width var(--transition-fast);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-size:12px;font-weight:var(--font-medium)}@media (max-width: 1600px){.content-container{max-width:95%}}@media (max-width: 1200px){.card{padding:var(--space-6)}.header h1{font-size:var(--text-3xl)}}@media (max-width: 768px){.app-container{padding:var(--space-3)}.header{margin-bottom:var(--space-6);padding:var(--space-4) 0}.header h1{font-size:var(--text-2xl);margin-bottom:var(--space-2)}.header p{font-size:var(--text-base);max-width:90%}.content-container{max-width:100%}.card{padding:var(--space-4);margin-bottom:var(--space-4)}.card-title{font-size:var(--text-xl);margin-bottom:var(--space-4)}.custom-tabs-container{margin-bottom:var(--space-4)}.custom-tab{padding:var(--space-3) var(--space-4);font-size:var(--text-sm)}.upload-area{padding:var(--space-6);min-height:250px}.upload-zone{padding:var(--space-8);min-height:250px}.code-display{padding:var(--space-4);margin-top:var(--space-4)}.code-display .code{font-size:var(--text-xl);letter-spacing:2px;padding:var(--space-2) var(--space-3);margin:var(--space-3) 0}.file-info{padding:var(--space-3);margin-top:var(--space-4)}.file-info-item{flex-direction:column;align-items:flex-start;gap:var(--space-1);padding:var(--space-2);margin-bottom:var(--space-3)}.file-info-item .value{margin-top:var(--space-1);align-self:flex-end}.form-item,.code-input{margin-bottom:var(--space-4)}.upload-progress{margin-top:var(--space-4)}.tab-content-container{min-height:400px;margin-top:var(--space-4)}.tab-content{min-height:400px}.custom-upload-area{margin:var(--space-4) 0}.btn{padding:var(--space-2) var(--space-4);font-size:var(--text-sm)}.progress-bar{margin:var(--space-3) 0}}@media (max-width: 480px){.app-container{padding:var(--space-2)}.header{margin-bottom:var(--space-4);padding:var(--space-3) 0}.header h1{font-size:var(--text-xl);margin-bottom:var(--space-1)}.header p{font-size:var(--text-sm);max-width:95%}.card{padding:var(--space-3);margin-bottom:var(--space-3)}.card-title{font-size:var(--text-lg);margin-bottom:var(--space-3)}.custom-tab{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.upload-area{padding:var(--space-4);min-height:200px}.upload-zone{padding:var(--space-6);min-height:200px}.upload-zone h3{font-size:var(--text-base)}.upload-zone p{font-size:var(--text-sm);max-width:95%}.code-display{padding:var(--space-3);margin-top:var(--space-3)}.code-display .code{font-size:var(--text-lg);letter-spacing:1px;padding:var(--space-1) var(--space-2);margin:var(--space-2) 0}.file-info{padding:var(--space-2);margin-top:var(--space-3)}.file-info-item{padding:var(--space-1);margin-bottom:var(--space-2)}.form-item,.code-input{margin-bottom:var(--space-3)}.code-input input{font-size:var(--text-base);letter-spacing:1px;padding:var(--space-3)!important}.tab-content-container{min-height:350px;margin-top:var(--space-3)}.tab-content{min-height:350px}.custom-upload-area{margin:var(--space-3) 0}.btn{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.progress-bar{margin:var(--space-2) 0}.tab-slider{top:var(--space-1);bottom:var(--space-1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn var(--transition-slow) ease-out}.hover-lift{transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--border-color);border-radius:50%;border-top-color:var(--primary-color);animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.tag{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full, 9999px);font-size:var(--text-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.05em}.tag-primary{background:#3b82f61a;color:var(--primary-color)}.tag-success{background:#10b9811a;color:var(--success-color)}.tag-warning{background:#f59e0b1a;color:var(--warning-color)}.tag-error{background:#ef44441a;color:var(--error-color)}:root{--radius-full: 9999px}