/* Scoped visual refresh only. All upload, cancel and download handlers are untouched. */
body.index-page :is(#tab3,#tab4,#tab5,#tab66) { position: relative; padding-block: 12px !important; }
body.index-page :is(#tab3,#tab4,#tab5,#tab66) > .feature-difference-toolbar { position: absolute; top: 12px; right: 0; margin: 0; z-index: 1; max-width: 135px; }
body.index-page #tab3 .sm-compress-file { flex-direction: column-reverse; align-items: stretch !important; gap: 12px; margin: 0 0 12px; }
body.index-page #tab3 .sm-compress-file h6 { box-sizing: border-box; width: 100%; min-height: 34px; height: auto; padding: 0 145px 0 0; margin: 0; text-align: left !important; color: #18332f !important; font-size: 17px; line-height: 1.8 !important; overflow-wrap: anywhere; }
body.index-page #tab3 .sm-compress-file > .d-flex { align-self: flex-end; max-width: 100%; }
body.index-page #tab3 .sm-compress-file button { min-height: 36px; height: auto !important; padding: 7px 12px !important; gap: 6px !important; font-size: 11px !important; line-height: 1.7 !important; border-radius: 10px !important; animation: home-file-upload-nudge 2.8s ease-in-out infinite; }
body.index-page #tab3 .sm-compress-file button::before { font-size: 14px; }
body.index-page #tab4 #react-root > .text-center:first-child { box-sizing: border-box; min-height: 34px; margin: 0 0 18px !important; padding: 0 145px 0 0; text-align: left !important; }
body.index-page #tab4 #react-root > .text-center:first-child h6 { margin: 0; padding: 0; text-align: left !important; color: #18332f !important; font-size: 17px; line-height: 1.8 !important; overflow-wrap: anywhere; }
body.index-page #tab5 .bio-header h6 { box-sizing: border-box; min-height: 34px; padding: 0 145px 0 0 !important; margin: 0 0 18px !important; text-align: left !important; line-height: 1.8; overflow-wrap: anywhere; }
body.index-page #tab5 .bio-header h6 a { display: inline-block; max-width: 100%; }
/* Empty state is inferred from the existing rendered file cards; no upload state is saved. */
body.index-page #tab3:not(:has(.files-box .file-item)) label.compress_note { background: #eff1ef; border-color: #dce1dd; color: #a0aaa3 !important; cursor: default; pointer-events: none; }
body.index-page #tab3 .file-item .download-file:is(:not(.d-none),[server-file]) { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #236e50; background: #2d865f; color: #fff !important; border-radius: 10px; line-height: 1 !important; box-shadow: 0 3px 9px rgba(35,110,80,.15); cursor: pointer; }
body.index-page #tab3 .file-item .download-file.d-none:not([server-file]) { display: none !important; }
body.index-page #tab3 .file-item .download-file:is(:not(.d-none),[server-file]):hover { background: #1c6c49; }
body.index-page #tab3 #download_all_btn:not(:disabled) { animation: home-file-download-nudge 3s ease-in-out infinite; }
body.index-page #tab3 #download_all_btn:disabled { animation: none; }
@keyframes home-file-upload-nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes home-file-download-nudge { 0%,100% { transform: translateY(0); box-shadow: 0 4px 12px -7px rgba(26,103,89,.35); } 50% { transform: translateY(-2px); box-shadow: 0 7px 18px -7px rgba(26,103,89,.5); } }
@media (max-width: 600px) {
    body.index-page #tab3 .sm-compress-file h6,body.index-page #tab4 #react-root > .text-center:first-child h6,body.index-page #tab5 .bio-header h6 { font-size: 15px; }
    body.index-page :is(#tab3,#tab4,#tab5,#tab66) > .feature-difference-toolbar { max-width: 112px; }
    body.index-page #tab3 .sm-compress-file h6,body.index-page #tab4 #react-root > .text-center:first-child,body.index-page #tab5 .bio-header h6 { padding-right: 120px !important; }
    body.index-page #tab3 .sm-compress-file button { padding: 6px 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
    body.index-page #tab3 .sm-compress-file button,body.index-page #tab3 #download_all_btn:not(:disabled) { animation: none; }
}

/* Screen capture title shares the same top-left header alignment. */
body.index-page #tab66 > .col-12.my-3.text-center { box-sizing: border-box; display: flex; align-items: center; min-height: 32px; margin: 0 0 18px !important; padding: 0 102px 0 0; text-align: left !important; }
body.index-page #tab66 > .col-12.my-3.text-center h6 { margin: 0; color: #18332f !important; font-size: 17px; line-height: 1.8; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
body.index-page #tab66 > .col-12.my-3.text-center h6 b { font-size: inherit !important; white-space: nowrap; }
@media (max-width: 600px) {
    body.index-page #tab66 > .col-12.my-3.text-center { padding-right: 88px; }
    body.index-page #tab66 > .col-12.my-3.text-center h6 { font-size: clamp(10px, 3vw, 15px); }
}