.translation-app {
    grid-template-columns: 420px minmax(0, 1fr) 320px;
}

.translation-toolbar {
    margin-bottom: 10px;
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 8px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.translation-select {
    height: 34px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    color: var(--text);
    padding: 0 10px;
    font-weight: 700;
}

.translation-form-list,
.language-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.translation-form-list {
    gap: 16px;
}

.translation-count-chip {
    min-width: 30px;
    padding: 4px 8px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255,255,255,.04);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.translation-menu-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.translation-menu-heading {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--stroke) 74%, transparent);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
    color: var(--text);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.translation-menu-heading:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--stroke));
    background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(255,255,255,.035));
}

.translation-menu-group.is-status-online .translation-menu-heading-title {
    color: #86efac;
}

.translation-menu-group.is-status-offline .translation-menu-heading-title {
    color: #e2e8f0;
}

.translation-menu-group.is-status-mixed .translation-menu-heading-title {
    color: #fbbf24;
}

.translation-menu-heading-text {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.translation-menu-heading-title {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #f8fafc;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}

.translation-menu-heading-title i {
    flex: 0 0 auto;
    margin-top: 1px;
}

.translation-menu-heading small {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    color: color-mix(in srgb, var(--muted) 92%, white 8%);
    font-size: 10px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.15;
    white-space: normal;
}

.translation-menu-heading > i {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--muted) 72%, white 28%);
    font-size: 11px;
    margin-top: 2px;
}

.translation-menu-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.translation-menu-group.is-collapsed {
    gap: 0;
}

.translation-menu-group.is-collapsed .translation-menu-items {
    display: none;
}

.translation-form-item,
.language-item {
    width: 100%;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    color: var(--text);
    padding: 11px 12px;
    text-align: left;
}

.translation-form-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-height: 76px;
    position: relative;
    overflow: hidden;
    transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.translation-form-item:hover,
.translation-form-item.active {
    border-color: rgba(43,139,214,.55);
    background: rgba(43,139,214,.16);
}

.translation-form-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.translation-form-item.active {
    box-shadow: inset 4px 0 0 var(--brand), 0 10px 26px rgba(43,139,214,.12);
}

.translation-form-item.expanded {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.translation-form-item.active::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(43,139,214,.2), transparent 36%);
}

.translation-form-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    justify-items: start;
    text-align: left;
}

.translation-form-item strong,
.language-item strong {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.22;
}

.translation-form-item small,
.language-item small {
    display: block;
    color: var(--muted);
    line-height: 1.45;
}

.translation-form-main strong,
.translation-form-main small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.translation-form-main strong {
    white-space: normal;
}

.translation-form-main small {
    white-space: nowrap;
    font-size: 11px;
    opacity: .78;
}

.translation-form-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
}

.language-item {
    position: relative;
    padding-right: 84px;
}

.language-item.is-active {
    border-color: rgba(34,197,94,.35);
}

.language-item.is-inactive {
    opacity: .78;
}

.language-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    color: var(--muted);
    background: rgba(255,255,255,.035);
    font-size: 10px;
    font-weight: 850;
}

.language-item.is-active .language-status {
    border-color: rgba(34,197,94,.45);
    color: #86efac;
    background: rgba(34,197,94,.12);
}

.translation-form-meta span {
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--stroke) 82%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--muted) 88%, var(--text));
    background: rgba(255,255,255,.035);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
}

.translation-form-meta span:first-child {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.translation-form-meta .status-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.translation-form-meta .translation-expand-chip {
    margin-left: auto;
    color: var(--text);
    border-color: rgba(43,139,214,.42);
    background: rgba(43,139,214,.12);
}

.translation-view-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: -2px 0 6px 16px;
    padding-left: 12px;
    border-left: 1px solid color-mix(in srgb, var(--stroke) 78%, transparent);
}

.translation-view-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    padding: 8px 9px;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.translation-view-item:hover,
.translation-view-item.active {
    color: var(--text);
    border-color: rgba(43,139,214,.38);
    background: rgba(43,139,214,.11);
}

.translation-view-item span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
}

.translation-view-item small {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    opacity: .72;
    font-size: 10px;
    font-weight: 850;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.035);
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    display: inline-block;
}

.status-online {
    border-color: rgba(34,197,94,.45);
    color: #86efac;
    background: rgba(34,197,94,.12);
}

.status-offline {
    border-color: rgba(148,163,184,.38);
    color: #cbd5e1;
    background: rgba(148,163,184,.10);
}

.status-hidden {
    border-color: rgba(239,68,68,.44);
    color: #fca5a5;
    background: rgba(239,68,68,.10);
}

.status-draft {
    border-color: rgba(245,158,11,.52);
    color: #fbbf24;
    background: rgba(245,158,11,.12);
}

.translation-status-line {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.translation-editor-cell,
.translation-source-text {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.html-editor-trigger,
.html-preview-trigger {
    align-self: flex-start;
    border: 1px solid rgba(43,139,214,.38);
    border-radius: 999px;
    background: rgba(43,139,214,.12);
    color: var(--text);
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}

.translation-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0,0,0,.62);
}

.translation-modal.hidden {
    display: none;
}

.translation-modal-card {
    width: min(1180px, 96vw);
    height: min(760px, 90vh);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: var(--panel);
    box-shadow: 0 24px 70px rgba(0,0,0,.42);
    overflow: hidden;
}

.translation-modal-header,
.translation-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--stroke);
}

.translation-modal-header strong,
.translation-modal-header small {
    display: block;
}

.translation-modal-header small {
    color: var(--muted);
    margin-top: 3px;
}

.translation-modal-actions {
    justify-content: flex-end;
    border-top: 1px solid var(--stroke);
    border-bottom: 0;
}

.translation-html-editor {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}

#htmlEditorModal .translation-modal-card{width:min(1000px,100%);height:min(600px,85dvh);border-radius:4px;background:var(--adm-surface,var(--panel));color:var(--adm-text,var(--text))}
#htmlEditorModal .translation-modal-header,#htmlEditorModal .translation-modal-actions{flex-shrink:0;background:var(--adm-surface-2,var(--panel))}
.translation-html-editor>section{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.translation-html-editor>section>label,.translation-html-editor>section>strong{display:block;margin:0;padding:10px 14px;font-size:13px;font-weight:600;background:var(--adm-surface-2,var(--panel));border-bottom:1px solid var(--stroke)}
.translation-html-editor>section>textarea,.translation-html-editor>section>iframe{flex:1;box-sizing:border-box;border-radius:0!important}
#htmlEditorModal[data-mode="preview"] .translation-html-editor{grid-template-columns:minmax(0,1fr)}
#htmlEditorModal[data-mode="preview"] .translation-html-source,#htmlEditorModal[data-mode="preview"] .translation-modal-actions{display:none}
#btnCloseHtmlEditor{flex:0 0 36px;width:36px;height:36px;padding:0}
@media(max-width:600px){#htmlEditorModal{padding:10px}#htmlEditorModal .translation-modal-card{height:90dvh}.translation-html-editor{grid-template-rows:minmax(0,1fr) minmax(0,1fr)}#htmlEditorModal[data-mode="preview"] .translation-html-editor{grid-template-rows:minmax(0,1fr)}}

.translation-html-editor textarea,
.translation-html-editor iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
}

.translation-html-editor textarea {
    padding: 16px;
    resize: none;
    outline: none;
    border-right: 1px solid var(--stroke);
    background: rgba(0,0,0,.16);
    color: var(--text);
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
}

.translation-html-editor iframe {
    background: #fff;
}

.translation-assistant-config {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.translation-assistant-config h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 4px;
    color: var(--text);
    font-size: 13px;
}

.translation-assistant-config input,
.translation-assistant-config select {
    width: 100%;
    height: 34px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    color: var(--text);
    padding: 0 10px;
}

.translation-assistant-status {
    display: block;
    color: var(--muted);
    line-height: 1.35;
}

.translation-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.translation-grid {
    overflow: auto;
}

.translation-table {
    table-layout: fixed;
    width: 100%;
    min-width: max(980px, 100%);
}

.translation-col-element {
    width: 240px;
}

.translation-col-source {
    width: 300px;
}

.translation-col-language {
    width: 260px;
}

.translation-table th:first-child {
    min-width: 260px;
}

.translation-source {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.translation-source strong {
    font-size: 13px;
}

.translation-source small {
    color: var(--muted);
    line-height: 1.35;
}

.translation-object-type {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
    border-radius: 999px;
    background: rgba(14, 165, 233, .10);
    color: #93c5fd !important;
    font-size: 10px;
    font-weight: 800;
}

.translation-source-text span {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
}

.translation-textarea {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    border: 1px solid var(--stroke);
    border-radius: 8px;
    background: rgba(255,255,255,.03);
    color: var(--text);
    padding: 8px 9px;
    resize: vertical;
}

.translation-textarea.is-dirty {
    border-color: rgba(245,158,11,.72);
    background: rgba(245,158,11,.08);
}

.translation-textarea:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.translation-not-ready {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid rgba(148,163,184,.28);
    border-radius: 999px;
    padding: 4px 7px;
    color: var(--muted);
    background: rgba(148,163,184,.08);
    font-size: 10px;
    font-weight: 850;
}

.divider {
    height: 1px;
    background: var(--stroke);
    margin: 16px 0;
}

html[data-theme="light"] .translation-select,
html[data-theme="light"] .translation-textarea,
html[data-theme="light"] .translation-form-item,
html[data-theme="light"] .language-item {
    background: #fff;
    color: var(--text);
}

#btnSaveTranslations.has-changes {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-color: rgba(245, 158, 11, .75) !important;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, .22), 0 10px 26px rgba(245, 158, 11, .2) !important;
    color: #111827 !important;
    animation: translationSavePulse 1.8s ease-in-out infinite !important;
}

#btnSaveTranslations.is-saved {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border-color: rgba(34, 197, 94, .75) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, .22), 0 10px 26px rgba(34, 197, 94, .22) !important;
    color: #052e16 !important;
    animation: none !important;
}

.assistant-working {
    opacity: .82 !important;
    cursor: wait !important;
}

.assistant-done,
.html-preview-trigger.assistant-done,
.btn.assistant-done {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border-color: rgba(34, 197, 94, .75) !important;
    color: #052e16 !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, .18), 0 8px 20px rgba(34, 197, 94, .18) !important;
}

.translation-html-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

@keyframes translationSavePulse {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(245, 158, 11, .22), 0 10px 26px rgba(245, 158, 11, .18);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(245, 158, 11, .12), 0 12px 32px rgba(245, 158, 11, .28);
    }
}

@media (max-width: 1200px) {
    .translation-app {
        grid-template-columns: 360px 1fr;
    }
}

@media (max-width: 900px) {
    .translation-app {
        grid-template-columns: 1fr;
    }

    .translation-table {
        min-width: 780px;
    }

    .translation-html-editor {
        grid-template-columns: 1fr;
    }
}

/* Workspace: compact command bar, neutral navigation and independent scrolling. */
body.translation-page {
    --tr-bg: #17191d;
    --tr-surface: #202328;
    --tr-soft: #272b31;
    --tr-line: #3c424a;
    --tr-text: #f5f7fa;
    --tr-muted: #adb5bf;
    --tr-accent: #5cb8ff;
    --tr-success: #78d5a4;
    --tr-warning: #f3c26d;
    background: var(--tr-bg);
}
body.translation-page[data-theme="light"] {
    --tr-bg: #f3f5f7;
    --tr-surface: #fff;
    --tr-soft: #f9fafb;
    --tr-line: #d9dfe4;
    --tr-text: #263238;
    --tr-muted: #63717c;
    --tr-accent: #3c8dbc;
    --tr-success: #087b47;
    --tr-warning: #946000;
}
body.translation-page[data-theme="sysimple"] { --tr-bg: #101317; --tr-surface: #1c2128; --tr-soft: #232933; }
body.translation-page[data-theme="vscode"] { --tr-bg: #16181b; --tr-surface: #24272d; --tr-soft: #2a2e35; }
.translation-page .translation-app {
    --studio-radius: 3px; --adm-text-soft: var(--tr-muted);
    --adm-panel: var(--tr-surface); --adm-surface: var(--tr-surface); --adm-surface-2: var(--tr-soft); --adm-input-bg: var(--tr-surface); --adm-text: var(--tr-text); --adm-border: var(--tr-line); --adm-shadow-soft: 0 3px 10px rgba(0,0,0,.04);
    --ux-radius: 3px; --ux-border: var(--tr-line); --ux-text: var(--tr-text); --ux-muted: var(--tr-muted); --ux-primary: var(--tr-accent); --ux-surface: var(--tr-surface); --ux-surface-2: var(--tr-soft);
    --panel: var(--tr-surface); --stroke: var(--tr-line); --text: var(--tr-text); --muted: var(--tr-muted); --accent: var(--tr-accent); --brand: var(--tr-accent);
    grid-template-columns: 280px minmax(0, 1fr) 240px;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px; padding: 14px; color: var(--tr-text); font-size: 13px;
    min-height: 480px; height: calc(100dvh - var(--studio-header-h, 76px));
}
.translation-commandbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid var(--tr-line); background: var(--tr-surface); }
.translation-brand { display: flex; align-items: center; gap: 12px; }
.translation-brand-icon, .translation-welcome-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; color: var(--tr-accent); background: color-mix(in srgb, var(--tr-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tr-accent) 30%, var(--tr-line)); font-size: 18px; }
.translation-brand h1 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 650; }
.translation-brand p { margin: 3px 0 0; color: var(--tr-muted); font-size: 12px; }
.translation-commands { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.translation-save-status { color: var(--tr-muted); font-size: 12px; max-width: 220px; }
.translation-page .translation-app .panel { min-height: 0; border: 1px solid var(--tr-line); border-radius: 3px; box-shadow: 0 3px 10px rgba(0,0,0,.04); background: var(--tr-surface); }
.translation-page .translation-app .panel-h { min-height: 48px; gap: 10px; background: var(--tr-soft); border-color: var(--tr-line); color: var(--tr-text); }
.translation-page .translation-app .h-title, .translation-page .translation-app .h-title i { color: var(--tr-text); }
.translation-page .translation-app .btn { min-height: 34px; padding: 7px 10px; border: 1px solid var(--tr-line); border-radius: 3px; background: var(--tr-soft); color: var(--tr-text); box-shadow: none; font-size: 12px; font-weight: 600; }
.translation-page .translation-app .btn.primary { background: #3c8dbc; border-color: #3c8dbc; color: #fff; }
.translation-page .translation-app .btn:hover:not(:disabled) { border-color: var(--tr-accent); background: color-mix(in srgb, var(--tr-accent) 14%, var(--tr-surface)); color: var(--tr-text); }
.translation-page .translation-app button:disabled { opacity: .5; cursor: not-allowed; }
.translation-page .translation-app :is(button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--tr-accent); outline-offset: 2px; }
.translation-page .translation-app :is(input, select, textarea) { color: var(--tr-text); background: var(--tr-surface); border-color: var(--tr-line); border-radius: 3px; font: inherit; }
.translation-page .translation-app select { height: 34px; min-width: 0; max-width: 100%; }
.translation-page .translation-app .search { border-radius: 3px; min-width: 0; width: 100%; color: var(--tr-muted); background: var(--tr-surface); border-color: var(--tr-line); }
body.translation-page[data-theme] .translation-app .search input { border: 0 !important; box-shadow: none !important; padding: 0 !important; height: 32px; min-height: 32px !important; background: transparent !important; min-width: 0; }
.translation-page .translation-app input::placeholder { color: var(--tr-muted); }
.translation-page .translation-app .search:focus-within { outline: 2px solid var(--tr-accent); outline-offset: 1px; }
.translation-page .translation-app .search input:focus-visible { outline: none; }
.translation-page .translation-toolbar { position: static; padding: 0; margin: 0 0 12px; background: var(--tr-surface); }
.translation-page .left .panel-body { display: flex; flex-direction: column; overflow: hidden; padding: 12px 10px; }
.translation-page .translation-form-list { overflow: auto; min-height: 0; gap: 8px; padding: 2px; }
.translation-page .translation-menu-heading { background: var(--tr-soft); border: 1px solid var(--tr-line); border-radius: 3px; padding: 10px; box-shadow: none; text-transform: none; letter-spacing: 0; font-weight: 600; }
.translation-page .translation-menu-group .translation-menu-heading-title { color: var(--tr-text); font-weight: 650; line-height: 1.4; }
.translation-page .translation-menu-group.is-status-online .translation-menu-heading-title i { color: var(--tr-success); }
.translation-page .translation-menu-group.is-status-mixed .translation-menu-heading-title i { color: var(--tr-warning); }
.translation-page .translation-menu-heading small { color: var(--tr-muted); font-size: 11px; font-weight: 400; line-height: 1.4; }
.translation-page .translation-menu-heading > i { color: var(--tr-muted); margin-top: 5px; }
.translation-page .translation-form-item { min-height: 0; padding: 10px; gap: 6px; border-radius: 3px; background: var(--tr-surface); }
.translation-page .translation-form-item:hover { transform: none; box-shadow: none; }
.translation-page .translation-form-item.active { border-color: var(--tr-accent) !important; box-shadow: inset 3px 0 0 var(--tr-accent) !important; background: color-mix(in srgb, var(--tr-accent) 10%, var(--tr-surface)) !important; }
.translation-page .translation-form-item.active::after { display: none; }

/* Keep each group's forms on an unmistakable second navigation level. */
.translation-page .translation-menu-group { gap: 0; }
body.translation-page #formsList .translation-menu-group > .translation-menu-heading {
    background: var(--tr-soft) !important;
    border-left: 3px solid var(--tr-line) !important;
}
body.translation-page #formsList .translation-menu-group:not(.is-collapsed) > .translation-menu-heading {
    border-left-color: var(--tr-accent) !important;
    background: color-mix(in srgb, var(--tr-accent) 8%, var(--tr-soft)) !important;
}
.translation-page .translation-menu-items {
    margin: 0 0 4px 14px;
    padding: 10px 0 4px 12px;
    border-left: 2px solid color-mix(in srgb, var(--tr-accent) 45%, var(--tr-line));
    min-width: 0;
}
body.translation-page #formsList .translation-menu-items > .translation-form-item { position: relative; overflow: visible; }
body.translation-page #formsList .translation-menu-items > .translation-form-item.active {
    border-color: var(--tr-accent) !important;
    box-shadow: inset 3px 0 0 var(--tr-accent) !important;
    background: color-mix(in srgb, var(--tr-accent) 12%, var(--tr-surface)) !important;
}
.translation-page .translation-menu-items > .translation-form-item::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 20px;
    width: 12px;
    border-top: 2px solid color-mix(in srgb, var(--tr-accent) 45%, var(--tr-line));
    pointer-events: none;
}
.translation-page .translation-menu-items > .translation-form-item.active::before { border-color: var(--tr-accent); }
.translation-page .translation-key-source { border-style: dashed; margin-bottom: 4px; }
.translation-page .translation-form-main strong { font-weight: 600; line-height: 1.4; }
.translation-page .translation-form-main small { opacity: 1; }
.translation-page .translation-form-meta span { font-weight: 500; font-size: 10px; padding: 3px 5px; }
.translation-page .translation-count-chip { font-weight: 600; padding: 2px 6px; min-width: 24px; color: var(--tr-muted); background: var(--tr-soft); }
.translation-page .translation-view-item { border-radius: 3px; }
.translation-page .translation-view-item span { font-weight: 500; }
.translation-page .translation-view-item.active { border-color: var(--tr-accent) !important; background: color-mix(in srgb, var(--tr-accent) 10%, var(--tr-surface)) !important; }
.translation-page .translation-selection-header { align-items: flex-start; flex-direction: column; gap: 5px; }
.translation-page #centerTitle { font-size: 14px; overflow-wrap: anywhere; }
.translation-page #scopeChip { border: 0 !important; padding: 0; border-radius: 0 !important; background: none !important; color: var(--tr-muted) !important; font-size: 11px; max-width: 100%; overflow-wrap: anywhere; }
.translation-editor-tools { padding: 12px; border-bottom: 1px solid var(--tr-line); }
.translation-helper { color: var(--tr-muted); margin: 8px 0 12px; font-size: 11px; }
.translation-search-row { display: flex; align-items: center; gap: 10px; }
.translation-result-count { color: var(--tr-muted); font-size: 11px; white-space: nowrap; }
.translation-page summary { cursor: pointer; color: var(--tr-text); font-size: 12px; padding: 10px 0; font-weight: 600; }
.translation-page summary i { color: var(--tr-muted); margin: 0 5px; }
.translation-filter-fields { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.translation-filter-fields label { flex: 1 1 125px; display: grid; gap: 5px; font-size: 11px; color: var(--tr-muted); }
.translation-page #filterCount { color: var(--tr-accent); margin-left: 5px; }
.translation-page .center .panel-body { display: flex; flex-direction: column; padding: 0; min-height: 0; overflow: hidden; }
.translation-page .translation-grid { flex: 1; min-height: 0; }
.translation-welcome { max-width: 460px; margin: 0 auto; padding: 48px 28px; }
.translation-welcome-icon { width: 52px; height: 52px; font-size: 25px; margin-bottom: 20px; }
.translation-welcome h2 { font-size: 21px; font-weight: 600; line-height: 1.3; margin: 0 0 10px; }
.translation-welcome p { color: var(--tr-muted); line-height: 1.7; margin: 0; }
.translation-welcome ol { list-style: none; padding: 22px 0; margin: 0; display: grid; gap: 20px; }
.translation-welcome li { display: flex; gap: 12px; align-items: start; }
.translation-welcome li b { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border: 1px solid var(--tr-line); color: var(--tr-muted); border-radius: 50%; font-size: 11px; font-weight: 600; }
.translation-welcome li strong { display: block; font-size: 13px; font-weight: 600; }
.translation-welcome li small { display: block; color: var(--tr-muted); margin-top: 5px; line-height: 1.5; }
.translation-welcome-note { display: block; color: var(--tr-muted); font-size: 11px; margin-top: 18px; line-height: 1.5; }
.translation-page .language-list { gap: 0; }
.translation-page .language-item { border: 0; border-bottom: 1px solid var(--tr-line); border-radius: 0; padding: 10px 60px 10px 0; background: transparent; opacity: 1; }
.translation-page .language-item strong { font-size: 12px; font-weight: 600; }
.translation-page .language-item small { font-size: 11px; }
.translation-page .language-status { right: 0; padding: 3px 5px; font-weight: 500; }
.translation-page .language-item.is-active .language-status, .translation-page .status-online { color: var(--tr-success); border-color: color-mix(in srgb, var(--tr-success) 30%, transparent); background: color-mix(in srgb, var(--tr-success) 8%, transparent); }
.translation-page .status-draft { color: var(--tr-warning); }
.translation-page .status-offline { color: var(--tr-muted); }
.translation-page .translation-object-type { color: var(--tr-accent) !important; }
.translation-page .right .translation-select, .translation-page #possibleLanguageSelect { width: 100%; }
.translation-page .translation-assistant-config { padding-top: 8px; }
.translation-page .translation-assistant-config .field { margin: 0; }
.translation-page .translation-table { min-width: 0; width: max(100%, var(--translation-table-width, 980px)); }
.translation-page .translation-col-element { width: 195px; }
.translation-page .translation-col-source { width: 235px; }
.translation-page .translation-col-language { width: 250px; }
.translation-page .translation-table th { padding: 12px; color: var(--tr-text); background: var(--tr-soft); border-bottom: 1px solid var(--tr-line); font-weight: 600; }
.translation-page .translation-table thead th { position: sticky; top: 0; z-index: 2; }
.translation-page .translation-table td { padding: 12px; vertical-align: top; border: 1px solid var(--tr-line); }
.translation-page .translation-table th small { font-weight: 400; color: var(--tr-muted); }
body.translation-page[data-theme] .translation-app .translation-textarea { min-height: 56px !important; height: 56px; line-height: 1.5; }
.translation-page .translation-table tbody th { text-transform: none !important; letter-spacing: normal; }
.translation-page .translation-table .translation-field-heading th { text-align: left; border-top: 3px solid var(--tr-accent); padding: 10px 12px; }
.translation-field-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.translation-field-title > strong { font-size: 14px; }
.translation-field-type { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--tr-accent) 40%, var(--tr-line)); border-radius: 3px; background: color-mix(in srgb, var(--tr-accent) 10%, var(--tr-surface)); color: var(--tr-text); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.translation-field-type i { color: var(--tr-accent); }
.translation-source-value { max-height: 160px; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.translation-key-lock { color: var(--tr-muted); font-size: 11px; overflow-wrap: anywhere; }
.translation-field-title .translation-status-line { margin: 0; }
.translation-field-title > small { margin-left: auto; }
.translation-field-context { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 5px; color: var(--tr-muted); font-size: 11px; font-weight: 400; }
.translation-field-details { margin-left: 8px; }
.translation-field-details summary { cursor: pointer; }
.translation-field-details code { display: block; overflow-wrap: anywhere; padding-top: 5px; }
.translation-page .translation-table .translation-property-heading { text-align: left; vertical-align: top; background: var(--tr-surface); border: 1px solid var(--tr-line); border-left: 3px solid var(--tr-accent); }
.translation-page .translation-property-heading small { font-weight: 400; }
.translation-page .translation-field-group td { padding: 8px 12px; }
.translation-page .translation-textarea.is-dirty { border-color: var(--tr-warning); }
.translation-page .html-editor-trigger, .translation-page .html-preview-trigger { border-radius: 3px; font-weight: 500; color: var(--tr-text); }
.translation-page #btnSaveTranslations.has-changes { animation: none !important; box-shadow: none !important; background: #3c8dbc !important; border-color: #3c8dbc !important; color: #fff !important; }
.translation-page .empty-state { min-height: 160px; padding: 28px; color: var(--tr-muted); }
.translation-page .translation-app.is-languages-hidden { grid-template-columns: 280px minmax(0, 1fr); }
.translation-page .translation-app.is-languages-hidden > .right { display: none; }
.translation-page [hidden] { display: none !important; }
@media (max-width: 1250px) {
    .translation-page .translation-app { grid-template-columns: 235px minmax(0, 1fr) 210px; gap: 10px; padding: 10px; }
    .translation-commandbar { flex-wrap: wrap; }
    .translation-page .translation-app > .right { display: flex; }
    .translation-page .translation-app.is-languages-hidden { grid-template-columns: 235px minmax(0, 1fr); }
    .translation-page .translation-app.is-languages-hidden > .right { display: none; }
}
@media (max-width: 980px) {
    .translation-page .translation-app, .translation-page .translation-app.is-languages-hidden { height: auto; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; }
    .translation-page .translation-app > .left { display: flex; max-height: 700px; }
    .translation-page .translation-app > .center { min-height: 560px; max-height: 800px; }
    .translation-page .translation-app > .right { grid-column: 1 / -1; }
    .translation-commands { justify-content: flex-start; }
    .translation-save-status { width: 100%; max-width: none; }
}
@media (max-width: 640px) {
    .translation-page .translation-app, .translation-page .translation-app.is-languages-hidden { grid-template-columns: minmax(0, 1fr); }
    .translation-page .translation-app > .left { max-height: 300px; }
    .translation-page .translation-app > .center { min-height: 520px; }
    .translation-page .translation-app > .right { grid-column: 1; }
    .translation-page .translation-welcome { padding: 28px 20px; }
    .translation-page .translation-search-row { flex-wrap: wrap; }
}

/* Compact translation workspace: retain editable text and all commands. */
.translation-page .translation-app{gap:10px;padding:10px}
.translation-page .translation-commandbar{padding:8px 10px;gap:10px}
.translation-page .translation-brand{gap:8px}
.translation-page .translation-brand h1{font-size:16px}
.translation-page .translation-brand-icon{width:32px;height:32px;font-size:16px}
.translation-page .translation-app .panel-h{min-height:38px;padding:8px 10px;gap:6px}
.translation-page .left .panel-body,.translation-page .right .panel-body{padding:8px}
.translation-page .translation-menu-heading{padding:6px 8px}
.translation-page .translation-form-item{padding:6px 8px;gap:3px}
.translation-page .translation-form-main{gap:1px}
.translation-page .translation-form-item strong{margin-bottom:0;font-size:12px}
.translation-page .translation-form-meta{gap:3px}
.translation-page .translation-form-meta span{padding:2px 4px;font-size:10px}
.translation-page .translation-menu-items{gap:4px}
.translation-page .translation-view-item{padding:7px 9px;min-height:30px;flex-direction:column;align-items:stretch;gap:4px;box-sizing:border-box}
.translation-page .translation-view-item > span{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.4}
.translation-page .translation-view-item > span > i{margin-right:7px}
.translation-page .translation-view-item > small{padding-left:20px;font-weight:500}
.translation-page .translation-view-list{margin-left:8px;padding-left:8px}
.translation-page .translation-form-main strong{white-space:normal;overflow-wrap:anywhere}
.translation-page .translation-toolbar{margin-bottom:6px}
.translation-page .translation-assistant-actions{gap:5px;margin-bottom:4px}
.translation-page .translation-search-row{gap:6px}
.translation-page summary{padding:5px 0}
.translation-page .translation-table th,.translation-page .translation-table td,.translation-page .translation-field-group td{padding:6px 8px}
.translation-page .translation-table .translation-field-heading th{padding:6px 8px}
.translation-page .translation-field-title{gap:5px}
.translation-page .translation-field-title>strong{font-size:13px}
.translation-page .translation-field-type{padding:2px 5px;font-size:11px}
.translation-page .translation-field-context{margin-top:2px;gap:4px}
.translation-page .translation-field-details summary{padding:0}
.translation-page .translation-editor-cell{gap:4px}
.translation-page .translation-source-text{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px}
.translation-page .translation-source-text>.translation-textarea,.translation-page .translation-source-text>.translation-source-value{flex:1 0 100%;width:100%;box-sizing:border-box}
.translation-page .translation-row-actions{gap:4px}
.translation-page .translation-app button.translation-icon-action {
    --action-color: var(--tr-accent);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 34px;
    padding: 0;
    color: var(--action-color);
    background: color-mix(in srgb, var(--action-color) 10%, var(--tr-surface));
    border: 1px solid color-mix(in srgb, var(--action-color) 40%, var(--tr-line));
}
.translation-page .translation-icon-action[data-action-tone="correct"] { --action-color: var(--tr-success); }
.translation-page .translation-icon-action[data-action-tone="preview"] { --action-color: #9564c9; }
.translation-page .translation-icon-action[data-action-tone="edit"] { --action-color: var(--tr-accent); }
.translation-page .translation-app button.translation-icon-action i { color: inherit; font-size: 14px; }
.translation-page .translation-app button.translation-icon-action:hover { background: color-mix(in srgb, var(--action-color) 20%, var(--tr-surface)); border-color: var(--action-color); }
.translation-page .translation-icon-action:focus-visible::after {
    content: attr(aria-label);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    width: max-content;
    max-width: 210px;
    padding: 6px 8px;
    color: var(--tr-text);
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    box-shadow: 0 2px 6px #0002;
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
}
.translation-page .translation-app .html-editor-trigger,.translation-page .translation-app .html-preview-trigger{min-height:30px;padding:4px 6px;font-size:11px}
body.translation-page[data-theme] .translation-app .translation-textarea{min-height:42px!important;height:42px;padding:5px 7px;line-height:1.4;resize:vertical}
.translation-page .language-item{padding:7px 50px 7px 0}
.translation-page .language-status{top:7px}
@media(min-width:981px){
 .translation-page .translation-app{grid-template-columns:clamp(280px,22vw,360px) minmax(0,1fr) 205px}
 .translation-page .translation-app.is-languages-hidden{grid-template-columns:clamp(280px,22vw,360px) minmax(0,1fr)}
}
@media(pointer:coarse){.translation-page .translation-app .html-editor-trigger,.translation-page .translation-app .html-preview-trigger,.translation-page .translation-view-item{min-height:40px}}

.translation-page .translation-inactive-toggle{display:flex;align-items:center;gap:6px;margin:6px 0;font-size:12px;cursor:pointer}

.translation-page #btnTranslateView { color: var(--tr-accent); border-color: var(--tr-accent); background: color-mix(in srgb, var(--tr-accent) 10%, var(--tr-surface)); }
.translation-page #btnCorrectView { color: var(--tr-success); border-color: var(--tr-success); background: color-mix(in srgb, var(--tr-success) 10%, var(--tr-surface)); }