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: 0.1875rem;
--border-radius-medium: 0.375rem;
--border-radius-large: 0.5rem;
--material-border-radius: 0.25rem;

--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: #5a6268;
--bg-light: #f8f9fa;
--bg-white: #ffffff;
--border-color: #dee2e6;
--border-color-input: #ced4da;

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

--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 0.75rem;
--space-lg: 1rem;
--space-xl: 1.25rem;

--elevation-umbra-color: rgba(0,0,0,.2);
--elevation-penumbra-color: rgba(0,0,0,.14);
--elevation-ambient-color: rgba(0,0,0,.12);

--dp0: none;
--dp1: 0px 2px 1px -1px var(--elevation-umbra-color),
0px 1px 1px 0px var(--elevation-penumbra-color),
0px 1px 3px 0px var(--elevation-ambient-color);
--dp2: 0px 3px 1px -2px var(--elevation-umbra-color),
0px 2px 2px 0px var(--elevation-penumbra-color),
0px 1px 5px 0px var(--elevation-ambient-color);
--dp4: 0px 2px 4px -1px var(--elevation-umbra-color),
0px 4px 5px 0px var(--elevation-penumbra-color),
0px 1px 10px 0px var(--elevation-ambient-color);
--dp6: 0px 3px 5px -1px var(--elevation-umbra-color),
 0px 6px 10px 0px var(--elevation-penumbra-color),
0px 1px 18px 0px var(--elevation-ambient-color);
--dp8: 0px 5px 5px -3px var(--elevation-umbra-color),
0px 8px 10px 1px var(--elevation-penumbra-color),
0px 3px 14px 2px var(--elevation-ambient-color);
}

#${UI_IDS.CONTAINER} {

margin: 0;

font-family: var(--font-family-sans);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--text-color);
text-align: left;
font-weight: normal;
box-sizing: border-box;

position: fixed;

transform: translate(var(--space-md), var(--space-md));

border-radius: var(--border-radius-medium);
border: 1px solid var(--border-color);
max-width: 17.5rem;
z-index: 99999;
background: rgba(245, 245, 245, 0.55);
padding: var(--space-sm);

box-shadow: 0px 2px 4px rgba(0,0,0,0.2);

display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-sm);
justify-content: space-between;
}

#${UI_IDS.MINIMIZE_MAIN_CONTROLS_BTN} {
order: 10;
align-self: center;
font-size: 1.9em;
padding: calc(var(--space-xs) + 0.03125rem);
background: transparent;
border: none;
color: var(--text-muted);
line-height: 0.45;
cursor: pointer;

border-radius: var(--material-border-radius);
}
#${UI_IDS.MINIMIZE_MAIN_CONTROLS_BTN}:hover,
#${UI_IDS.MINIMIZE_MAIN_CONTROLS_BTN}:active {
color: var(--text-color);
background-color: rgba(0,0,0,0.05);
}
#${UI_IDS.CONTAINER}.${SCRIPT_PREFIX}main-controls-minimized} #$
{UI_IDS.MINIMIZE_MAIN_CONTROLS_BTN} {
font-size: 1em;
 padding: var(--space-xs);
line-height: 1;
}

#${UI_IDS.STATUS_INDICATOR} {
display: none;
font-size: 0.75rem;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius-small);
}
#${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(--material-border-radius);
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: opacity 0.2s, transform 0.1s;

white-space: nowrap;
line-height: 1.5;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
flex-basis: 0;
flex-grow: 0;
text-transform: uppercase;
will-change: transform, opacity, background-color;
}
.${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: var(--dp1);
}
.${SCRIPT_PREFIX}button:disabled {
cursor: not-allowed;
opacity: 0.65;
background: #e9ecef;
color: var(--text-muted);
border-color: var(--border-color);
}
.${SCRIPT_PREFIX}button:active:not(:disabled) {
transform: translateY(1px);
box-shadow: none;
background-color: #d8dde1;
}
.${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;
min-width: calc(1.2em + 2 * var(--space-sm));
width: auto;
line-height: 1;
text-transform: none;

border-radius: var(--material-border-radius);
border: none;

}
.${SCRIPT_PREFIX}icon-button:hover:not(:disabled), .${SCRIPT_PREFIX}icon-
button:active:not(:disabled) {
background-color: rgba(0,0,0,0.08);
}

.${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.translate-warning-state {
background: var(--color-warning) !important;
color: var(--text-color) !important;
border-color: var(--color-warning-dark) !important;
}
.${SCRIPT_PREFIX}translate-button.translate-warning-
state: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} {
display: none;
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(--
material-border-radius);
cursor: pointer; text-align: center;
width: fit-content; align-self: flex-end;
box-shadow: var(--dp1);
box-sizing: border-box;
}
#${UI_IDS.RESTORE_RESULT_ICON}:hover,
#${UI_IDS.RESTORE_RESULT_ICON}:active,
#${UI_IDS.RESTORE_RESULT_ICON}:focus-visible {
background: var(--color-secondary-dark);
box-shadow: var(--dp2);
}
#${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}, #$
{UI_IDS.RESULT_MODAL} {
all: initial;
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;
overflow-y: auto;
}

#${UI_IDS.HISTORY_MODAL} { z-index: 100001; }

#${UI_IDS.RESULT_MODAL} { z-index: 100002; align-items: flex-start; }
#${UI_IDS.SETTINGS_MODAL} { z-index: 100003; }

#${UI_IDS.SETTINGS_CONTENT}, #${UI_IDS.HISTORY_MODAL_CONTENT}, #$
{UI_IDS.RESULT_MODAL_CONTENT} {
all: initial;
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
 color: var(--text-color);
text-align: left;
font-weight: normal;
box-sizing: border-box;

display: flex;
background: var(--bg-white);
border-radius: var(--border-radius-large);
width: 90vw;
max-width: 31.25rem;
height: auto;
max-height: calc(100dvh - (2 * var(--space-md)));
overflow: hidden;
flex-direction: column;

box-shadow: 0px 5px 5px rgba(0,0,0,0.2);

position: relative;
contain: layout;
}

#${UI_IDS.RESULT_MODAL_CONTENT} {
max-width: 50rem;
height: 90dvh;
}

.${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;
background-color: var(--bg-white);
box-sizing: border-box;
}
#${UI_IDS.RESULT_MODAL} .${SCRIPT_PREFIX}modal-header {
background-color: transparent;
}

.${SCRIPT_PREFIX}modal-header h2 {
all: initial;
font-family: inherit;
font-size: 1.1em;
font-weight: 500;
line-height: 1.3;
color: inherit;
letter-spacing: 0.01em;
margin: 0;
flex-grow: 1;
pointer-events: none;
box-sizing: border-box;
}
.${SCRIPT_PREFIX}modal-control-button {
all: initial;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: inherit;
font-size: 1.5em;
background: none;
 border: none;
cursor: pointer;
padding: var(--space-sm);
line-height: 1;
color: var(--text-muted);
flex-shrink: 0;
margin-left: var(--space-sm);
border-radius: 50%;
width: 2.5rem; height: 2.5rem;
box-sizing: border-box;
}
.${SCRIPT_PREFIX}modal-control-button:hover,
.${SCRIPT_PREFIX}modal-control-button:active,
.${SCRIPT_PREFIX}modal-control-button:focus-visible {
color: var(--text-color);
background-color: rgba(0,0,0,0.05);
}
.${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} {
all: initial;
font-family: var(--font-family-sans);
font-size: 1rem;
line-height: 1.5;
color: var(--text-color);
background: rgba(0,0,0,0.03);
padding: var(--space-sm);
border: none;
border-bottom: 1px solid var(--border-color-input);
border-radius: var(--material-border-radius) var(--material-border-
radius) 0 0;
box-sizing: border-box;
width: 100%;
transition: border-color 0.2s, background-color 0.2s;
}
#${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,
#${UI_IDS.SETTINGS_MODAL} select:focus, #${UI_IDS.SETTINGS_MODAL}
input[type="text"]:focus,
#${UI_IDS.SETTINGS_MODAL} input[type="number"]:focus, #$
{UI_IDS.SETTINGS_MODAL} textarea:focus,
#${UI_IDS.CUSTOM_PROMPT_SELECT}:focus, #$
{UI_IDS.CUSTOM_PROMPT_TEXTAREA}:focus {
outline: none;
border-bottom-color: var(--color-primary);
border-bottom-width: 2px;
background: rgba(0,0,0,0.01);
}
#${UI_IDS.SETTINGS_MODAL} input[type="color"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0.125rem;
height: 2.5rem;
border: 1px solid var(--border-color-input);
border-radius: var(--material-border-radius);
cursor: pointer;
min-width: 3.75rem;
box-sizing: border-box;
background-color: var(--bg-white);
}
#${UI_IDS.SETTINGS_MODAL} input[type="checkbox"] {
width: auto; margin-right: var(--space-md);
transform: scale(1.3);
flex-shrink: 0;
accent-color: var(--color-primary);
background: initial;
border: initial;
font: initial;
}
#${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: 5rem;
}

#${UI_IDS.SETTINGS_CONTENT} { padding: 0; }
#${UI_IDS.SETTINGS_GRID} {
display: flex; flex-direction: column; gap: var(--space-lg);
padding: var(--space-lg);
overflow-y: auto; flex-grow: 1;
min-height: 0;
box-sizing: border-box;
}
.${SCRIPT_PREFIX}settings-group-container {
border: 1px solid #e0e0e0; border-radius: var(--border-radius-large);
padding: var(--space-lg); background: var(--bg-white);
box-shadow: var(--dp1);
box-sizing: border-box;
}
.${SCRIPT_PREFIX}settings-group-container > .${SCRIPT_PREFIX}button {
display: block; width: 100%; margin-top: var(--space-lg);
}
.${SCRIPT_PREFIX}settings-section {
border-radius: var(--material-border-radius);
padding: var(--space-lg); margin-bottom: var(--space-md);
background-color: var(--bg-light);
box-sizing: border-box;
}
.${SCRIPT_PREFIX}settings-section:last-of-type { margin-bottom: 0; }
.${SCRIPT_PREFIX}settings-section h3 {
all: initial;
font-family: inherit; font-size: 1.125em; font-weight: 500; color:
inherit; line-height: inherit;
margin: 0 0 var(--space-md); border-bottom: 1px solid var(--border-
color);
padding-bottom: var(--space-sm);
box-sizing: border-box;
}
.${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 {
all: initial;
display: block;
font-family: inherit; font-size: 0.875em; font-weight: 500; color:
var(--text-muted); line-height: inherit;
margin-bottom: var(--space-xs);
box-sizing: border-box;
}

.${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:
6.25rem; }
#${UI_IDS.SAFETY_CONTROLS_DIV} { margin-left: 0; margin-top: var(--space-
sm); }
#${UI_IDS.DISPLAY_FONT_SIZE_INPUT} { width: 5rem !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;
box-sizing: border-box;
}
#${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);
box-sizing: border-box;
}

#${UI_IDS.RESULT_MODAL} #${UI_IDS.RESULT_MODAL_PANELS_CONTAINER} {
background-color: transparent;
border-bottom-color: rgba(0,0,0,0.1);
}

#${UI_IDS.CUSTOM_PROMPT_PANEL} {
margin-top: var(--space-md); border: 1px solid var(--border-color-
input);
border-radius: var(--material-border-radius); background: var(--bg-
light);
box-sizing: border-box;
}
#${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: var(--bg-white);
box-sizing: border-box;
}
#${UI_IDS.CUSTOM_PROMPT_PANEL_HEADER} h4 {
all: initial;
font-family: inherit; font-size: 1em; font-weight: 500; color: var(--
text-color); line-height: inherit;
margin: 0;
box-sizing: border-box;
}

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

padding: 0.125rem 0.375rem !important; line-height: 1 !important; color: #555 !
important; }
#${UI_IDS.CUSTOM_PROMPT_PANEL_CLOSE_BTN}:hover, #$
{UI_IDS.CUSTOM_PROMPT_PANEL_CLOSE_BTN}:active, #$
{UI_IDS.CUSTOM_PROMPT_PANEL_CLOSE_BTN}:focus-visible { color: #111 !important;
background-color: rgba(0,0,0,0.04) !important; }
.${SCRIPT_PREFIX}custom-prompt-controls-inner { padding: var(--space-md);
display: flex; flex-direction: column; gap: var(--space-sm); box-sizing: border-
box; }
.${SCRIPT_PREFIX}custom-prompt-controls-inner label {
all: initial;
display:block;
font-family: inherit; font-size: 0.875em; font-weight: 500; color:
var(--text-muted); line-height:inherit;
margin-bottom: -0.1875rem;
box-sizing: border-box;
}
#${UI_IDS.CUSTOM_PROMPT_TEXTAREA} { min-height: 4.375rem; 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), #$
{UI_IDS.CUSTOM_PROMPT_EXECUTE_BTN}:active:not(:disabled) { background: var(--color-
primary-dark); }

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

bg-light); color: var(--text-color); box-sizing: border-box; }
.${SCRIPT_PREFIX}toc-panel h4 {
all: initial;
font-family: inherit; font-size: 1.05em; font-weight: 500; color:
var(--text-color); line-height:inherit;
margin: 0 0 var(--space-md);
padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border-
color);
box-sizing: border-box;
}
#${UI_IDS.TOC_LIST} {
all: initial;
display: block;
font-family: inherit; font-size: inherit; line-height: inherit; color:
inherit;
list-style: none;
padding: 0; margin: 0;
max-height: 25dvh; overflow-y: auto;
box-sizing: border-box;
}
.${SCRIPT_PREFIX}toc-item {
all: initial;
display: block;
font-family: inherit; font-size: 0.9375em; line-height: inherit;
color: #343a40;
background: var(--bg-white);
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid #e9ecef;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: background-color 0.15s, color 0.15s;
border-radius: var(--material-border-radius);
margin-bottom: 0.125rem;
cursor: pointer;
box-sizing: border-box;
}
.${SCRIPT_PREFIX}toc-item:last-child { border-bottom: none; margin-bottom:
0; }
.${SCRIPT_PREFIX}toc-item:hover, .${SCRIPT_PREFIX}toc-item:focus-visible, .
${SCRIPT_PREFIX}toc-item:active {
background: #e7f5ff; color: var(--color-primary-dark); outline: none;
}
.${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-lg);
overflow-y: auto; flex-grow: 1;
line-height: 1.7;
word-break: break-word; font-size: 1rem;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
color: #333;
min-height: 0;
box-sizing: border-box;

text-rendering: optimizeSpeed;
}

#${UI_IDS.RESULT_MODAL_BODY} p { all: initial; display:block; margin-

bottom: 1.2em; font:inherit; color:inherit; box-sizing: border-box; }
#${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} pre {
all: initial; display:block; font-family: monospace;
font-size: 1em;
background: rgba(128,128,128,0.08); padding: var(--space-md);
border-radius: var(--material-border-radius); overflow-x: auto;
white-space: pre-wrap; word-wrap: break-word;
border: 1px solid rgba(128,128,128,0.15);
color: inherit;
margin: 1em 0;
box-sizing: border-box;
}
#${UI_IDS.RESULT_MODAL_BODY} code {
font-family: monospace; background: rgba(128,128,128,0.12);
padding: 0.1875rem 0.3125rem; border-radius: var(--border-radius-
small);
font-size: 0.9em;
color: inherit;
box-sizing: border-box;
}
#${UI_IDS.RESULT_MODAL_BODY} pre code { background: transparent; padding:
0; font-size: 1em; }

#${UI_IDS.RESULT_MODAL_BODY} blockquote {
all: initial; display:block; font:inherit; color:inherit;
border-left: 0.25rem solid rgba(128,128,128,0.4);
padding-left: var(--space-lg); margin: 1em 0 1em var(--space-lg);
opacity: 0.9; font-style: italic;
box-sizing: border-box;
}
#${UI_IDS.RESULT_MODAL_BODY} table {
all: initial;
display: table;
font: inherit; color: inherit;
border-collapse: collapse; margin-bottom: 1em; width: auto;
border: 1px solid rgba(128,128,128,0.3);
box-sizing: border-box;
 }
#${UI_IDS.RESULT_MODAL_BODY} th, #${UI_IDS.RESULT_MODAL_BODY} td {
all: initial;
display: table-cell;
font: inherit; color: inherit; text-align:left;
border: 1px solid rgba(128,128,128,0.3);
padding: var(--space-sm) var(--space-md);
box-sizing: border-box;
}
#${UI_IDS.RESULT_MODAL_BODY} th { background: rgba(128,128,128,0.1); font-
weight: bold; }
#${UI_IDS.RESULT_MODAL_BODY} hr {
all: initial; display:block;
border: none; border-top: 1px solid rgba(128,128,128,0.3);
margin: 1.5em 0; height:0;
box-sizing: border-box;
}

#${UI_IDS.RESULT_MODAL_FOOTER} {
padding: var(--space-xs) 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);
background-color: var(--bg-white);
box-sizing: border-box;
}
#${UI_IDS.RESULT_MODAL} #${UI_IDS.RESULT_MODAL_FOOTER} {
background-color: transparent;
}

.${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.75em;
line-height: 1.4; white-space: nowrap;
}
#${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(--material-border-radius);
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;

font-weight: 500; text-transform: none;

}
.${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),
.${SCRIPT_PREFIX}mode-switcher .$
{SCRIPT_PREFIX}button:not(.active):active: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,
#${UI_IDS.RESULT_MODAL_SAVE_BTN}.$
{SCRIPT_PREFIX}button:not(:disabled):active {
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),
#${UI_IDS.RESULT_MODAL_SAVE_BTN}.${SCRIPT_PREFIX}button.save-changes-
active:active:not(:disabled) {
background: var(--color-warning-dark);
}

#${UI_IDS.HISTORY_MODAL_CONTENT} {
padding: 0;
 max-width: 31.25rem;
}
.${SCRIPT_PREFIX}history-body {
display: flex; flex-direction: column;
gap: var(--space-md);
padding: var(--space-md);
flex-grow: 1; overflow-y: hidden;
min-height: 0;
box-sizing: border-box;
}
.${SCRIPT_PREFIX}history-panel {
flex: 1;
border-radius: var(--material-border-radius);
padding: var(--space-md); display: flex; flex-direction: column;
min-width: 0;
overflow-y: auto; background: var(--bg-light);
box-shadow: var(--dp1);
min-height: 0;
box-sizing: border-box;
}
.${SCRIPT_PREFIX}history-panel h3 {
all: initial;
font-family: inherit; font-size: 1.125em; font-weight: 500;
color:inherit; line-height: inherit;
margin: 0 0 var(--space-md); padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--border-color);
box-sizing: border-box;
}
#${UI_IDS.HISTORY_PROJECT_LIST}, #${UI_IDS.HISTORY_TRANSLATION_LIST} {
all: initial;
display: block;
font: inherit; color: inherit;
list-style: none; padding: 0; margin: 0;
flex-grow: 1; overflow-y: auto;
-webkit-overflow-scrolling: touch;
min-height: 0;
box-sizing: border-box;
}
.${SCRIPT_PREFIX}history-item {
all: initial;
display: flex;
font-family: inherit; font-size: 0.9375em; line-height: inherit; color:
inherit;
padding: var(--space-sm) var(--space-md);
flex-wrap: wrap;
justify-content: space-between; align-items: center; gap: var(--space-
sm);
user-select: none;
border-radius: var(--material-border-radius);
margin-bottom: 0.125rem;

box-sizing: border-box;
}
.${SCRIPT_PREFIX}history-item:hover, .${SCRIPT_PREFIX}history-item:active {
background-color: rgba(0,0,0,0.04);
}
.${SCRIPT_PREFIX}history-item:last-child { margin-bottom: 0;}
.${SCRIPT_PREFIX}history-item span[role="button"] {
all: initial;
 display: inline-block;
font: inherit; color: inherit;
flex-grow: 1; flex-basis: calc(100% - 6.25rem);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor:
pointer;
padding: var(--space-xs) 0;
box-sizing: border-box;
}
.${SCRIPT_PREFIX}history-item span[role="button"]:hover,
.${SCRIPT_PREFIX}history-item span[role="button"]:active,
.${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 {
background-color: rgba(var(--color-primary-rgb, 0,123,255), 0.1);
}
.${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);
}
.${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-sm);
line-height: 1; cursor: pointer;
border: none;
border-radius: 50%;
background: transparent;
min-width: 2rem;
text-align: center; color: var(--text-muted);
transition: background-color 0.2s, color 0.2s;
}
.${SCRIPT_PREFIX}history-action-button.delete { color: var(--color-danger);
}
.${SCRIPT_PREFIX}history-action-button:hover,
.${SCRIPT_PREFIX}history-action-button:active,
.${SCRIPT_PREFIX}history-action-button:focus-visible {
background: rgba(0,0,0,0.08); color: var(--text-color); outline: none;
}
.${SCRIPT_PREFIX}history-action-button.delete:hover,
.${SCRIPT_PREFIX}history-action-button.delete:active,
.${SCRIPT_PREFIX}history-action-button.delete:focus-visible {
background: rgba(220,53,69,0.1); color: var(--color-danger-dark);
}
#${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;
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); color: var(--bg-white); border: none;
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: 5rem;
text-transform: uppercase;
}
.${SCRIPT_PREFIX}set-active-button:hover:not(:disabled),
.${SCRIPT_PREFIX}set-active-button:active:not(:disabled),
.${SCRIPT_PREFIX}set-active-button:focus-visible {
background: var(--color-info-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) {

#${UI_IDS.CONTAINER} {
bottom: var(--space-lg);
right: var(--space-lg);
transform: none;
max-width: 15.625rem;
padding: var(--space-sm);

box-shadow: 0px 3px 5px rgba(0,0,0,0.2);

flex-direction: column;
align-items: flex-end;
gap: 0.3125rem;
background: rgba(245, 245, 245, 0.55);
}
#${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: 0.6875rem;
padding: 0.1875rem 0.375rem;
margin-bottom: 0.1875rem;
order: -1;
 }
.${SCRIPT_PREFIX}button-group {
flex-direction: row;
gap: 0.3125rem;
flex-wrap: wrap; justify-content: flex-end;
width: 100%;
flex-grow: 0;
}
.${SCRIPT_PREFIX}button {
font-size: 0.75rem;
padding: 0.3125rem 0.625rem;
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: 0.875rem;
padding: 0.25rem 0.5rem;
}
#${UI_IDS.RESTORE_RESULT_ICON} {
font-size: 1.125rem;
padding: 0.3125rem 0.5rem;
margin-bottom: 0.3125rem;
}

#${UI_IDS.SETTINGS_MODAL}, #${UI_IDS.RESULT_MODAL}, #$
{UI_IDS.HISTORY_MODAL} {
padding: var(--space-xl);
}
#${UI_IDS.SETTINGS_CONTENT}, #${UI_IDS.RESULT_MODAL_CONTENT}, #$
{UI_IDS.HISTORY_MODAL_CONTENT} {
width: 90% !important;
height: 90% !important;
max-height: 90vh !important;
border-radius: var(--border-radius-large);

box-shadow: 0px 8px 10px rgba(0,0,0,0.2);

border: 1px solid rgba(0,0,0,0.15);

margin: auto;
}

#${UI_IDS.SETTINGS_CONTENT} {
width: 90% !important;
max-width: 40rem !important;
}

#${UI_IDS.RESULT_MODAL_CONTENT} {
max-width: 50rem !important;
}

#${UI_IDS.HISTORY_MODAL_CONTENT} {
max-width: 56.25rem !important;
}
 .${SCRIPT_PREFIX}modal-header { padding: var(--space-md) 1.125rem; }
.${SCRIPT_PREFIX}modal-header h2 { font-size: 1.35em; }

#${UI_IDS.SETTINGS_GRID} { padding: var(--space-md); gap: var(--space-

lg); }
.${SCRIPT_PREFIX}settings-group-container { padding: var(--space-md); }
.${SCRIPT_PREFIX}settings-section { padding: var(--space-md); }
.${SCRIPT_PREFIX}settings-section h3 { font-size: 1.1em; }
.${SCRIPT_PREFIX}settings-form-row {
flex-direction: row; align-items: center; gap: var(--space-sm);
flex-wrap: nowrap;
}
.${SCRIPT_PREFIX}settings-form-row label {
min-width: 6.25rem; flex-shrink: 0; text-align: left; margin-
bottom: 0;
font-size: 0.875em;
}

#${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: 0.375rem 0.5rem; font-size: 0.8125rem;
flex-grow: 1;
}
#${UI_IDS.SETTINGS_MODAL} input[type="color"] { height: 1.875rem; min-
width: 3.125rem; }
#${UI_IDS.SETTINGS_MODAL} input[type="checkbox"] { transform: scale(1);
margin-right: var(--space-sm); }
#${UI_IDS.SETTINGS_MODAL} textarea { min-height: 5rem; }
.${SCRIPT_PREFIX}settings-grid-inputs { grid-template-columns: auto
1fr; gap: 0.5rem 0.625rem; }
.${SCRIPT_PREFIX}settings-grid-inputs label { font-size: 0.75rem; }
.${SCRIPT_PREFIX}settings-grid-inputs input[type="number"] { width:
5rem; flex-grow: 0; }
#${UI_IDS.SAFETY_CONTROLS_DIV} { margin: 0.3125rem 0 0 1.25rem; }
#${UI_IDS.DISPLAY_FONT_SIZE_INPUT} { width: 4.375rem !important; flex-
grow: 0; }
.${SCRIPT_PREFIX}template-buttons .${SCRIPT_PREFIX}button {
flex-grow: 0; font-size: 0.6875rem; padding: 0.1875rem 0.375rem;
}

#${UI_IDS.RESULT_MODAL_INTERNAL_STATUS} { font-size: 0.75rem; padding:

0.5rem 0.9375rem; }
#${UI_IDS.RESULT_MODAL_PANELS_CONTAINER} { padding: 0 0.9375rem
0.625rem; }
#${UI_IDS.CUSTOM_PROMPT_PANEL_HEADER} { padding: 0.5rem 0.75rem; }
#${UI_IDS.CUSTOM_PROMPT_PANEL_HEADER} h4 { font-size: 1em; }
.${SCRIPT_PREFIX}custom-prompt-controls-inner { padding: 0.625rem
0.75rem; }
#${UI_IDS.CUSTOM_PROMPT_TEXTAREA} { font-size: 0.8125rem; min-height:
3.75rem; }
#${UI_IDS.CUSTOM_PROMPT_EXECUTE_BTN}, #$
{UI_IDS.CUSTOM_PROMPT_UPDATE_BTN} {
font-size: 0.6875rem; padding: 0.25rem 0.5rem; flex-grow: 0;
}

.${SCRIPT_PREFIX}toc-panel { padding: 0.625rem; }

 .${SCRIPT_PREFIX}toc-panel h4 { font-size: 1.1em; }
#${UI_IDS.TOC_LIST} { max-height: 25vh; }
.${SCRIPT_PREFIX}toc-item { font-size: 0.8125rem; padding: 0.375rem
0.625rem; }

#${UI_IDS.RESULT_MODAL_BODY} {
padding: 0.9375rem 1.25rem;
font-size: 0.9375em;
touch-action: auto;
}

#${UI_IDS.RESULT_MODAL_FOOTER} {
padding: 0.625rem 0.9375rem;
flex-direction: row; justify-content: space-between;
align-items: center; flex-wrap: nowrap;
}
.${SCRIPT_PREFIX}footer-row-top, .${SCRIPT_PREFIX}footer-row-bottom {
flex-direction: row; flex-wrap: nowrap; gap: var(--space-sm);
width: auto;
}
#${UI_IDS.RESULT_MODAL_FOOTER} .${SCRIPT_PREFIX}button {
font-size: 0.75rem; padding: 0.3125rem 0.625rem;
}
.${SCRIPT_PREFIX}mode-switcher .${SCRIPT_PREFIX}button { font-size:
0.6875rem; padding: 0.3125rem 0.5rem; }

.${SCRIPT_PREFIX}history-body { padding: 1.25rem; gap: 1.25rem; flex-

direction: row; }
.${SCRIPT_PREFIX}history-panel { padding: 0.9375rem; max-height: 75vh;
min-width: 15.625rem; }
.${SCRIPT_PREFIX}history-panel h3 { font-size: 1.1em; }
.${SCRIPT_PREFIX}history-item { padding: 0.5rem 0.625rem; font-size:
0.75rem; 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: 0.1875rem 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: 0.75rem; padding:
0.125rem 0.3125rem; }
#${UI_IDS.HISTORY_DOWNLOAD_PROJECT_BTN} {
width: auto; margin-top:0; font-size: 0.75rem; padding: 0.25rem
0.5rem;
}
}

@media (max-width: 767px) {

#${UI_IDS.CONTAINER} {
bottom: var(--space-md);
right: var(--space-md);
left: var(--space-md);
transform: none;
max-width: calc(100vw - (2 * var(--space-md)));
width: auto;
padding: var(--space-sm);
border-radius: var(--material-border-radius);
 flex-direction: row;
align-items: center;
gap: var(--space-sm);
background: rgba(255, 255, 255, 0.55);
}
#${UI_IDS.CONTAINER}.${SCRIPT_PREFIX}main-controls-minimized} {
width: fit-content;
left: auto;
padding: var(--space-xs);
}

#${UI_IDS.MINIMIZE_MAIN_CONTROLS_BTN} {
order: 1;
font-size: 1.5rem;
padding: var(--space-sm);
color: var(--text-muted);
}
#${UI_IDS.CONTAINER}.${SCRIPT_PREFIX}main-controls-minimized} #$
{UI_IDS.MINIMIZE_MAIN_CONTROLS_BTN} {
font-size: 1.25rem;
padding: var(--space-xs);
}

#${UI_IDS.STATUS_INDICATOR} {
display: none;
font-size: 0.75rem;
padding: var(--space-xs) var(--space-sm);
order: 2;
flex-grow: 1; text-align: center; margin: 0 var(--space-sm);
}
#${UI_IDS.CONTAINER}.${SCRIPT_PREFIX}main-controls-minimized}} #$
{UI_IDS.STATUS_INDICATOR} {
display: none;
}

.${SCRIPT_PREFIX}button-group {
order: 3;
flex-grow: 1;
justify-content: space-around;
gap: var(--space-xs);
}
.${SCRIPT_PREFIX}button-group > .${SCRIPT_PREFIX}button:not(.$
{SCRIPT_PREFIX}icon-button) {
flex-grow: 1;
font-size: 0.8125rem;
padding: var(--space-sm) var(--space-xs);
}
.${SCRIPT_PREFIX}button {
font-size: 0.8125rem;
padding: var(--space-sm);
}
.${SCRIPT_PREFIX}button:active:not(:disabled) {
transform: scale(0.98);
box-shadow: none;
filter: brightness(0.9);
}
.${SCRIPT_PREFIX}icon-button {
font-size: 1.25rem;
padding: var(--space-sm);
 }
#${UI_IDS.RESTORE_RESULT_ICON} {
font-size: 1.5rem;
padding: var(--space-sm);
margin-bottom: 0;
box-shadow: var(--dp2);
order: 0;
}

#${UI_IDS.SETTINGS_MODAL}, #${UI_IDS.RESULT_MODAL}, #$
{UI_IDS.HISTORY_MODAL} {
padding: 0;
align-items: stretch;
}
#${UI_IDS.SETTINGS_CONTENT}, #${UI_IDS.RESULT_MODAL_CONTENT}, #$
{UI_IDS.HISTORY_MODAL_CONTENT} {
width: 100vw; height: 100vh;
max-width: 100vw; max-height: 100vh;
border-radius: 0;
border: none;
}

.${SCRIPT_PREFIX}modal-header {
padding: var(--space-xs) var(--space-sm);
background-color: var(--color-primary);
color: var(--bg-white);
box-shadow: var(--dp4);
border-bottom: none;
}

#${UI_IDS.RESULT_MODAL} .${SCRIPT_PREFIX}modal-header {
background-color: transparent;
color: var(--text-color);
box-shadow: none;
border-bottom: 1px solid var(--border-color);
}

#${UI_IDS.RESULT_MODAL} .${SCRIPT_PREFIX}modal-header h2,

#${UI_IDS.RESULT_MODAL} .${SCRIPT_PREFIX}modal-header .$
{SCRIPT_PREFIX}modal-control-button {
color: var(--text-color);
}

#${UI_IDS.SETTINGS_MODAL} .${SCRIPT_PREFIX}modal-header h2,

#${UI_IDS.HISTORY_MODAL} .${SCRIPT_PREFIX}modal-header h2,
#${UI_IDS.SETTINGS_MODAL} .${SCRIPT_PREFIX}modal-header .$
{SCRIPT_PREFIX}modal-control-button,
#${UI_IDS.HISTORY_MODAL} .${SCRIPT_PREFIX}modal-header .$
{SCRIPT_PREFIX}modal-control-button {
color: var(--bg-white);
}

.${SCRIPT_PREFIX}modal-header h2 {
font-size: 1em;
font-weight: 500;
}
.${SCRIPT_PREFIX}modal-control-button {
font-size: 1.25rem;
padding: var(--space-sm);
 margin-left: var(--space-sm);
}
.${SCRIPT_PREFIX}modal-control-button:hover,
.${SCRIPT_PREFIX}modal-control-button:active,
.${SCRIPT_PREFIX}modal-control-button:focus-visible {
background-color: rgba(255,255,255,0.15);
}

#${UI_IDS.RESULT_MODAL} .${SCRIPT_PREFIX}modal-header .$
{SCRIPT_PREFIX}modal-control-button:hover,
#${UI_IDS.RESULT_MODAL} .${SCRIPT_PREFIX}modal-header .$
{SCRIPT_PREFIX}modal-control-button:active,
#${UI_IDS.RESULT_MODAL} .${SCRIPT_PREFIX}modal-header .$
{SCRIPT_PREFIX}modal-control-button:focus-visible {
background-color: rgba(0,0,0,0.05);
}

#${UI_IDS.SETTINGS_GRID} { padding: var(--space-md); gap: var(--space-

lg); }
.${SCRIPT_PREFIX}settings-form-row, .${SCRIPT_PREFIX}settings-form-row-
wrap {
flex-direction: column; align-items: stretch;
}
.${SCRIPT_PREFIX}settings-form-row label, .${SCRIPT_PREFIX}settings-
form-row-wrap label {
font-size: 0.875rem; min-width: auto;
}
#${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} {
font-size: 1rem;
}
#${UI_IDS.SETTINGS_MODAL} input[type="checkbox"] { transform:
scale(1.2); margin-right: var(--space-sm); }

#${UI_IDS.RESULT_MODAL_BODY} {
padding: var(--space-sm);
font-size: 1rem;
}
#${UI_IDS.RESULT_MODAL_FOOTER} {
background-color: var(--bg-white);
box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
}
#${UI_IDS.RESULT_MODAL} #${UI_IDS.RESULT_MODAL_FOOTER} {
background-color: transparent;
box-shadow: none;
border-top: 1px solid var(--border-color);
}

.${SCRIPT_PREFIX}footer-row-top, .${SCRIPT_PREFIX}footer-row-bottom {
gap: var(--space-xs);
}
.${SCRIPT_PREFIX}footer-row-bottom {
justify-content: center;
}
#${UI_IDS.RESULT_MODAL_FOOTER} .${SCRIPT_PREFIX}button {
font-size: 0.7em;
 padding: var(--space-sm) var(--space-md);
flex-grow: 1;
min-height: 2rem;
}
#${UI_IDS.RESULT_MODAL_FOOTER} .${SCRIPT_PREFIX}save-discard-group .$
{SCRIPT_PREFIX}button {
flex-grow: 0;
}
#${UI_IDS.RESULT_MODAL_FOOTER} .${SCRIPT_PREFIX}icon-button {
font-size: 1.125rem;
padding: var(--space-sm);
}
.${SCRIPT_PREFIX}mode-switcher .${SCRIPT_PREFIX}button {
font-size: 0.75rem;
padding: var(--space-sm);
flex-grow: 1;
}

.${SCRIPT_PREFIX}history-body { padding: var(--space-md); gap: var(--

space-md); flex-direction: column; }
.${SCRIPT_PREFIX}history-panel { padding: var(--space-md); max-height:
none; }
.${SCRIPT_PREFIX}history-item {
font-size: 0.875rem;
padding: var(--space-md);
}
.${SCRIPT_PREFIX}history-action-button {
font-size: 1rem;
padding: var(--space-sm);
}
#${UI_IDS.HISTORY_DOWNLOAD_PROJECT_BTN} {
width: auto;
padding: var(--space-sm) var(--space-md);
font-size: 0.875rem;
}
}

@media (max-width: 480px) {

#${UI_IDS.CONTAINER}:not(.${SCRIPT_PREFIX}main-controls-minimized}) {
gap: var(--space-xs);
padding: var(--space-xs);
}
#${UI_IDS.CONTAINER}:not(.${SCRIPT_PREFIX}main-controls-minimized}) .$
{SCRIPT_PREFIX}button-group {
flex-direction: column;
align-items: stretch;
}
#${UI_IDS.CONTAINER}:not(.${SCRIPT_PREFIX}main-controls-minimized}) .$
{SCRIPT_PREFIX}button-group .${SCRIPT_PREFIX}button {
font-size: 0.75rem;
padding: var(--space-sm);
width: 100%;
}
#${UI_IDS.CONTAINER}:not(.${SCRIPT_PREFIX}main-controls-minimized}) #$
{UI_IDS.MINIMIZE_MAIN_CONTROLS_BTN},
#${UI_IDS.CONTAINER}:not(.${SCRIPT_PREFIX}main-controls-minimized}) #$
{UI_IDS.RESTORE_RESULT_ICON} {
font-size: 1.25rem;
padding: var(--space-xs);
 }

#${UI_IDS.CUSTOM_PROMPT_PANEL} {
max-height: 35vh;
overflow-y: auto;
display: flex;
flex-direction: column;
}
#${UI_IDS.CUSTOM_PROMPT_PANEL} .${SCRIPT_PREFIX}custom-prompt-controls-
inner {
flex-grow: 1;
overflow-y: auto;
min-height: 0;
}
#${UI_IDS.CUSTOM_PROMPT_TEXTAREA} {
min-height: 3.5rem;
}

.${SCRIPT_PREFIX}modal-header {
padding: calc(var(--space-xs) * 0.8) calc(var(--space-sm) * 0.9);
}
.${SCRIPT_PREFIX}modal-header h2 {
font-size: 0.9em;
}
.${SCRIPT_PREFIX}modal-control-button {
font-size: 1.05rem;
padding: calc(var(--space-xs) * 0.8);
}

#${UI_IDS.RESULT_MODAL_FOOTER} {
padding: var(--space-xs);
}
#${UI_IDS.RESULT_MODAL_FOOTER} .${SCRIPT_PREFIX}button {
font-size: 0.7rem;
padding: calc(var(--space-sm) * 0.9);
min-height: 2rem;
}

#${UI_IDS.RESULT_MODAL_FOOTER} .${SCRIPT_PREFIX}footer-row-bottom .$
{SCRIPT_PREFIX}button {
margin: 0.125rem;
flex-basis: calc(50% - 0.25rem);
flex-grow: 1;
}
#${UI_IDS.CUSTOM_PROMPT_EXECUTE_BTN}, #$
{UI_IDS.CUSTOM_PROMPT_UPDATE_BTN} {
font-size: 0.8125rem;
}

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

input[type="text"],
#${UI_IDS.SETTINGS_MODAL} input[type="number"], #$
{UI_IDS.SETTINGS_MODAL} textarea {
font-size: 0.9375rem;
}
}
`);
}