/* Scoped paired surfaces/text keep the grammar and image workflow readable. */
body[data-dg-page=translate]{--tr-bg:#17261f;--tr-soft:#20362a;--tr-ink:#edf5ef;--tr-muted:#b5c9bc;--tr-border:#446451;--tr-action:#83d99b;--tr-action-ink:#10271a}
#grammar-panel .grammar-card,#panel-image.camera-panel{background:var(--tr-bg,#17261f)!important;background-image:none!important;border:1px solid var(--tr-border,#446451)!important;color:var(--tr-ink,#edf5ef)!important;border-radius:20px;padding:clamp(16px,3vw,28px);box-shadow:0 10px 28px #0002}
#grammar-panel :is(h3,h4,strong,p,span),#grammar-content{color:var(--tr-ink,#edf5ef)!important;background:transparent!important;text-shadow:none!important}
#grammar-content{white-space:normal!important;overflow-wrap:anywhere;font-size:15px;line-height:1.75;min-width:0}
#grammar-content p{margin:8px 0}#grammar-content h4{margin:16px 0 7px;font-weight:800}#grammar-content strong{font-weight:800}
#grammar-panel button{color:var(--tr-ink,#edf5ef)!important;min-height:44px;min-width:44px;border-radius:12px;background:var(--tr-soft,#20362a)!important}
#grammar-panel .grammar-table-wrap{overflow-x:auto;max-width:100%;margin:12px 0;border:1px solid var(--tr-border,#446451);border-radius:12px}
#grammar-content table{border-collapse:collapse;min-width:100%;font-size:14px;color:var(--tr-ink,#edf5ef)!important}#grammar-content th,#grammar-content td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--tr-border,#446451);white-space:normal;min-width:100px;color:var(--tr-ink,#edf5ef)!important;background:var(--tr-bg,#17261f)!important}#grammar-content th{background:var(--tr-soft,#20362a)!important}
#btn-grammar.grammar-action{width:auto!important;min-height:44px!important;height:auto!important;padding:8px 12px!important;gap:6px;background:#284a34!important;color:#ebf9ef!important;border:1px solid #52775e;border-radius:12px;font-size:12px}#btn-grammar::after{content:'AI phân tích câu';white-space:nowrap}#btn-grammar svg{flex-shrink:0}
.translation-provider{font-size:12px;color:var(--tr-muted,#b5c9bc);margin-top:10px}
#panel-image.camera-panel :is(h2,strong,label){color:var(--tr-ink)!important}#panel-image.camera-panel h2{font-size:clamp(21px,3vw,28px);font-weight:850;margin:0 0 6px}#panel-image .camera-heading{margin-bottom:20px}#panel-image .camera-heading p,#panel-image .camera-note{font-size:13px;color:var(--tr-muted)!important;line-height:1.65;margin:10px 0;overflow-wrap:anywhere}
#panel-image .camera-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}#panel-image .camera-settings label{display:grid;gap:7px;font-size:13px;font-weight:700;min-width:0}
#panel-image.camera-panel select,#panel-image.camera-panel textarea{background:var(--tr-soft)!important;color:var(--tr-ink)!important;border:1px solid var(--tr-border)!important;border-radius:12px;font:inherit;min-height:46px;max-width:100%;width:100%;padding:10px 12px;color-scheme:dark}#panel-image.camera-panel select{font-size:14px}#panel-image.camera-panel textarea{font-size:16px;line-height:1.7;resize:vertical;margin-top:8px;box-sizing:border-box}#panel-image.camera-panel select option{background:#20362a;color:#edf5ef}
#panel-image .camera-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:14px 0}#panel-image.camera-panel button,#panel-image .camera-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 15px;border:1px solid var(--tr-border)!important;background:var(--tr-soft)!important;color:var(--tr-ink)!important;border-radius:12px;font:inherit;font-size:14px;font-weight:750;cursor:pointer;touch-action:manipulation;transition:transform .15s,border-color .15s;text-align:center;line-height:1.4}
#panel-image.camera-panel .camera-primary{background:var(--tr-action)!important;color:var(--tr-action-ink)!important;border-color:var(--tr-action)!important}#panel-image.camera-panel button:disabled{opacity:.55;cursor:wait}#panel-image.camera-panel :is(button,label.camera-button):active{transform:scale(.98)}#panel-image :focus-visible{outline:3px solid #e4ba72!important;outline-offset:3px}
#panel-image.camera-panel [hidden]{display:none!important}#panel-image #camera-video{width:100%;max-height:65vh;object-fit:contain;background:#060c08;border-radius:16px}#panel-image #image-drop-zone{border:1px dashed var(--tr-border);padding:22px;border-radius:14px;text-align:center;color:var(--tr-muted);font-size:13px;cursor:pointer;margin:14px 0}#panel-image #image-drop-zone.dragover{background:var(--tr-soft)!important;transform:none}
#panel-image .camera-canvas-wrap{max-width:100%;text-align:center;border-radius:14px;background:#09110c;padding:4px}#camera-canvas{display:block;max-width:100%;height:auto;max-height:65vh;object-fit:contain;margin:auto;touch-action:none;cursor:crosshair}#panel-image #camera-status{font-size:14px;line-height:1.65;margin:12px 0;color:var(--tr-ink)}#panel-image #camera-status.camera-error{color:#ffd49d!important}#camera-progress{width:100%;accent-color:#83d99b}#camera-review{border-top:1px solid var(--tr-border);margin-top:20px;padding-top:20px}#camera-review>label{font-weight:750;font-size:15px}
#panel-image .camera-translated-wrap{position:relative;max-width:100%;line-height:0;margin:16px auto}#camera-result-image{display:block;width:100%;height:auto;border-radius:12px}#camera-overlay{position:absolute;inset:0;pointer-events:none}#panel-image.camera-panel .camera-translation-box{position:absolute;pointer-events:auto;display:block;background:#14251ff5!important;color:#f0f9f2!important;border:1px solid #99c5a6!important;border-radius:3px;padding:3px;min-height:0;min-width:0;overflow:hidden;line-height:1.35;font-size:clamp(9px,1.4vw,16px);font-weight:600;text-align:left;box-sizing:border-box}#camera-overlay-detail{font-size:16px;line-height:1.7;overflow-wrap:anywhere;padding:10px 0;color:var(--tr-ink)}#camera-translations-list{padding-left:24px;margin-top:12px;color:var(--tr-ink);font-size:14px;line-height:1.7}#camera-translations-list li{padding:12px 0;border-top:1px solid var(--tr-border)}#camera-translations-list p{margin:4px 0;overflow-wrap:anywhere}#camera-translations-list p:first-child{color:var(--tr-muted)}
@media(max-width:600px){#panel-image .camera-settings{grid-template-columns:minmax(0,1fr)}#panel-image .camera-actions>*{flex:1 1 140px}#panel-image .camera-heading{margin-bottom:14px}#panel-image.camera-panel{border-radius:16px}#panel-image #camera-video{max-height:50vh}#camera-canvas{max-height:none}#btn-grammar.grammar-action{padding:7px!important;font-size:11px}#grammar-content{font-size:14px}#grammar-content th,#grammar-content td{padding:8px 10px;min-width:90px}}
@media(prefers-reduced-motion:reduce){#panel-image.camera-panel button,#panel-image .camera-button{transition:none!important}}

body[data-dg-page=translate] .dg-language-selector{min-width:0;gap:2px}#source-lang,#target-lang{min-width:0;width:0;max-width:100%;font-size:14px;padding:8px 2px!important}body[data-dg-page=translate] .dg-language-selector button{flex:0 0 32px!important;min-width:32px}
body[data-dg-page=translate] .translation-suggestions button{background:var(--tr-soft)!important;color:var(--tr-ink)!important;border:1px solid var(--tr-border)!important;min-height:44px;line-height:1.5}
#panel-text button:not(#btn-grammar){background-color:var(--tr-soft)!important;color:var(--tr-ink)!important}#panel-text .grid>div>div:first-child{flex-wrap:wrap;gap:8px}#panel-text .grid>div>div:first-child>div{margin-left:auto}

.translation-about{margin:22px 0 8px;border:1px solid var(--tr-border);border-radius:14px;padding:12px 16px;background:var(--tr-bg);color:var(--tr-muted);font-size:13px;line-height:1.65}.translation-about summary{cursor:pointer;min-height:32px;font-weight:750;color:var(--tr-ink)}.translation-about p{margin-top:10px}.translation-about a{color:#a3e4b3;text-decoration:underline}
body[data-dg-page=translate] .google-translate-badge{display:inline-flex;align-items:center;gap:4px;padding:7px 9px;background:#fff!important;color:#3c4043!important;border-radius:5px;line-height:18px;font:12px/18px Arial,sans-serif;text-decoration:none;max-width:100%}body[data-dg-page=translate] .google-translate-badge img{display:inline-block;width:42px;height:16px;background:transparent!important;filter:none!important;object-fit:contain}

/* A dark background and readable text must travel together: older seasonal rules
   changed the text without removing the yellow meanings background. */
#alt-meanings-container .alt-meanings{background:var(--tr-bg,#17261f)!important;background-image:none!important;color:var(--tr-ink,#edf5ef)!important;border:1px solid var(--tr-border,#446451)!important;box-shadow:none!important;max-width:100%;min-width:0;box-sizing:border-box;padding:clamp(12px,3vw,16px);overflow-wrap:anywhere}
#alt-meanings-container .alt-meanings-title{color:var(--tr-action,#83d99b)!important;background:transparent!important;text-shadow:none!important;text-transform:none;letter-spacing:normal;font-size:14px;line-height:1.5}
#alt-meanings-container .alt-meaning-item{color:var(--tr-ink,#edf5ef)!important;background:transparent!important;text-shadow:none!important;line-height:1.65;min-width:0;overflow-wrap:anywhere}
#alt-meanings-container .alt-meaning-item::before{color:var(--tr-action,#83d99b)!important}
#alt-meanings-container .alt-meaning-item+.alt-meaning-item{border-top:1px solid var(--tr-border,#446451)}

/* Closed history must not extend the mobile page or accept keyboard focus. */
body[data-dg-page=translate] #history-drawer{display:none;max-width:calc(100vw - 16px)}
body[data-dg-page=translate] #history-drawer.open{display:flex;transform:translateX(0)}
body[data-dg-page=translate] #history-drawer .history-note{background:var(--tr-soft)!important;background-image:none!important;color:var(--tr-ink)!important;border-color:var(--tr-border)!important}
@media(prefers-reduced-motion:reduce){body[data-dg-page=translate] #history-drawer{transition:none!important}}