/* --- General Body and Layout --- */
body { margin: 0; font-family: 'Inter', sans-serif; background-color: #F9FAFB; color: #232323; font-size: 16px;}
body.mobile-menu-open { overflow: hidden; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 15px; }
main { padding: 50px 0; background-color: #0077CC; color: white; }
.content-section { margin: 50px auto; }
.card { background-color: #FFFFFF; padding: 20px 30px 30px 30px; border-radius: 10px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12); text-align: left; }
h1, h2, h3, h4 { text-align: left; font-weight: 600; color: #212529; }
h1 { font-size: 26px; line-height: 1.7em; margin-bottom: 10px; text-align: center; color: white; }
.subtitle { text-align: center; color: white; max-width: 700px; margin: 10px auto 0; font-size: 16px; line-height: 1.8em; }
.notice { text-align: center; font-size: 14px; margin-top: 15px; color: #ffffff; }
h2 { font-size: 22px; line-height: 2.2em; margin-top: 40px; margin-bottom: 20px; }
h3 { font-size: 20px; margin-top: 0px; }
h4 { font-size: 18px; margin-top: 25px; margin-bottom: 5px; }
p { line-height: 2em; margin-bottom: 1.8em; text-align: justify;}
.features-list { list-style: none; padding-left: 0; }
.features-list li { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2328a745" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>') no-repeat left 12px; padding-left: 25px; margin-bottom: 1em; line-height: 2em; }
.how-it-works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: 30px 0; }
.step-card { text-align: center; }
.step-card img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; }
.step-card h3 { font-size: 20px; margin-bottom: 10px; text-align: center;}
.step-card p { font-size: 16px; line-height: 1.6; text-align: center; }
.content-divider { border: 0; border-top: 1px solid #e9ecef; margin: 40px 0; }

/* --- YouTube Video Section --- */
.video-section { margin: 30px 0; }
.youtube-player { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; border-radius: 12px; cursor: pointer; background-color: #000; }
.youtube-player img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: opacity 0.3s ease; }
.youtube-player .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55C3.97,2.33,2.27,4.81,1.48,7.74,0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="red"></path><path d="M 45,24 27,14 27,34" fill="white"></path></svg>') center center no-repeat; transition: transform 0.2s ease; z-index: 1; }
.youtube-player:hover .play-button { transform: translate(-50%, -50%) scale(1.1); }
.youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* --- Header & Navigation (FINAL) --- */
header { background-color: #FFFFFF; box-shadow: 0 2px 4px rgba(0,0,0,0.05); position: relative; top: 0; left: 0; width: 100%; z-index: 1002; height: 80px; }
header .container { display: flex; justify-content: space-between; align-items: center; height: 100%;}
header .logo { width: 270px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: 20px; }
.desktop-nav a { color: #54595F; text-decoration: none; font-weight: 500; }
.language-switcher { position: relative; display: inline-block; }
.language-btn { background: none; border: none; color: #54595F; font-weight: 500; cursor: pointer; padding: 10px; font-family: 'Inter', sans-serif; font-size: 15px; display: flex; align-items: center; gap: 5px; }
.language-btn::after { content: '▼'; font-size: 0.6em; }
.language-dropdown { display: none; position: absolute; background-color: #f9f9f9; min-width: 140px; max-height: 300px; overflow-y: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 100; border-radius: 5px; right: 0; }
.language-dropdown a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.language-dropdown a:hover { background-color: #f1f1f1; }
.language-switcher:hover .language-dropdown { display: block; }

/* --- NEW Mobile Menu Styles (FINAL) --- */
.mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1002; }
.mobile-menu-toggle span { display: block; width: 25px; height: 3px; background-color: #333; margin: 5px 0; transition: all 0.3s ease-in-out; }
.mobile-menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu { visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #ffffff; z-index: 1001; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* Aligned to top */ transition: opacity 0.3s ease, visibility 0s 0.3s; overflow-y: auto; padding: 100px 20px 20px; box-sizing: border-box; }
.mobile-menu.active { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s 0s; }
.mobile-menu a { color: #333; font-size: 24px; font-weight: 500; text-decoration: none; margin: 15px 0; }
.mobile-menu hr { width: 80%; max-width: 200px; border: 0; border-top: 1px solid #ddd; margin: 15px auto; }
.mobile-menu .language-switcher-mobile { text-align: center; }
.mobile-menu .language-switcher-mobile p { font-size: 16px; color: #888; margin: 20px 0 10px; }

/* --- Footer --- */
footer { background-color: #f8f9fa; padding: 40px 0; text-align: center; font-size: 14px; color: #232323; }
footer p { margin-bottom: 1em; line-height: 1.8em; }
footer a { color: #212529; }
.footer-links { margin: 20px 0; }
.footer-links a { margin: 0 15px; text-decoration: none; line-height: 2em;}

/* --- Downloader Styles --- */
.ts-downloader-box{max-width:750px;margin:20px auto;padding:25px;border:1px solid #e9ecef;border-radius:12px;background-color:#ffffff;text-align:center;box-shadow:0 8px 25px rgba(0,0,0,0.07);font-family:inherit}.ts-input-wrapper{display:flex;gap:12px;align-items:center;flex-wrap:nowrap}.ts-downloader-box input[type="url"]{flex-grow:1;padding:12px 18px;border:1px solid #ced4da;border-radius:8px;font-size:1rem;box-sizing:border-box;height:50px;min-width:150px;transition:border-color 0.2s ease,box-shadow 0.2s ease}.ts-downloader-box input[type="url"]:focus{border-color:#80bdff;box-shadow:0 0 0 0.2rem rgba(0,123,255,.25);outline:none}.ts-downloader-box #ts-paste-btn,.ts-downloader-box #ts-download-btn{padding:0 22px;border:1px solid #ced4da;background-color:#e9ecef;color:#495057;border-radius:8px;cursor:pointer;font-size:0.95rem;font-weight:500;white-space:nowrap;transition:background-color 0.2s ease,border-color 0.2s ease,transform 0.1s ease;height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.ts-downloader-box #ts-paste-btn:hover{background-color:#dee2e6;border-color:#adb5bd}.ts-downloader-box #ts-paste-btn:active,.ts-downloader-box #ts-download-btn:active{transform:translateY(1px)}.ts-downloader-box #ts-download-btn{background-color:#0077CC;color:white;border-color:#0077CC}.ts-downloader-box #ts-download-btn:hover{background-color:#0069d9;border-color:#0062cc}.ts-downloader-box #ts-download-btn:disabled{background-color:#6c757d;border-color:#6c757d;cursor:not-allowed;opacity:0.65}.ts-results-area{max-width:750px;margin:5px auto;padding:0;border:none;border-radius:12px;word-wrap:break-word;text-align:left;font-family:inherit}.ts-results-hidden{display:none}.ts-message{padding:20px 25px;margin-bottom:18px;border-radius:10px;font-size:1rem;line-height:1.65;border:1px solid transparent;box-shadow:0 6px 18px rgba(0,0,0,0.06);overflow:hidden;position:relative}.ts-message p{margin-top:0;margin-bottom:0.6em; text-align: left;}.ts-message p:last-child{margin-bottom:0}.ts-loading{color:#004085;background-color:#cce5ff;border-color:#b8daff;display:flex;align-items:center}.ts-loading::before{content:"";display:inline-block;width:20px;height:20px;margin-right:12px;border:3px solid rgba(0,64,133,0.2);border-radius:50%;border-top-color:#004085;animation:ts-spinner 0.8s ease-in-out infinite;flex-shrink:0}@keyframes ts-spinner{to{transform:rotate(360deg)}}.ts-error{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.ts-error::before{content:"⚠️";margin-right:10px;font-size:1.2em}.ts-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.ts-file-info{margin-bottom:18px;padding-bottom:15px;border-bottom:1px solid rgba(21,87,36,0.15)}.ts-file-info p{margin-bottom:8px !important;font-size:0.95em}.ts-file-info p strong{color:#0d3c19;min-width:90px;display:inline-block}.ts-actions-area{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:flex-start;margin-top:15px}.ts-action-button,.ts-support-button,.ts-bookmark-button{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border:none;border-radius:6px;font-weight:500;font-size:0.95rem;text-decoration:none !important;cursor:pointer;transition:background-color 0.2s ease,transform 0.1s ease,box-shadow 0.2s ease;box-shadow:0 2px 5px rgba(0,0,0,0.1)}.ts-action-button:hover,.ts-support-button:hover,.ts-bookmark-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.15)}.ts-action-button:active,.ts-support-button:active,.ts-bookmark-button:active{transform:translateY(0px);box-shadow:0 2px 5px rgba(0,0,0,0.1)}.ts-action-button svg,.ts-support-button svg,.ts-bookmark-button svg{vertical-align:middle;margin-right:8px}.ts-download-link-button{background-color:#28a745;color:white !important}.ts-download-link-button:hover{background-color:#218838}.ts-copy-link-button{background-color:#007bff;color:white !important;padding:10px 18px}.ts-copy-link-button:hover{background-color:#0069d9}.ts-bookmark-section,.ts-share-section,.ts-financial-support-section{margin-top:25px;padding-top:20px;border-top:1px dashed #c3e6cb}.ts-section-title{font-size:1.1em !important;font-weight:700;color:#155724;margin-bottom:15px;text-align:left}.ts-bookmark-section p{font-size:0.95em;color:#333;margin-bottom:12px}.ts-extra-button{background-color:#ffc107;color:#212529 !important; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: 500;}.ts-support-button{background-color:#dc3545;color:white !important}.ts-support-button:hover{background-color:#c82333}.ts-share-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}.ts-share-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;text-decoration:none !important;transition:background-color 0.2s ease,transform 0.2s ease;background-color:#e9ecef;border:1px solid #dee2e6}.ts-share-button svg{width:20px;height:20px;fill:#495057}.ts-share-button:hover{transform:scale(1.1);background-color:#dee2e6}.ts-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;z-index:1050;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0s linear 0.3s}.ts-modal-overlay.active{opacity:1;visibility:visible;transition:opacity 0.3s ease}.ts-modal-content{background-color:#fff;padding:25px 30px;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,0.3);width:90%;max-width:500px;text-align:left;position:relative;transform:translateY(-20px);transition:transform 0.3s ease;max-height:80vh;overflow-y:auto}.ts-modal-overlay.active .ts-modal-content{transform:translateY(0)}.ts-modal-close-btn{position:absolute;top:15px;right:15px;background:none;border:none;font-size:1.8rem;line-height:1;color:#6c757d;cursor:pointer;padding:0}.ts-modal-close-btn:hover{color:#343a40}.ts-modal-title{font-size:1.4em;font-weight:700;color:#343a40;margin-top:0;margin-bottom:20px}.ts-modal-body p{font-size:0.95em;line-height:1.6;margin-bottom:12px;color:#495057}.ts-modal-body ul{list-style-type:disc;padding-left:25px;margin-bottom:15px}.ts-modal-body li{margin-bottom:8px;font-size:0.9em}.ts-modal-body code{background-color:#e9ecef;padding:2px 5px;border-radius:4px;font-family:monospace;color:#c82333}.ts-modal-body h5{font-size:1em;font-weight:700;color:#343a40;margin-top:15px;margin-bottom:8px}.ts-donation-address{background-color:#f8f9fa;border:1px solid #e9ecef;padding:8px 12px;border-radius:5px;font-family:monospace;font-size:0.9em;color:#343a40;margin-bottom:10px;word-break:break-all}.ts-donation-address strong{color:#007bff;display:block;margin-bottom:4px;font-family:'Inter',sans-serif;font-weight:500}

/* --- Responsive --- */
@media (max-width: 1024px) { 
    .desktop-nav{display:none}
    .mobile-menu-toggle{display:block; position: relative; right: 0px;}
}
@media (max-width: 767px) {
    header .logo{width:220px}
    main{padding:30px 0}
    h1{font-size:22px}
    h2{font-size:20px}
    .how-it-works-grid {grid-template-columns: 1fr; display: block !important;}
    .footer-links {display: inline-grid
;}
.footer-links a {padding: 5px 0;}
}
@media (max-width: 600px) {
    .ts-downloader-box{padding:20px 15px;border-radius:10px}
    .ts-input-wrapper{gap:10px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto}
    .ts-downloader-box input[type="url"],.ts-downloader-box #ts-paste-btn,.ts-downloader-box #ts-download-btn{height:46px;font-size:0.95rem;border-radius:6px}
    .ts-downloader-box #ts-download-btn{grid-column:1/3;grid-row:2/3;width:100%}
    .ts-downloader-box #ts-paste-btn{padding:0 15px}
    .ts-results-area{margin-left:10px;margin-right:10px;margin-top:5px}
    .ts-message{padding:18px;font-size:0.95rem;border-radius:8px}
    .ts-file-info p{font-size:0.9rem}
    .ts-file-info p strong{min-width:80px}
    .ts-actions-area, .ts-extra-sections{flex-direction:column;align-items:stretch; display: block;}
    .ts-action-button,.ts-support-button,.ts-bookmark-button, .ts-extra-button{width:100%;justify-content:center;margin-bottom:10px}
    .ts-action-button:last-child,.ts-support-button:last-child,.ts-bookmark-button:last-child{margin-bottom:0}
    .ts-share-buttons{justify-content:center}
    .ts-bookmark-section, .ts-share-section, .ts-financial-support-section{text-align:center}
    .ts-modal-content{padding:20px}
    .ts-modal-title{font-size:1.2em}
    .how-it-works-grid {display: block;}
}
/* Styles for inner pages like /extension/ */
main.page-main {
    background-color: #F9FAFB;
    color: #232323;
    padding: 40px 0;
}
li {
    padding: 10px 0px;
    line-height: 1.6em;
}
.content-section { margin: 50px auto; }
.card { background-color: #FFFFFF; padding: 20px 30px 30px 30px; border-radius: 10px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12); text-align: left; }
.page-hero-image { width: 100%; height: auto; border-radius: 8px; margin: 20px 0; }

h1, h2, h3, h4 { text-align: left; font-weight: 600; color: #212529; }
h1 { font-size: 26px; line-height: 1.7em; margin-bottom: 10px; text-align: center; }
main > .container > h1 { color: white; } /* Specificity for main page h1 */

h2 { font-size: 22px; line-height: 2.2em; margin-top: 40px; margin-bottom: 20px; }
h3 { font-size: 20px; margin-top: 30px; }
h4 { font-size: 18px; margin-top: 25px; margin-bottom: 5px; }
p { line-height: 2em; margin-bottom: 1.8em; text-align: justify;}
.features-list { list-style: none; padding-left: 0; }
.features-list li { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2328a745" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>') no-repeat left 12px; padding-left: 25px; margin-bottom: 1em; line-height: 2em; }
.how-it-works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: 30px 0; }
.step-card { text-align: center; }
.step-card img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; }
.step-card h3 { font-size: 20px; margin-bottom: 10px; text-align: center;}
.step-card p { font-size: 16px; line-height: 1.6; text-align: center; }
.content-divider { border: 0; border-top: 1px solid #e9ecef; margin: 40px 0; }
/* Extension Page Buttons */
.extension-buttons { display: flex; justify-content: center; gap: 20px; margin: 30px 0; }
.extension-button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; text-decoration: none; font-weight: 500; border-radius: 8px; transition: transform 0.2s ease; }
.extension-button:hover { transform: translateY(-2px); }
.extension-button.firefox { background-color: #ff9500; color: white;}
.extension-button img { height: 24px;}