/* translate.css — translate.html */
.container { max-width: 720px; margin: 0 auto; padding: 32px 24px; }
h1 { font-size: 32px; margin: 0 0 8px; }
.subtitle { color: var(--muted); margin: 0 0 24px; }
/* Mode toggle */
.mode-toggle { display: flex; gap: 0; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: white; }
.mode-btn { flex: 1; padding: 10px 16px; border: none; background: transparent; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--muted); transition: all .15s; font-family: var(--font); }
.mode-btn.active { background: var(--teal); color: white; font-weight: 600; }
.mode-btn:not(.active):hover { background: var(--slate-50); color: var(--text); }
/* Popular pairs */
.popular-pairs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.popular-pairs span { font-size: 12px; color: var(--muted); font-weight: 600; }
.pair-btn { padding: 4px 10px; border: 1px solid var(--teal); border-radius: 20px; font-size: 12px; color: var(--teal-dark); background: white; cursor: pointer; transition: all .15s; font-family: var(--font); }
.pair-btn:hover { background: var(--teal); color: white; }
/* Language section */
.lang-section { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.lang-section label { display: block; font-size: 13px; font-weight: 600; color: var(--slate-700); margin-bottom: 12px; }
.lang-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.lang-row select { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: white; font-size: 15px; font-family: var(--font); cursor: pointer; width: 100%; }
.lang-row select:focus { outline: none; border-color: var(--teal); }
.swap-btn { background: var(--slate-100); border: 1px solid var(--border); border-radius: var(--radius-sm); width: 40px; height: 40px; cursor: pointer; font-size: 18px; transition: background .15s; }
.swap-btn:hover { background: var(--slate-200); }
/* Accuracy hint */
.accuracy-hint { margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; display: none; }
.accuracy-hint.high_accuracy { background: #F0FDF4; border: 1px solid #86EFAC; color: #166534; }
.accuracy-hint.good_accuracy { background: #FEFCE8; border: 1px solid #FDE047; color: #854D0E; }
.accuracy-hint.review_recommended { background: #FFF7ED; border: 1px solid #FDBA74; color: #9A3412; }
/* World-language gate */
.world-lang-gate {
margin-top: 10px;
padding: 10px 14px;
background: #EFF6FF;
border: 1px solid #93C5FD;
border-radius: var(--radius-sm);
font-size: 13px;
color: #1E40AF;
display: none;
}
.world-lang-gate a { color: #1E40AF; font-weight: 700; }
/* Multi-language section */
#multiSection { display: none; }
.multi-source-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.multi-source-row label { font-size: 13px; font-weight: 600; color: var(--slate-700); white-space: nowrap; }
.multi-source-row select { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font); }
.multi-source-row { position: relative; }
.multi-source-row .ls-wrapper { flex: 1; position: static; }
.lang-group { margin-bottom: 14px; }
.lang-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 8px; }
.lang-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.lang-check-item { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: white; transition: all .15s; font-size: 13px; user-select: none; }
.lang-check-item:hover:not(.disabled) { border-color: var(--teal); background: #F0FDFA; }
.lang-check-item.checked { border-color: var(--teal); background: #F0FDFA; }
.lang-check-item.disabled { opacity: 0.45; cursor: not-allowed; }
.lang-check-item.world-lang { border-style: dashed; }
.lang-check-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--teal); flex-shrink: 0; }
.multi-counter { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }
.multi-counter strong { color: var(--text); }
.anon-banner { padding: 12px 16px; background: #F0FDFA; border: 1px solid var(--teal); border-radius: var(--radius-sm); font-size: 13px; color: var(--teal-dark); text-align: center; margin-top: 10px; }
.anon-banner a { color: var(--teal-dark); font-weight: 700; }
/* File list */
.file-list { margin-bottom: 12px; }
/* Bilingual checkbox */
.bilingual-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 14px; cursor: pointer; }
.bilingual-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--teal); flex-shrink: 0; }
.bilingual-row.disabled-row { opacity: 0.6; cursor: default; }
.bilingual-row .pro-tag { display: inline-block; background: linear-gradient(135deg, #14B8A6, #0F766E); color: white; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; margin-left: 6px; vertical-align: middle; }
/* Formality toggle */
.formality-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; font-size: 14px; }
.formality-row label { font-weight: 600; color: var(--slate-700); margin-right: 8px; }
.formality-toggle { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.formality-btn { padding: 4px 12px; border: none; background: white; cursor: pointer; font-size: 13px; color: var(--muted); font-family: var(--font); transition: all .15s; }
.formality-btn.active { background: var(--teal); color: white; font-weight: 600; }
/* Detected language */
.detected-lang { margin-top: 8px; font-size: 12px; color: var(--slate-500); padding: 6px 10px; background: var(--slate-50); border-radius: 6px; }
.detected-lang.uncertain { color: var(--warn); }
/* Quota note */
.quota-note { margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; }
/* Progress */
.progress { display: flex; align-items: flex-start; gap: 12px; background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-top: 16px; }
.progress-langs { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.progress-langs li { padding: 3px 0; color: var(--slate-700); }
.progress-langs li .status { margin-left: 6px; }
/* Multi results */
.multi-results { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.result-card { background: white; border: 1px solid #86EFAC; border-radius: var(--radius-sm); padding: 14px; }
.result-card .lang-name { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.result-card .dl-btn { display: block; margin-top: 8px; padding: 8px 14px; background: #16A34A; color: white; border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 600; text-align: center; }
.result-card.error-card { border-color: #FCA5A5; }
.result-card.error-card .dl-btn { background: var(--danger); }
.bilingual-note { font-size: 12px; color: var(--muted); margin-top: 8px; padding: 6px 10px; background: var(--slate-50); border-radius: 6px; }
/* Translation result card (Phase 3) */
.translation-result-card {
background: #F0FDF4;
border: 1px solid #86EFAC;
border-radius: var(--radius);
padding: 20px;
margin-top: 16px;
}
.translation-result-card .result-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; font-size: 14px; color: var(--slate-700); }
.translation-result-card .result-meta span { display: flex; align-items: center; gap: 6px; }
.translation-result-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.translation-result-actions a, .translation-result-actions button {
padding: 10px 20px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 14px;
cursor: pointer;
text-decoration: none;
border: none;
font-family: var(--font);
}
.btn-download { background: #16A34A; color: white; }
.btn-another { background: var(--slate-100); color: var(--text); border: 1px solid var(--border) !important; }
/* Language selector (Phase 2) */
.ls-wrapper { position: relative; }
.ls-display {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: white;
cursor: pointer;
font-size: 15px;
font-family: var(--font);
width: 100%;
transition: border-color .15s;
}
.ls-display:hover, .ls-display.open { border-color: var(--teal); }
.ls-display .ls-arrow { color: var(--muted); font-size: 12px; transition: transform .15s; }
.ls-display.open .ls-arrow { transform: rotate(180deg); }
.ls-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: white;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
z-index: 200;
max-height: 400px;
overflow-y: scroll;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
/* Firefox */
scrollbar-width: thin;
scrollbar-color: var(--slate-300) var(--slate-50);
}
.ls-dropdown.open { display: block; }
.ls-search {
padding: 10px 12px;
border: none;
border-bottom: 1px solid var(--border);
width: 100%;
font-size: 14px;
font-family: var(--font);
outline: none;
position: sticky;
top: 0;
background: white;
z-index: 1;
}
.ls-group-header {
padding: 6px 12px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--muted);
background: var(--slate-50);
border-bottom: 1px solid var(--border);
}
.ls-item {
padding: 10px 14px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
transition: background .1s;
}
.ls-item:hover { background: #F0FDFA; }
.ls-item.selected { background: #ECFDF5; font-weight: 600; }
.ls-item .ls-native { color: var(--muted); font-size: 13px; }
.ls-item .ls-rtl { direction: rtl; }
.ls-item .ls-acc { font-size: 11px; }
.ls-no-results { padding: 20px; text-align: center; color: var(--muted); font-size: 14px; }
.ls-list { /* scrollable container inside dropdown */ }
/* Always-visible thin scrollbar so users know the dropdown is scrollable */
.ls-dropdown::-webkit-scrollbar { width: 5px; }
.ls-dropdown::-webkit-scrollbar-track { background: var(--slate-50); }
.ls-dropdown::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 3px; }
.ls-dropdown::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }
.ls-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-name { font-weight: 500; }
/* Quality badge */
.quality-badge {
margin-top: 10px;
padding: 8px 12px;
border-radius: var(--radius-sm);
font-size: 13px;
display: none;
}
.quality-badge.excellent { background: #F0FDF4; border: 1px solid #86EFAC; color: #166534; }
.quality-badge.good { background: #FEFCE8; border: 1px solid #FDE047; color: #854D0E; }
.quality-badge.fair { background: #FFF7ED; border: 1px solid #FDBA74; color: #9A3412; }
/* Language grid in content sections */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.lang-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; }
.lang-card strong { display: block; color: var(--text); margin-bottom: 2px; }
.lang-card span { color: var(--muted); font-size: 13px; }
/* Multi-select language dropdown (multi mode target) */
.mls-wrapper { position: relative; width: 100%; }
.mls-display {
display: flex; align-items: center; justify-content: space-between;
min-height: 46px; padding: 6px 12px 6px 10px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: white; cursor: pointer; font-family: var(--font);
transition: border-color .15s; gap: 8px;
}
.mls-display:hover, .mls-display.open { border-color: var(--teal); }
.mls-tags { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.mls-tag {
display: inline-flex; align-items: center; gap: 4px;
background: var(--teal); color: white; border-radius: 4px;
padding: 3px 6px 3px 10px; font-size: 13px; font-weight: 500;
}
.mls-tag-remove {
background: none; border: none; color: white; cursor: pointer;
font-size: 15px; line-height: 1; padding: 0; opacity: 0.75;
}
.mls-tag-remove:hover { opacity: 1; }
.mls-placeholder { font-size: 14px; color: var(--muted); }
.mls-arrow { color: var(--muted); font-size: 12px; flex-shrink: 0; transition: transform .15s; }
.mls-display.open .mls-arrow { transform: rotate(180deg); }
.mls-dropdown {
display: none; position: absolute;
top: calc(100% + 4px); left: 0; right: 0;
background: white; border: 1px solid var(--border);
border-radius: var(--radius-sm); box-shadow: var(--shadow);
z-index: 200; max-height: 320px; overflow-y: scroll;
overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
scrollbar-width: thin; scrollbar-color: var(--slate-300) var(--slate-50);
}
.mls-dropdown.open { display: block; }
.mls-dropdown::-webkit-scrollbar { width: 5px; }
.mls-dropdown::-webkit-scrollbar-track { background: var(--slate-50); }
.mls-dropdown::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 3px; }
.mls-dropdown::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }
.mls-search {
padding: 10px 12px; border: none; border-bottom: 1px solid var(--border);
width: 100%; box-sizing: border-box; font-size: 14px; font-family: var(--font);
outline: none; position: sticky; top: 0; background: white; z-index: 1;
}
.mls-group-header {
padding: 6px 12px; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted);
background: var(--slate-50); border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 6px;
}
.mls-pro-badge {
font-size: 10px; background: linear-gradient(135deg, #14B8A6, #0F766E);
color: white; padding: 1px 5px; border-radius: 3px;
font-weight: 700; letter-spacing: 0; text-transform: none;
}
.mls-item {
padding: 10px 14px; cursor: pointer; font-size: 14px;
display: flex; align-items: center; gap: 10px; transition: background .1s;
}
.mls-item:hover:not(.mls-disabled) { background: #F0FDFA; }
.mls-item.mls-selected { background: #ECFDF5; }
.mls-item.mls-disabled { opacity: 0.45; cursor: not-allowed; }
.mls-item-check { width: 15px; height: 15px; accent-color: var(--teal); flex-shrink: 0; pointer-events: none; }
.mls-name { font-weight: 500; }
.mls-native { color: var(--muted); font-size: 13px; }
.mls-acc { font-size: 11px; margin-left: auto; }
.mls-no-results { padding: 20px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 480px) {
h1 { font-size: 24px; }
.lang-row { grid-template-columns: 1fr auto 1fr; }
.multi-results { grid-template-columns: 1fr 1fr; }
.translation-result-card .result-meta { grid-template-columns: 1fr; }
}
/* Social proof bar */
.social-proof-bar { display: flex; align-items: center; gap: 0; background: white; border: 1px solid var(--border); border-radius: 10px; padding: 12px 20px; margin-bottom: 20px; }
.sp-stat { flex: 1; text-align: center; }
.sp-stat-value { font-size: 18px; font-weight: 700; color: var(--teal-dark); line-height: 1.2; }
.sp-stat-label { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sp-divider { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; }
/* Live demo section */
.demo-section { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.demo-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; background: #F0FDFA; color: var(--teal-dark); border: 1px solid var(--teal); border-radius: 4px; padding: 2px 7px; margin-bottom: 8px; }
.demo-headline { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 12px; }
.demo-samples { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.demo-sample-btn { padding: 4px 10px; border: 1px solid var(--border); border-radius: 20px; font-size: 12px; color: var(--muted); background: var(--slate-50); cursor: pointer; font-family: var(--font); transition: all .15s; }
.demo-sample-btn:hover, .demo-sample-btn.active { border-color: var(--teal); color: var(--teal-dark); background: #F0FDFA; }
.demo-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: var(--font); resize: vertical; min-height: 80px; color: var(--text); }
.demo-textarea:focus { outline: none; border-color: var(--teal); }
.demo-textarea[dir="rtl"] { text-align: right; }
.demo-btn { margin-top: 10px; padding: 10px 20px; background: var(--teal); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font); transition: background .15s; }
.demo-btn:hover { background: var(--teal-dark); }
.demo-btn:disabled { opacity: .5; cursor: not-allowed; }
.demo-result { margin-top: 12px; display: none; }
.demo-meta { font-size: 11px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 12px; }
.demo-translated { background: #F8FAFC; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; }
.demo-translated[dir="rtl"] { text-align: right; }
.demo-cta { margin-top: 10px; font-size: 13px; color: var(--muted); }
.demo-cta a { color: var(--teal-dark); font-weight: 600; text-decoration: none; }
.demo-error { margin-top: 10px; font-size: 13px; color: #991B1B; background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 6px; padding: 8px 12px; }
/* Multi-lang inline nudge */
.multi-lang-nudge { display: none; margin-top: 8px; padding: 10px 14px; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 8px; font-size: 13px; color: #92400E; }
.multi-lang-nudge a { color: #B45309; font-weight: 600; text-decoration: none; }
/* Complex-layout notice (dense tables) */
.complex-note { margin-top: 10px; padding: 10px 14px; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; color: #92400E; }
/* Post-translation nudge banner */
.nudge-banner { margin-top: 12px; padding: 12px 16px; background: #F0FDFA; border: 1px solid var(--teal); border-radius: 8px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nudge-banner a { color: var(--teal-dark); font-weight: 600; text-decoration: none; }
/* Secondary links inside the result card are plain text links — they must NOT
inherit the solid-green download-button styling from base.css `.result a`
(which made the text green-on-green / invisible). */
.result .edit-pdf-link,
.result .nudge-banner a,
.result .anon-banner a {
display: inline;
background: none;
padding: 0;
margin: 0;
border-radius: 0;
color: var(--teal-dark);
font-weight: 600;
text-decoration: none;
}
.result .edit-pdf-link { font-size: 13px; }
.result .edit-pdf-link:hover,
.result .nudge-banner a:hover,
.result .anon-banner a:hover { text-decoration: underline; }
.nudge-banner-dismiss { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; padding: 0; flex-shrink: 0; }
/* Feedback row */
.feedback-row { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.thumb-btn { background: white; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 15px; transition: background .15s; }
.thumb-btn:hover { background: #F0FDFA; border-color: var(--teal); }
.thumb-btn.voted { background: #F0FDF4; border-color: #86EFAC; }
/* Email capture */
.email-capture { margin-top: 16px; padding: 16px 20px; background: linear-gradient(135deg, #F0FDFA, #ECFDF5); border: 1px solid var(--teal); border-radius: 10px; }
.email-capture-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.email-capture-sub { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.email-capture-form { display: flex; gap: 8px; }
.email-capture-input { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: var(--font); }
.email-capture-input:focus { outline: none; border-color: var(--teal); }
.email-capture-btn { padding: 9px 16px; background: var(--teal); color: white; border: none; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font); white-space: nowrap; }
.email-capture-btn:hover { background: var(--teal-dark); }
.email-capture-success { font-size: 13px; color: #166534; font-weight: 600; }