:root {--bg-color: #0f172a;--card-bg: #1e293b;--primary: #6366f1;--primary-hover: #4f46e5;--text-main: #f8fafc;--text-muted: #94a3b8;--border: #334155;--accent: #ec4899} * {box-sizing: border-box;margin: 0;padding: 0} body {font-family: 'Outfit', sans-serif;background-color: var(--bg-color);color: var(--text-main);line-height: 1.6;min-height: 100vh;display: flex;justify-content: center;align-items: center} .app-container {width: 100%;max-width: 1000px;padding: 2rem} header {text-align: center;margin-bottom: 3rem} .logo {display: flex;align-items: center;justify-content: center;gap: 1rem;font-size: 2.5rem;margin-bottom: 0.5rem} .logo i {color: var(--accent)} .logo h1 {font-weight: 700;letter-spacing: -1px} .logo span {color: var(--primary)} .tagline {color: var(--text-muted);font-size: 1.1rem} .card {background: var(--card-bg);padding: 2.5rem;border-radius: 1rem;border: 1px solid var(--border);box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);text-align: center} .card h2 {margin-bottom: 0.5rem;font-size: 1.8rem} .card p {color: var(--text-muted);margin-bottom: 2rem} .file-drop-area {position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;width: 100%;max-width: 100%;padding: 2rem;border: 2px dashed var(--border);border-radius: 0.75rem;transition: 0.2s;margin-bottom: 1.5rem;background: rgba(255, 255, 255, 0.02)} .file-drop-area.is-active {background-color: rgba(99, 102, 241, 0.1);border-color: var(--primary)} .fake-btn {background-color: var(--border);color: var(--text-main);padding: 8px 16px;border-radius: 4px;font-size: 14px;margin-bottom: 0.5rem;font-weight: 600} .file-msg {font-size: small;color: var(--text-muted)} .file-input {position: absolute;left: 0;top: 0;height: 100%;width: 100%;cursor: pointer;opacity: 0} .preview-section {margin-top: 2rem} .preview-container {background: #ffffff;border-radius: 0.75rem;padding: 2rem;margin-bottom: 2rem;display: flex;justify-content: center;align-items: center;min-height: 300px;position: relative} #imageCanvas {max-width: 100%;height: auto;border-radius: 4px} .controls-section {margin-bottom: 2rem} .transform-controls {display: flex;gap: 0.75rem;justify-content: center;flex-wrap: wrap;margin-bottom: 1.5rem} .control-btn {background: var(--bg-color);border: 1px solid var(--border);color: var(--text-main);padding: 0.75rem 1.25rem;border-radius: 0.5rem;font-family: inherit;font-weight: 600;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;gap: 0.5rem} .control-btn:hover {background: var(--primary);border-color: var(--primary);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3)} .control-btn i {font-size: 1rem} .action-btn {background: linear-gradient(135deg, var(--primary), var(--accent));color: white;border: none;padding: 1rem 2.5rem;border-radius: 2rem;font-size: 1.1rem;font-weight: 700;cursor: pointer;transition: transform 0.2s, box-shadow 0.2s;box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);display: inline-flex;align-items: center;gap: 0.5rem} .action-btn:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4)} .action-btn:active {transform: translateY(0)} .action-btn:disabled {opacity: 0.5;cursor: not-allowed;transform: none} .download-section {display: flex;flex-direction: column;gap: 1rem;align-items: center;width: 100%} .format-selector-group {display: flex;align-items: center;gap: 0.75rem} .format-selector-group label {color: var(--text-main);font-weight: 600;font-size: 0.95rem} .format-selector {padding: 0.6rem 1rem;border-radius: 0.5rem;background: var(--bg-color);border: 1px solid var(--border);color: var(--text-main);font-family: inherit;font-size: 0.95rem;cursor: pointer;transition: all 0.2s;min-width: 150px} .format-selector:hover {border-color: var(--primary)} .format-selector:focus {outline: none;border-color: var(--primary);box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2)} .stats-table {background: var(--bg-color);border-radius: 0.75rem;padding: 1.5rem;margin-top: 2rem} .stats-table h3 {margin-bottom: 1rem;font-size: 1.2rem;color: var(--text-main)} .stats-table table {width: 100%;border-collapse: collapse} .stats-table tr {border-bottom: 1px solid var(--border)} .stats-table tr:last-child {border-bottom: none} .stat-label {text-align: left;padding: 1rem;color: var(--text-muted);font-weight: 600;width: 40%} .stat-value {text-align: right;padding: 1rem;color: var(--text-main);font-weight: 700;font-size: 1.1rem} .unit-selector {margin-left: 0.5rem;padding: 0.4rem 0.6rem;border-radius: 0.35rem;background: var(--card-bg);border: 1px solid var(--border);color: var(--text-main);font-family: inherit;font-size: 0.9rem;cursor: pointer;transition: all 0.2s} .unit-selector:hover {border-color: var(--primary)} .unit-selector:focus {outline: none;border-color: var(--primary)} .result-area {margin-top: 2rem;min-height: 20px} .loading {color: var(--primary);font-weight: 600;animation: pulse 1.5s ease-in-out infinite} @keyframes pulse {0%, 100% {opacity: 1} 50% {opacity: 0.5} } .success {color: #10b981;font-weight: 600;animation: none} .error {color: #ef4444;font-weight: 600} .loading-container {background: var(--card-bg);border: 1px solid var(--border);border-radius: 0.75rem;padding: 1.5rem;margin: 1rem 0;text-align: center} .loading-bar-wrapper {width: 100%;height: 8px;background: rgba(255, 255, 255, 0.1);border-radius: 10px;overflow: hidden;margin: 1rem 0;position: relative} .loading-bar {height: 100%;background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));background-size: 200% 100%;border-radius: 10px;animation: loading-shimmer 1.5s ease-in-out infinite;width: 100%;position: relative;transition: width 0.3s ease} .loading-bar::after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);animation: loading-shine 1.5s ease-in-out infinite} @keyframes loading-progress {0% {transform: translateX(-100%)} 50% {transform: translateX(0%)} 100% {transform: translateX(100%)} } @keyframes loading-shimmer {0% {background-position: -200% 0} 100% {background-position: 200% 0} } @keyframes loading-shine {0% {transform: translateX(-100%)} 100% {transform: translateX(100%)} } .loading-text {color: var(--text-main);font-size: 0.95rem;font-weight: 600;margin-bottom: 0.75rem;display: flex;align-items: center;justify-content: center;gap: 0.5rem} .loading-text i {color: var(--primary);animation: spin 1s linear infinite} .loading-progress-text {color: var(--text-muted);font-size: 0.85rem;margin-top: 0.5rem;font-weight: 600;text-align: center} @keyframes spin {from {transform: rotate(0deg)} to {transform: rotate(360deg)} } footer {text-align: center;margin-top: 3rem;color: var(--text-muted);font-size: 0.9rem} .faq-section {max-width: 800px;margin: 0 auto} .faq-item {margin-bottom: 1.5rem;padding-bottom: 1.5rem;border-bottom: 1px solid var(--border)} .faq-item:last-child {border-bottom: none;margin-bottom: 0;padding-bottom: 0} .faq-question {color: var(--text-main);font-size: 1.1rem;font-weight: 700;margin-bottom: 0.75rem;line-height: 1.4} .faq-answer {color: var(--text-muted);font-size: 0.95rem;line-height: 1.6} .faq-answer p {margin: 0} @media (max-width: 768px) {.app-container {padding: 1rem} .logo {font-size: 2rem} .card {padding: 1.5rem} .transform-controls {gap: 0.5rem} .control-btn {padding: 0.6rem 1rem;font-size: 0.9rem} .preview-container {padding: 1rem} .stat-label, .stat-value {padding: 0.75rem;font-size: 0.95rem} } @media (max-width: 480px) {.transform-controls {flex-direction: column;width: 100%} .control-btn {width: 100%;justify-content: center} .action-btn {width: 100%;justify-content: center} .logo {font-size: 1.5rem;gap: 0.5rem} .logo h1 {font-size: 1.5rem} }