.app-container{width:100%;max-width:1000px;margin:0 auto;padding:0 var(--spacing-unit) var(--spacing-unit) var(--spacing-unit);display:flex;flex-direction:column;align-items:center}.app-header{text-align:center;padding:calc(1.5 * var(--spacing-unit)) var(--spacing-unit) calc(1.5 * var(--spacing-unit)) var(--spacing-unit);margin-bottom:calc(2 * var(--spacing-unit));width:100%;background-color:#000;border-radius:var(--border-radius-md);box-shadow:var(--shadow-md)}.app-logo{max-height:180px;margin-bottom:calc(.25 * var(--spacing-unit));width:auto}.app-title{font-size:2.8em;color:#fff;margin-bottom:calc(.25 * var(--spacing-unit));font-weight:var(--font-weight-bold)}.app-tagline{font-size:1.1em;color:#b0b0b0;margin-bottom:var(--spacing-unit)}.app-free-notice{font-size:1em;color:#fff;font-weight:500;background-color:var(--success-color);padding:calc(.4 * var(--spacing-unit)) calc(.8 * var(--spacing-unit));border-radius:var(--border-radius-sm);display:inline-block;margin-top:calc(.5 * var(--spacing-unit))}.single-column-layout{display:flex;flex-direction:column;gap:3rem;align-items:center;width:100%}.main-content{width:100%;padding:0 calc(2 * var(--spacing-unit)) calc(2 * var(--spacing-unit)) calc(2 * var(--spacing-unit));background-color:var(--surface-color);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);display:flex;flex-direction:column;align-items:center;box-sizing:border-box}.format-display-section{width:100%;margin:0;padding:var(--spacing-unit);background-color:var(--surface-color);border-radius:var(--border-radius-md);box-shadow:var(--shadow-md);box-sizing:border-box}h1{color:var(--primary-color);margin-bottom:calc(.5 * var(--spacing-unit));text-align:center}p{margin-bottom:1.5rem;text-align:center}.drop-zone{border:2px dashed var(--primary-color);border-radius:var(--border-radius-md);padding:calc(2 * var(--spacing-unit));text-align:center;margin-bottom:calc(2 * var(--spacing-unit));background-color:#007bff0d;transition:all .3s ease;width:100%;max-width:600px}.drop-zone:hover{background-color:#007bff1a;cursor:pointer}.file-info{text-align:left}.file-info h3{margin-top:0;color:var(--primary-color)}.file-prompt{display:flex;flex-direction:column;align-items:center;gap:1rem}input[type=file]{display:none}.file-button{background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius-sm);padding:calc(.75 * var(--spacing-unit)) calc(1.5 * var(--spacing-unit));font-size:1rem;font-weight:var(--font-weight-bold);cursor:pointer;transition:background-color .3s ease}.file-button:hover{background-color:color-mix(in srgb,var(--primary-color) 85%,black)}.format-selection{margin:2rem 0;display:flex;flex-direction:column;gap:1rem;width:100%;max-width:600px;align-items:center;text-align:center}.format-selection h3{margin-top:0;margin-bottom:calc(.5 * var(--spacing-unit));color:var(--primary-color)}.format-selection select{padding:calc(.75 * var(--spacing-unit));border:1px solid var(--border-color);border-radius:var(--border-radius-sm);font-size:1rem;background-color:var(--background-color);margin-bottom:var(--spacing-unit);width:100%;max-width:400px}.button-group{display:flex;gap:1rem;width:100%;max-width:600px;justify-content:center}.convert-button{background-color:var(--success-color);color:#fff;border:none;border-radius:var(--border-radius-sm);padding:calc(.75 * var(--spacing-unit)) calc(1.5 * var(--spacing-unit));font-size:1rem;font-weight:var(--font-weight-bold);cursor:pointer;transition:background-color .3s ease}.convert-button:hover{background-color:color-mix(in srgb,var(--success-color) 85%,black)}.convert-button:disabled{background-color:var(--border-color);cursor:not-allowed}.reset-button{background-color:var(--text-color-light);color:#fff;border:none;border-radius:var(--border-radius-sm);padding:calc(.75 * var(--spacing-unit)) calc(1.5 * var(--spacing-unit));font-size:1rem;font-weight:var(--font-weight-bold);cursor:pointer;transition:all .3s ease}.reset-button:hover{background-color:color-mix(in srgb,var(--text-color-light) 85%,black)}.reset-button:disabled{background-color:var(--border-color);cursor:not-allowed}.progress-container{margin:calc(2 * var(--spacing-unit)) 0;background-color:var(--border-color);border-radius:var(--border-radius-sm);height:20px;overflow:hidden;width:100%;max-width:600px}.progress-bar{height:100%;background-color:var(--primary-color);transition:width .3s ease}.progress-container p{margin-top:.5rem;text-align:center;font-weight:500}.result-container{margin:calc(2 * var(--spacing-unit)) 0;padding:calc(1.5 * var(--spacing-unit));background-color:color-mix(in srgb,var(--success-color) 10%,white);border:1px solid color-mix(in srgb,var(--success-color) 30%,white);border-radius:var(--border-radius-md);text-align:center;width:100%;max-width:600px}.result-container h3{margin-top:0;color:var(--success-color)}.download-button{background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius-sm);padding:calc(.75 * var(--spacing-unit)) calc(1.5 * var(--spacing-unit));font-size:1rem;font-weight:var(--font-weight-bold);cursor:pointer;margin-top:var(--spacing-unit);transition:background-color .3s ease}.download-button:hover{background-color:color-mix(in srgb,var(--primary-color) 85%,black)}.error-message{margin:calc(2 * var(--spacing-unit)) 0;padding:calc(1.5 * var(--spacing-unit));background-color:color-mix(in srgb,var(--error-color) 10%,white);border:1px solid color-mix(in srgb,var(--error-color) 30%,white);border-radius:var(--border-radius-md);color:var(--error-color);width:100%;max-width:600px}.error-message h3{margin-top:0;color:var(--error-color)}.error-message ul{padding-left:1.5rem}.note{margin-top:calc(2 * var(--spacing-unit));padding:var(--spacing-unit);background-color:color-mix(in srgb,var(--warning-color) 20%,white);border:1px solid color-mix(in srgb,var(--warning-color) 40%,white);border-radius:var(--border-radius-sm);font-size:.875rem;color:var(--text-color)}.multiple-file-section{width:100%;max-width:800px;display:flex;flex-direction:column;align-items:center}.mode-toggle{display:flex;gap:1rem;margin-bottom:1.5rem;width:100%;max-width:400px;justify-content:center}.mode-button{padding:calc(.5 * var(--spacing-unit)) var(--spacing-unit);background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);font-size:.875rem;cursor:pointer;flex:1;transition:all .2s ease;color:var(--text-color)}.mode-button.active{background-color:color-mix(in srgb,var(--primary-color) 20%,white);border-color:var(--primary-color);color:var(--primary-color);font-weight:var(--font-weight-bold)}.mode-button:hover{background-color:var(--border-color)}.switch-to-multiple{margin-top:var(--spacing-unit);padding:calc(.5 * var(--spacing-unit)) var(--spacing-unit);background-color:color-mix(in srgb,var(--info-color) 15%,white);color:var(--info-color);border:1px solid color-mix(in srgb,var(--info-color) 30%,white);border-radius:var(--border-radius-sm);cursor:pointer;font-size:.875rem;transition:all .2s ease}.switch-to-multiple:hover{background-color:color-mix(in srgb,var(--info-color) 25%,white)}.file-summary{margin-top:calc(1.5 * var(--spacing-unit));padding:var(--spacing-unit);background-color:var(--surface-color);border-radius:var(--border-radius-md);text-align:center;width:100%;max-width:600px;border:1px solid var(--border-color)}.file-summary p{margin:calc(.25 * var(--spacing-unit)) 0;color:var(--text-color-light)}.pdf-mode-selector{margin:calc(1.5 * var(--spacing-unit)) 0;background-color:var(--surface-color);border-radius:var(--border-radius-md);padding:var(--spacing-unit);width:100%;max-width:500px;border:1px solid var(--border-color);text-align:left}.pdf-mode-selector p{margin-bottom:.5rem;font-weight:500;text-align:left}.radio-group{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.radio-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.radio-group input[type=radio]{cursor:pointer}@media (max-width: 640px){.app-container,.drop-zone{padding:1rem}.file-button,.convert-button,.reset-button,.download-button{width:100%}.mode-toggle{flex-direction:column;gap:.5rem}.button-group{flex-direction:column;gap:.75rem}}.format-display-panel{background-color:#f8f9fa;border-radius:8px;padding:20px;margin-bottom:20px;box-shadow:0 2px 4px #0000000d}.format-display-panel h2{color:#4062dd;margin-top:0;margin-bottom:15px;font-size:1.5rem}.conversion-group{margin-bottom:20px}.conversion-group h3{color:#444;font-size:1.2rem;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #e0e0e0}.conversion-list{list-style-type:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.conversion-path{display:flex;align-items:center;background:#fff;padding:8px 12px;border-radius:6px;box-shadow:0 1px 3px #00000014;transition:transform .2s,box-shadow .2s}.conversion-path:hover{transform:translateY(-2px);box-shadow:0 3px 5px #0000001f}.format-name{font-weight:500;color:#333}.conversion-arrow{color:#4062dd;font-size:1.1em;margin:0 8px}.format-note{background-color:#e9f2ff;padding:10px 15px;border-radius:6px;border-left:4px solid #4062dd;margin-top:15px}.format-note p{margin:0;color:#333}@media (max-width: 640px){.conversion-list{grid-template-columns:1fr}.format-display-panel{padding:15px}}.toast-notification{position:fixed;top:20px;right:20px;padding:15px 20px;border-radius:8px;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;justify-content:space-between;z-index:10000;opacity:0;transform:translateY(-20px);transition:opacity .3s ease-in-out,transform .3s ease-in-out;min-width:250px;max-width:400px;word-wrap:break-word}.toast-notification.toast-visible{opacity:1;transform:translateY(0)}.toast-content{display:flex;flex-direction:column;align-items:flex-start;flex-grow:1}.toast-message{font-size:.9rem;margin-right:10px;margin-bottom:5px}.toast-action-button{background-color:#fff3;color:inherit;border:1px solid rgba(255,255,255,.5);padding:6px 12px;border-radius:4px;cursor:pointer;font-size:.85rem;margin-top:8px;align-self:flex-start}.toast-action-button:hover{background-color:#ffffff4d}.toast-close-button{background:none;border:none;color:inherit;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 5px;opacity:.7;align-self:flex-start;margin-left:15px}.toast-close-button:hover{opacity:1}.toast-success{background-color:#28a745;color:#fff}.toast-error{background-color:#dc3545;color:#fff}.toast-info{background-color:#17a2b8;color:#fff}.toast-success .toast-action-button,.toast-error .toast-action-button,.toast-info .toast-action-button{color:#fff;border-color:#ffffffb3}.toast-success .toast-action-button:hover,.toast-error .toast-action-button:hover,.toast-info .toast-action-button:hover{background-color:#0003}:root{--primary-color: #007BFF;--secondary-color: #28A745;--accent-color: #FD7E14;--text-color: #213547;--text-color-light: #555555;--background-color: #FFFFFF;--surface-color: #F8F9FA;--border-color: #DEE2E6;--error-color: #DC3545;--info-color: #007BFF;--warning-color: #FFC107;--success-color: var(--secondary-color);--font-family-base: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--font-family-headings: var(--font-family-base);--line-height-base: 1.6;--font-weight-normal: 400;--font-weight-bold: 700;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--spacing-unit: 1rem;--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 4px 6px rgba(0,0,0,.1);--shadow-lg: 0 10px 15px rgba(0,0,0,.1);font-family:var(--font-family-base);line-height:var(--line-height-base);font-weight:var(--font-weight-normal);color:var(--text-color);background-color:var(--background-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body,html{margin:0;padding:0;width:100%;min-height:100vh;display:flex;justify-content:center;box-sizing:border-box;background-color:var(--background-color)}#root{width:100%;display:flex;justify-content:center;align-items:flex-start;padding:0 0 2rem}h1{font-size:2.5em;line-height:1.1}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.debug-panel{position:fixed;top:0;left:0;right:0;background-color:#000000d9;color:#fff;z-index:9999;padding:10px;font-family:monospace;font-size:12px;max-height:30vh;overflow-y:auto;backdrop-filter:blur(4px);border-bottom:1px solid #444;box-shadow:0 0 10px #00000080}.debug-panel h4{margin:0 0 8px;font-size:14px;display:flex;justify-content:space-between;align-items:center}.debug-panel button{background-color:#444;color:#fff;border:none;padding:2px 8px;border-radius:3px;cursor:pointer;font-family:monospace;font-size:12px}.debug-panel button:hover{background-color:#666}.debug-panel ul{margin:0;padding:0;list-style-type:none}.debug-panel li{margin-bottom:4px;padding:4px 6px;border-radius:2px;display:flex;border-left:4px solid transparent}.debug-panel li.debug-info{background-color:#1e3c5a66;border-left-color:#4e9bff}.debug-panel li.debug-warning{background-color:#5a461466;border-left-color:#fc0}.debug-panel li.debug-error{background-color:#5a1e1e66;border-left-color:#f55}.debug-time{flex:0 0 90px;color:#999;margin-right:8px}.debug-message{flex:1;word-break:break-all}@media (max-width: 768px){.debug-panel{font-size:11px;max-height:40vh}.debug-time{flex:0 0 80px}}
