function addStyles() {

GM_addStyle(`
:root {
--font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe
UI Symbol";
--font-size-base: 16px;
--line-height-base: 1.6;
--border-radius-small: 3px;
--border-radius-medium: 6px;
--border-radius-large: 8px;

--color-primary: #007bff;
--color-primary-dark: #0056b3;
--color-secondary: #6c757d;
--color-secondary-dark: #5a6268;
--color-success: #28a745;
--color-success-dark: #1e7e34;
--color-warning: #ffc107;
--color-warning-dark: #e0a800;
--color-danger: #dc3545;
--color-danger-dark: #c82333;
--color-info: #17a2b8;
--color-info-dark: #117a8b;

--text-color: #212529;
--text-muted: #6c757d;
--bg-light: #f8f9fa;
--bg-white: #ffffff;
--border-color: #dee2e6;
--border-color-input: #ced4da;

--focus-outline-color: var(--color-primary);
--focus-outline-width: 2px;
--focus-outline-offset: 2px;
--focus-box-shadow: 0 0 0 0.2rem rgba(0,123,255,0);

--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 20px;
}

body {
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--text-color);
}

#${UI_IDS.CONTAINER} {
position: fixed;

bottom: var(--space-md);
right: var(--space-md);
left: auto;
border-radius: var(--border-radius-medium);
border: 1px solid var(--border-color);
 max-width: 280px;

z-index: 99999;
background: rgba(245, 245, 245, 0.60);
padding: var(--space-sm);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-sm);
box-sizing: border-box;
justify-content: space-between;
}

Words {

padding: var(--space-xs);
max-width: 60px;
gap: var(--space-xs);
box-shadow: 0 0 12px rgba(0,0,0,0);

#${UI_IDS.MINIMIZE_MAIN_CONTROLS_BTN} {
order: 10;
align-self: center;
font-size: 1.95em;
padding: calc(var(--space-xs) + 0.5px);
background: transparent;
border: none;
color: var(--text-muted);
line-height: 0.45;
}
#${UI_IDS.MINIMIZE_MAIN_CONTROLS_BTN}:hover {
color: var(--text-color);
}
#${UI_IDS.CONTAINER}.${SCRIPT_PREFIX}main-controls-minimized} #$
{UI_IDS.MINIMIZE_MAIN_CONTROLS_BTN} {
margin-bottom: 0;
font-size: 0.1em;
padding: calc(var(--space-xs) + 1.5px);
}

#${UI_IDS.STATUS_INDICATOR} {
display: none;
}
#${UI_IDS.STATUS_INDICATOR}.status-error { background: #f8d7da; color:
#721c24; border-color: #f5c6cb; }
#${UI_IDS.STATUS_INDICATOR}.status-warn { background: #fff3cd; color:
#856404; border-color: #ffeeba; }
#${UI_IDS.STATUS_INDICATOR}.status-success { background: #d4edda; color:
#155724; border-color: #c3e6cb; }
#${UI_IDS.STATUS_INDICATOR}.status-info { background: #d1ecf1; color:
#0c5460; border-color: #bee5eb; }

.${SCRIPT_PREFIX}button-group {
display: flex;
flex-direction: row;
gap: var(--space-sm);
 width: auto;
flex-grow: 1;
justify-content: flex-start;
}
.${SCRIPT_PREFIX}button {
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border-color-input);
border-radius: var(--border-radius-medium);
cursor: pointer;
font-size: 0.875em;
font-weight: 500; letter-spacing: 0.025em;
background: var(--bg-light); color: var(--text-color);
text-align: center;
transition: background-color 0.2s, opacity 0.2s, box-shadow 0.2s,
transform 0.1s;
white-space: nowrap; line-height: 1.5; user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
box-sizing: border-box;
flex-basis: 0;
flex-grow: 0;
}
.${SCRIPT_PREFIX}button-group > .${SCRIPT_PREFIX}button:not(.$
{SCRIPT_PREFIX}icon-button) {
flex-grow: 1;
}

.${SCRIPT_PREFIX}button:hover:not(:disabled) { background: #e9ecef; box-

shadow: 0 1px 3px rgba(0,0,0,0.1); }
.${SCRIPT_PREFIX}button:disabled { cursor: not-allowed; opacity: 0.65;
background: #e9ecef; }
.${SCRIPT_PREFIX}button:active:not(:disabled) { transform: translateY(1px);
box-shadow: none; }
.${SCRIPT_PREFIX}button:focus-visible {
outline: var(--focus-outline-width) solid var(--focus-outline-color);
outline-offset: var(--focus-outline-offset);
box-shadow: var(--focus-box-shadow);
}
.${SCRIPT_PREFIX}icon-button {
font-size: 1.2em;
padding: var(--space-sm);
flex-grow: 0 !important;
width: auto;
line-height: 1;
}

.${SCRIPT_PREFIX}translate-button { background: var(--color-success);

color: var(--bg-white); border-color: var(--color-success-dark); }
.${SCRIPT_PREFIX}translate-button:hover:not(:disabled) { background: var(--
color-success-dark); }
.${SCRIPT_PREFIX}translate-button:disabled { background: var(--color-
secondary); border-color: var(--color-secondary-dark); color: #ccc; }

.${SCRIPT_PREFIX}warning-button {
background: var(--color-warning);
color: var(--text-color);
border-color: var(--color-warning-dark);
 }
.${SCRIPT_PREFIX}warning-button:hover:not(:disabled) {
background: var(--color-warning-dark);
}

.${SCRIPT_PREFIX}translate-button[style*="background-color: rgb(255, 193,

7)"] {
background: var(--color-warning) !important;
color: var(--text-color) !important;
border-color: var(--color-warning-dark) !important;
}
.${SCRIPT_PREFIX}translate-button[style*="background-color: rgb(255, 193,
7)"]:hover:not(:disabled) {
background: var(--color-warning-dark) !important;
}

.${SCRIPT_PREFIX}history-button { background: var(--color-info); color:

var(--bg-white); border-color: var(--color-info-dark); }
.${SCRIPT_PREFIX}history-button:hover:not(:disabled) { background: var(--
color-info-dark); }
.${SCRIPT_PREFIX}settings-button { background: var(--color-secondary);
color: var(--bg-white); border-color: var(--color-secondary-dark); }
.${SCRIPT_PREFIX}settings-button:hover:not(:disabled) { background: var(--
color-secondary-dark); }

#${UI_IDS.RESTORE_RESULT_ICON} {
order: -1; font-size: 1.5em;
padding: var(--space-sm) var(--space-md);
background: var(--color-secondary); color: var(--bg-white);
border: 1px solid var(--color-secondary-dark); border-radius: var(--
border-radius-medium);
cursor: pointer; text-align: center;
width: fit-content; align-self: flex-end;
display: none;
}
#${UI_IDS.RESTORE_RESULT_ICON}:hover, #${UI_IDS.RESTORE_RESULT_ICON}:focus-
visible {
background: var(--color-secondary-dark);
}
#${UI_IDS.RESTORE_RESULT_ICON}:focus-visible {
outline: var(--focus-outline-width) solid var(--focus-outline-color);
outline-offset: var(--focus-outline-offset);
}

#${UI_IDS.SETTINGS_MODAL}, #${UI_IDS.HISTORY_MODAL} {
display: none;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
justify-content: center;
align-items: center;
padding: var(--space-md);
box-sizing: border-box;
}
#${UI_IDS.RESULT_MODAL} {
display: none; position: fixed;
top: 0; left: 0; width: 100%; height: 100dvh;
background: rgba(0,0,0,0.75);
justify-content: center; align-items: flex-start;
 padding: 0; box-sizing: border-box;
}
#${UI_IDS.HISTORY_MODAL} { z-index: 100001; }
#${UI_IDS.RESULT_MODAL} { z-index: 100002; }
#${UI_IDS.SETTINGS_MODAL} { z-index: 100003; }

#${UI_IDS.SETTINGS_CONTENT}, #${UI_IDS.HISTORY_MODAL_CONTENT} {
background: var(--bg-white); color: var(--text-color);
border-radius: var(--border-radius-large);
width: 90vw;
max-width: 500px;
height: auto;
max-height: calc(100dvh - (2 * var(--space-md)));
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 5px 15px rgba(0,0,0,0);
position: relative;
}
#${UI_IDS.RESULT_MODAL_CONTENT} {
background: var(--bg-white); color: var(--text-color);
border-radius: 0;
width: 100%; height: 100dvh;
max-height: 100dvh;
overflow: hidden; display: flex; flex-direction: column;
box-shadow: none; border: none;
position: relative;
}

.${SCRIPT_PREFIX}modal-header {
display: flex; justify-content: space-between; align-items: center;
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--border-color);
flex-shrink: 0; user-select: none;
}
.${SCRIPT_PREFIX}modal-header h2 {
margin: 0; font-size: 1.1em;
font-weight: 600; line-height: 1.3;
letter-spacing: 0.01em;
flex-grow: 1; pointer-events: none;
}
#${UI_IDS.RESULT_MODAL_CONTENT} .${SCRIPT_PREFIX}modal-header {
padding: var(--space-xs) var(--space-md);
}
#${UI_IDS.RESULT_MODAL_CONTENT} .${SCRIPT_PREFIX}modal-header h2 {
font-size: 1em;
}
.${SCRIPT_PREFIX}modal-control-button {
font-size: 1.3em;
background: none; border: none; cursor: pointer;
padding: 6px;
line-height: 1; color: #777;
flex-shrink: 0; margin-left: var(--space-sm);
border-radius: var(--border-radius-small);
}
.${SCRIPT_PREFIX}modal-control-button:hover, .${SCRIPT_PREFIX}modal-
control-button:focus-visible { color: var(--text-color); }
.${SCRIPT_PREFIX}modal-control-button:focus-visible {
outline: var(--focus-outline-width) solid var(--focus-outline-color);
outline-offset: 1px;
 }
#${UI_IDS.RESULT_MODAL_MINIMIZE_BTN} { font-weight: bolder; }

#${UI_IDS.SETTINGS_MODAL} select, #${UI_IDS.SETTINGS_MODAL}

input[type="text"],
#${UI_IDS.SETTINGS_MODAL} input[type="number"], #${UI_IDS.SETTINGS_MODAL}
textarea,
#${UI_IDS.CUSTOM_PROMPT_SELECT}, #${UI_IDS.CUSTOM_PROMPT_TEXTAREA} {
padding: var(--space-sm);
border: 1px solid var(--border-color-input);
border-radius: var(--border-radius-medium);
font-size: 0.9375em;
box-sizing: border-box; width: 100%;
background: var(--bg-white); color: #333;
line-height: 1.5;
}
#${UI_IDS.SETTINGS_MODAL} select:focus-visible, #${UI_IDS.SETTINGS_MODAL}
input[type="text"]:focus-visible,
#${UI_IDS.SETTINGS_MODAL} input[type="number"]:focus-visible, #$
{UI_IDS.SETTINGS_MODAL} textarea:focus-visible,
#${UI_IDS.CUSTOM_PROMPT_SELECT}:focus-visible, #$
{UI_IDS.CUSTOM_PROMPT_TEXTAREA}:focus-visible {
outline: var(--focus-outline-width) solid var(--focus-outline-color);
outline-offset: 0px;
border-color: var(--color-primary);
box-shadow: var(--focus-box-shadow);
}
#${UI_IDS.SETTINGS_MODAL} input[type="color"] {
padding: 2px; height: 40px;
border: 1px solid var(--border-color-input);
border-radius: var(--border-radius-medium); cursor: pointer;
min-width: 60px;
}
#${UI_IDS.SETTINGS_MODAL} input[type="color"]:focus-visible {
outline: var(--focus-outline-width) solid var(--focus-outline-color);
outline-offset: var(--focus-outline-offset);
}
#${UI_IDS.SETTINGS_MODAL} input[type="checkbox"] {
width: auto; margin-right: var(--space-md);
transform: scale(1.3);
flex-shrink: 0;
}
#${UI_IDS.SETTINGS_MODAL} input[type="checkbox"]:focus-visible {
outline: var(--focus-outline-width) solid var(--focus-outline-color);
outline-offset: var(--focus-outline-offset);
}
#${UI_IDS.SETTINGS_MODAL} textarea, #${UI_IDS.CUSTOM_PROMPT_TEXTAREA} {
resize: vertical;
min-height: 80px;
}

#${UI_IDS.SETTINGS_CONTENT} { padding: 0; }
#${UI_IDS.SETTINGS_GRID} {
display: flex; flex-direction: column; gap: var(--space-md);
padding: var(--space-md);
overflow-y: auto; flex-grow: 1;
}
.${SCRIPT_PREFIX}settings-group-container {
border: 1px solid #e0e0e0; border-radius: var(--border-radius-large);
 padding: var(--space-lg); background: #fcfcfc;
}
.${SCRIPT_PREFIX}settings-group-container > .${SCRIPT_PREFIX}button {
display: block; width: 100%; margin-top: var(--space-lg);
}
.${SCRIPT_PREFIX}settings-section {
border: 1px solid #ddd; border-radius: var(--border-radius-medium);
padding: var(--space-lg); margin-bottom: var(--space-md);
}
.${SCRIPT_PREFIX}settings-section:last-of-type { margin-bottom: 0; }
.${SCRIPT_PREFIX}settings-section h3 {
margin: 0 0 var(--space-md); border-bottom: 1px solid #eee;
padding-bottom: var(--space-sm); font-size: 1.125em; font-weight: 600;
}
.${SCRIPT_PREFIX}settings-form-column { display: flex; flex-direction:
column; gap: var(--space-md); }
.${SCRIPT_PREFIX}settings-form-row, .${SCRIPT_PREFIX}settings-form-row-wrap
{
display: flex; flex-direction: column;
align-items: flex-start; gap: var(--space-xs);
}
.${SCRIPT_PREFIX}settings-form-row label, .${SCRIPT_PREFIX}settings-form-
row-wrap label {
font-weight: 600; font-size: 0.875em;
margin-bottom: var(--space-xs);
}

.${SCRIPT_PREFIX}settings-grid-inputs {
display: grid; grid-template-columns: 1fr;
gap: var(--space-sm) var(--space-md); align-items: center;
}
.${SCRIPT_PREFIX}settings-grid-inputs label { font-weight: normal; font-
size: 0.875em; text-align: left; }
.${SCRIPT_PREFIX}settings-grid-inputs input[type="number"] { width:
100px; }
#${UI_IDS.SAFETY_CONTROLS_DIV} { margin-left: 0; margin-top: var(--space-
sm); }
#${UI_IDS.DISPLAY_FONT_SIZE_INPUT} { width: 80px !important; }
.${SCRIPT_PREFIX}template-buttons { display: flex; gap: var(--space-sm);
justify-content: space-between; }
.${SCRIPT_PREFIX}template-buttons .${SCRIPT_PREFIX}button {
flex-grow: 1; font-size: 0.8125em; padding: var(--space-sm) var(--
space-md);
}
#${UI_IDS.EXPORT_DATA_BTN}, #${UI_IDS.IMPORT_DATA_BTN} { margin-top: var(--
space-sm); }

#${UI_IDS.RESULT_MODAL_INTERNAL_STATUS} {
padding: var(--space-sm) var(--space-lg); margin: 0; font-size:
0.875em;
border-bottom: 1px solid var(--border-color); display: none; text-
align: center;
font-weight: 600; flex-shrink: 0;
}
#${UI_IDS.RESULT_MODAL_INTERNAL_STATUS}.status-success { background:
#d4edda; color: #155724; border-color: #c3e6cb; }
#${UI_IDS.RESULT_MODAL_INTERNAL_STATUS}.status-error { background: #f8d7da;
color: #721c24; border-color: #f5c6cb; }
#${UI_IDS.RESULT_MODAL_INTERNAL_STATUS}.status-warn { background: #fff3cd;
color: #856404; border-color: #ffeeba; }
#${UI_IDS.RESULT_MODAL_INTERNAL_STATUS}.status-info { background: #d1ecf1;
color: #0c5460; border-color: #bee5eb; }

#${UI_IDS.RESULT_MODAL_PANELS_CONTAINER} {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
background: rgba(0,0,0,0.02);

#${UI_IDS.CUSTOM_PROMPT_PANEL} {

margin-top: var(--space-md); border: 1px solid var(--border-color-

input);
border-radius: var(--border-radius-medium); background: #f0f0f0; color:
#333;

}
#${UI_IDS.CUSTOM_PROMPT_PANEL}:first-child { margin-top: 0; }
#${UI_IDS.CUSTOM_PROMPT_PANEL_HEADER} {
display: flex; justify-content: space-between; align-items: center;
padding: var(--space-sm) var(--space-md); border-bottom: 1px solid
var(--border-color-input);
background: #e0e0e0;
}
#${UI_IDS.CUSTOM_PROMPT_PANEL_HEADER} h4 { margin: 0; font-size: 1em; font-
weight: 600; color: #333; }

#${UI_IDS.CUSTOM_PROMPT_PANEL_CLOSE_BTN} { font-size: 1.25em !important;

padding: 2px 6px !important; line-height: 1 !important; color: #555 !important; }
#${UI_IDS.CUSTOM_PROMPT_PANEL_CLOSE_BTN}:hover, #$
{UI_IDS.CUSTOM_PROMPT_PANEL_CLOSE_BTN}:focus-visible { color: #111 !important; }
.${SCRIPT_PREFIX}custom-prompt-controls-inner { padding: var(--space-md);
display: flex; flex-direction: column; gap: var(--space-sm); }
.${SCRIPT_PREFIX}custom-prompt-controls-inner label { font-size: 0.875em;
font-weight: 600; margin-bottom: -3px; color: #333; }
#${UI_IDS.CUSTOM_PROMPT_TEXTAREA} { min-height: 70px; font-size:
0.9375em; }
.${SCRIPT_PREFIX}custom-prompt-buttons { display: flex; gap: var(--space-
sm); justify-content: flex-end; }
#${UI_IDS.CUSTOM_PROMPT_EXECUTE_BTN}, #${UI_IDS.CUSTOM_PROMPT_UPDATE_BTN} {
font-size: 0.875em; padding: var(--space-sm) var(--space-md); flex-
grow: 1;
}
@media (min-width: 400px) {
#${UI_IDS.CUSTOM_PROMPT_EXECUTE_BTN}, #$
{UI_IDS.CUSTOM_PROMPT_UPDATE_BTN} { flex-grow: 0; }
}
#${UI_IDS.CUSTOM_PROMPT_EXECUTE_BTN} { background: var(--color-primary);
color: white; border-color: var(--color-primary-dark); }
#${UI_IDS.CUSTOM_PROMPT_EXECUTE_BTN}:hover:not(:disabled) { background:
var(--color-primary-dark); }

.${SCRIPT_PREFIX}toc-panel { padding: var(--space-md); background: var(--

bg-light); color: var(--text-color); }
.${SCRIPT_PREFIX}toc-panel h4 {
margin: 0 0 var(--space-md); font-size: 1.05em;
 padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border-
color); color: var(--text-color); font-weight: 600;
}
#${UI_IDS.TOC_LIST} { list-style: none; padding: 0; margin: 0; max-height:
25dvh; overflow-y: auto; }
.${SCRIPT_PREFIX}toc-item {
padding: var(--space-sm) var(--space-md); border-bottom: 1px solid
#e9ecef;
font-size: 0.9375em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
background: var(--bg-white); color: #343a40;
transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
border-radius: var(--border-radius-small);
margin-bottom: 2px;
}
.${SCRIPT_PREFIX}toc-item:last-child { border-bottom: none; margin-bottom:
0; }
.${SCRIPT_PREFIX}toc-item:hover, .${SCRIPT_PREFIX}toc-item:focus-visible {
background: #e7f5ff; color: var(--color-primary-dark); outline: none;
cursor: pointer;
}
.${SCRIPT_PREFIX}toc-item:focus-visible { box-shadow: inset 0 0 0 var(--
focus-outline-width) var(--color-primary); }
.${SCRIPT_PREFIX}toc-item.active { font-weight: 600; background: #cce5ff;
color: #004085; }
.${SCRIPT_PREFIX}toc-item.active[aria-current="page"] { box-shadow: inset
3px 0 0 0 var(--color-primary); }

#${UI_IDS.RESULT_MODAL_BODY} {
padding: var(--space-md);
overflow-y: auto; flex-grow: 1;
line-height: 1.7; word-break: break-word; font-size: 1em;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
#${UI_IDS.RESULT_MODAL_BODY} p:first-child { margin-top: 0; }
#${UI_IDS.RESULT_MODAL_BODY} p:last-child { margin-bottom: 0; }
#${UI_IDS.RESULT_MODAL_BODY} p { margin-bottom: 1.2em; }
#${UI_IDS.RESULT_MODAL_BODY} pre { background: rgba(128,128,128,0.08);
padding: var(--space-md); border-radius: var(--border-radius-medium); overflow-x:
auto; white-space: pre-wrap; word-wrap: break-word; border: 1px solid
rgba(128,128,128,0.15); }
#${UI_IDS.RESULT_MODAL_BODY} code { font-family: monospace; background:
rgba(128,128,128,0.12); padding: 3px 5px; border-radius: var(--border-radius-
small); font-size: 0.9em; }
#${UI_IDS.RESULT_MODAL_BODY} pre code { background: transparent; padding:
0; font-size: 1em; }
#${UI_IDS.RESULT_MODAL_BODY} blockquote { border-left: 4px solid
rgba(128,128,128,0.4); padding-left: var(--space-lg); margin-left: 0; color:
inherit; opacity: 0.9; font-style: italic; }
#${UI_IDS.RESULT_MODAL_BODY} table { border-collapse: collapse; margin-
bottom: 1em; width: auto; border: 1px solid rgba(128,128,128,0.3); }
#${UI_IDS.RESULT_MODAL_BODY} th, #${UI_IDS.RESULT_MODAL_BODY} td { border:
1px solid rgba(128,128,128,0.3); padding: var(--space-sm) var(--space-md); text-
align: left; }
#${UI_IDS.RESULT_MODAL_BODY} th { background: rgba(128,128,128,0.1); font-
weight: bold; }
#${UI_IDS.RESULT_MODAL_BODY} hr { border: none; border-top: 1px solid
rgba(128,128,128,0.3); margin: 1.5em 0; }
#${UI_IDS.RESULT_MODAL_FOOTER} {
padding: var(--space-sm);
border-top: 1px solid var(--border-color);
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-sm);
}
.${SCRIPT_PREFIX}footer-row-top {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
.${SCRIPT_PREFIX}footer-row-top-left {
flex-shrink: 0;
}
.${SCRIPT_PREFIX}footer-row-top-right {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.${SCRIPT_PREFIX}save-discard-group {
display: flex;
gap: var(--space-xs);
}
.${SCRIPT_PREFIX}footer-row-bottom {
display: flex;
width: 100%;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
}
#${UI_IDS.RESULT_MODAL_FOOTER} .${SCRIPT_PREFIX}button {
flex-grow: 0;
flex-basis: auto;
padding: var(--space-xs) var(--space-sm);
font-size: 0.8125em;
line-height: 1.4;
white-space: nowrap;
}
.${SCRIPT_PREFIX}footer-row-bottom .${SCRIPT_PREFIX}button {

}
#${UI_IDS.RESULT_MODAL_FOOTER} .${SCRIPT_PREFIX}icon-button {
padding: var(--space-xs);
font-size: 1.1em;
}

.${SCRIPT_PREFIX}mode-switcher {
display: inline-flex;
border-radius: var(--border-radius-medium);
overflow: hidden;
border: 1px solid var(--border-color-input);
}
 .${SCRIPT_PREFIX}mode-switcher .${SCRIPT_PREFIX}button {
padding: var(--space-sm) var(--space-md);
font-size: 0.8125em;
background-color: transparent;
color: var(--text-muted);
border: none;
border-radius: 0;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
font-weight: 500;

}
.${SCRIPT_PREFIX}mode-switcher .${SCRIPT_PREFIX}button:not(:last-child) {
border-right: 1px solid var(--border-color-input);
}

.${SCRIPT_PREFIX}mode-switcher .${SCRIPT_PREFIX}button.active {
background-color: var(--color-primary);
color: var(--bg-white);
font-weight: 600;

.${SCRIPT_PREFIX}mode-switcher .$
{SCRIPT_PREFIX}button:not(.active):hover:not(:disabled) {
background-color: rgba(0,0,0,0.05);
color: var(--color-primary-dark);
}

.${SCRIPT_PREFIX}mode-switcher .${SCRIPT_PREFIX}button:focus-visible {

position: relative;
z-index: 1;
outline: none;
box-shadow: inset 0 0 0 var(--focus-outline-width) var(--focus-outline-
color);
}

.${SCRIPT_PREFIX}mode-switcher .${SCRIPT_PREFIX}button.active:focus-visible
{
box-shadow: inset 0 0 0 var(--focus-outline-width) var(--color-primary-
dark);
}

#${UI_IDS.RESULT_MODAL_SAVE_BTN}.${SCRIPT_PREFIX}button:not(:disabled) {
background: var(--color-success); color: var(--bg-white); border-color:
var(--color-success-dark);
}
#${UI_IDS.RESULT_MODAL_SAVE_BTN}.$
{SCRIPT_PREFIX}button:not(:disabled):hover {
background: var(--color-success-dark);
}

#${UI_IDS.RESULT_MODAL_SAVE_BTN}.${SCRIPT_PREFIX}button.save-changes-
active:not(:disabled) {
background: var(--color-warning);
color: var(--text-color);
border-color: var(--color-warning-dark);
}
#${UI_IDS.RESULT_MODAL_SAVE_BTN}.${SCRIPT_PREFIX}button.save-changes-
active:hover:not(:disabled) {
background: var(--color-warning-dark);
}

#${UI_IDS.HISTORY_MODAL_CONTENT} {
padding: 0;
max-width: 500px;
max-height: calc(100dvh - (2 * var(--space-md)) - 20px);
}
.${SCRIPT_PREFIX}history-body {
display: flex; flex-direction: column;
gap: var(--space-md);
padding: var(--space-md);
flex-grow: 1; overflow-y: hidden;
}
.${SCRIPT_PREFIX}history-panel {
flex: 1; border: 1px solid #ddd; border-radius: var(--border-radius-
medium);
padding: var(--space-md); display: flex; flex-direction: column;
min-width: 0;

max-height: calc(( (100vh - (2 * var(--space-md)) - 20px ) * 0.8 ) /

2 - (3 * var(--space-md)) );
overflow-y: auto; background: #fdfdfd;
}
.${SCRIPT_PREFIX}history-panel h3 {
margin: 0 0 var(--space-md); padding-bottom: var(--space-sm);
border-bottom: 1px solid #eee; font-size: 1.125em; font-weight: 600;
}
#${UI_IDS.HISTORY_PROJECT_LIST}, #${UI_IDS.HISTORY_TRANSLATION_LIST} {
list-style: none; padding: 0; margin: 0; flex-grow: 1; overflow-y:
auto;
-webkit-overflow-scrolling: touch;
}
.${SCRIPT_PREFIX}history-item {
padding: var(--space-sm) var(--space-md); border-bottom: 1px solid
#eee;
display: flex; flex-wrap: wrap;
justify-content: space-between; align-items: center; gap: var(--space-
sm);
user-select: none; font-size: 0.9375em;
border-radius: var(--border-radius-small);
margin-bottom: 2px;
}
.${SCRIPT_PREFIX}history-item:last-child { border-bottom: none; margin-
bottom: 0;}
.${SCRIPT_PREFIX}history-item span[role="button"] {
flex-grow: 1; flex-basis: calc(100% - 100px);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor:
pointer;
padding: var(--space-xs) 0;
}
.${SCRIPT_PREFIX}history-item span[role="button"]:hover, .$
{SCRIPT_PREFIX}history-item span[role="button"]:focus-visible {
text-decoration: underline; color: var(--color-primary-dark);
outline:none;
}
.${SCRIPT_PREFIX}history-item span[role="button"]:focus-visible {
box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-
color); border-radius: 2px;
outline-offset: 1px;
}
.${SCRIPT_PREFIX}history-item.selected > span[data-action="selectProject"],
.${SCRIPT_PREFIX}history-item.selected > span[data-
action="viewTranslation"] {
font-weight: bold; color: var(--color-primary); background: #e9ecef;
border-radius:var(--border-radius-small); padding: 2px var(--space-xs);
}
.${SCRIPT_PREFIX}history-item-actions {
display: flex;
gap: var(--space-md);
flex-shrink: 0;
align-items: center;
}
.${SCRIPT_PREFIX}history-action-button {
font-size: 0.875em; padding: var(--space-xs) var(--space-sm);
line-height: 1.2; cursor: pointer; border: 1px solid #ccc;
border-radius: var(--border-radius-small); background: #f0f0f0;
min-width: 24px; text-align: center; color: var(--text-color);
}
.${SCRIPT_PREFIX}history-action-button.delete { color: var(--color-danger);
border-color: var(--color-danger); }
.${SCRIPT_PREFIX}history-action-button:hover, .${SCRIPT_PREFIX}history-
action-button:focus-visible { background: #e0e0e0; outline: none; }
.${SCRIPT_PREFIX}history-action-button:focus-visible { box-shadow: 0 0 0
var(--focus-outline-width) rgba(0,0,0,.4); }
.${SCRIPT_PREFIX}history-action-button.delete:hover, .$
{SCRIPT_PREFIX}history-action-button.delete:focus-visible { background: #f8d7da; }
#${UI_IDS.HISTORY_PROJECT_ACTIONS} { margin-bottom: var(--space-md); }
#${UI_IDS.HISTORY_DOWNLOAD_PROJECT_BTN} {
width:100%;
margin-top: var(--space-sm);
font-size: 0.8125em;
padding: var(--space-sm);
line-height: 1.3;
max-height: 30px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
}
.${SCRIPT_PREFIX}active-project-name-text { font-weight: bold; color:
var(--color-primary); }

.${SCRIPT_PREFIX}history-item .${SCRIPT_PREFIX}set-active-button {
background: var(--color-info); var(--bg-white); border-color: var(--
color-primary-dark);
padding: var(--space-xs) var(--space-sm);
font-size: 0.8125em;
white-space: normal;
line-height: 1.3;
text-align: center;
flex-grow: 0;
flex-shrink: 0;
min-width: 80px;
}
 .${SCRIPT_PREFIX}set-active-button:hover:not(:disabled), .$
{SCRIPT_PREFIX}set-active-button:focus-visible {
background: var(--color-primary-dark) !important;
}

#${UI_IDS.HISTORY_PROJECT_LIST} li[draggable="true"],
#${UI_IDS.HISTORY_TRANSLATION_LIST} li[draggable="true"] { cursor: grab; }
#${UI_IDS.HISTORY_PROJECT_LIST} li.${SCRIPT_PREFIX}dragging-item,
#${UI_IDS.HISTORY_TRANSLATION_LIST} li.${SCRIPT_PREFIX}dragging-item
{ opacity: 0.5; background: #d0eaff; }
#${UI_IDS.HISTORY_PROJECT_LIST} li.${SCRIPT_PREFIX}drag-over-target,
#${UI_IDS.HISTORY_TRANSLATION_LIST} li.${SCRIPT_PREFIX}drag-over-target
{ border-top: 2px dashed var(--color-primary); }

@media (min-width: 768px) {

:root {

#${UI_IDS.CONTAINER} {

bottom: 15px; right: 15px; left: auto; top: auto;

max-width: 250px; width: auto;
border-radius: var(--border-radius-medium); border: 1px solid #bbb;
padding: var(--space-sm);
box-shadow: 0 2px 10px rgba(0,0,0,0);
flex-direction: column; align-items: flex-end; gap: 5px;
justify-content: flex-start;
background: rgba(245, 245, 245, 0.60);
}
#${UI_IDS.MINIMIZE_MAIN_CONTROLS_BTN} {
order: -2;
align-self: flex-end;
font-size: 1.2em;
padding: var(--space-xs);
}
#${UI_IDS.STATUS_INDICATOR} {
display: block;
text-align: right; font-size: 11px; padding: 3px 6px; margin-
bottom: 3px;
order: -1;
}
.${SCRIPT_PREFIX}button-group {
flex-direction: row;
gap: 5px; flex-wrap: wrap; justify-content: flex-end;
width: 100%;
flex-grow: 0;
}
.${SCRIPT_PREFIX}button {
font-size: 12px; padding: 5px 10px; width: auto; display: inline-
block;
flex-grow: 0;
white-space: nowrap;
}
.${SCRIPT_PREFIX}button-group > .${SCRIPT_PREFIX}button:not(.$
{SCRIPT_PREFIX}icon-button) {
flex-grow: 0;
}
.${SCRIPT_PREFIX}icon-button { font-size: 14px; padding: 4px 8px; }
 #${UI_IDS.RESTORE_RESULT_ICON} { font-size: 18px; padding: 5px 8px;
margin-bottom: 5px; }

#${UI_IDS.SETTINGS_MODAL}, #${UI_IDS.RESULT_MODAL}, #$
{UI_IDS.HISTORY_MODAL} {
padding: 20px;
align-items: center;
}
#${UI_IDS.SETTINGS_CONTENT}, #${UI_IDS.RESULT_MODAL_CONTENT}, #$
{UI_IDS.HISTORY_MODAL_CONTENT} {
width: auto; height: auto; max-height: 90vh;
border-radius: var(--border-radius-large);
box-shadow: 0 5px 20px rgba(0,0,0,0); border: 1px solid
rgba(0,0,0,0.15);
}

#${UI_IDS.SETTINGS_CONTENT} { max-width: 95%; width: 550px; padding: 0;

}
#${UI_IDS.RESULT_MODAL_CONTENT} { max-width: 800px; width: 90%; }
#${UI_IDS.HISTORY_MODAL_CONTENT} { max-width: 900px; width: 95%;
padding:0; }

.${SCRIPT_PREFIX}modal-header { padding: 12px 18px; }

.${SCRIPT_PREFIX}modal-header h2 { font-size: 1.35em; }
#${UI_IDS.RESULT_MODAL_CONTENT} .${SCRIPT_PREFIX}modal-header {
padding: 12px 18px;
}
#${UI_IDS.RESULT_MODAL_CONTENT} .${SCRIPT_PREFIX}modal-header h2 {
font-size: 1.35em;
}
.${SCRIPT_PREFIX}modal-control-button {
font-size: 16px;
padding: 3px 6px;
margin-left: 8px;
}

#${UI_IDS.SETTINGS_GRID} { padding: 20px; gap: 15px; }

.${SCRIPT_PREFIX}settings-group-container { padding: 15px; }
.${SCRIPT_PREFIX}settings-section { padding: 15px; }
.${SCRIPT_PREFIX}settings-section h3 { font-size: 1.1em; }
.${SCRIPT_PREFIX}settings-form-row {
flex-direction: row; align-items: center; gap: 8px; flex-wrap:
nowrap;
}
.${SCRIPT_PREFIX}settings-form-row-wrap {
flex-direction: column; gap: 5px; align-items: flex-start;
}
.${SCRIPT_PREFIX}settings-form-row label, .${SCRIPT_PREFIX}settings-
form-row-wrap label {
font-size: 12px; min-width: 100px; flex-shrink: 0; text-align:
left; margin-bottom: 0;
}
#${UI_IDS.SETTINGS_MODAL} select, #${UI_IDS.SETTINGS_MODAL}
input[type="text"],
#${UI_IDS.SETTINGS_MODAL} input[type="number"], #$
{UI_IDS.SETTINGS_MODAL} textarea,
#${UI_IDS.CUSTOM_PROMPT_SELECT}, #${UI_IDS.CUSTOM_PROMPT_TEXTAREA} {
padding: 6px 8px; font-size: 13px; flex-grow: 1;
}
 #${UI_IDS.SETTINGS_MODAL} input[type="color"] { height: 30px; min-
width: 50px; }
#${UI_IDS.SETTINGS_MODAL} input[type="checkbox"] { transform: scale(1);
margin-right: var(--space-sm); }
#${UI_IDS.SETTINGS_MODAL} textarea { min-height: 80px; }
.${SCRIPT_PREFIX}settings-grid-inputs { grid-template-columns: auto
1fr; gap: 8px 10px; }
.${SCRIPT_PREFIX}settings-grid-inputs label { font-size: 12px; }
.${SCRIPT_PREFIX}settings-grid-inputs input[type="number"] { width:
80px; flex-grow: 0; }
#${UI_IDS.SAFETY_CONTROLS_DIV} { margin: 5px 0 0 20px; }
#${UI_IDS.DISPLAY_FONT_SIZE_INPUT} { width: 70px !important; flex-grow:
0; }
.${SCRIPT_PREFIX}template-buttons .${SCRIPT_PREFIX}button {
flex-grow: 0; font-size: 11px; padding: 3px 6px;
}

#${UI_IDS.RESULT_MODAL_INTERNAL_STATUS} { font-size: 12px; padding: 8px

15px; }
#${UI_IDS.RESULT_MODAL_PANELS_CONTAINER} {
padding: 0 15px 10px;

}
#${UI_IDS.CUSTOM_PROMPT_PANEL_HEADER} { padding: 8px 12px; }
#${UI_IDS.CUSTOM_PROMPT_PANEL_HEADER} h4 { font-size: 1em; }
.${SCRIPT_PREFIX}custom-prompt-controls-inner { padding: 10px 12px; }
#${UI_IDS.CUSTOM_PROMPT_TEXTAREA} { font-size: 13px; min-height:
60px; }
#${UI_IDS.CUSTOM_PROMPT_EXECUTE_BTN}, #$
{UI_IDS.CUSTOM_PROMPT_UPDATE_BTN} {
font-size: 11px; padding: 4px 8px; flex-grow: 0;
}

.${SCRIPT_PREFIX}toc-panel { padding: 10px; }

.${SCRIPT_PREFIX}toc-panel h4 { font-size: 1.1em; }
#${UI_IDS.TOC_LIST} { max-height: 25vh; }
.${SCRIPT_PREFIX}toc-item { font-size: 13px; padding: 6px 10px; }

#${UI_IDS.RESULT_MODAL_BODY} {
padding: 15px 20px;
font-size: 0.9375em;
touch-action: auto;
}

#${UI_IDS.RESULT_MODAL_FOOTER} {
padding: 10px 15px;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
.${SCRIPT_PREFIX}footer-row-top, .${SCRIPT_PREFIX}footer-row-bottom {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: var(--space-sm);
align-items: center;
width: auto;
}
 #${UI_IDS.RESULT_MODAL_FOOTER} .${SCRIPT_PREFIX}button {
flex-grow: 0;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}

.${SCRIPT_PREFIX}mode-switcher button {
font-size: 11px; padding: 5px 8px;
}

.${SCRIPT_PREFIX}history-body { padding: 20px; gap: 20px; flex-

direction: row; }
.${SCRIPT_PREFIX}history-panel { padding: 15px; max-height: 75vh; min-
width: 250px; }
.${SCRIPT_PREFIX}history-panel h3 { font-size: 1.1em; }
.${SCRIPT_PREFIX}history-item { padding: 8px 10px; font-size: 12px;
flex-wrap:nowrap; }
.${SCRIPT_PREFIX}history-item span[role="button"] { flex-basis: auto; }
.${SCRIPT_PREFIX}history-item .${SCRIPT_PREFIX}set-active-button {
font-size: 0.8125em !important;
padding: 3px var(--space-sm) !important;
white-space: nowrap;
line-height: 1.5;
flex-grow: 0;
min-width: auto;
}
.${SCRIPT_PREFIX}history-item-actions {
gap: var(--space-sm);
}
.${SCRIPT_PREFIX}history-action-button { font-size: 12px; padding: 2px
5px; }
#${UI_IDS.HISTORY_DOWNLOAD_PROJECT_BTN} {
width: auto; margin-top:0; font-size: 12px; padding: 4px 8px;
}
}

@media (max-width: 767px) {

#${UI_IDS.HISTORY_DOWNLOAD_PROJECT_BTN} {
width: auto;
margin-top:0;
font-size: 12px;
padding: 4px 8px;
max-height: none;
line-height: normal;
}
#${UI_IDS.RESULT_MODAL_CONTENT} .${SCRIPT_PREFIX}modal-header {
padding: 5px 10px;
}
#${UI_IDS.RESULT_MODAL_CONTENT} .${SCRIPT_PREFIX}modal-header h2 {
font-size: 0.9em;
}
#${UI_IDS.RESULT_MODAL_FOOTER} .${SCRIPT_PREFIX}button {
padding: 3px 6px;
font-size: 0.75em;
}
#${UI_IDS.RESULT_MODAL_FOOTER} .${SCRIPT_PREFIX}icon-button {
padding: 3px;
 font-size: 1em;
}
.${SCRIPT_PREFIX}footer-row-bottom {
flex-wrap: wrap;
justify-content: center;
}
.${SCRIPT_PREFIX}footer-row-bottom .${SCRIPT_PREFIX}button {
margin: 2px;