:root {--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--bg-base: #fcfaf2;--bg-surface: #ffffff;--text-primary: #2a2010;--text-secondary: #6b6150;--brand-primary: #8a6d00;--brand-secondary: #9e7d00;--accent: #b59410;--btn-shadow: rgba(138, 109, 0, 0.3);--border-color: #e8e2d0;--glass-bg: rgba(255, 255, 255, 0.75);--shadow-lg: 0 15px 30px -5px rgba(138, 109, 0, 0.15), 0 8px 12px -5px rgba(0, 0, 0, 0.05);--card-radius: 24px;--success-bg: rgba(16, 185, 129, 0.1);--success-border: rgba(16, 185, 129, 0.2);--success-text: #059669;}html[data-theme="dark"] {--bg-base: #1a1608;--bg-surface: #241f0c;--text-primary: #fcfaf2;--text-secondary: #b0a898;--brand-primary: #d4af37;--brand-secondary: #e6c645;--btn-shadow: rgba(212, 175, 55, 0.5);--border-color: #403820;--glass-bg: rgba(36, 31, 12, 0.85);--shadow-lg: 0 15px 30px -5px rgba(0, 0, 0, 0.6);}* {margin: 0;padding: 0;box-sizing: border-box;font-family: var(--font-family);transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.3s ease;-webkit-font-smoothing: antialiased;}body {background-color: var(--bg-base);color: var(--text-primary);overflow-x: hidden;line-height: 1.5;}.container {max-width: 1280px;margin: 0 auto;padding: 0 24px;}.d-none {display: none !important;}.d-flex {display: flex !important;}.d-block {display: block !important;}.mt-8 {margin-top: 8px;}.mt-12 {margin-top: 12px;}.mb-8 {margin-bottom: 8px;}.mb-12 {margin-bottom: 12px;}.w-full {width: 100%;}.max-w-200 {max-width: 200px;}.color-primary {color: var(--brand-primary);}.color-secondary {color: var(--text-secondary);}.text-sm {font-size: 12px;}.text-xs {font-size: 11px;}.text-lg {font-size: 18px;}.font-normal {font-weight: 400;}.font-semibold {font-weight: 600;}.tracking-wide {letter-spacing: 0.5px;}.justify-center {justify-content: center;}.align-end {align-items: flex-end;}.noselect {user-select: none;-webkit-user-select: none;-ms-user-select: none;}@keyframes fadeInUp {from {opacity: 0;transform: translateY(15px);}to {opacity: 1;transform: translateY(0);}}@keyframes fadeOutDown {from {opacity: 1;transform: translateY(0);}to {opacity: 0;transform: translateY(15px);}}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}@keyframes fadeOut {from {opacity: 1;}to {opacity: 0;}}.fade-in-up {animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;}.fade-in {animation: fadeIn 0.3s ease forwards;}.icon {display: inline-block;vertical-align: middle;}.flex-center {display: flex;align-items: center;justify-content: center;gap: 8px;}nav {padding: 24px 0;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid var(--border-color);}.pixgo-logo-text .pix {color: var(--brand-primary) !important;}.pixgo-logo-text .go {color: #000000 !important;}.title-pix{color: var(--brand-primary) !important;}[data-theme="dark"] .pixgo-logo-text .go {color: #ffffff !important;}.logo-container {display: flex;align-items: center;gap: 12px;cursor: default;}.logo-img {width: 32px;height: 32px;object-fit: contain;}.logo {font-size: 28px;font-weight: 800;letter-spacing: -1px;}.theme-toggle {background: var(--bg-surface);border: 1px solid var(--border-color);color: var(--text-primary);width: 44px;height: 44px;border-radius: 50%;cursor: pointer;box-shadow: var(--shadow-sm);transition: transform 0.2s ease, background-color 0.3s ease;}.theme-toggle:hover {border-color: var(--brand-primary);transform: scale(1.05);}.theme-toggle:active {transform: scale(0.95);}.hero {text-align: center;padding: 60px 0 40px;}.hero h1 {font-size: 48px;font-weight: 800;line-height: 1.1;margin-bottom: 20px;color: var(--text-primary);}.hero p {font-size: 18px;color: var(--text-secondary);max-width: 650px;margin: 0 auto;font-weight: 400;}.cvt-app-wrapper {max-width: 900px;margin: 0 auto 60px;background: var(--glass-bg);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border: 1px solid var(--border-color);border-radius: var(--card-radius);box-shadow: var(--shadow-lg);padding: 40px;position: relative;}.list-header {display: none;justify-content: space-between;align-items: center;margin-bottom: 12px;}.list-header.active {display: flex;}.list-header h3 {font-size: 16px;font-weight: 700;}.btn-clear-all {background: rgba(239, 68, 68, 0.1);color: #ef4444;border: 1px solid rgba(239, 68, 68, 0.2);padding: 6px 12px;border-radius: 8px;font-size: 13px;font-weight: 700;cursor: pointer;transition: all 0.2s ease;}.btn-clear-all:hover {background: #ef4444;color: white;transform: translateY(-1px);}.btn-clear-all:active {transform: scale(0.96);}.success-msg-box {background: var(--success-bg);border: 1px solid var(--success-border);color: var(--success-text);padding: 12px 16px;border-radius: 12px;font-weight: 600;font-size: 14px;margin-bottom: 16px;display: none;align-items: center;gap: 8px;}.success-msg-box.active {display: flex;animation: fadeInUp 0.4s ease forwards;}.file-list {display: none;flex-direction: column;gap: 12px;margin-bottom: 24px;max-height: 350px;overflow-y: auto;padding-right: 5px;}.file-list.active {display: flex;}.file-item-card {background: var(--bg-surface);border: 1px solid var(--border-color);border-radius: 12px;overflow: hidden;display: flex;flex-direction: column;animation: fadeInUp 0.4s ease;}.file-main-row {display: flex;justify-content: space-between;align-items: center;padding: 12px;gap: 8px;}.file-info {display: flex;align-items: center;gap: 12px;flex: 1;min-width: 0;}.file-thumb {width: 44px;height: 44px;border-radius: 8px;object-fit: cover;border: 1px solid var(--border-color);flex-shrink: 0;background: var(--bg-base);}.file-text-wrapper {flex: 1;min-width: 0;}.file-name-title {font-size: 14px;margin-bottom: 2px;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: var(--text-primary);}.file-size-text {font-size: 12px;color: var(--text-secondary);white-space: nowrap;}.file-actions {display: flex;gap: 6px;flex-shrink: 0;align-items: center;}.btn-icon {background: var(--bg-base);border: 1px solid var(--border-color);color: var(--text-primary);border-radius: 8px;padding: 6px 10px;cursor: pointer;font-size: 14px;font-weight: 600;display: flex;align-items: center;justify-content: center;transition: all 0.2s ease;}.btn-icon:hover {border-color: var(--brand-primary);color: var(--brand-primary);transform: translateY(-2px);}.btn-icon:active {transform: scale(0.9);}.btn-dl-single {background: var(--brand-primary);color: white;border-color: var(--brand-primary);}.btn-dl-single:hover {background: var(--brand-secondary);color: white;}.btn-remove {color: #ef4444;}.btn-remove:hover {color: #dc2626;border-color: #ef4444;}.progress-container {width: 100%;height: 4px;background: var(--border-color);display: none;}.progress-bar {height: 100%;width: 0%;background: var(--brand-primary);transition: width 0.3s ease;}.file-status-text {font-size: 11px;padding: 4px 12px;background: rgba(181, 148, 16, 0.1);color: var(--brand-primary);font-weight: 700;display: none;justify-content: space-between;}.dropzone {border: 2px dashed var(--brand-secondary);border-radius: 16px;padding: 50px 24px;text-align: center;cursor: pointer;background: rgba(212, 175, 55, 0.03);margin-bottom: 32px;transition: all 0.3s ease;}html[data-theme="dark"] .dropzone {background: rgba(212, 175, 55, 0.06);}.dropzone:hover, .dropzone.active {background: rgba(212, 175, 55, 0.1);border-color: var(--brand-primary);transform: translateY(-2px);}.dropzone-icon {color: var(--brand-primary);margin-bottom: 12px;display: flex;justify-content: center;transition: transform 0.3s ease;}.dropzone:hover .dropzone-icon {transform: scale(1.1);}.dropzone h3 {font-size: 20px;margin-bottom: 8px;font-weight: 700;}.settings-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 24px;margin-bottom: 24px;background: var(--bg-surface);padding: 24px;border-radius: 16px;border: 1px solid var(--border-color);transition: opacity 0.4s ease;}.form-group {display: flex;flex-direction: column;gap: 8px;}.form-group.full-width {grid-column: 1 / -1 !important;display: block !important;width: 100% !important;}.form-row {display: flex;gap: 12px;width: 100%;align-items: center;}label {font-size: 14px;font-weight: 600;color: var(--text-primary);display: flex;justify-content: space-between;align-items: center;}select, input[type="number"], input[type="text"], #renamePattern {width: 100%;padding: 12px 16px;border-radius: 10px;border: 1px solid var(--border-color);background: var(--bg-base);color: var(--text-primary);font-size: 14px;outline: none;transition: border-color 0.3s, box-shadow 0.3s;}select:focus, input:focus, #renamePattern:focus {border-color: var(--brand-primary);box-shadow: 0 0 0 3px rgba(181, 148, 16, 0.15);}.resize-inputs {display: flex;align-items: center;gap: 8px;width: 100%;}.btn-lock {background: var(--bg-base);border: 1px solid var(--border-color);color: var(--brand-primary);border-radius: 10px;width: 44px;height: 44px;display: flex;align-items: center;justify-content: center;cursor: pointer;flex-shrink: 0;font-size: 16px;transition: all 0.2s ease;}.btn-lock.unlocked {color: var(--text-secondary);opacity: 0.6;}.btn-lock:active {transform: scale(0.9);}.quality-wrapper {display: flex;align-items: center;gap: 15px;}input[type=range] {-webkit-appearance: none;width: 100%;background: transparent;}input[type=range]:focus {outline: none;}input[type=range]::-webkit-slider-thumb {-webkit-appearance: none;height: 18px;width: 18px;border-radius: 50%;background: var(--brand-primary);cursor: pointer;margin-top: -6px;box-shadow: 0 2px 5px var(--btn-shadow);transition: transform 0.1s;}input[type=range]::-webkit-slider-thumb:active {transform: scale(1.2);}input[type=range]::-webkit-slider-runnable-track {width: 100%;height: 6px;cursor: pointer;background: var(--border-color);border-radius: 4px;}.est-size {font-size: 12px;color: var(--brand-primary);font-weight: 600;margin-top: 4px;}.disabled-group {opacity: 0.4;pointer-events: none;transition: opacity 0.3s;}.ratio-grid {display: flex;flex-wrap: wrap;gap: 8px;align-items: flex-end;justify-content: space-between;}.ratio-box {display: flex;align-items: center;justify-content: center;border: 2px solid var(--border-color);background: var(--bg-surface);color: var(--text-secondary);font-size: 12px;font-weight: 700;border-radius: 8px;cursor: pointer;outline: none;flex-grow: 1;transition: all 0.2s ease;}.ratio-box:focus-visible {border-color: var(--brand-primary);box-shadow: 0 0 0 3px rgba(181, 148, 16, 0.3);}.ratio-box:hover {background: rgba(212, 175, 55, 0.05);transform: translateY(-2px);}.ratio-box:active {transform: scale(0.95);}.ratio-box.active {border-color: var(--brand-primary);color: var(--brand-primary);background: rgba(212, 175, 55, 0.1);transform: translateY(-2px);box-shadow: 0 4px 10px rgba(181, 148, 16, 0.15);}.rb-orig {padding: 0 10px;height: 40px;border-style: dashed;}.rb-custom {padding: 0 10px;height: 40px;border-style: dotted;}.rb-1-1 {width: 40px;height: 40px;flex-grow: 0;}.rb-4-3 {width: 54px;height: 40px;flex-grow: 0;}.rb-3-4 {width: 30px;height: 40px;font-size: 10px;flex-grow: 0;}.rb-3-2 {width: 60px;height: 40px;flex-grow: 0;}.rb-2-3 {width: 26px;height: 40px;font-size: 9px;flex-grow: 0;}.rb-16-9 {width: 72px;height: 40px;flex-grow: 0;}.rb-9-16 {width: 22px;height: 40px;font-size: 9px;writing-mode: vertical-rl;flex-grow: 0;}.rb-21-9 {width: 94px;height: 40px;flex-grow: 0;}.toggle-row {display: flex;justify-content: space-between;align-items: center;padding: 10px 0;border-top: 1px solid var(--border-color);margin-top: 8px;}.switch {position: relative;display: inline-block;width: 46px;height: 24px;flex-shrink: 0;cursor: pointer;}.switch input {opacity: 0;width: 0;height: 0;}.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: var(--border-color);border-radius: 34px;transition: .3s;}.slider:before {position: absolute;content: "";height: 18px;width: 18px;left: 3px;bottom: 3px;background-color: white;border-radius: 50%;transition: .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}input:checked + .slider {background-color: var(--brand-primary);}input:checked + .slider:before {transform: translateX(22px);}.settings-actions-row {grid-column: 1 / -1 !important;display: flex !important;justify-content: flex-end !important;gap: 16px;border-top: 1px solid var(--border-color);padding-top: 16px;margin-top: 8px;width: 100% !important;clear: both;}.btn-text {background: transparent;border: none;font-size: 14px;font-weight: 600;cursor: pointer;transition: color 0.2s, transform 0.2s;}.btn-text:hover {transform: translateY(-1px);}.btn-text:active {transform: scale(0.96);}.action-grid {display: grid;grid-template-columns: 2fr 1fr;gap: 16px;transition: opacity 0.4s ease;}.btn-primary {width: 100%;padding: 16px;border-radius: 12px;border: none;background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));color: white;font-size: 16px;font-weight: 700;cursor: pointer;box-shadow: 0 8px 20px 0 var(--btn-shadow);transition: all 0.2s ease;}.btn-secondary {width: 100%;padding: 16px;border-radius: 12px;border: 1px solid var(--brand-primary);background: transparent;color: var(--brand-primary);font-size: 16px;font-weight: 700;cursor: pointer;transition: all 0.2s ease;}.btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {transform: translateY(-2px);box-shadow: 0 10px 25px 0 var(--btn-shadow);}.btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled) {transform: scale(0.98);}.btn-disabled {opacity: 0.5;cursor: not-allowed;pointer-events: none;filter: grayscale(50%);}.global-loader {position: fixed;inset: 0;background: rgba(0,0,0,0.75);backdrop-filter: blur(8px);z-index: 9999;display: none;justify-content: center;align-items: center;flex-direction: column;color: white;opacity: 0;transition: opacity 0.3s ease;}.global-loader.show {display: flex;opacity: 1;}.spinner {width: 50px;height: 50px;border: 4px solid rgba(255, 255, 255, 0.2);border-radius: 50%;border-top-color: var(--brand-primary);animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;}@keyframes spin {to {transform: rotate(360deg);}}.toast-container {position: fixed;bottom: 24px;right: 24px;display: flex;flex-direction: column;gap: 10px;z-index: 10000;pointer-events: none;}.toast {background: var(--bg-surface);color: var(--text-primary);border: 1px solid var(--border-color);padding: 14px 20px;border-radius: 12px;box-shadow: var(--shadow-lg);display: flex;align-items: center;gap: 12px;font-size: 14px;font-weight: 600;pointer-events: auto;animation: toastSlideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}.toast.hiding {animation: toastFadeOut 0.3s ease forwards;}@keyframes toastSlideIn {from {transform: translateX(100%);opacity: 0;}to {transform: translateX(0);opacity: 1;}}@keyframes toastFadeOut {from {transform: translateX(10%);opacity: 0;}to {transform: translateX(120%);opacity: 0;}}.toast-success {border-left: 4px solid #10b981;}.toast-info {border-left: 4px solid var(--brand-primary);}.toast-error {border-left: 4px solid #ef4444;}.modal-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.8);backdrop-filter: blur(5px);display: none;justify-content: center;align-items: center;z-index: 10000;opacity: 0;transition: opacity 0.3s ease;}.modal-overlay.show {display: flex;opacity: 1;}.modal-content {background: var(--bg-surface);padding: 24px;border-radius: 20px;width: 90%;max-width: 800px;border: 2px solid var(--brand-primary);transform: scale(0.9);transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}.modal-overlay.show .modal-content {transform: scale(1);}.modal-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;}.modal-title {color: var(--text-primary);font-size: 20px;font-weight: 700;margin: 0;}.modal-close {background: none;border: none;font-size: 24px;color: var(--text-primary);cursor: pointer;display: flex;align-items: center;transition: transform 0.2s;}.modal-close:hover {transform: scale(1.2);color: #ef4444;}.preview-area {width: 100%;height: 400px;background: var(--bg-base);border-radius: 12px;border: 1px dashed var(--border-color);display: flex;justify-content: center;align-items: center;color: var(--text-secondary);overflow: hidden;}.preview-area img {max-width: 100%;max-height: 100%;object-fit: contain;}.dialog-content {max-width: 400px;text-align: center;}.dialog-msg {font-size: 15px;color: var(--text-primary);margin: 16px 0 24px;line-height: 1.6;white-space: pre-line;font-weight: 500;}.dialog-actions {display: flex;gap: 12px;justify-content: center;}.dialog-actions button {padding: 12px 24px;border-radius: 10px;font-size: 14px;font-weight: 600;cursor: pointer;border: none;transition: transform 0.2s, background-color 0.2s;}.dialog-actions button:active {transform: scale(0.95);}.btn-dialog-ok {background: var(--brand-primary);color: white;}.btn-dialog-cancel {background: var(--bg-base);color: var(--text-primary);border: 1px solid var(--border-color);}.seo-article {max-width: 900px;margin: 0 auto 60px;padding: 32px;background: var(--glass-bg);border: 1px solid var(--border-color);border-radius: var(--card-radius);}.seo-article h2 {font-size: 20px;margin-bottom: 12px;font-weight: 700;}.seo-article h3 {font-size: 16px;margin-top: 20px;margin-bottom: 8px;font-weight: 600;}.seo-article p {font-size: 14px;color: var(--text-secondary);margin-bottom: 16px;line-height: 1.6;}.seo-article ul {margin-left: 20px;margin-bottom: 16px;font-size: 14px;color: var(--text-secondary);}.author-info {margin-top: 24px;padding-top: 24px;border-top: 1px solid var(--border-color);font-size: 14px;color: var(--text-secondary);}.author-info a {color: var(--brand-primary);text-decoration: none;font-weight: 500;}@media (max-width: 768px) {.action-grid {grid-template-columns: 1fr;}.settings-grid {grid-template-columns: 1fr;}}@media (max-width: 400px) {.container {padding: 0 16px;}.cvt-app-wrapper {padding: 24px 16px;}.settings-grid {padding: 16px;gap: 16px;}.dropzone {padding: 30px 16px;}.ratio-box {font-size: 11px;}.form-row {flex-wrap: wrap;}.settings-actions-row {justify-content: space-between;}}.fatal-error-overlay {position: fixed;inset: 0;background: rgba(0,0,0,0.85);backdrop-filter: blur(10px);z-index: 999999;display: none;justify-content: center;align-items: center;padding: 24px;text-align: center;opacity: 0;transition: opacity 0.3s ease;}.fatal-error-overlay.show {display: flex;opacity: 1;}.fatal-error-box {background: var(--bg-surface);color: var(--text-primary);max-width: 450px;padding: 32px;border-radius: 24px;border: 2px solid #ef4444;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);transform: scale(0.9);transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}.fatal-error-overlay.show .fatal-error-box {transform: scale(1);}.fatal-error-title {color: #ef4444;font-size: 22px;font-weight: 800;margin-bottom: 12px;}.fatal-error-msg {font-size: 15px;margin-bottom: 24px;line-height: 1.6;color: var(--text-secondary);}.btn-retry-canvas {background: #ef4444;color: white;border: none;padding: 14px 24px;width: 100%;border-radius: 12px;font-weight: 700;font-size: 16px;cursor: pointer;transition: background-color 0.2s, transform 0.2s;}.btn-retry-canvas:hover {background: #dc2626;}.btn-retry-canvas:active {transform: scale(0.96);}