:root{--color-gradient-start: #667eea;--color-gradient-end: #764ba2;--color-bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--color-bg-card: #ffffff;--color-bg-input: #ffffff;--color-bg-hover: #f8f9fa;--color-text-primary: #333333;--color-text-secondary: #666666;--color-text-muted: #999999;--color-accent: #667eea;--color-accent-hover: #5a6fd6;--color-success: #28a745;--color-success-light: #d4edda;--color-warning: #ffc107;--color-error: #dc3545;--color-error-light: #f8d7da;--color-border: #e0e0e0;--color-border-focus: #667eea;--color-track-pending: #e0e0e0;--color-track-active: #ffc107;--color-track-completed: #28a745;--color-track-compressed: #17a2b8;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-size-base: 16px;--font-size-small: 14px;--font-size-large: 18px;--font-size-xlarge: 24px;--font-size-xxlarge: 28px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-xxl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--shadow-card: 0 20px 60px rgba(0, 0, 0, .3);--shadow-button: 0 4px 15px rgba(102, 126, 234, .4);--shadow-hover: 0 8px 25px rgba(102, 126, 234, .5);--transition-fast: .2s ease;--transition-normal: .3s ease}*,*:before,*:after{box-sizing:border-box}html{font-size:var(--font-size-base);scroll-behavior:smooth}body{margin:0;padding:0;font-family:var(--font-family);background:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.6;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}.skip-link{position:absolute;top:-40px;left:0;background:var(--color-bg-card);color:var(--color-accent);padding:var(--spacing-sm) var(--spacing-md);z-index:100;text-decoration:none;font-weight:700;border-radius:var(--radius-sm)}.skip-link:focus{top:var(--spacing-md);left:var(--spacing-md)}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:var(--spacing-lg)}.main-content{flex:1;width:100%;max-width:700px;display:flex;flex-direction:column;align-items:center}.header{text-align:center;margin-bottom:var(--spacing-lg);width:100%}.header__container{display:flex;flex-direction:column;align-items:center}.header__logo{text-decoration:none;color:#fff}.header__ascii-logo{margin:0;font-size:8px;line-height:1.1;color:#ffffffe6;font-family:monospace}.header__title{display:block;font-size:var(--font-size-small);color:#fffc;margin-top:var(--spacing-sm)}.footer{text-align:center;padding:var(--spacing-lg);width:100%}.footer__copyright{margin:0 0 var(--spacing-sm);color:#fffc;font-size:var(--font-size-small)}.footer__copyright a{color:#fff;text-decoration:none}.footer__motto{color:#fff9;font-size:var(--font-size-small);margin:var(--spacing-sm) 0}.footer__nav-list{list-style:none;margin:var(--spacing-md) 0 0;padding:0;display:flex;justify-content:center;gap:var(--spacing-lg)}.footer__nav-list a{color:#fffc;text-decoration:none;font-size:var(--font-size-small)}.footer__nav-list a:hover{color:#fff}.footer__author{margin-bottom:var(--spacing-lg)}.footer__ascii-art{font-family:monospace;font-size:10px;line-height:1.2;color:#ffffffb3;margin:0 0 var(--spacing-sm);text-align:left;display:inline-block}.footer__author-name{color:#ffffffe6;font-size:var(--font-size-small);margin:0;font-weight:500}.upload-section,.job-info,.fastcopy-progress,.success-card,.queue-waiting,.error-container{background:var(--color-bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);width:100%;max-width:600px}.upload-page{width:100%;display:flex;flex-direction:column;align-items:center}.upload-section{padding:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.upload-section__title{margin:0 0 var(--spacing-sm);color:var(--color-text-primary);font-size:var(--font-size-xxlarge);text-align:center}.upload-section__description{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg);text-align:center;font-size:var(--font-size-small)}.queue-status{background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-lg);text-align:center;font-size:var(--font-size-small)}.queue-status__label{color:var(--color-text-secondary);margin-right:var(--spacing-sm)}.queue-status__value{color:var(--color-accent);font-weight:600}.dropzone{border:2px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xxl);text-align:center;cursor:pointer;transition:all var(--transition-normal);position:relative;background:var(--color-bg-hover)}.dropzone:hover,.dropzone:focus{border-color:var(--color-accent);background:#667eea0d}.dropzone--dragging{border-color:var(--color-accent);background:#667eea1a;transform:scale(1.02)}.dropzone--has-file{border-color:var(--color-success);background:#28a7450d}.dropzone__input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.dropzone__icon{font-size:48px;margin-bottom:var(--spacing-md)}.dropzone__text{font-size:var(--font-size-large);color:var(--color-text-primary);margin:0 0 var(--spacing-sm);font-weight:500}.dropzone__subtext{color:var(--color-text-muted);font-size:var(--font-size-small);margin:0}.dropzone__filename{font-size:var(--font-size-large);color:var(--color-success);margin:0 0 var(--spacing-sm);word-break:break-all;font-weight:600}.dropzone__filesize{color:var(--color-text-secondary);margin:0}.upload-section__help{color:var(--color-text-muted);font-size:12px;margin-top:var(--spacing-md);text-align:center}.error-message{background-color:var(--color-error-light);border:1px solid #f5c6cb;color:#721c24;padding:var(--spacing-md);border-radius:var(--radius-sm);margin-top:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-small)}.demo-mode-toggle{margin-top:var(--spacing-md);text-align:center}.demo-mode-toggle__label{display:inline-flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;color:var(--color-text-secondary);font-size:var(--font-size-small)}.demo-mode-toggle__checkbox{width:18px;height:18px;accent-color:var(--color-accent);cursor:pointer}.demo-mode-toggle__text{-webkit-user-select:none;user-select:none}.upload-button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-md) var(--spacing-lg);margin-top:var(--spacing-lg);background:linear-gradient(135deg,var(--color-gradient-start) 0%,var(--color-gradient-end) 100%);color:#fff;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:var(--font-size-large);font-weight:600;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-button)}.upload-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-hover)}.upload-button:disabled{opacity:.6;cursor:not-allowed}.upload-button__spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.info-section{margin-top:var(--spacing-xl);width:100%;max-width:600px}.info-section__title{color:#fff;margin:0 0 var(--spacing-lg);font-size:var(--font-size-large);text-align:center}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--spacing-md)}.info-card{background:#fffffff2;border-radius:var(--radius-md);padding:var(--spacing-lg);box-shadow:0 4px 15px #0000001a}.info-card__title{color:var(--color-accent);margin:0 0 var(--spacing-sm);font-size:var(--font-size-base);font-weight:600}.info-card__text{color:var(--color-text-secondary);margin:0;font-size:var(--font-size-small)}.info-card__warning{color:var(--color-warning);background:#fff3cd;border-radius:var(--radius-sm);padding:var(--spacing-sm);margin-top:var(--spacing-sm);font-size:12px}.progress-page{width:100%;display:flex;flex-direction:column;align-items:center}.progress-page__title{color:#fff;margin:0 0 var(--spacing-lg);text-align:center}.job-info{padding:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.job-info__row{display:flex;justify-content:space-between;padding:var(--spacing-sm) 0;border-bottom:1px solid var(--color-border);font-size:var(--font-size-small)}.job-info__row:last-child{border-bottom:none}.job-info__label{color:var(--color-text-secondary)}.job-info__status--pending,.job-info__status--queued{color:var(--color-warning);font-weight:600}.job-info__status--processing{color:var(--color-accent);font-weight:600}.job-info__status--completed{color:var(--color-success);font-weight:600}.job-info__status--error{color:var(--color-error);font-weight:600}.queue-waiting{text-align:center;padding:var(--spacing-xxl);margin-bottom:var(--spacing-lg)}.queue-waiting__icon{font-size:48px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.queue-waiting__text{font-size:var(--font-size-large);color:var(--color-text-primary);margin:var(--spacing-md) 0;font-weight:500}.queue-waiting__position{color:var(--color-text-secondary);font-size:var(--font-size-small)}.back-button{display:block;width:100%;max-width:600px;padding:var(--spacing-md);background:transparent;border:2px solid rgba(255,255,255,.5);border-radius:var(--radius-sm);color:#fff;font-family:inherit;font-size:var(--font-size-base);cursor:pointer;transition:all var(--transition-fast)}.back-button:hover{background:#ffffff1a;border-color:#fff}.loading{text-align:center;padding:var(--spacing-xxl)}.loading__spinner{width:48px;height:48px;border:4px solid rgba(102,126,234,.2);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--spacing-md)}.loading__text{color:var(--color-text-secondary)}.error-container{text-align:center;padding:var(--spacing-xxl)}.error-container__title{color:var(--color-error);margin:0 0 var(--spacing-md)}.error-container__message{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg)}.error-container__button{padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,var(--color-gradient-start) 0%,var(--color-gradient-end) 100%);color:#fff;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.error-container__button:hover{transform:translateY(-2px)}.fastcopy-progress{padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);max-width:600px;overflow:hidden}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);flex-wrap:wrap;gap:var(--spacing-sm)}.progress-header__label{color:var(--color-text-secondary);font-size:var(--font-size-small)}.progress-header__value{font-size:var(--font-size-xlarge);color:var(--color-accent);font-weight:700}.progress-header__track{color:var(--color-text-muted);font-size:var(--font-size-small)}.progress-bar-container,.progress-dual-container{margin-bottom:var(--spacing-md);max-width:100%;overflow:hidden}.progress-side{margin-bottom:var(--spacing-md)}.progress-side__label{display:block;color:var(--color-text-secondary);font-size:var(--font-size-small);margin-bottom:var(--spacing-xs)}.progress-bar-wrapper{background:#f0f0f0;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:3px;overflow:hidden}.progress-bar{display:flex;height:24px;gap:1px;border-radius:4px;overflow:hidden}.track-segment{flex:1;min-width:2px;background-color:var(--color-track-pending);transition:background-color var(--transition-fast)}.track-segment--completed{background-color:var(--color-track-completed)}.track-segment--active{background-color:var(--color-track-active);animation:blink .5s ease-in-out infinite}.track-segment--compressed.track-segment--completed{background-color:var(--color-track-compressed)}@keyframes blink{0%,to{opacity:1}50%{opacity:.6}}.track-labels{display:flex;justify-content:space-between;padding:var(--spacing-xs) 0;font-size:10px;color:var(--color-text-muted);width:100%;box-sizing:border-box;overflow:hidden}.track-labels--dual{margin-top:var(--spacing-sm)}.track-label{flex-shrink:0;text-align:center}.progress-stats{display:flex;justify-content:space-between;color:var(--color-text-secondary);font-size:var(--font-size-small);margin-top:var(--spacing-md)}.progress-legend{display:flex;flex-wrap:wrap;gap:var(--spacing-md);margin-top:var(--spacing-lg);padding-top:var(--spacing-md);border-top:1px solid var(--color-border)}.progress-legend__item{display:flex;align-items:center;gap:var(--spacing-xs)}.progress-legend__color{width:16px;height:16px;border-radius:4px}.progress-legend__color--pending{background-color:var(--color-track-pending)}.progress-legend__color--active{background-color:var(--color-track-active)}.progress-legend__color--completed{background-color:var(--color-track-completed)}.progress-legend__color--compressed{background-color:var(--color-track-compressed)}.progress-legend__text{color:var(--color-text-secondary);font-size:var(--font-size-small)}.success-page{width:100%;display:flex;flex-direction:column;align-items:center}.success-card{overflow:hidden;margin-bottom:var(--spacing-xl);border:none}.success-card__header{background:linear-gradient(135deg,var(--color-success) 0%,#20c997 100%);padding:var(--spacing-lg);display:flex;align-items:center;justify-content:center;gap:var(--spacing-md)}.success-card__icon{font-size:32px}.success-card__title{margin:0;color:#fff;font-size:var(--font-size-xlarge)}.success-card__content{padding:var(--spacing-lg)}.success-card__info{margin-bottom:var(--spacing-lg)}.success-card__row{display:flex;justify-content:space-between;padding:var(--spacing-sm) 0;border-bottom:1px solid var(--color-border);font-size:var(--font-size-small)}.success-card__row:last-child{border-bottom:none}.success-card__label{color:var(--color-text-secondary)}.download-button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,var(--color-success) 0%,#20c997 100%);color:#fff;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:var(--font-size-large);font-weight:600;text-decoration:none;cursor:pointer;transition:all var(--transition-normal);box-shadow:0 4px 15px #28a74566}.download-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #28a74580}.download-button__icon{font-size:24px}.success-card__warning{text-align:center;color:var(--color-warning);font-size:var(--font-size-small);margin-top:var(--spacing-md);background:#fff3cd;padding:var(--spacing-sm);border-radius:var(--radius-sm)}.support-section{margin-top:var(--spacing-xl);width:100%;max-width:600px}.support-section__title{color:#fff;margin:0 0 var(--spacing-lg);font-size:var(--font-size-large);text-align:center}.support-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--spacing-md)}.support-card{background:#fffffff2;border-radius:var(--radius-md);padding:var(--spacing-lg);text-decoration:none;transition:all var(--transition-normal);text-align:center;box-shadow:0 4px 15px #0000001a}.support-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px #00000026}.support-card--donate{background:linear-gradient(135deg,#fff5f5,#fed7d7)}.support-card__icon{font-size:32px;display:block;margin-bottom:var(--spacing-sm)}.support-card__title{color:var(--color-text-primary);margin:0 0 var(--spacing-xs);font-size:var(--font-size-base);font-weight:600}.support-card__text{color:var(--color-text-secondary);margin:0;font-size:12px}.actions-section{margin-top:var(--spacing-xl);width:100%;max-width:600px}.convert-another-button{display:block;width:100%;padding:var(--spacing-md);background:linear-gradient(135deg,var(--color-gradient-start) 0%,var(--color-gradient-end) 100%);color:#fff;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:var(--font-size-base);font-weight:600;text-align:center;text-decoration:none;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-button)}.convert-another-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}@media (max-width: 768px){.app{padding:var(--spacing-md)}.upload-section,.job-info,.fastcopy-progress,.success-card,.queue-waiting,.error-container{padding:var(--spacing-lg)}.dropzone{padding:var(--spacing-xl)}.progress-bar{height:16px}.track-labels{font-size:8px}.info-grid,.support-grid{grid-template-columns:1fr}.header__ascii-logo{font-size:6px}}@media (max-width: 480px){.upload-section__title{font-size:var(--font-size-xlarge)}.success-card__title{font-size:var(--font-size-large)}.success-card__row,.job-info__row{flex-direction:column;gap:var(--spacing-xs)}}