.tool-page{min-height:100dvh;background:var(--color-bg);color:var(--color-text)}.hero{background:var(--color-surface);border-bottom:1px solid var(--color-border-subtle);padding:var(--space-4) 0 var(--space-3)}.hero-inner{display:flex;flex-direction:column;gap:var(--space-2)}.breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-family-mono);font-size:var(--font-size-small)}.breadcrumb-link{color:var(--color-primary);text-decoration:none}.breadcrumb-link:hover{text-decoration:underline}.breadcrumb-sep,.breadcrumb-current{color:var(--color-text-muted)}.hero-title{margin:0 0 var(--space-2);font-family:var(--font-family-mono);font-size:var(--font-size-h1);font-weight:700;letter-spacing:-.02em;color:var(--color-text);line-height:1.15}.tool-pair-nav{margin:0;font-family:var(--font-family-mono);font-size:var(--font-size-small);color:var(--color-text-muted)}.tool-pair-nav a{color:var(--color-primary);text-decoration:none}.tool-pair-nav a:hover{text-decoration:underline}.tool-body{padding-top:var(--space-4);padding-bottom:var(--space-7);display:flex;flex-direction:column;gap:var(--space-3)}.mono{font-family:var(--font-family-mono)}.tool-page :global(.drop-zone){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-6) var(--space-5);border:2px dashed var(--color-border-subtle);border-radius:var(--radius-md);cursor:pointer;text-align:center;transition:border-color .15s,background .15s;-webkit-user-select:none;user-select:none}.tool-page :global(.drop-zone:hover),.tool-page :global(.drop-zone:focus-visible){border-color:var(--color-primary);background:#4a6fa50d;outline:none}.tool-page :global(.drop-zone[data-drag-active=true]){border-color:var(--color-accent);background:#6b8cbe1a}.drop-zone-icon{color:var(--color-text-muted);opacity:.6}.drop-zone-label{margin:0;color:var(--color-text-muted)}.format-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}.format-badge{font-family:var(--font-family-mono);font-size:.75rem;padding:2px 8px;border-radius:var(--radius-sm);background:var(--color-surface-muted);color:var(--color-text-muted);border:1px solid var(--color-border-subtle);letter-spacing:.04em}.settings-card{padding:var(--space-3) var(--space-4)}.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-2)}.setting{display:flex;flex-direction:column;gap:var(--space-1)}.setting-label{font-size:var(--font-size-small);color:var(--color-text-muted)}.setting input,.setting select{border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);background:var(--color-surface-muted);color:var(--color-text);padding:8px 10px;font-size:var(--font-size-small)}.setting.checkbox-setting{flex-direction:row;align-items:center;gap:var(--space-2);margin-top:22px}.convert-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-4);font-family:var(--font-family-mono);font-size:var(--font-size-body);font-weight:600;letter-spacing:.02em}.convert-btn:disabled{opacity:.5;cursor:not-allowed}.convert-count{opacity:.7;font-size:.9em}.convert-spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:tool-ffmpeg-batch-spin .7s linear infinite}@keyframes tool-ffmpeg-batch-spin{to{transform:rotate(360deg)}}.file-list-card{overflow:hidden}.file-list-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border-subtle)}.file-list-actions{display:flex;align-items:center;gap:var(--space-2)}.compact{opacity:.7;font-size:.85em}.tool-page :global(.button--sm){padding:var(--space-1) var(--space-3)!important;font-size:var(--font-size-small)!important;display:inline-flex!important;align-items:center!important;gap:var(--space-2)!important}.file-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border-subtle)}.file-row:last-child{border-bottom:none}.file-row--error{background:#ef44440a}.file-main{min-width:0;flex:1}.file-name{font-size:var(--font-size-small);color:var(--color-text);word-break:break-word}.file-meta{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font-size:.75rem;color:var(--color-text-muted);margin-top:2px}.file-error{color:#f87171}.savings-badge{font-size:.7rem;padding:1px 5px;border-radius:var(--radius-sm);font-weight:600}.savings-badge--positive{background:#22c55e26;color:#4ade80;border:1px solid rgba(34,197,94,.25)}.savings-badge--negative{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.25)}.upload-line{width:100%;height:2px;margin-top:var(--space-2);background:var(--color-surface-muted);border-radius:99px;overflow:hidden}.upload-line-fill{height:100%;background:var(--color-accent)}.file-actions{flex-shrink:0;display:flex;align-items:center;gap:var(--space-1)}.status-badge{font-size:.7rem;padding:2px 7px;border-radius:var(--radius-pill);letter-spacing:.03em;display:flex;align-items:center;gap:4px}.status-badge--pending{background:#a1a1aa1f;color:var(--color-text-muted);border:1px solid rgba(161,161,170,.2)}.status-badge--converting{background:#4a6fa526;color:var(--color-accent);border:1px solid rgba(74,111,165,.25)}.spinner{display:inline-block;width:10px;height:10px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:tool-ffmpeg-batch-spin .7s linear infinite}.icon-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--color-border-subtle);background:var(--color-surface-muted);color:var(--color-text-muted);cursor:pointer}.icon-btn:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.icon-btn--retry:hover{background:#f59e0b;border-color:#f59e0b}.icon-btn--remove:hover{background:#ef4444;border-color:#ef4444}.seo-content{padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle)}.seo-heading{font-family:var(--font-family-mono);font-size:var(--font-size-h3);font-weight:600;color:var(--color-text);margin:0 0 var(--space-3)}.seo-heading:not(:first-child){margin-top:var(--space-5)}.seo-content p{margin:0 0 var(--space-3);font-size:var(--font-size-body);color:var(--color-text-muted);line-height:1.65}.seo-stats{margin:0 0 var(--space-3);padding:var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm, 6px);background:var(--color-surface);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-3)}.seo-stat{display:flex;flex-direction:column;gap:4px}.seo-stat dt{margin:0;font-family:var(--font-family-mono);font-size:var(--font-size-small);color:var(--color-text)}.seo-stat dd{margin:0;color:var(--color-text-muted);line-height:1.5}.seo-list{margin:0 0 var(--space-3);padding-left:var(--space-4);color:var(--color-text-muted);font-size:var(--font-size-body);line-height:1.65}.seo-list li{margin-bottom:var(--space-2)}.seo-list li strong{color:var(--color-text);font-weight:600}.seo-faq-q{margin:0 0 var(--space-2);font-family:var(--font-family-mono);font-size:var(--font-size-body);color:var(--color-text)}.seo-faq p{margin:0 0 var(--space-3);font-size:var(--font-size-body);color:var(--color-text-muted);line-height:1.65}.settings-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:900px){.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.hero{padding:var(--space-2) 0}.hero-title{font-size:var(--font-size-h2);margin-bottom:var(--space-1)}.tool-body{padding-top:var(--space-3);gap:var(--space-2)}.settings-grid{grid-template-columns:1fr}.setting.checkbox-setting{margin-top:0}.file-list-header{flex-direction:column;align-items:flex-start}.file-list-actions{width:100%}.file-list-actions .button{flex:1;justify-content:center}.file-row{padding:var(--space-2) var(--space-3)}.seo-stats{grid-template-columns:1fr}.tool-page :global(.drop-zone){padding:var(--space-4) var(--space-3);gap:var(--space-2)}}