:root {
  color-scheme: light;
  --cursor-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23111111' stroke='%23ffffff' stroke-width='1.4' stroke-linejoin='round' d='M4 2.5 18.5 14 12 15.2l3.7 6.3-2.9 1.7-3.7-6.4L4.3 22z'/%3E%3C/svg%3E") 4 2, auto;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23111111' stroke='%23ffffff' stroke-width='1.4' stroke-linejoin='round' d='M4 2.5 18.5 14 12 15.2l3.7 6.3-2.9 1.7-3.7-6.4L4.3 22z'/%3E%3C/svg%3E") 4 2, pointer;
  --cursor-crosshair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' shape-rendering='crispEdges'%3E%3Cpath stroke='%23ffffff' stroke-width='6' stroke-linecap='square' d='M16 4v24M4 16h24'/%3E%3Cpath stroke='%23111111' stroke-width='2' stroke-linecap='square' d='M16 4v24M4 16h24'/%3E%3Crect x='15' y='15' width='2' height='2' fill='%23111111'/%3E%3C/svg%3E") 16 16, crosshair;
  --cursor-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cpath fill='%23ffffff' stroke='%23111111' stroke-width='1.4' stroke-linejoin='round' d='M17.8 3.5 21.5 7.2 8.7 20H4.6v-4.1z'/%3E%3Cpath stroke='%23111111' stroke-width='1.6' stroke-linecap='round' d='M15.4 5.9 19.1 9.6M5 20.5h15'/%3E%3C/svg%3E") 4 21, crosshair;
  --cursor-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cpath stroke='%23ffffff' stroke-width='3' stroke-linecap='round' d='M12.5 3v19M3 12.5h19'/%3E%3Cpath stroke='%23111111' stroke-width='1.6' stroke-linecap='round' d='M12.5 3v19M3 12.5h19'/%3E%3Cpath fill='%23111111' d='M16 5h4v4h-2.4V7.4H16zM5 16h2.4v1.6H9V20H5z'/%3E%3C/svg%3E") 12 12, copy;
  --cursor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cpath stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M12.5 3v19M3 12.5h19m-9.5-9.5-3 3m3-3 3 3m-3 16 3-3m-3 3-3-3M3 12.5l3-3m-3 3 3 3m16-3-3-3m3 3-3 3'/%3E%3Cpath stroke='%23111111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12.5 3v19M3 12.5h19m-9.5-9.5-3 3m3-3 3 3m-3 16 3-3m-3 3-3-3M3 12.5l3-3m-3 3 3 3m16-3-3-3m3 3-3 3'/%3E%3C/svg%3E") 12 12, move;
  --cursor-resize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cpath stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M7 7 18 18M7 7h6M7 7v6M18 18h-6M18 18v-6'/%3E%3Cpath stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M7 7 18 18M7 7h6M7 7v6M18 18h-6M18 18v-6'/%3E%3C/svg%3E") 12 12, nwse-resize;
  --cursor-rotate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M18.5 8.2A7 7 0 1 0 20 15m-1.5-6.8V4.5H22'/%3E%3Cpath fill='none' stroke='%23111111' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M18.5 8.2A7 7 0 1 0 20 15m-1.5-6.8V4.5H22'/%3E%3C/svg%3E") 12 12, grab;
  --mobile-top-offset: 154px;
  --mobile-pages-bar-top: 72px;
  --mobile-pages-bar-height: 74px;
  --mobile-bottom-offset: 86px;
  --mobile-keyboard-offset: 0px;
  --mobile-toolbar-bottom: 86px;
  --mobile-toolbar-height: 92px;
}
:root {
  --panel: #ffffff;
  --ink: #201f1e;
  --muted: #605e5c;
  --logo: #4c4f58;
  --line: #edebe9;
  --mint: #107c10;
  --danger: #a4262c;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}
.consistency-badge {
  background: #008de1;
  color: #fff;
  font-weight: 650;
}
.type-settings-popover::after,
.border-settings-popover::after,
.css-settings-popover::after,
.function-settings-popover::after {
  border-top-color: #c8c6c4;
}
.box-toolbar.toolbar-near-top .type-settings-popover::after,
.box-toolbar.toolbar-near-top .border-settings-popover::after,
.box-toolbar.toolbar-near-top .css-settings-popover::after,
.box-toolbar.toolbar-near-top .function-settings-popover::after {
  border-bottom-color: #c8c6c4;
}
.type-setting-row label,
.find-replace-fields label,
.select-where-fields label,
.pdf-password-body label,
.save-dialog-fields label,
.save-password-grid label,
.credit-topup-controls label {
  color: #605e5c;
  font-weight: 600;
}
.grammar-modal,
.function-modal,
.question-ai-modal,
.member-modal,
.consistency-modal,
.find-replace-modal,
.select-where-modal,
.add-page-modal,
.delete-page-modal,
.save-dialog-modal,
.pdf-password-modal,
.import-ffp-modal,
.docx-credit-modal,
.suggestion-manager-modal,
.box-selection-tip-modal,
.guide-modal {
  border: 1px solid #c8c6c4;
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.guide-credit-summary,
.suggestion-manager-note,
.grammar-member-prompt,
.member-notice,
.grammar-status-message,
.question-ai-status,
.consistency-power-control,
.consistency-consent,
.save-password-box {
  border-color: #deecf9;
  border-radius: 4px;
  background: #eff6fc;
  color: #323130;
}
.app-toast strong,
.context-helper-copy strong,
.guide-item strong,
.consistency-issue h3 {
  font-weight: 650;
}
.file-button,
.download-button,
.primary-button,
.add-page-button,
.member-plan-price,
.subscriber-auth-button,
.tools-button[aria-expanded="true"],
.freehand-pen-button.active,
.preview-button.is-loading {
  border-color: #008de1;
  background: #008de1;
}
.file-button:hover,
.download-button:hover,
.primary-button:hover,
.add-page-button:hover,
.subscriber-auth-button:hover {
  border-color: #006fb5;
  background: #006fb5;
}
.join-button.member-active,
.join-button.subscriber-active,
.page-chip.active,
.guide-credit-summary,
.suggestion-manager-note,
.grammar-member-prompt,
.member-notice,
.grammar-status-message,
.consistency-power-control,
.consistency-consent,
.save-password-box,
.credit-price-box,
.member-plan-pill,
.consistency-pill,
.context-helper-icon,
.member-badge {
  border-color: rgba(0, 141, 225, 0.2);
  background: #eef8f8;
  color: #006fb5;
}
.page-chip.active,
.guide-section h3,
.suggestion-source-section h3,
.suggestion-paste-section h3,
.suggestion-source-list-section h3,
.member-plan-heading h3,
.member-plan-card h3,
.member-content h3,
.preview-button:hover,
.tools-button:hover,
.freehand-pen-button:hover,
.freehand-option-button:hover,
.preview-button:focus-visible,
.tools-button:focus-visible,
.freehand-pen-button:focus-visible,
.freehand-option-button:focus-visible,
.alignment-guide-distance {
  color: #006fb5;
}
.page-chip.active,
.add-page-option:has(input:checked),
.consistency-issue.checked,
.member-plan-card.subscriber-plan-card {
  box-shadow: inset 3px 0 0 #008de1;
}
.box-toolbar .tool-button:hover,
.box-toolbar .tool-button:focus-visible,
.box-toolbar .tool-button.active,
.box-toolbar .text-mode-toggle:hover,
.box-toolbar .text-mode-control.open .text-mode-toggle,
.box-toolbar .alignment-picker-toggle:hover,
.box-toolbar .alignment-picker-toggle:focus-visible,
.box-toolbar .alignment-control.open .alignment-picker-toggle,
.box-toolbar .text-mode-option:hover,
.box-toolbar .symbol-option:hover,
.box-toolbar .alignment-option:hover,
.box-toolbar .signature-action-button:hover,
.box-toolbar .group-input-mode-button:hover,
.text-box.dictating .box-toolbar .text-mode-toggle,
.text-box.dictating .box-toolbar .text-mode-option[data-text-mode="dictation"],
.text-box.function-field > .box-toolbar .function-settings-toggle,
.text-box.function-field-error > .box-toolbar .function-settings-toggle,
.box-toolbar .tool-button.loading {
  border-color: #c8c6c4;
  background: #f3f2f1;
  color: #201f1e;
  box-shadow: none;
}
.box-toolbar .symbol-control:hover,
.box-toolbar .symbol-control:focus-within,
.box-toolbar .text-mode-control:hover .text-mode-toggle,
.box-toolbar .text-mode-control:focus-within .text-mode-toggle,
.box-toolbar .alignment-control:hover .alignment-picker-toggle,
.box-toolbar .alignment-control:focus-within .alignment-picker-toggle {
  background: #f3f2f1;
  box-shadow: inset 0 0 0 1px #c8c6c4;
}
:root {
  --soft-mint: #eef8f8;
}
::selection {
  background: rgba(0, 141, 225, 0.22);
}
.file-button,
.download-button,
.primary-button,
.add-page-button,
.member-plan-price,
.subscriber-auth-button,
.calculator-grid .calculator-equals,
.tool-large-result {
  border-color: #008de1;
  background: #008de1;
}
.file-button:hover,
.download-button:hover,
.primary-button:hover,
.add-page-button:hover,
.subscriber-auth-button:hover,
.calculator-grid .calculator-equals:hover,
.tool-large-result:hover {
  border-color: #006fb5;
  background: #006fb5;
  color: #fff;
  transform: none;
}
.secondary-file-button:hover,
.join-button:hover,
.consistency-button:hover,
.secondary-button:hover,
.top-icon-button:hover,
.member-auth-button:hover,
.context-helper-disable:hover,
.page-thumbnail-toggle:hover,
.guide-cookie-button:hover,
.consistency-entry-link:hover,
.context-helper-close:hover,
.box-selection-tip-close:hover,
.save-password-toggle:hover,
.save-password-toggle.is-open,
.page-chip:hover,
.page-context-menu button:hover:not(:disabled),
.pdf-context-menu button:hover:not(:disabled),
.answer-suggestion-option:hover,
.answer-suggestion-option:focus-visible {
  border-color: #c8c6c4;
  background: #f3f2f1;
  color: #201f1e;
  box-shadow: none;
  transform: none;
}
.join-button.member-active,
.join-button.subscriber-active,
.page-chip.active,
.guide-credit-summary,
.suggestion-manager-note,
.grammar-member-prompt,
.member-notice,
.grammar-status-message,
.consistency-power-control,
.consistency-consent,
.save-password-box,
.credit-price-box,
.member-plan-pill,
.consistency-pill,
.context-helper-icon,
.member-badge,
.floating-tool-icon {
  border-color: rgba(0, 141, 225, 0.2);
  background: #eef8f8;
  color: #006fb5;
}
.page-chip.active,
.guide-section h3,
.suggestion-source-section h3,
.suggestion-paste-section h3,
.suggestion-source-list-section h3,
.member-plan-heading h3,
.member-plan-card h3,
.member-content h3,
.floating-tool-header h2,
.tool-section h3,
.alignment-guide-distance,
.empty-mark {
  color: #006fb5;
}
input:focus,
select:focus,
textarea:focus,
.find-replace-fields input[type="text"]:focus,
.select-where-fields input[type="text"]:focus,
.select-where-fields select:focus,
.pdf-password-body input:focus,
.save-dialog-fields input:focus,
.save-password-grid input:focus,
.credit-topup-controls input:focus,
.function-setting-row input:focus,
.function-setting-row textarea:focus,
.function-insert-grid select:focus {
  border-color: #008de1;
  box-shadow: 0 0 0 2px rgba(0, 141, 225, 0.18);
  outline: none;
}
.rotate-handle {
  border: 0;
  box-shadow: none;
}
.bottombar .consistency-button {
  border-color: #d2d0ce;
  background: #fff;
  color: #201f1e;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}
.bottombar .consistency-button svg {
  color: #006fb5;
}
.bottombar .consistency-button:hover,
.bottombar .consistency-button:focus-visible {
  border-color: #c8c6c4;
  background: #faf9f8;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.15),
    0 0 0 2px rgba(0, 141, 225, 0.12);
  outline: none;
}
.modal-backdrop {
  backdrop-filter: blur(2px);
}
.grammar-modal,
.function-modal,
.member-modal,
.consistency-modal,
.find-replace-modal,
.select-where-modal,
.add-page-modal,
.delete-page-modal,
.save-dialog-modal,
.pdf-password-modal,
.docx-credit-modal,
.suggestion-manager-modal,
.box-selection-tip-modal,
.guide-modal {
  background: #fff;
}
.modal-header,
.modal-actions,
.save-dialog-titlebar,
.save-dialog-actions {
  padding: 17px 20px;
}
.modal-header h2,
.save-dialog-titlebar h2 {
  font-size: 19px;
}
.modal-header p,
.save-dialog-titlebar p {
  color: #605e5c;
}
.function-modal-body,
.suggestion-manager-content,
.consistency-results,
.find-replace-fields,
.select-where-fields,
.pdf-password-body,
.docx-credit-body,
.guide-content {
  padding: 20px;
}
.function-modal .function-settings-popover {
  gap: 12px;
}
.function-setting-row,
.function-insert-grid label,
.pdf-password-body label,
.find-replace-fields label,
.select-where-fields label,
.save-dialog-fields label,
.save-password-grid label {
  color: #605e5c;
  font-weight: 600;
}
.function-setting-row input,
.function-setting-row textarea,
.function-insert-grid select,
.function-preview,
.find-replace-fields input[type="text"],
.select-where-fields input[type="text"],
.select-where-fields select,
.pdf-password-body input,
.save-dialog-fields input,
.save-password-grid input {
  border-color: #c8c6c4;
  border-radius: 4px;
  background: #fff;
}
.function-preview,
.suggestion-source-section,
.suggestion-paste-section,
.suggestion-source-list-section,
.guide-item,
.add-page-option,
.consistency-issue,
.member-plan-card,
.suggestion-source-item {
  border-color: #edebe9;
  border-radius: 5px;
  background: #fff;
}
.function-export-toggle,
.function-pick-field-button,
.function-clear-button,
.function-apply-button,
.css-copy-styles-button,
.inline-format-toolbar button {
  border-color: #c8c6c4;
  background: #fff;
  color: #323130;
}
.function-export-toggle:hover,
.function-export-toggle:focus-visible,
.function-pick-field-button:hover,
.function-pick-field-button:focus-visible,
.function-clear-button:hover,
.function-clear-button:focus-visible,
.function-apply-button:hover,
.function-apply-button:focus-visible,
.css-copy-styles-button:hover,
.css-copy-styles-button:focus-visible,
.inline-format-toolbar button:hover,
.inline-format-toolbar button:focus-visible {
  border-color: #c8c6c4;
  background: #f3f2f1;
  color: #201f1e;
  box-shadow: none;
}
.function-apply-button,
.primary-button.function-apply-button {
  border-color: #008de1;
  background: #008de1;
  color: #fff;
}
.function-apply-button:hover,
.function-apply-button:focus-visible,
.primary-button.function-apply-button:hover,
.primary-button.function-apply-button:focus-visible {
  border-color: #006fb5;
  background: #006fb5;
  color: #fff;
}
.box-toolbar {
  --accent: #767676;
  --accent-dark: #323130;
  --soft-blue: #f3f2f1;
  --soft-mint: #f3f2f1;
}
.box-toolbar,
.box-toolbar .type-settings-popover,
.box-toolbar .border-settings-popover,
.box-toolbar .css-settings-popover,
.box-toolbar .function-settings-popover,
.box-toolbar .text-mode-menu,
.box-toolbar .symbol-menu,
.box-toolbar .alignment-menu {
  border-color: #c8c6c4;
  background: #fff;
}
.box-toolbar .tool-button,
.box-toolbar .alignment-picker-toggle,
.box-toolbar .icon-button,
.box-toolbar .symbol-control,
.box-toolbar .text-mode-toggle,
.box-toolbar .symbol-picker-label,
.box-toolbar .text-mode-option,
.box-toolbar .symbol-option,
.box-toolbar .alignment-option,
.box-toolbar .signature-action-button,
.box-toolbar .group-input-mode-button {
  color: #323130;
  background: transparent;
}
.box-toolbar .tool-button:hover,
.box-toolbar .tool-button:focus-visible,
.box-toolbar .tool-button.active,
.box-toolbar .text-mode-toggle:hover,
.box-toolbar .text-mode-control.open .text-mode-toggle,
.box-toolbar .alignment-picker-toggle:hover,
.box-toolbar .alignment-picker-toggle:focus-visible,
.box-toolbar .alignment-control.open .alignment-picker-toggle,
.box-toolbar .text-mode-option:hover,
.box-toolbar .text-mode-option:focus-visible,
.box-toolbar .symbol-option:hover,
.box-toolbar .symbol-option:focus-visible,
.box-toolbar .alignment-option:hover,
.box-toolbar .alignment-option:focus-visible,
.box-toolbar .signature-action-button:hover,
.box-toolbar .signature-action-button:focus-visible,
.box-toolbar .group-input-mode-button:hover,
.box-toolbar .group-input-mode-button:focus-visible,
.text-box.dictating .box-toolbar .text-mode-toggle,
.text-box.dictating .box-toolbar .text-mode-option[data-text-mode="dictation"],
.text-box.function-field > .box-toolbar .function-settings-toggle,
.text-box.function-field-error > .box-toolbar .function-settings-toggle,
.box-toolbar .tool-button.loading {
  border-color: #c8c6c4;
  background: #f3f2f1;
  color: #201f1e;
  box-shadow: none;
}
.box-toolbar input:focus,
.box-toolbar select:focus,
.box-toolbar textarea:focus,
.box-toolbar .css-settings-popover input:focus,
.box-toolbar .css-settings-popover select:focus,
.box-toolbar .type-settings-popover input:focus,
.box-toolbar .type-settings-popover select:focus {
  border-color: #8a8886;
  box-shadow: 0 0 0 2px rgba(96, 94, 92, 0.16);
}
@font-face {
  font-family: "Arimo";
    src: url("fonts/Arimo-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Arimo";
    src: url("fonts/Arimo-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Carlito";
    src: url("fonts/Carlito-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Carlito";
    src: url("fonts/Carlito-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Caladea";
    src: url("fonts/Caladea-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Caladea";
    src: url("fonts/Caladea-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Tinos";
    src: url("fonts/Tinos-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Tinos";
    src: url("fonts/Tinos-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Cousine";
    src: url("fonts/Cousine-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Cousine";
    src: url("fonts/Cousine-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
    src: url("fonts/NotoSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
    src: url("fonts/NotoSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Noto Serif";
    src: url("fonts/NotoSerif-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Noto Serif";
    src: url("fonts/NotoSerif-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Noto Sans Mono";
    src: url("fonts/NotoSansMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Noto Sans Mono";
    src: url("fonts/NotoSansMono-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Lato";
    src: url("fonts/Lato-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Lato";
    src: url("fonts/Lato-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
    src: url("fonts/FiraSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
    src: url("fonts/FiraSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Crimson Text";
    src: url("fonts/CrimsonText-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: "Crimson Text";
    src: url("fonts/CrimsonText-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  min-width: 320px;
  height: 100dvh;
  overflow: hidden;
  cursor: var(--cursor-arrow);
}
* {
  caret-color: #111;
}
button,
input {
  font: inherit;
}
.app-shell {
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.topbar,
.bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.bottombar {
  justify-content: space-between;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.consistency-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(21, 149, 165, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--accent-dark);
  padding: 0 12px;
  font-weight: 820;
  cursor: var(--cursor-pointer);
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(15, 85, 105, 0.08);
}
.consistency-button:hover {
  transform: translateY(-1px);
  border-color: rgba(21, 149, 165, 0.58);
  background: linear-gradient(135deg, rgba(227, 243, 251, 0.92), rgba(223, 247, 240, 0.9));
}
.consistency-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}
.consistency-badge {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-dark);
  color: #fff;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 820;
}
.download-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 12px;
  margin-left: auto;
  min-width: 0;
}
@keyframes consentNudge {
  0%,
    100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-3px);
    }
    55% {
      transform: translateX(3px);
    }
}
h1,
h2,
p {
  margin: 0;
}
h1 {
  line-height: 1.2;
  letter-spacing: 0;
}
.topbar p,
.empty-state p {
  margin-top: 5px;
  font-size: 14px;
}
.brand {
  display: inline-flex;
  align-items: center;
}
.brand-logo {
  display: block;
  object-fit: contain;
}
.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.file-button,
.download-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent) 52%, var(--mint));
  color: #fff;
  padding: 0 16px;
  font-weight: 740;
  cursor: var(--cursor-pointer);
  white-space: nowrap;
}
.download-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}
.file-button:hover,
.download-button:hover,
.top-icon-button:hover {
  transform: translateY(-1px);
}
.secondary-file-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  color: var(--accent-dark);
}
.join-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(21, 149, 165, 0.28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(227, 243, 251, 0.94), rgba(223, 247, 240, 0.92));
  color: var(--accent-dark);
  padding: 0 11px;
  font-weight: 820;
  cursor: var(--cursor-pointer);
  white-space: nowrap;
  transition: transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}
.join-button:hover {
  transform: translateY(-1px);
  border-color: rgba(21, 149, 165, 0.58);
}
.join-button.member-active {
  background: #fff;
  border-color: rgba(85, 214, 181, 0.68);
}
.join-button.subscriber-active {
  background: linear-gradient(135deg, #17313d, #006fb5 55%, #008de1);
  border-color: rgba(85, 214, 181, 0.62);
  color: #fff;
}
.join-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.top-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.top-icon-button {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  color: var(--accent-dark);
  cursor: var(--cursor-pointer);
  transition: transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}
.top-icon-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.top-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.mobile-options-control {
  position: relative;
  display: none;
}
.mobile-options-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70000;
  min-width: 188px;
  padding: 6px;
  border: 1px solid #c8d2dc;
  border-radius: 8px;
  background: #fff;
  color: #201f1e;
  box-shadow: 0 16px 40px rgba(31, 45, 58, 0.18);
}
.mobile-options-menu button {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: var(--cursor-pointer);
}
.mobile-options-menu button:hover:not(:disabled),
.mobile-options-menu button:focus-visible:not(:disabled) {
  background: #f3f2f1;
  outline: none;
}
.mobile-options-menu button:disabled {
  color: #8a8886;
  cursor: not-allowed;
}
.mobile-options-menu svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.mobile-options-menu .mobile-options-button svg,
.mobile-options-button svg {
  fill: currentColor;
  stroke: none;
}
.file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.file-button:disabled,
.download-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.workspace {
  min-height: 0;
  display: grid;
  overflow: hidden;
}
.page-panel {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.page-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.page-thumbnail-toggle {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(0, 141, 225, 0.2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent-dark);
  cursor: var(--cursor-pointer);
}
.page-thumbnail-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.page-thumbnail-toggle:hover,
.page-thumbnail-toggle:focus-visible,
.page-thumbnail-toggle.active {
  border-color: rgba(21, 149, 165, 0.5);
  background: var(--soft-mint);
  outline: none;
}
.page-thumbnail-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.page-list {
  display: grid;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: 12px;
}
.page-chip {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  text-align: left;
  cursor: var(--cursor-pointer);
}
.page-thumbnail-frame {
  display: none;
  width: 100%;
  height: 116px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(0, 141, 225, 0.12);
}
.page-list.show-thumbnails .page-thumbnail-frame {
  display: grid;
}
.page-thumbnail-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-list.show-thumbnails .page-chip {
  padding: 8px;
  text-align: center;
}
.page-chip-label {
  min-width: 0;
}
.page-context-menu,
.pdf-context-menu {
  position: fixed;
  z-index: 3000;
  min-width: 146px;
  padding: 6px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}
.pdf-context-menu {
  min-width: 188px;
}
.page-context-menu button,
.pdf-context-menu button {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  padding: 0 10px;
  cursor: var(--cursor-pointer);
}
.pdf-context-menu button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.pdf-context-menu button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.pdf-context-menu button span {
  min-width: 0;
}
.page-context-menu button:hover:not(:disabled),
.pdf-context-menu button:hover:not(:disabled) {
  background: var(--soft-mint);
  color: var(--accent-dark);
}
.page-context-menu button:disabled,
.pdf-context-menu button:disabled {
  color: var(--muted);
  cursor: not-allowed;
}
.page-actions {
  position: sticky;
  bottom: 0;
  margin: auto -2px -2px;
  padding-top: 12px;
}
.add-page-button {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(0, 141, 225, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent) 54%, var(--mint));
  color: #fff;
  font-weight: 820;
  cursor: var(--cursor-pointer);
  box-shadow: 0 10px 24px rgba(0, 141, 225, 0.16);
}
.add-page-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}
.add-page-button:hover {
  transform: translateY(-1px);
}
.canvas-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.canvas-panel.interaction-locked {
  overscroll-behavior: none;
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}
.mobile-zoom-controls {
  display: none;
}
.mobile-zoom-controls button {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: #edf7f8;
  color: var(--accent-dark);
  font-size: 18px;
  font-weight: 820;
  cursor: var(--cursor-pointer);
}
.mobile-zoom-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.mobile-zoom-controls span {
  min-width: 44px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 820;
  text-align: center;
}
.empty-state {
  display: block;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: var(--cursor-pointer);
}
.empty-state:hover .empty-mark,
.empty-state:focus-visible .empty-mark {
  border-width: 2px;
}
.empty-state:focus-visible {
  outline: 3px solid rgba(85, 214, 181, 0.45);
  outline-offset: 8px;
  border-radius: 8px;
}
.empty-mark {
  display: inline-grid;
  place-items: center;
  margin-bottom: 18px;
  border: 0px solid var(--line);
  background: #fff;
  font-weight: 820;
  transition: transform 0.16s ease,
    border-color 0.16s ease;
}
.page-stage {
  display: grid;
  gap: 28px;
}
.page-stage.pinch-preview {
  will-change: transform;
}
.pdf-page {
  position: relative;
  width: max-content;
  background: #fff;
  border: 1px solid rgba(201, 220, 224, 0.8);
  touch-action: none;
}
.pdf-page canvas {
  display: block;
}
.annotation-layer {
  position: absolute;
  inset: 0;
  cursor: var(--cursor-crosshair);
  touch-action: none;
}
.annotation-layer.drag-selecting {
  cursor: var(--cursor-copy);
}
.annotation-layer.drag-selecting .text-box,
.annotation-layer.drag-selecting .editable {
  cursor: var(--cursor-copy) !important;
}
.annotation-layer.box-marquee-selecting {
  cursor: var(--cursor-copy);
}
body.freehand-mode .annotation-layer {
  cursor: var(--cursor-pen);
}
body.freehand-mode .annotation-layer .text-box {
  pointer-events: none;
}
body.freehand-drawing .annotation-layer .text-box {
  border-color: transparent !important;
  box-shadow: none !important;
}
body.freehand-drawing .box-toolbar,
body.freehand-drawing .resize-handle,
body.freehand-drawing .rotate-handle {
  display: none !important;
}
.freehand-draft-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.drag-field-preview {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.drag-field-preview-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--accent);
  border-radius: 3px;
  background: rgba(85, 214, 181, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82),
    0 0 0 1px rgba(0, 141, 225, 0.12);
}
.box-selection-marquee {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  border: 2px solid var(--accent);
  border-radius: 5px;
  background: rgba(85, 214, 181, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 8px 24px rgba(0, 141, 225, 0.12);
}
.alignment-guide-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.alignment-guide-line {
  position: absolute;
  pointer-events: none;
}
.alignment-guide-line.vertical {
  top: 0;
  width: 0;
  border-left: 1.5px dashed rgba(0, 141, 225, 0.78);
  transform: translateX(-0.5px);
}
.alignment-guide-line.horizontal {
  left: 0;
  height: 0;
  border-top: 1.5px dashed rgba(0, 141, 225, 0.78);
  transform: translateY(-0.5px);
}
.alignment-distance-label {
  position: absolute;
  z-index: 2;
  min-width: 30px;
  padding: 2px 6px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #008de1;
  color: #fff;
  font-size: 11px;
  font-weight: 840;
  line-height: 1.2;
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(15, 49, 61, 0.18);
  white-space: nowrap;
}
.text-box {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  min-width: 1px;
  min-height: 1px;
  border: 2px solid transparent;
  background: transparent;
  outline: 0;
  touch-action: manipulation;
  transform-origin: center;
}
.text-box.is-rotated {
  transform: rotate(var(--box-rotation, 0deg));
}
.text-box.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(85, 214, 181, 0.23);
}
.text-box.marquee-selected {
  border-color: rgba(0, 141, 225, 0.78);
  box-shadow: 0 0 0 2px rgba(85, 214, 181, 0.22),
    0 0 0 5px rgba(0, 141, 225, 0.08);
}
.text-box.drag-field-sampled {
  border-color: rgba(0, 141, 225, 0.82);
  box-shadow: 0 0 0 2px rgba(0, 141, 225, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.74);
}
.text-box.primary-selected {
  z-index: 30 !important;
}
.text-box.pinned-box,
.text-box.pinned-box.selected,
.text-box.pinned-box.primary-selected,
.text-box.pinned-box.marquee-selected {
  z-index: var(--box-layer, 1) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: crosshair;
}
.text-box.pinned-box > :not(.pinned-box-unpin) {
  pointer-events: none !important;
}
.text-box.pinned-box > .box-toolbar,
.text-box.pinned-box > .resize-handle,
.text-box.pinned-box > .rotate-handle {
  display: none !important;
  pointer-events: none !important;
}
.pinned-box-unpin {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 8;
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(0, 141, 225, 0.28);
  border-radius: 999px;
  background: #fff;
  color: #008de1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 6px 16px rgba(15, 49, 61, 0.14);
}
.pinned-box-unpin svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.text-box.pinned-box > .pinned-box-unpin {
  display: flex;
}
.pinned-box-unpin:hover,
.pinned-box-unpin:focus-visible {
  border-color: #008de1;
  background: #e6f4ff;
  color: #006fb5;
  outline: none;
}
.text-box.alignment-guide-target {
  border-color: rgba(0, 141, 225, 0.62);
  box-shadow: 0 0 0 2px rgba(85, 214, 181, 0.18),
    0 0 0 5px rgba(0, 141, 225, 0.08);
}
.text-box.find-replace-scope {
  box-shadow: 0 0 0 2px rgba(21, 149, 165, 0.14);
}
.text-box.compact-field.selected {
  box-shadow: 0 0 0 1px rgba(85, 214, 181, 0.26);
}
.text-box.compact-field {
  border-width: 1px;
}
.editable {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  outline: none;
  caret-color: #111;
  overflow: hidden;
  align-content: start;
  white-space: pre-wrap;
  word-break: break-word;
  color: #111;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-align: left;
}
.editable-inline-flow {
  display: inline;
  min-width: 0;
  max-width: 100%;
  white-space: inherit;
  word-break: inherit;
}
.inline-format-toolbar {
  position: fixed;
  z-index: 160;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(0, 141, 225, 0.2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 30px rgba(19, 68, 80, 0.18);
}
.inline-format-toolbar[hidden] {
  display: none;
}
.inline-format-toolbar button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font: 800 15px/1 var(--font);
  cursor: pointer;
}
.inline-format-toolbar button:hover,
.inline-format-toolbar button:focus-visible,
.inline-format-toolbar button.active {
  background: rgba(85, 214, 181, 0.22);
  color: var(--accent-dark);
  outline: none;
}
.inline-format-toolbar button.redact-command {
  color: #111;
}
.editable-redaction {
  display: inline-block;
  min-width: 8px;
  min-height: 8px;
  background: #000;
  color: transparent;
  vertical-align: -0.12em;
  user-select: none;
  white-space: nowrap;
}
.text-box.redacted-box .editable {
  background: #000 !important;
  color: #000 !important;
  caret-color: transparent;
  user-select: none;
}
.text-box.redacted-box .editable::before {
  display: none !important;
}
.answer-suggestion-list {
  position: fixed;
  z-index: 170;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 190px;
  padding: 4px;
  border: 1px solid rgba(0, 141, 225, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 36px rgba(19, 68, 80, 0.18);
  overflow-y: auto;
}
.answer-suggestion-list[hidden] {
  display: none;
}
.answer-suggestion-option {
  display: block;
  width: 100%;
  min-height: 30px;
  padding: 6px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font: 700 13px/1.25 var(--font);
  text-align: left;
  cursor: var(--cursor-pointer);
}
.answer-suggestion-option:hover,
.answer-suggestion-option:focus-visible,
.answer-suggestion-option.active {
  background: rgba(85, 214, 181, 0.22);
  color: var(--accent-dark);
  outline: none;
}
.answer-suggestion-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-box.compact-field .editable:empty::before {
  content: "";
}
.editable:empty::before {
  content: "Type";
  color: rgba(31, 37, 40, 0.35);
}
.text-box.has-background-fill .editable:empty::before {
  content: "";
}
.text-box.checkmark-box .editable {
  display: grid;
  place-items: center;
  padding: 3px;
  font-size: 22px;
  line-height: 1;
  text-align: center;
  overflow: visible;
}
.text-box.checkmark-box.compact-field .editable {
  padding: 0;
}
.text-box.checkmark-box .editable:empty::before {
  content: "";
}
.text-box.segmented-field .editable {
  position: relative;
  padding: 0;
  overflow: visible;
}
.segment-input {
  position: absolute;
  z-index: 2;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  caret-color: var(--accent-dark);
  outline: none;
  padding: 0;
  text-align: center;
  line-height: 1;
  font: inherit;
  font-size: inherit;
  box-sizing: border-box;
  touch-action: manipulation;
}
.segment-input:focus {
  background: rgba(85, 214, 181, 0.12);
  box-shadow: inset 0 0 0 1px rgba(21, 149, 165, 0.38);
}
.segment-input::selection {
  background: rgba(85, 214, 181, 0.34);
}
.text-box.image-box .editable {
  padding: 0;
  overflow: hidden;
}
.text-box.signature-box .editable {
  padding: 0;
  overflow: hidden;
  touch-action: none;
}
.text-box.line-box .editable {
  position: relative;
  display: block;
  padding: 0;
  overflow: visible;
}
.text-box.line-box .line-fill {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  width: 100%;
  height: var(--line-thickness, 2px);
  min-height: 2px;
  border-radius: 999px;
  background: currentColor;
  pointer-events: none;
  transform: translateY(-50%);
}
.text-box.image-box .editable:empty::before,
.text-box.signature-box .editable:empty::before {
  content: "";
}
.box-image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.signature-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: var(--cursor-crosshair);
  touch-action: none;
}
.signature-toolbar-actions,
.group-input-toolbar-actions {
  position: absolute;
  left: 6px;
  top: calc(100% - 1px);
  z-index: 3;
  width: max-content;
  display: none;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.text-box.signature-box.primary-selected .signature-toolbar-actions,
.text-box.group-input-actions-visible.primary-selected .group-input-toolbar-actions {
  display: flex;
}
.signature-action-button,
.group-input-action-button {
  position: relative;
  z-index: 1;
  width: 31px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 141, 225, 0.34);
  border-right: 0;
  background: linear-gradient(180deg, #ffffff, #effafa);
  color: var(--accent-dark);
  cursor: pointer;
  font: 800 16px/1 Arial, sans-serif;
  overflow: visible;
}
.signature-action-button:first-child,
.group-input-action-button:first-child {
  border-radius: 0 0 0 7px;
}
.signature-action-button:last-child,
.group-input-action-button:last-child {
  border-right: 1px solid rgba(0, 141, 225, 0.34);
  border-radius: 0 0 7px 0;
}
.signature-action-button:hover,
.signature-action-button:focus-visible,
.group-input-action-button:hover,
.group-input-action-button:focus-visible,
.group-input-action-button.active {
  background: #e5f8f5;
  color: var(--ink);
  outline: none;
}
.group-input-action-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.signature-merge-button {
  display: none;
}
.text-box.signature-box.primary-selected:not(.can-merge-drawings) .signature-convert-button {
  border-right: 1px solid rgba(0, 141, 225, 0.34);
  border-radius: 0 0 7px 0;
}
.text-box.signature-box.primary-selected.can-merge-drawings .signature-merge-button {
  display: grid;
}
.signature-action-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.signature-merge-button svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.15;
}
.signature-action-button[data-tooltip]::before,
.signature-action-button[data-tooltip]::after {
  z-index: 120;
}
.box-toolbar {
  position: absolute;
  left: var(--toolbar-left, -2px);
  bottom: calc(100% + 32px + var(--toolbar-bottom-extra, 0px));
  z-index: 80;
  width: max-content;
  max-width: min(var(--toolbar-max-width, 760px), calc(100vw - 32px));
  display: none;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid var(--line);
  opacity: 1;
  filter: blur(0);
  transform: rotate(var(--box-counter-rotation, 0deg)) translateY(0) scale(1);
  transform-origin: left bottom;
  will-change: transform, left, bottom;
  transition: opacity 0.18s ease,
    filter 0.18s ease,
    left 0.22s cubic-bezier(0.2, 0.82, 0.22, 1),
    bottom 0.22s cubic-bezier(0.2, 0.82, 0.22, 1),
    transform 0.24s cubic-bezier(0.2, 0.82, 0.22, 1);
}
.text-box.toolbar-rotation-active > .box-toolbar {
  opacity: 0;
  pointer-events: none;
  filter: blur(2px);
  transform: rotate(var(--box-counter-rotation, 0deg)) translateY(8px) scale(0.985);
}
.text-box.primary-selected > .box-toolbar {
  display: flex;
}
.text-box.toolbar-typing-hidden > .box-toolbar {
  opacity: 0;
  pointer-events: none;
  filter: blur(2px);
  transform: rotate(var(--box-counter-rotation, 0deg)) translateY(8px) scale(0.985);
}
.box-toolbar [data-tooltip] {
  position: relative;
}
.text-box.box-moving > .box-toolbar [data-tooltip]::before,
.text-box.box-moving > .box-toolbar [data-tooltip]::after {
  display: none !important;
}
.box-toolbar [data-tooltip]::before,
.box-toolbar [data-tooltip]::after {
  position: absolute;
  left: 50%;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease,
    transform 0.14s ease;
}
.box-toolbar [data-tooltip]::before {
  content: "";
  bottom: calc(100% + 3px);
  transform: translateX(-50%) translateY(3px);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.box-toolbar [data-tooltip]::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 12px);
  max-width: 210px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 49, 61, 0.24);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%) translateY(5px);
}
.box-toolbar [data-tooltip]:hover::before,
.box-toolbar [data-tooltip]:hover::after,
.box-toolbar [data-tooltip]:focus-visible::before,
.box-toolbar [data-tooltip]:focus-visible::after,
.box-toolbar [data-tooltip]:focus-within::before,
.box-toolbar [data-tooltip]:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.type-control.open .type-settings-toggle::before,
.type-control.open .type-settings-toggle::after,
.text-mode-control.open .text-mode-toggle::before,
.text-mode-control.open .text-mode-toggle::after,
.border-control.open .border-settings-toggle::before,
.border-control.open .border-settings-toggle::after,
.css-control.open .css-settings-toggle::before,
.css-control.open .css-settings-toggle::after,
.css-control:focus-within .css-settings-toggle::before,
.css-control:focus-within .css-settings-toggle::after,
.box-toolbar .tooltip-suppressed::before,
.box-toolbar .tooltip-suppressed::after,
.function-control.open .function-settings-toggle::before,
.function-control.open .function-settings-toggle::after,
.alignment-control.open .alignment-picker-toggle::before,
.alignment-control.open .alignment-picker-toggle::after,
.symbol-control:focus-within [data-tooltip]::before,
.symbol-control:focus-within [data-tooltip]::after {
  display: none;
}
.tool-button,
.alignment-picker-toggle {
  width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #edf7f8;
  color: var(--ink);
  font-weight: 780;
  cursor: var(--cursor-pointer);
}
.alignment-toolbar-group {
  height: 31px;
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
}
.alignment-control {
  position: relative;
  height: 31px;
  display: inline-grid;
}
.alignment-control.open {
  z-index: 30;
}
.alignment-picker-toggle {
  width: 45px;
  grid-template-columns: minmax(0, 1fr) 10px;
  gap: 2px;
  padding: 0 6px;
}
.vertical-align-toggle {
  width: 45px;
}
.alignment-picker-value {
  min-width: 0;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alignment-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.alignment-picker-arrow {
  font-size: 9px;
  line-height: 1;
  transform: translateY(1px);
}
.symbol-control {
  height: 31px;
  display: inline-flex;
  align-items: stretch;
  border-radius: 7px;
  background: #edf7f8;
  box-shadow: inset 0 0 0 1px transparent;
}
.symbol-control .check-button {
  width: 29px;
  border-radius: 7px 0 0 7px;
  background: transparent;
}
.symbol-control .check-button.long-symbol {
  font-size: 11px;
  letter-spacing: 0;
}
.symbol-picker-label {
  position: relative;
  width: 18px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-left: 1px solid rgba(18, 105, 128, 0.12);
  border-radius: 0 7px 7px 0;
  color: var(--ink);
  cursor: var(--cursor-pointer);
}
.symbol-picker-toggle {
  width: 100%;
  height: 100%;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: var(--cursor-pointer);
  font: inherit;
  padding: 0;
}
.symbol-picker-toggle span {
  font-size: 10px;
  line-height: 1;
  transform: translateY(1px);
}
.symbol-control:hover,
.symbol-control:focus-within,
.text-mode-control:hover .text-mode-toggle,
.text-mode-control:focus-within .text-mode-toggle,
.text-mode-control.open .text-mode-toggle,
.alignment-control:hover .alignment-picker-toggle,
.alignment-control:focus-within .alignment-picker-toggle,
.alignment-control.open .alignment-picker-toggle {
  background: var(--soft-mint);
  box-shadow: inset 0 0 0 1px rgba(21, 149, 165, 0.32);
}
.text-mode-control {
  position: relative;
  display: inline-grid;
}
.text-mode-control.open {
  z-index: 30;
}
.text-mode-value {
  display: inline-grid;
  place-items: center;
}
.text-mode-value svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}
.text-mode-control.open .text-mode-toggle {
  border-color: var(--accent);
  background: var(--soft-mint);
  color: var(--accent-dark);
}
.text-mode-menu,
.symbol-menu,
.alignment-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: -2px;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(3, 31px);
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 85, 105, 0.18);
}
.text-mode-menu {
  grid-template-columns: repeat(3, 31px);
}
.alignment-menu {
  grid-template-columns: repeat(4, 31px);
}
.vertical-alignment-menu {
  grid-template-columns: repeat(3, 31px);
}
.box-toolbar.toolbar-near-bottom .text-mode-menu,
.box-toolbar.toolbar-near-bottom .symbol-menu {
  top: auto;
  bottom: calc(100% + 7px);
}
.box-toolbar.toolbar-near-bottom .alignment-menu {
  top: auto;
  bottom: calc(100% + 7px);
}
.text-mode-menu[hidden],
.symbol-menu[hidden],
.alignment-menu[hidden] {
  display: none;
}
.text-mode-option,
.symbol-option,
.alignment-option {
  width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #edf7f8;
  color: var(--ink);
  cursor: var(--cursor-pointer);
  font-size: 14px;
  font-weight: 780;
  line-height: 1;
}
.symbol-option[data-symbol="N/A"] {
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0;
}
.text-mode-option svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}
.vertical-alignment-menu .alignment-option {
  width: 31px;
}
.text-mode-option:hover,
.text-mode-option:focus-visible,
.text-mode-option.active,
.text-mode-option.dictating,
.symbol-option:hover,
.symbol-option:focus-visible,
.alignment-option:hover,
.alignment-option:focus-visible,
.alignment-option.active {
  border-color: var(--accent);
  background: var(--soft-mint);
  color: var(--accent-dark);
  outline: none;
}
.text-box.dictating .text-mode-toggle,
.text-box.dictating .text-mode-option[data-text-mode="dictation"] {
  border-color: #d88a10;
  background: #fff4dd;
  color: #9a5b00;
}
.tool-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.css-settings-toggle svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.1;
}
.move-button {
  cursor: var(--cursor-move);
  touch-action: none;
}
.tool-button.active,
.alignment-option.active {
  border-color: var(--accent);
  background: var(--soft-mint);
  color: var(--accent-dark);
}
.tool-button.danger {
  color: var(--ink);
}
.tool-button.muted {
  color: #5e6670;
}
.tool-button.loading {
  color: var(--accent-dark);
}
.tool-button.loading svg {
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to {
      transform: rotate(360deg);
    }
}
.type-control,
.border-control,
.css-control,
.function-control {
  position: relative;
  display: inline-grid;
}
.type-control.open,
.border-control.open,
.css-control.open,
.function-control.open {
  z-index: 30;
}
.type-settings-toggle {
  font-size: 12px;
  letter-spacing: 0;
}
.type-control.open .type-settings-toggle,
.border-control.open .border-settings-toggle,
.css-control.open .css-settings-toggle,
.function-control.open .function-settings-toggle {
  border-color: var(--accent);
  background: var(--soft-mint);
  color: var(--accent-dark);
}
.type-settings-popover,
.border-settings-popover,
.css-settings-popover,
.function-settings-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 25;
  width: 210px;
  max-width: calc(100vw - 32px);
  max-height: none !important;
  overflow: visible !important;
  display: none;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 85, 105, 0.2);
  transform: translateX(-50%);
}
.box-toolbar.toolbar-near-top .type-settings-popover,
.box-toolbar.toolbar-near-top .border-settings-popover,
.box-toolbar.toolbar-near-top .css-settings-popover,
.box-toolbar.toolbar-near-top .function-settings-popover {
  top: calc(100% + 8px);
  bottom: auto;
  max-height: none;
  overflow: visible;
}
.type-control.open .type-settings-popover,
.border-control.open .border-settings-popover,
.css-control.open .css-settings-popover,
.function-control.open .function-settings-popover {
  display: grid;
}
.type-settings-popover::after,
.border-settings-popover::after,
.css-settings-popover::after,
.function-settings-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}
.box-toolbar.toolbar-near-top .type-settings-popover::after,
.box-toolbar.toolbar-near-top .border-settings-popover::after,
.box-toolbar.toolbar-near-top .css-settings-popover::after,
.box-toolbar.toolbar-near-top .function-settings-popover::after {
  top: -6px;
  bottom: auto;
  border: 0;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.css-settings-toggle {
  font-size: 9px;
  letter-spacing: 0;
}
.function-settings-toggle {
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
}
.text-box.function-field > .box-toolbar .function-settings-toggle {
  border-color: rgba(21, 149, 165, 0.34);
  color: var(--accent-dark);
}
.text-box.function-field-error > .box-toolbar .function-settings-toggle {
  border-color: rgba(190, 52, 52, 0.36);
  background: #fff1f1;
  color: #9f2424;
}
.text-box.function-field-error {
  box-shadow: 0 0 0 2px rgba(190, 52, 52, 0.28);
}
.text-box.function-label-visible::before {
  content: attr(data-function-label);
  position: absolute;
  left: -2px;
  bottom: calc(100% + 5px);
  z-index: 75;
  min-width: 18px;
  max-width: 96px;
  box-sizing: border-box;
  padding: 3px 6px;
  border: 1px solid rgba(0, 141, 225, 0.2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--accent-dark);
  box-shadow: 0 8px 18px rgba(15, 85, 105, 0.16);
  font: 850 11px/1 var(--font);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transform: rotate(var(--box-counter-rotation, 0deg));
  transform-origin: left bottom;
}
.text-box.function-pickable-field {
  box-shadow: 0 0 0 2px rgba(0, 141, 225, 0.2),
    0 0 0 5px rgba(0, 245, 191, 0.12);
}
.text-box.function-pick-source {
  box-shadow: 0 0 0 2px rgba(0, 141, 225, 0.22),
    0 0 0 5px rgba(0, 141, 225, 0.08);
}
.box-label {
  position: absolute;
  z-index: 3;
  display: flex;
  box-sizing: border-box;
  min-width: 0;
  color: #323130;
  font: 600 13px/1.2 var(--font);
  pointer-events: none;
  white-space: nowrap;
}
.box-label[hidden] {
  display: none !important;
}
.box-label.label-top,
.box-label.label-bottom {
  left: 0;
  right: 0;
  min-height: 1.3em;
}
.box-label.label-top {
  bottom: calc(100% + var(--box-label-padding, 6px));
  align-items: flex-end;
  justify-content: flex-start;
}
.box-label.label-bottom {
  top: calc(100% + var(--box-label-padding, 6px));
  align-items: flex-start;
  justify-content: flex-start;
}
.box-label.label-left,
.box-label.label-right {
  top: 0;
  bottom: 0;
  align-items: center;
}
.box-label.label-left {
  right: calc(100% + var(--box-label-padding, 6px));
  justify-content: flex-end;
  text-align: right;
}
.box-label.label-right {
  left: calc(100% + var(--box-label-padding, 6px));
  justify-content: flex-start;
  text-align: left;
}
.css-settings-popover {
  width: 284px;
  box-sizing: border-box;
  grid-template-rows: minmax(0, 1fr) auto;
  max-height: min(380px, var(--toolbar-popover-max-height, 380px)) !important;
  overflow: hidden !important;
}
.css-settings-scroll {
  display: grid;
  gap: 6px;
  min-height: 0;
  max-height: max(0px, calc(min(380px, var(--toolbar-popover-max-height, 380px)) - 52px));
  overflow-y: auto;
  padding-right: 2px;
}
.css-section {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(0, 141, 225, 0.12);
  border-radius: 7px;
  background: #f8fcfd;
  padding: 6px;
}
.css-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 840;
  cursor: pointer;
  list-style: none;
}
.css-section summary::-webkit-details-marker {
  display: none;
}
.css-section summary::after {
  content: "▾";
  color: var(--accent-dark);
  font-size: 10px;
  transition: transform 0.16s ease;
}
.css-section[open] summary::after {
  transform: rotate(180deg);
}
.css-section:not([open]) {
  padding-bottom: 6px;
}
.css-value-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 4px;
}
.css-settings-popover .type-setting-row {
  grid-template-columns: minmax(0, 1fr) 132px;
}
.css-settings-popover .css-label-toggle-row input {
  justify-self: start;
  width: 18px;
  height: 18px;
  min-height: 18px;
  accent-color: var(--accent);
}
.css-settings-popover .type-setting-row-wide {
  grid-template-columns: 1fr;
}
.css-copy-styles-button {
  min-height: 31px;
  border: 1px solid rgba(0, 141, 225, 0.18);
  border-radius: 7px;
  background-color: #ffffff !important;
  color: var(--ink);
  font: 800 12px/1 var(--font);
  cursor: var(--cursor-pointer);
}
.css-copy-styles-button:hover,
.css-copy-styles-button:focus-visible {
  border-color: var(--accent);
  background: var(--soft-mint);
  color: var(--accent-dark);
  outline: none;
}
.type-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0;
}
.type-setting-row-wide {
  grid-template-columns: 1fr;
}
.type-setting-row input,
.type-setting-row select {
  min-width: 0;
  width: 58px;
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fcfd;
  color: var(--ink);
  font: inherit;
  text-align: center;
  outline: none;
}
.css-value-unit input,
.css-value-unit select {
  width: 100%;
}
.css-settings-popover .type-setting-row input,
.css-settings-popover .type-setting-row select {
  width: 132px;
}
.css-settings-popover .css-pinned-row {
  grid-template-columns: minmax(0, 1fr) auto;
}
.css-toggle-control {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.css-settings-popover .css-toggle-control input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  accent-color: var(--accent);
}
.css-settings-popover .css-value-unit input,
.css-settings-popover .css-value-unit select {
  width: 100%;
}
.css-settings-popover .type-setting-row-wide select {
  width: 100%;
}
.type-setting-row select {
  width: 100%;
  text-align: left;
}
.type-setting-row input:focus,
.type-setting-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(85, 214, 181, 0.22);
}
.type-settings-popover .type-setting-row,
.type-settings-popover .type-setting-row-wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.type-settings-popover .type-setting-row > span,
.type-settings-popover .type-setting-row-wide > span {
  min-width: 0;
}
.type-settings-popover .type-setting-row input,
.type-settings-popover .type-setting-row select,
.type-settings-popover .type-setting-row-wide select {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  justify-self: stretch;
}
.function-settings-popover {
  width: 318px;
  box-sizing: border-box;
  gap: 9px;
  max-height: min(430px, var(--toolbar-popover-max-height, 430px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transition: opacity 0.16s ease;
}
.function-modal .function-settings-popover {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  max-height: none !important;
  display: grid;
  overflow: visible !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
body.function-modal-open .text-box.primary-selected > .box-toolbar,
body.function-field-picking .text-box > .box-toolbar {
  opacity: 0;
  pointer-events: none;
}
.function-control.picking .function-settings-popover {
  position: fixed;
  left: var(--function-pick-left, 16px);
  top: var(--function-pick-top, 120px);
  bottom: auto;
  z-index: 140;
  width: min(318px, calc(100vw - 24px));
  max-height: var(--function-pick-max-height, calc(100vh - 24px)) !important;
  transform: none;
  opacity: 0.78;
}
.function-control.picking.pick-scrolling .function-settings-popover {
  opacity: 0.42;
}
.function-control.picking .function-settings-popover::after {
  display: none;
}
body.function-field-picking .text-box {
  cursor: crosshair;
}
.function-setting-row,
.function-insert-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}
.function-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 31px;
  gap: 8px;
  align-items: end;
  min-width: 0;
}
.function-field-row .function-setting-row {
  min-width: 0;
}
.function-setting-row input,
.function-setting-row textarea,
.function-insert-grid select {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 31px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fcfd;
  color: var(--ink);
  padding: 7px 8px;
  font: 700 12px/1.25 var(--font);
  outline: none;
}
.function-setting-row textarea {
  min-height: 68px;
  resize: none;
  font-family: ui-monospace, Consolas, monospace;
}
.function-modal .function-setting-row textarea {
  min-height: 124px;
}
.function-setting-row input:focus,
.function-setting-row textarea:focus,
.function-insert-grid select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(85, 214, 181, 0.22);
}
.function-insert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.function-native-select {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
.function-custom-dropdown {
  position: relative;
  min-width: 0;
}
.function-dropdown-button {
  width: 100%;
  min-height: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  border: 1px solid #d2d0ce;
  border-radius: 5px;
  background: #fff;
  color: #201f1e;
  padding: 7px 9px;
  font: 600 12px/1.2 var(--font);
  text-align: left;
  cursor: var(--cursor-pointer);
}
.function-dropdown-button:hover,
.function-dropdown-button:focus-visible,
.function-custom-dropdown.open .function-dropdown-button {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(85, 214, 181, 0.18);
  outline: none;
}
.function-dropdown-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.function-dropdown-caret {
  width: 7px;
  height: 7px;
  justify-self: center;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.68;
}
.function-custom-dropdown.open .function-dropdown-caret {
  transform: translateY(1px) rotate(225deg);
}
.function-dropdown-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  z-index: 310;
  max-height: min(260px, calc(100vh - 180px));
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #d2d0ce;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.75) inset;
}
.function-dropdown-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 4px;
  align-items: stretch;
  min-width: 0;
}
.function-dropdown-main,
.function-dropdown-icon-button {
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #201f1e;
  cursor: var(--cursor-pointer);
}
.function-dropdown-main {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  text-align: left;
  font: 600 12px/1.2 var(--font);
}
.function-dropdown-icon-button {
  width: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  align-self: start;
}
.function-dropdown-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.function-dropdown-main:hover,
.function-dropdown-main:focus-visible,
.function-dropdown-icon-button:hover,
.function-dropdown-icon-button:focus-visible,
.function-dropdown-helper-item.is-help-open .function-dropdown-icon-button {
  background: #f3f2f1;
  color: var(--accent-dark);
  outline: none;
}
.function-dropdown-name,
.function-dropdown-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.function-dropdown-name {
  font-weight: 700;
}
.function-dropdown-meta {
  color: #605e5c;
  font-size: 11px;
  font-weight: 500;
}
.function-dropdown-guide {
  display: none;
  grid-column: 1 / -1;
  margin: 0 0 5px;
  padding: 8px 9px;
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: #faf9f8;
  color: #3b3a39;
  font: 500 12px/1.35 var(--font);
}
.function-dropdown-helper-item.is-help-open .function-dropdown-guide {
  display: block;
}
.function-dropdown-empty {
  padding: 10px 9px;
  color: #605e5c;
  font: 600 12px/1.25 var(--font);
}
.text-box.function-go-to-target {
  box-shadow: 0 0 0 2px var(--accent),
    0 0 0 7px rgba(85, 214, 181, 0.22) !important;
}
#functionHelperSelectModal,
#functionFieldSelectModal {
  z-index: 124;
}
.function-select-modal,
.function-field-select-modal {
  width: min(860px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #d2d0ce;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.function-field-select-modal {
  width: min(960px, calc(100vw - 32px));
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.function-select-search {
  padding: 12px 16px 0;
}
.function-select-search input {
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  border: 1px solid #d2d0ce;
  border-radius: 5px;
  padding: 7px 9px;
  color: #201f1e;
  font: 600 13px/1.25 var(--font);
}
.function-select-list {
  min-height: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  overflow-y: auto;
  padding: 16px;
}
.function-select-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #edebe9;
  border-radius: 6px;
  background: #fff;
  padding: 10px 12px;
  color: #201f1e;
  text-align: left;
  cursor: var(--cursor-pointer);
}
.function-select-card:hover,
.function-select-card:focus-visible,
.function-field-list-item:hover,
.function-field-list-item:focus-visible,
.function-field-list-item.selected,
.function-field-preview-box.selected {
  border-color: var(--accent);
  background: #eef8f8;
  outline: none;
}
.function-select-card-title {
  min-width: 0;
  font: 750 13px/1.2 var(--font);
}
.function-select-card-template {
  color: #605e5c;
  font: 650 12px/1.2 ui-monospace, Consolas, monospace;
}
.function-select-card-guide {
  grid-column: 1 / -1;
  color: #605e5c;
  font: 500 12px/1.35 var(--font);
}
.function-field-select-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid #edebe9;
}
.function-field-select-body aside {
  min-height: 0;
  border-right: 1px solid #edebe9;
  background: #faf9f8;
}
.function-field-select-list,
.function-field-preview {
  min-height: 0;
  max-height: min(560px, calc(100vh - 220px));
  overflow: auto;
}
.function-field-select-list {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px;
}
.function-field-list-item {
  display: grid;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  padding: 8px 9px;
  color: #201f1e;
  text-align: left;
  cursor: var(--cursor-pointer);
}
.function-field-list-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 13px/1.2 var(--font);
}
.function-field-list-item small {
  color: #605e5c;
  font: 600 11px/1.2 var(--font);
}
.function-field-preview {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 16px;
  background: #f3f2f1;
}
.function-field-preview-page {
  position: relative;
  flex: 0 0 auto;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}
.function-field-preview-page img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}
.function-field-preview-box {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  border: 2px solid rgba(0, 141, 225, 0.58);
  border-radius: 3px;
  background: rgba(0, 141, 225, 0.1);
  cursor: var(--cursor-pointer);
}
.function-field-preview-box.selected {
  border-width: 3px;
  box-shadow: 0 0 0 4px rgba(0, 141, 225, 0.18);
}
.function-select-empty {
  margin: 0;
  color: #605e5c;
  font: 600 13px/1.4 var(--font);
}
.floating-zoom-controls {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 58;
  display: inline-grid;
  grid-template-columns: 30px auto 30px;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid #d2d0ce;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.floating-zoom-controls button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #201f1e;
  cursor: var(--cursor-pointer);
}
.floating-zoom-controls button:hover,
.floating-zoom-controls button:focus-visible {
  background: #eef8f8;
  color: var(--accent-dark);
  outline: none;
}
.floating-zoom-controls button:disabled {
  color: #a19f9d;
  cursor: default;
}
.floating-zoom-controls button:disabled:hover {
  background: transparent;
}
.floating-zoom-controls svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}
.floating-zoom-controls span {
  min-width: 48px;
  color: #323130;
  font: 700 12px/1 var(--font);
  text-align: center;
}
@media (max-width: 760px) {
  .floating-zoom-controls {
    display: none;
  }
  .function-field-select-body {
    grid-template-columns: 1fr;
  }
  .function-field-select-body aside {
    border-right: 0;
    border-bottom: 1px solid #edebe9;
  }
  .function-field-select-list {
    max-height: 150px;
  }
}
.function-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(0, 141, 225, 0.12);
  border-radius: 7px;
  background: #f8fcfd;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}
.function-preview strong {
  min-width: 0;
  color: var(--ink);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.function-preview.is-error strong,
.function-status.is-error {
  color: #9f2424;
}
.function-status {
  min-height: 14px;
  margin: -3px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}
.function-export-toggle {
  position: relative;
  justify-self: end;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 141, 225, 0.18);
  border-radius: 7px;
  background: #edf7f8;
  color: var(--accent-dark);
  cursor: var(--cursor-pointer);
  overflow: visible;
}
.function-export-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.function-export-toggle .eye-slash {
  display: none;
}
.function-export-toggle.is-hidden {
  border-color: rgba(190, 52, 52, 0.28);
  background: #fff6f6;
  color: #9f2424;
}
.function-export-toggle.is-hidden .eye-slash {
  display: block;
}
.function-export-toggle:hover,
.function-export-toggle:focus-visible {
  border-color: var(--accent);
  background: var(--soft-mint);
  color: var(--accent-dark);
  outline: none;
}
.function-export-toggle[data-tooltip]::before,
.function-export-toggle[data-tooltip]::after {
  position: fixed;
  left: var(--function-export-tooltip-left, 0px);
  z-index: 240;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease,
    transform 0.14s ease;
}
.function-export-toggle[data-tooltip]::before {
  content: "";
  top: var(--function-export-tooltip-arrow-top, 0px);
  bottom: auto;
  transform: translateX(-50%) translateY(3px);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.function-export-toggle[data-tooltip]::after {
  content: attr(data-tooltip);
  top: var(--function-export-tooltip-top, 0px);
  bottom: auto;
  width: max-content;
  max-width: 170px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 49, 61, 0.24);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%) translateY(5px);
}
.function-export-toggle[data-tooltip]:hover::before,
.function-export-toggle[data-tooltip]:hover::after,
.function-export-toggle[data-tooltip]:focus-visible::before,
.function-export-toggle[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.function-pick-field-button {
  min-height: 31px;
  border: 1px solid rgba(0, 141, 225, 0.18);
  border-radius: 7px;
  background: #edf7f8;
  color: var(--ink);
  font: 800 12px/1 var(--font);
  cursor: var(--cursor-pointer);
}
.function-pick-field-button:hover,
.function-pick-field-button:focus-visible {
  border-color: var(--accent);
  background: var(--soft-mint);
  color: var(--accent-dark);
  outline: none;
}
.function-pick-field-button.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: #fff;
}
.function-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.function-clear-button,
.function-apply-button {
  min-height: 31px;
  border: 1px solid rgba(0, 141, 225, 0.18);
  border-radius: 7px;
  background: #edf7f8;
  color: var(--ink);
  font: 800 12px/1 var(--font);
  cursor: var(--cursor-pointer);
}
.function-apply-button {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: #fff;
}
.function-clear-button:hover,
.function-clear-button:focus-visible,
.function-apply-button:hover,
.function-apply-button:focus-visible {
  border-color: var(--accent);
  background: var(--soft-mint);
  color: var(--accent-dark);
  outline: none;
}
.text-box.export-hidden-box {
  outline: 1px dashed rgba(190, 52, 52, 0.45);
  outline-offset: 3px;
}
.safe-colour-input,
.font-color,
.border-color,
.css-text-color,
.css-background-color,
.css-border-color,
.css-label-color {
  box-sizing: border-box;
  width: 88px;
  min-height: 30px;
  padding: 6px 8px 6px 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:
    linear-gradient(to right, var(--colour-preview, #111111) 0 21px, #fff 21px 100%) !important;
  color: var(--ink);
  font: 700 12px/1 var(--font);
  letter-spacing: 0;
}
.safe-colour-input:focus,
.font-color:focus,
.border-color:focus,
.css-text-color:focus,
.css-background-color:focus,
.css-border-color:focus,
.css-label-color:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 141, 225, 0.15);
  outline: none;
}
.safe-colour-input.colour-input-invalid {
  border-color: #a4262c;
  --colour-preview: #a4262c;
  color: #a4262c;
}
.resize-handle {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  display: none;
  z-index: 4;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  cursor: var(--cursor-resize);
  touch-action: none;
  box-shadow: 0 2px 7px rgba(31, 37, 40, 0.2);
}
.text-box.primary-selected > .resize-handle {
  display: block;
}
.rotate-handle {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 42px;
  height: 42px;
  display: none;
  z-index: 3;
  border-radius: 50%;
  background: transparent;
  cursor: var(--cursor-rotate);
  touch-action: none;
}
.text-box.primary-selected > .rotate-handle {
  display: block;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}
.grammar-modal,
.function-modal,
.member-modal,
.consistency-modal,
.find-replace-modal,
.select-where-modal,
.add-page-modal,
.delete-page-modal,
.save-dialog-modal,
.pdf-password-modal,
.docx-credit-modal,
.suggestion-manager-modal,
.suggestion-source-edit-modal,
.box-selection-tip-modal {
  width: min(880px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(15, 85, 105, 0.25);
}
.add-page-modal {
  width: min(680px, 100%);
}
.delete-page-modal {
  width: min(520px, 100%);
}
.pdf-password-modal {
  width: min(480px, 100%);
}
.import-ffp-modal {
  width: min(560px, 100%);
  overflow: hidden;
}
.docx-credit-modal {
  width: min(480px, 100%);
}
.suggestion-manager-modal {
  width: min(720px, 100%);
}
.suggestion-source-edit-modal {
  width: min(680px, 100%);
  overflow: hidden;
}
.function-modal {
  width: min(720px, 100%);
}
.function-modal-body {
  padding: 18px;
}
.save-dialog-form,
.pdf-password-form {
  display: contents;
}
.docx-credit-body {
  padding: 18px;
}
.docx-credit-body p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
.pdf-password-body {
  display: grid;
  gap: 12px;
  padding: 18px;
}
.import-ffp-body {
  display: grid;
  gap: 10px;
  padding: 18px;
  background: #f6fbfd;
}
.import-ffp-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid #d8e6ee;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.import-ffp-option:has(input:disabled) {
  opacity: 0.58;
  cursor: not-allowed;
}
.import-ffp-option input {
  margin-top: 2px;
}
.import-ffp-option span {
  display: grid;
  gap: 3px;
}
.import-ffp-option strong {
  color: #0d3045;
  font-size: 13px;
}
.import-ffp-option small,
.import-ffp-status {
  color: #5f7480;
  font-size: 12px;
  font-weight: 700;
}
.import-ffp-status {
  min-height: 18px;
  margin: 0;
}
.import-ffp-status.is-error {
  color: #a4262c;
}
.pdf-password-body label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 740;
}
.pdf-password-body input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #cfdce3;
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--ink);
  font: inherit;
  outline: none;
}
.pdf-password-body input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(85, 214, 181, 0.22);
}
.save-dialog-modal {
  width: min(560px, 100%);
  overflow: hidden;
  border: 1px solid rgba(106, 127, 138, 0.35);
}
.save-dialog-titlebar,
.save-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #d8e1e6;
  background: linear-gradient(180deg, #ffffff, #f6fafb);
}
.save-dialog-titlebar h2 {
  font-size: 18px;
  line-height: 1.2;
}
.save-dialog-titlebar p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.save-dialog-body {
  display: block;
  background: #fff;
}
.save-dialog-main {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
}
.save-dialog-fields,
.save-password-grid {
  display: grid;
  gap: 10px;
}
.save-dialog-fields label,
.save-password-grid label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 740;
}
.save-dialog-fields label,
.save-password-grid label {
  display: grid;
  gap: 6px;
}
.save-dialog-fields input,
.save-password-grid input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cfdce3;
  border-radius: 5px;
  padding: 8px 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  outline: none;
}
.save-dialog-fields input[readonly] {
  background: #f7fafb;
}
.save-dialog-fields input:focus,
.save-password-grid input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(85, 214, 181, 0.22);
}
.save-password-toggle {
  width: fit-content;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #cfdce3;
  border-radius: 6px;
  padding: 8px 12px;
  background: #f7fbfc;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.save-password-toggle:hover,
.save-password-toggle.is-open {
  border-color: rgba(0, 141, 225, 0.5);
  background: #effaff;
  box-shadow: 0 4px 12px rgba(24, 121, 178, 0.1);
}
.save-password-toggle:active {
  transform: translateY(1px);
}
.save-password-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.save-csv-option {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
}
.save-csv-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.save-password-box {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid #d8e1e6;
  border-radius: 5px;
  background: #fbfdfe;
}
.save-password-box legend {
  padding: 0 5px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 820;
}
.save-password-box p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.save-password-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.save-dialog-status {
  min-height: 19px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.save-dialog-status.is-error {
  color: #9f2c3d;
  font-weight: 740;
}
.save-dialog-status.is-success {
  color: #0d6f62;
  font-weight: 740;
}
.save-dialog-status.is-loading::before {
  content: "";
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 7px;
  border: 2px solid #cde4e8;
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.75s linear infinite;
}
.save-dialog-actions {
  justify-content: flex-end;
  border-top: 1px solid #d8e1e6;
  border-bottom: 0;
}
.find-replace-modal {
  width: min(520px, 100%);
}
.select-where-modal {
  width: min(540px, 100%);
}
.find-replace-fields,
.select-where-fields {
  display: grid;
  gap: 12px;
  padding: 18px;
}
.find-replace-fields label,
.select-where-fields label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 740;
}
.find-replace-fields input[type="text"],
.select-where-fields input[type="text"],
.select-where-fields select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--ink);
  font: inherit;
  outline: none;
}
.find-replace-fields input[type="text"]:focus,
.select-where-fields input[type="text"]:focus,
.select-where-fields select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(85, 214, 181, 0.22);
}
.find-replace-check,
.select-where-check {
  display: flex !important;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
}
.select-where-fields label[hidden] {
  display: none !important;
}
.find-replace-summary,
.select-where-summary {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.find-replace-modal .modal-actions button,
.select-where-modal .modal-actions button {
  min-height: 36px;
}

.find-replace-modal .modal-actions button {
  border: 1px solid #c4d4dd;
}
.box-selection-tip-modal {
  position: relative;
  width: min(560px, 100%);
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 22px;
  text-align: center;
}
.box-selection-tip-modal h2 {
  max-width: 440px;
  margin: 0;
  padding: 0 28px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: 0;
}
.box-selection-tip-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(0, 141, 225, 0.14);
  border-radius: 8px;
  background: #f8fcfd;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: var(--cursor-pointer);
}
.box-selection-tip-close:hover {
  border-color: rgba(21, 149, 165, 0.46);
  background: var(--soft-blue);
}
.box-selection-tip-gif {
  width: min(100%, 420px);
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.delete-page-body {
  padding: 16px 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.member-modal {
  width: min(720px, 100%);
}
.consistency-modal {
  width: min(780px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.consistency-modal > .modal-header,
.consistency-modal > .modal-actions,
.consistency-modal > .grammar-member-prompt,
.consistency-modal > .consistency-power-control,
.consistency-modal > .consistency-consent,
.consistency-modal > .grammar-loading {
  flex: 0 0 auto;
}
.guide-modal {
  width: min(980px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  overflow: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(15, 85, 105, 0.25);
}
.guide-modal > .modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  box-shadow: 0 1px 0 rgba(196, 212, 221, 0.72);
}
.suggestion-manager-content {
  display: grid;
  gap: 14px;
  padding: 18px;
}
.suggestion-manager-note {
  margin: 0;
  padding: 12px 13px;
  border: 1px solid rgba(21, 149, 165, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(227, 243, 251, 0.74), rgba(223, 247, 240, 0.82));
  color: var(--accent-dark);
  font-size: 13px;
  line-height: 1.45;
}
.suggestion-source-section,
.suggestion-paste-section,
.suggestion-source-list-section {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.suggestion-source-section {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.suggestion-source-section h3,
.suggestion-paste-section h3,
.suggestion-source-list-section h3 {
  margin: 0;
  color: var(--accent-dark);
  font-size: 14px;
  line-height: 1.2;
}
.suggestion-source-section p,
.suggestion-paste-section p,
.suggestion-source-list-section p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.suggestion-paste-heading,
.suggestion-source-list-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px);
  gap: 12px;
  align-items: start;
}
.suggestion-source-list-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.suggestion-paste-heading input,
.suggestion-paste-section textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcfd;
  color: var(--ink);
  padding: 9px 10px;
  font: inherit;
}
.suggestion-paste-section textarea {
  min-height: 124px;
  resize: vertical;
  font-size: 13px;
  line-height: 1.45;
}
.suggestion-paste-section .primary-button {
  justify-self: end;
}
.suggestion-source-empty {
  margin: 0;
  padding: 13px;
  border: 1px dashed rgba(0, 141, 225, 0.22);
  border-radius: 8px;
  background: #f8fcfd;
  color: var(--muted);
  font-size: 13px;
}
.suggestion-source-list {
  display: grid;
  gap: 8px;
}
.suggestion-source-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid rgba(0, 141, 225, 0.12);
  border-radius: 8px;
  background: #f8fcfd;
}
.suggestion-source-item strong,
.suggestion-source-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggestion-source-item strong {
  color: var(--ink);
  font-size: 13px;
}
.suggestion-source-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.suggestion-source-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.suggestion-source-edit-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.suggestion-source-edit-content {
  display: grid;
  gap: 12px;
  padding: 18px;
}
.suggestion-source-edit-content label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 740;
}
.suggestion-source-edit-content input,
.suggestion-source-edit-content textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcfd;
  color: var(--ink);
  padding: 9px 10px;
  font: inherit;
  outline: none;
}
.suggestion-source-edit-content textarea {
  min-height: 260px;
  resize: vertical;
  font-size: 13px;
  line-height: 1.45;
}
.suggestion-source-edit-content input:focus,
.suggestion-source-edit-content textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(85, 214, 181, 0.22);
}
.suggestion-source-edit-status {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.suggestion-source-edit-status.is-error {
  color: #9f2c3d;
  font-weight: 740;
}
.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.modal-header h2 {
  font-size: 18px;
  line-height: 1.2;
}
.modal-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.guide-content {
  display: grid;
  gap: 18px;
  padding: 18px;
}
.guide-credit-summary {
  margin: 16px 18px 0;
  display: inline-flex;
  width: fit-content;
  max-width: calc(100% - 36px);
  min-height: 36px;
  align-items: center;
  border: 1px solid rgba(21, 149, 165, 0.22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(227, 243, 251, 0.88), rgba(223, 247, 240, 0.9));
  color: var(--accent-dark);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 820;
}
.guide-section {
  display: grid;
  gap: 10px;
}
.guide-section h3 {
  margin: 0;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0;
}
.guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.guide-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(227, 243, 251, 0.58), rgba(255, 255, 255, 0.95));
}
.guide-action-item {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
}
.guide-cookie-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.guide-cookie-button:link,
.guide-cookie-button:visited,
.guide-cookie-button:hover,
.guide-cookie-button:focus-visible {
  text-decoration: none;
}
.add-page-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 20px 6px;
}
.add-page-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcfd;
  padding: 12px;
  cursor: var(--cursor-pointer);
}
.add-page-option:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(227, 243, 251, 0.72), rgba(223, 247, 240, 0.66));
  box-shadow: inset 0 0 0 1px rgba(85, 214, 181, 0.35);
}
.add-page-option input {
  width: auto;
  margin-top: 3px;
  accent-color: var(--accent);
}
.add-page-option strong,
.add-page-option small {
  display: block;
}
.add-page-option small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}
.add-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 20px 0;
}
.add-page-grid label,
.add-page-file-row {
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}
.add-page-grid input,
.add-page-grid select {
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
}
.add-page-file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 0;
}
.add-page-file-row span {
  color: var(--muted);
  font-weight: 600;
}
.append-pdf-controls {
  margin-top: 2px;
}
.guide-icon {
  width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: #edf7f8;
  color: var(--ink);
  font-size: 12px;
  font-weight: 820;
  line-height: 1;
}
.guide-icon.shortcut-icon {
  padding: 2px;
  font-size: 8px;
  line-height: 1.05;
  text-align: center;
  overflow-wrap: anywhere;
}
.guide-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.guide-item strong {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
}
.guide-item p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.quick-tool-stack {
  position: fixed;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}
.preview-controls,
.tools-controls,
.freehand-controls {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.freehand-options {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
}
.freehand-option {
  position: relative;
}
.preview-button,
.tools-button,
.freehand-pen-button,
.freehand-option-button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 141, 225, 0.22);
  cursor: pointer;
  pointer-events: auto;
  outline: none;
  transition: transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}
.preview-button,
.tools-button,
.freehand-pen-button {
  width: 52px;
  height: 52px;
}
.preview-button svg,
.tools-button svg,
.freehand-pen-button svg,
.freehand-option-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.preview-button:disabled {
  opacity: 0.46;
  cursor: default;
  transform: none;
  box-shadow: 0 8px 22px rgba(15, 85, 105, 0.12);
}
.preview-button.is-loading {
  background: linear-gradient(135deg, rgba(227, 243, 251, 0.96), rgba(223, 247, 240, 0.96));
  border-color: rgba(21, 149, 165, 0.4);
}
.tools-button[aria-expanded="true"] {
  border-color: rgba(21, 149, 165, 0.45);
  background: var(--soft-mint);
  color: var(--accent-dark);
}
.freehand-pen-button.active {
  background: linear-gradient(135deg, #1da3fe, #00f5bf);
  border-color: transparent;
  color: #062f3a;
  box-shadow: 0 16px 36px rgba(0, 148, 180, 0.24),
    0 0 0 4px rgba(85, 214, 181, 0.22);
}
.freehand-popover {
  position: absolute;
  right: 56px;
  top: 50%;
  min-width: 180px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 85, 105, 0.18);
  transform: translateY(-50%);
}
.freehand-popover label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 720;
}
.freehand-popover input[type="range"] {
  width: 150px;
  accent-color: var(--accent);
}
.freehand-popover .safe-colour-input {
  width: 92px;
}
.custom-colour-picker {
  --picker-hue: hsl(0 100% 50%);
  --picker-selected-colour: #111111;
  position: fixed;
  z-index: 60010;
  width: 236px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid rgba(0, 141, 225, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 56px rgba(15, 85, 105, 0.24);
  backdrop-filter: blur(10px);
}
.custom-colour-picker[hidden] {
  display: none !important;
}
.custom-colour-map {
  position: relative;
  height: 132px;
  overflow: hidden;
  border: 1px solid rgba(0, 141, 225, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, var(--picker-hue));
  cursor: crosshair;
  touch-action: none;
}
.custom-colour-map-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--picker-selected-colour);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 7px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.custom-colour-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  margin-top: 9px;
}
.custom-colour-hue {
  width: 100%;
  height: 14px;
  border: 1px solid rgba(0, 141, 225, 0.22);
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(
      to right,
      #ff0000 0%,
      #ffff00 16.6667%,
      #00ff00 33.3333%,
      #00ffff 50%,
      #0000ff 66.6667%,
      #ff00ff 83.3333%,
      #ff0000 100%
    ) !important;
  cursor: var(--cursor-pointer);
}
.custom-colour-hue::-webkit-slider-runnable-track {
  height: 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.custom-colour-hue::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -3px;
  border: 2px solid #fff;
  border-radius: 50%;
  -webkit-appearance: none;
  background: var(--picker-hue);
  box-shadow: 0 0 0 1px rgba(0, 57, 79, 0.34), 0 2px 7px rgba(0, 57, 79, 0.22);
}
.custom-colour-hue::-moz-range-track {
  height: 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.custom-colour-hue::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--picker-hue);
  box-shadow: 0 0 0 1px rgba(0, 57, 79, 0.34), 0 2px 7px rgba(0, 57, 79, 0.22);
}
.type-settings-popover .safe-colour-input,
.css-settings-popover .safe-colour-input,
.label-settings-popover .safe-colour-input,
.freehand-popover .safe-colour-input,
.signature-manager-colour.safe-colour-input,
.mobile-toolbar-portal .safe-colour-input {
  background:
    linear-gradient(to right, var(--colour-preview, #111111) 0 21px, #fff 21px 100%) !important;
}
.custom-colour-eyedropper {
  width: 34px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 141, 225, 0.28);
  border-radius: 8px;
  background: #f7fbff;
  color: var(--accent-dark);
  cursor: var(--cursor-pointer);
}
.custom-colour-eyedropper:hover,
.custom-colour-eyedropper:focus-visible,
.custom-colour-picker.sampling .custom-colour-eyedropper {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  outline: none;
}
.custom-colour-eyedropper svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.custom-colour-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin-top: 10px;
}
.custom-colour-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(0, 141, 225, 0.22);
  border-radius: 7px;
  background: var(--swatch-colour);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  cursor: var(--cursor-pointer);
}
.custom-colour-swatch:hover,
.custom-colour-swatch:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 141, 225, 0.16);
  outline: none;
}
.custom-colour-status {
  min-height: 16px;
  margin-top: 7px;
  color: var(--accent-dark);
  font: 700 11px/1.35 var(--font);
}
body.colour-eyedropper-active,
body.colour-eyedropper-active * {
  cursor: crosshair !important;
}
.app-toast {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 120;
  width: min(360px, calc(100vw - 36px));
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid rgba(21, 149, 165, 0.28);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 46px rgba(15, 85, 105, 0.2);
}
.app-toast strong {
  font-size: 14px;
}
.app-toast span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.context-helper {
  position: fixed;
  left: 50%;
  bottom: 86px;
  z-index: 118;
  width: min(540px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border: 1px solid rgba(21, 149, 165, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(15, 85, 105, 0.2);
  transform: translate(-50%, 18px) scale(0.985);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease,
    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.context-helper.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}
.context-helper-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 141, 225, 0.16), rgba(0, 245, 191, 0.18));
  color: var(--accent-dark);
}
.context-helper-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.context-helper-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.context-helper-copy strong {
  font-size: 14px;
  line-height: 1.2;
}
.context-helper-copy span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.context-helper-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: var(--cursor-pointer);
}
.context-helper-disable {
  min-height: 28px;
  border: 1px solid rgba(21, 149, 165, 0.22);
  border-radius: 6px;
  background: rgba(227, 243, 251, 0.64);
  color: var(--accent-dark);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 760;
  cursor: var(--cursor-pointer);
  white-space: nowrap;
}
.context-helper-disable:hover,
.context-helper-disable:focus-visible {
  border-color: rgba(21, 149, 165, 0.42);
  background: rgba(223, 247, 240, 0.82);
  outline: none;
}
.context-helper-close:hover,
.context-helper-close:focus-visible {
  background: rgba(21, 149, 165, 0.1);
  color: var(--accent-dark);
  outline: none;
}
.guide-helper-toggle {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 760;
  cursor: var(--cursor-pointer);
}
.guide-helper-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.icon-button {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: #edf7f8;
  color: var(--ink);
  cursor: var(--cursor-pointer);
  font-size: 22px;
  line-height: 1;
}
.check-cost {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto 0 0;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
}
.check-cost-text {
  min-width: 0;
}
.check-cost-action {
  min-height: 28px;
  border: 1px solid rgba(47, 125, 246, 0.38);
  border-radius: 6px;
  padding: 0 10px;
  background: #eef6ff;
  color: #1d5fc1;
  font-size: 12px;
  font-weight: 760;
  cursor: var(--cursor-pointer);
}
.check-cost-action:hover,
.check-cost-action:focus-visible {
  border-color: #2f7df6;
  background: #e4f0ff;
  outline: none;
}
.check-cost.is-over-limit {
  color: #b42318;
}
.question-ai-modal {
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: hidden;
  background: #fff;
}
.question-ai-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow-y: auto;
}
.question-ai-prompt-label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 720;
}
.question-ai-prompt-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.question-ai-prompt-count {
  color: #5f7f95;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.question-ai-prompt-count.is-low {
  color: #b54708;
}
.question-ai-prompt-label textarea {
  width: 100%;
  height: 100px !important;
  min-height: 100px !important;
  max-height: 100px !important;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  line-height: 1.45;
  overflow-y: auto;
}
.question-ai-status {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #deecf9;
  border-radius: 6px;
  background: #eff6fc;
  color: #323130;
  font-size: 13px;
  font-weight: 650;
}
.question-ai-answer {
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  padding: 14px;
  border: 1px solid #d2d0ce;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-y: auto;
}
.consistency-power-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 18px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcfd;
  color: var(--ink);
  font-size: 14px;
  font-weight: 720;
}
.consistency-power-control select {
  min-width: 124px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 7px 28px 7px 9px;
}
.grammar-member-prompt {
  display: grid;
  gap: 12px;
  margin: 16px 18px;
  padding: 16px;
  border: 1px solid rgba(21, 149, 165, 0.26);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(227, 243, 251, 0.78), rgba(223, 247, 240, 0.56));
}
.grammar-member-prompt h3 {
  margin: 0;
  color: var(--accent-dark);
  font-size: 16px;
  line-height: 1.25;
}
.grammar-member-prompt p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.consistency-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 18px 0;
  padding: 11px 12px;
  border: 1px solid rgba(21, 149, 165, 0.24);
  border-radius: 8px;
  background: #f8fcfd;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  cursor: var(--cursor-pointer);
}
.consistency-consent input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--accent);
}
.consistency-consent input.needs-attention {
  animation: consentNudge 0.9s ease;
  outline: 3px solid rgba(21, 149, 165, 0.2);
  outline-offset: 3px;
}
.consistency-consent.needs-attention {
  animation: consentNudge 0.9s ease;
  box-shadow: 0 0 0 4px rgba(21, 149, 165, 0.16);
}
.consistency-results {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  overflow: hidden;
}
.consistency-summary {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.consistency-issue-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
}
.consistency-issue {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(227, 243, 251, 0.58), rgba(255, 255, 255, 0.95));
}
.consistency-issue.checked {
  border-color: rgba(21, 149, 165, 0.18);
  background: #f8fcfd;
  opacity: 0.72;
}
.consistency-issue header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.consistency-issue-check {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  cursor: var(--cursor-pointer);
}
.consistency-issue-check input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}
.consistency-issue h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}
.consistency-issue.checked h3,
.consistency-issue.checked p {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 141, 225, 0.45);
}
.consistency-issue p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.consistency-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--soft-mint);
  color: var(--accent-dark);
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}
.consistency-entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.consistency-entry-link {
  min-height: 28px;
  border: 1px solid rgba(21, 149, 165, 0.28);
  border-radius: 7px;
  background: #fff;
  color: var(--accent-dark);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 780;
  cursor: var(--cursor-pointer);
}
.consistency-entry-link:hover {
  border-color: rgba(21, 149, 165, 0.58);
  background: var(--soft-mint);
}
.member-auth-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.member-status-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}
.member-status-heading h3 {
  margin: 0;
}
.member-credit-refresh {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(0, 111, 181, 0.24);
  border-radius: 50%;
  background: #e8f4fb;
  color: #006fb5;
  box-shadow: none;
}
.member-credit-refresh svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.member-credit-refresh:hover,
.member-credit-refresh:focus-visible {
  background: #d7ecfa;
  color: #005e9a;
}
.member-credit-refresh:disabled {
  cursor: default;
  opacity: 0.7;
}
.member-credit-refresh.is-refreshing svg {
  animation: member-credit-refresh-spin 0.75s linear infinite;
}
@keyframes member-credit-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}
.member-auth-button {
  min-height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 13px;
  font-weight: 760;
  text-align: center;
  cursor: var(--cursor-pointer);
  box-shadow: 0 8px 22px rgba(15, 85, 105, 0.08);
}
.member-auth-button:hover {
  border-color: rgba(21, 149, 165, 0.55);
  background: #f8fcfd;
}
.member-auth-button.needs-attention {
  animation: consentNudge 0.9s ease;
  border-color: rgba(21, 149, 165, 0.78);
  background: linear-gradient(135deg, rgba(227, 243, 251, 0.96), rgba(223, 247, 240, 0.96));
  box-shadow: 0 0 0 4px rgba(21, 149, 165, 0.16);
}
.member-auth-button svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}
.member-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 22px;
}
.member-notice {
  margin: 16px 18px 0;
  padding: 12px 14px;
  border: 1px solid rgba(0, 141, 225, 0.22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(227, 243, 251, 0.82), rgba(223, 247, 240, 0.84));
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.member-plan-card {
  display: grid;
  gap: 16px;
  align-content: start;
  border: 1px solid rgba(21, 149, 165, 0.16);
  border-radius: 8px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 14px 34px rgba(15, 85, 105, 0.08);
}
.member-plan-grid .member-plan-card {
  grid-template-rows: auto 1fr auto;
}
.member-plan-grid .member-plan-card > .member-auth-button {
  align-self: end;
}
.member-plan-card.subscriber-plan-card {
  border-color: rgba(85, 214, 181, 0.45);
  background: linear-gradient(135deg, rgba(227, 243, 251, 0.62), rgba(223, 247, 240, 0.78)),
    #fff;
}
.member-plan-card.compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.member-plan-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
.member-plan-heading h3,
.member-plan-card h3 {
  margin: 0;
  color: var(--accent-dark);
  font-size: 17px;
  line-height: 1.2;
}
.member-plan-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.member-plan-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}
.member-plan-card li {
  position: relative;
  padding-left: 20px;
}
.member-plan-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.member-plan-pill,
.member-plan-price {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  color: var(--accent-dark);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 141, 225, 0.14);
  font-size: 12px;
  font-weight: 860;
  white-space: nowrap;
}
.member-plan-price {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  border-color: rgba(255, 255, 255, 0.42);
}
.subscriber-auth-button {
  border-color: rgba(0, 141, 225, 0.28);
  background: linear-gradient(135deg, #17313d, #006fb5 55%, #008de1);
  color: #fff;
}
.subscriber-auth-button:hover {
  background: linear-gradient(135deg, #102833, #006fb5 55%, #008de1);
}
.member-upgrade-actions {
  padding: 0 18px 18px;
}
.member-credit-topup {
  padding: 0 18px 18px;
}
.credit-topup-card {
  gap: 12px;
  box-shadow: none;
}
.credit-topup-controls {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(82px, auto) auto;
  gap: 10px;
  align-items: end;
}
.credit-topup-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 780;
}
.credit-topup-controls input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cfdce3;
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--ink);
  font: inherit;
  outline: none;
}
.credit-topup-controls input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(85, 214, 181, 0.2);
}
.credit-price-box {
  position: relative;
  top: 10px;
  align-self: center;
  min-height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(0, 141, 225, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(227, 243, 251, 0.78), rgba(223, 247, 240, 0.78));
  color: var(--accent-dark);
  padding: 0 12px;
  font-size: 15px;
  font-weight: 860;
  white-space: nowrap;
}
.member-content {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  align-items: start;
}
.member-content h3 {
  margin: 0 0 6px;
  color: var(--accent-dark);
  font-size: 18px;
  line-height: 1.25;
}
.member-content p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.member-badge {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--soft-blue), var(--soft-mint));
  color: var(--accent-dark);
}
.member-badge svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.member-modal-actions {
  padding: 0 18px 18px;
}
.member-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 18px 18px;
}
.grammar-status-message {
  margin: 16px 18px 0;
  padding: 12px 14px;
  border: 1px solid rgba(0, 141, 225, 0.2);
  border-radius: 8px;
  background: #f3fbfd;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
.grammar-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px 18px;
}
.grammar-comparison section {
  min-width: 0;
}
.grammar-comparison h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}
.grammar-comparison pre {
  min-height: 170px;
  max-height: 330px;
  margin: 0;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fcfd;
  color: var(--ink);
  font: 14px/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}
.grammar-loading {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 34px 18px 38px;
}
.grammar-loading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 720;
}
.loader {
  width: 34px;
  height: 34px;
  border: 3px solid #d7edf0;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
.modal-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.primary-button,
.secondary-button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 720;
  cursor: var(--cursor-pointer);
}
.primary-button {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent) 58%, var(--mint));
  color: #fff;
}
.primary-button:disabled,
.secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}
.primary-button:disabled {
  background: #cfdce0;
  color: #5c6970;
}
.secondary-button {
  background: #edf7f8;
  color: var(--ink);
}
.danger-secondary-button {
  border: 1px solid rgba(159, 44, 61, 0.28);
}
.danger-secondary-button:hover {
  background: #fff0f2;
}
@media (max-width: 760px) {
  .save-password-grid {
    grid-template-columns: 1fr;
  }
  .save-dialog-modal {
    max-height: calc(100vh - 24px);
    overflow: auto;
  }
  .topbar,
  .bottombar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .brand {
    min-width: 0;
    gap: 9px;
  }
  .brand-logo {
    width: 36px;
    height: 36px;
  }
  h1 {
    font-size: 18px;
  }
  .topbar p,
  .empty-state p {
    font-size: 12px;
  }
  .top-actions {
    gap: 6px;
    justify-content: flex-start;
  }
  .file-button,
  .download-button,
  .join-button,
  .consistency-button {
    min-height: 34px;
    gap: 6px;
    padding: 0 10px;
    font-size: 13px;
  }
  .top-icon-button {
    width: 32px;
    height: 32px;
  }
  .top-icon-button svg,
  .join-button svg,
  .consistency-button svg,
  .download-icon {
    width: 16px;
    height: 16px;
  }
  .consistency-button {
    width: 100%;
  }
  .download-actions {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    justify-content: space-between;
    gap: 8px;
  }
  .context-helper {
    display: none;
  }
  .quick-tool-stack {
    align-items: flex-start;
  }
  .preview-controls,
  .tools-controls,
  .freehand-controls,
  .freehand-options {
    align-items: flex-start;
  }
  .freehand-popover {
    right: auto;
    left: 52px;
    min-width: 158px;
  }
  .freehand-popover input[type="range"] {
    width: 128px;
  }
  .member-plan-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }
  .member-plan-card.compact {
    grid-template-columns: minmax(0, 1fr);
  }
  .credit-topup-controls {
    grid-template-columns: minmax(0, 1fr);
  }
  .member-account-actions {
    justify-content: stretch;
  }
  .member-account-actions button {
    flex: 1 1 180px;
  }
  .page-panel {
    height: 78px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .page-panel.thumbnails-visible {
    height: 156px;
  }
  .page-panel-header {
    margin-bottom: 0;
  }
  .page-list {
    grid-auto-flow: column;
    grid-auto-columns: 86px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0;
  }
  .page-list.show-thumbnails {
    grid-auto-columns: 112px;
  }
  .page-thumbnail-frame {
    height: 82px;
  }
  .panel-title {
    font-size: 11px;
  }
  .page-chip {
    padding: 7px 9px;
    font-size: 12px;
  }
  .page-actions {
    margin: 0;
    padding-top: 0;
    background: transparent;
  }
  .add-page-button {
    min-width: 96px;
    min-height: 34px;
    gap: 6px;
    font-size: 12px;
  }
  .add-page-button svg {
    width: 15px;
    height: 15px;
  }
  .canvas-panel {
    scroll-padding: calc(var(--mobile-top-offset, 154px) + 8px)
      12px
      calc(var(--mobile-toolbar-bottom, 86px) + var(--mobile-toolbar-height, 92px) + 16px)
      12px;
  }
  .mobile-zoom-controls {
    position: fixed;
    top: var(--mobile-top-offset, 154px);
    right: 10px;
    z-index: 35;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(0, 141, 225, 0.16);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 26px rgba(15, 85, 105, 0.18);
  }
  .page-stage {
    width: max-content;
    min-width: 100%;
    justify-content: stretch;
    justify-items: center;
    gap: 16px;
  }
  .pdf-page {
    max-width: none;
  }
  .box-toolbar {
    position: fixed;
    left: 8px !important;
    right: 8px;
    bottom: calc(var(--mobile-toolbar-bottom, 86px) + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 5px;
    padding: 6px;
    touch-action: manipulation;
  }
  .box-toolbar [data-tooltip]::before,
  .box-toolbar [data-tooltip]::after {
    display: none;
  }
  .tool-button,
  .alignment-picker-toggle {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 6px;
    font-size: 13px;
  }
  .tool-button svg {
    width: 17px;
    height: 17px;
  }
  .symbol-control,
  .symbol-picker-label,
  .symbol-picker-toggle,
  .text-mode-control,
  .alignment-control,
  .alignment-picker-toggle {
    height: 36px;
  }
  .symbol-control,
  .text-mode-control,
  .type-control,
  .border-control,
  .css-control,
  .function-control,
  .alignment-toolbar-group {
    flex: 0 0 auto;
  }
  .alignment-toolbar-group {
    height: 36px;
    gap: 5px;
  }
  .alignment-picker-toggle {
    width: 50px;
    min-width: 50px;
  }
  .vertical-align-toggle {
    width: 50px;
    min-width: 50px;
  }
  .symbol-picker-label {
    width: 23px;
  }
  .symbol-control .check-button {
    width: 35px;
    min-width: 35px;
  }
  .text-mode-menu,
  .symbol-menu,
  .alignment-menu {
    position: fixed;
    left: auto;
    right: 8px;
    top: auto;
    bottom: calc(var(--mobile-toolbar-bottom, 86px) + var(--mobile-toolbar-height, 92px) + 8px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    grid-template-columns: repeat(3, 36px);
    gap: 5px;
    padding: 6px;
  }
  .text-mode-menu {
    grid-template-columns: repeat(3, 36px);
  }
  .box-toolbar.toolbar-near-bottom .symbol-menu,
  .box-toolbar.toolbar-near-bottom .text-mode-menu,
  .box-toolbar.toolbar-near-bottom .alignment-menu {
    top: auto;
    bottom: calc(var(--mobile-toolbar-bottom, 86px) + var(--mobile-toolbar-height, 92px) + 8px + env(safe-area-inset-bottom, 0px));
  }
  .text-mode-option,
  .symbol-option,
  .alignment-option {
    width: 36px;
    height: 36px;
  }
  .vertical-alignment-menu {
    grid-template-columns: repeat(3, 36px);
  }
  .vertical-alignment-menu .alignment-option {
    width: 36px;
  }
  .type-settings-popover,
  .border-settings-popover,
  .css-settings-popover,
  .function-settings-popover {
    position: fixed;
    left: 8px;
    right: 8px;
    top: auto;
    bottom: calc(var(--mobile-toolbar-bottom, 86px) + var(--mobile-toolbar-height, 92px) + 8px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    width: auto;
    max-width: none;
    max-height: none !important;
    overflow: visible !important;
    gap: 7px;
    padding: 9px;
    transform: none;
  }
  .css-settings-popover {
    min-height: 0;
  }
  .box-toolbar.toolbar-near-top .type-settings-popover,
  .box-toolbar.toolbar-near-top .border-settings-popover,
  .box-toolbar.toolbar-near-top .css-settings-popover,
  .box-toolbar.toolbar-near-top .function-settings-popover {
    top: auto;
    bottom: calc(var(--mobile-toolbar-bottom, 86px) + var(--mobile-toolbar-height, 92px) + 8px + env(safe-area-inset-bottom, 0px));
    max-height: none;
    overflow: visible;
  }
  .type-settings-popover::after,
  .border-settings-popover::after,
  .css-settings-popover::after,
  .function-settings-popover::after {
    display: none;
  }
  .function-settings-popover {
    max-height: 58vh;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .css-settings-scroll {
    max-height: 45vh;
    min-height: 0;
  }
  .type-setting-row {
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 7px;
  }
  .type-setting-row input,
  .type-setting-row select {
    width: 52px;
    height: 28px;
  }
  .css-settings-popover .type-setting-row {
    grid-template-columns: minmax(0, 1fr) 116px;
  }
  .css-settings-popover .type-setting-row input,
  .css-settings-popover .type-setting-row select {
    width: 116px;
  }
  .css-settings-popover .css-value-unit input,
  .css-settings-popover .css-value-unit select,
  .css-settings-popover .type-setting-row-wide select {
    width: 100%;
  }
  .type-setting-row-wide select {
    width: 100%;
  }
  .resize-handle {
    right: -12px;
    bottom: -12px;
    width: 24px;
    height: 24px;
  }
  .rotate-handle {
    display: none !important;
  }
  .grammar-comparison {
    grid-template-columns: 1fr;
  }
  .modal-backdrop {
    padding: 10px;
  }
  .grammar-modal,
  .member-modal,
  .consistency-modal,
  .add-page-modal,
  .delete-page-modal,
  .suggestion-manager-modal,
  .suggestion-source-edit-modal,
  .box-selection-tip-modal,
  .guide-modal {
    width: 100%;
    max-height: calc(100dvh - 20px);
  }
  .suggestion-source-section,
  .suggestion-paste-heading,
  .suggestion-source-list-header {
    grid-template-columns: minmax(0, 1fr);
  }
  .suggestion-paste-section .primary-button,
  .suggestion-source-section .secondary-button,
  .suggestion-source-list-header .secondary-button {
    width: 100%;
  }
  .box-selection-tip-modal {
    gap: 12px;
    padding: 18px 12px;
  }
  .box-selection-tip-modal h2 {
    padding: 0 32px;
    font-size: 18px;
  }
  .consistency-issue header {
    display: grid;
  }
  .modal-header,
  .modal-actions {
    padding: 12px;
  }
  .guide-list {
    grid-template-columns: 1fr;
  }
  .add-page-options,
  .add-page-grid {
    grid-template-columns: 1fr;
  }
}
body {
  background: linear-gradient(180deg, #faf9f8 0, #f3f2f1 52%, #edebe9 100%),
    #f3f2f1;
  color: #201f1e;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.app-shell {
  background: #f3f2f1;
}
.topbar,
.bottombar {
  gap: 14px;
  padding: 10px 18px;
  background: rgba(250, 249, 248, 0.98);
  border-color: #e1dfdd;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  backdrop-filter: blur(18px);
}
.topbar {
  min-height: 68px;
}
.bottombar {
  min-height: 62px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.8) inset, 0 -6px 20px rgba(0, 0, 0, 0.04);
}
.brand {
  min-width: 244px;
  gap: 11px;
}
.brand-logo {
  width: 38px;
  height: 38px;
  padding: 5px;
  border: 1px solid #e1dfdd;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
h1 {
  color: #201f1e;
  font-size: 20px;
  font-weight: 650;
}
.topbar p,
.empty-state p {
  color: #605e5c;
}
.top-actions,
.download-actions {
  gap: 6px;
}
.file-button,
.download-button,
.join-button,
.consistency-button,
.primary-button,
.secondary-button,
.member-auth-button,
.add-page-button,
.guide-cookie-button,
.consistency-entry-link,
.context-helper-disable {
  border-radius: 4px;
  box-shadow: none;
  transition: background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.12s ease;
}
.file-button,
.download-button,
.primary-button,
.add-page-button {
  border: 1px solid #008de1;
  background: #008de1;
  color: #fff;
  font-weight: 600;
}
.file-button:hover,
.download-button:hover,
.primary-button:hover,
.add-page-button:hover {
  border-color: #006fb5;
  background: #006fb5;
  transform: none;
}
.secondary-file-button,
.join-button,
.consistency-button,
.secondary-button,
.top-icon-button,
.member-auth-button,
.context-helper-disable,
.page-thumbnail-toggle,
.guide-cookie-button,
.consistency-entry-link {
  border: 1px solid transparent;
  background: transparent;
  color: #323130;
  font-weight: 600;
}
.secondary-file-button:hover,
.join-button:hover,
.consistency-button:hover,
.secondary-button:hover,
.top-icon-button:hover,
.member-auth-button:hover,
.context-helper-disable:hover,
.page-thumbnail-toggle:hover,
.guide-cookie-button:hover,
.consistency-entry-link:hover {
  border-color: #c8c6c4;
  background: #f3f2f1;
  color: #201f1e;
  transform: none;
}
.top-icon-button {
  width: 36px;
  height: 36px;
  border-radius: 4px;
}
.join-button.member-active,
.join-button.subscriber-active {
  border-color: rgba(0, 141, 225, 0.24);
  background: #eff6fc;
  color: #006fb5;
}
.workspace {
  grid-template-columns: 214px minmax(0, 1fr);
  background: #edebe9;
}
.page-panel {
  border-right-color: #d2d0ce;
  background: #faf9f8;
  padding: 12px;
}
.panel-title {
  color: #323130;
  font-size: 12px;
  font-weight: 650;
  text-transform: none;
}
.page-list {
  gap: 6px;
}
.page-chip {
  border-color: transparent;
  border-radius: 4px;
  background: transparent;
  padding: 9px 10px;
  color: #323130;
  box-shadow: none;
}
.page-chip:hover {
  background: #f3f2f1;
}
.page-chip.active {
  border-color: transparent;
  background: #eff6fc;
  box-shadow: inset 3px 0 0 #008de1;
  color: #006fb5;
}
.page-thumbnail-frame {
  border-color: #edebe9;
  border-radius: 4px;
  background: #fff;
}
.page-actions {
  background: linear-gradient(180deg, rgba(250, 249, 248, 0), #faf9f8 38%);
}
.canvas-panel {
  background: radial-gradient(circle at 0 0, rgba(96, 94, 92, 0.11) 1px, transparent 1px) 0 0 / 18px 18px,
    #edebe9;
  padding: 30px;
}
.pdf-page {
  border-color: #c8c6c4;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}
.empty-state {
  width: min(460px, calc(100% - 28px));
  margin: 13vh auto;
  padding: 34px 28px;
  border: 1px solid #e1dfdd;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
}
.empty-mark {
  width: 82px;
  height: 106px;
  border-color: #c8c6c4;
  border-radius: 5px;
  color: #006fb5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.empty-state:hover .empty-mark,
.empty-state:focus-visible .empty-mark {
  border-color: #008de1;
  transform: none;
}
.text-box {
  border-color: rgba(0, 141, 225, 0.42);
}
.text-box.selected,
.text-box.primary-selected,
.text-box.marquee-selected {
  border-color: #008de1;
  box-shadow: 0 0 0 1px rgba(0, 141, 225, 0.24),
    0 2px 10px rgba(0, 141, 225, 0.18);
}
.resize-handle,
.rotate-handle {
  border-color: #fff;
  background: #008de1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.2);
}
.box-toolbar {
  gap: 2px;
  padding: 4px;
  border-color: #c8c6c4;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}
.tool-button,
.alignment-picker-toggle,
.icon-button,
.guide-icon,
.symbol-control,
.text-mode-toggle,
.symbol-picker-label,
.text-mode-option,
.symbol-option,
.alignment-option,
.signature-action-button,
.group-input-mode-button {
  border-radius: 3px;
  background: transparent;
  color: #323130;
}
.tool-button:hover,
.tool-button:focus-visible,
.alignment-picker-toggle:hover,
.alignment-picker-toggle:focus-visible,
.icon-button:hover,
.text-mode-option:hover,
.symbol-option:hover,
.alignment-option:hover,
.signature-action-button:hover,
.group-input-mode-button:hover {
  background: #f3f2f1;
  color: #201f1e;
  outline: none;
}
.symbol-control,
.text-mode-control:hover .text-mode-toggle,
.text-mode-control:focus-within .text-mode-toggle,
.text-mode-control.open .text-mode-toggle,
.alignment-control:hover .alignment-picker-toggle,
.alignment-control:focus-within .alignment-picker-toggle,
.alignment-control.open .alignment-picker-toggle {
  box-shadow: inset 0 0 0 1px #e1dfdd;
}
.symbol-control:hover,
.symbol-control:focus-within {
  background: #f3f2f1;
  box-shadow: inset 0 0 0 1px #c8c6c4;
}
.type-settings-popover,
.border-settings-popover,
.css-settings-popover,
.function-settings-popover,
.text-mode-menu,
.symbol-menu,
.alignment-menu,
.freehand-popover,
.tools-menu,
.page-context-menu,
.pdf-context-menu {
  border-color: #c8c6c4;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}
input,
select,
textarea,
.find-replace-fields input[type="text"],
.select-where-fields input[type="text"],
.select-where-fields select,
.pdf-password-body input,
.save-dialog-fields input,
.save-password-grid input,
.suggestion-paste-heading input,
.suggestion-paste-section textarea,
.credit-topup-controls input,
.add-page-grid input,
.add-page-grid select {
  border-color: #c8c6c4;
  border-radius: 3px;
  background: #fff;
  color: #201f1e;
}
input:focus,
select:focus,
textarea:focus,
.find-replace-fields input[type="text"]:focus,
.select-where-fields input[type="text"]:focus,
.select-where-fields select:focus,
.pdf-password-body input:focus,
.save-dialog-fields input:focus,
.save-password-grid input:focus,
.credit-topup-controls input:focus {
  border-color: #008de1;
  box-shadow: 0 0 0 2px rgba(0, 141, 225, 0.18);
  outline: none;
}
.modal-backdrop {
  background: rgba(32, 31, 30, 0.38);
}
.grammar-modal,
.function-modal,
.member-modal,
.consistency-modal,
.find-replace-modal,
.select-where-modal,
.add-page-modal,
.delete-page-modal,
.save-dialog-modal,
.pdf-password-modal,
.docx-credit-modal,
.suggestion-manager-modal,
.box-selection-tip-modal,
.guide-modal {
  border: 1px solid #c8c6c4;
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.modal-header,
.modal-actions,
.save-dialog-titlebar,
.save-dialog-actions {
  border-color: #edebe9;
  background: #faf9f8;
}
.modal-header h2,
.save-dialog-titlebar h2 {
  color: #201f1e;
  font-weight: 650;
}
.guide-credit-summary,
.suggestion-manager-note,
.grammar-member-prompt,
.member-notice,
.grammar-status-message,
.consistency-power-control,
.consistency-consent,
.save-password-box {
  border-color: #deecf9;
  border-radius: 4px;
  background: #eff6fc;
  color: #323130;
}
.guide-section h3,
.suggestion-source-section h3,
.suggestion-paste-section h3,
.suggestion-source-list-section h3,
.member-plan-heading h3,
.member-plan-card h3,
.member-content h3 {
  color: #006fb5;
}
.guide-item,
.add-page-option,
.suggestion-source-section,
.suggestion-paste-section,
.suggestion-source-list-section,
.consistency-issue,
.member-plan-card,
.suggestion-source-item {
  border-color: #edebe9;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}
.add-page-option:has(input:checked),
.consistency-issue.checked,
.member-plan-card.subscriber-plan-card {
  border-color: #deecf9;
  background: #eff6fc;
  box-shadow: inset 3px 0 0 #008de1;
}
.member-plan-card li::before {
  background: #008de1;
  box-shadow: 0 0 0 3px rgba(0, 141, 225, 0.12);
}
.member-plan-price,
.subscriber-auth-button {
  background: #008de1;
  border-color: #008de1;
  color: #fff;
}
.credit-price-box,
.member-plan-pill,
.consistency-pill {
  border-color: #deecf9;
  background: #eff6fc;
  color: #006fb5;
}
.quick-tool-stack {
  top: 92px;
  right: 18px;
  gap: 8px;
}
.preview-button,
.tools-button,
.freehand-pen-button,
.freehand-option-button {
  border-color: #c8c6c4;
  border-radius: 50%;
  background: #fff;
  color: #323130;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}
.preview-button:hover,
.tools-button:hover,
.freehand-pen-button:hover,
.freehand-option-button:hover,
.preview-button:focus-visible,
.tools-button:focus-visible,
.freehand-pen-button:focus-visible,
.freehand-option-button:focus-visible {
  border-color: #008de1;
  background: #eff6fc;
  color: #006fb5;
  transform: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16),
    0 0 0 2px rgba(0, 141, 225, 0.18);
}
.tools-button[aria-expanded="true"],
.freehand-pen-button.active,
.preview-button.is-loading {
  border-color: #008de1;
  background: #008de1;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 141, 225, 0.24);
}
.context-helper,
.app-toast {
  border-color: #c8c6c4;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}
.context-helper-icon,
.member-badge {
  border-radius: 4px;
  background: #eff6fc;
  color: #006fb5;
}
.box-selection-marquee,
.drag-field-preview-box {
  border-color: #008de1;
  border-radius: 2px;
  background: rgba(0, 141, 225, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}
.alignment-guide-line.vertical {
  border-left-color: rgba(0, 141, 225, 0.86);
}
.alignment-guide-line.horizontal {
  border-top-color: rgba(0, 141, 225, 0.86);
}
.alignment-guide-distance {
  border-color: #deecf9;
  border-radius: 3px;
  background: #fff;
  color: #006fb5;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}
.danger-button {
  background: #a4262c;
  border-color: #a4262c;
  color: #fff;
}
.danger-secondary-button {
  border-color: rgba(164, 38, 44, 0.34);
  color: #a4262c;
}
@media (max-width: 760px) {
  .topbar,
  .bottombar {
    padding: 9px 10px;
  }
  .workspace {
    grid-template-columns: 1fr;
  }
  .page-panel {
    background: #faf9f8;
  }
  .canvas-panel {
    padding: 18px 12px 110px;
  }
  .quick-tool-stack {
    top: calc(var(--mobile-top-offset) + 10px);
    left: 12px;
    right: auto;
  }
  .empty-state {
    margin: 8vh auto;
    padding: 24px 18px;
  }
  .box-toolbar {
    border-radius: 4px 4px 0 0;
  }
}
body,
.app-shell,
.canvas-panel {
  background: #f3f3f3 !important;
}
.canvas-panel {
  background-image: none !important;
}
.empty-state {
  background: #f3f3f3 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.empty-mark {
  border-color: #c8d3db !important;
  background: #fff !important;
  box-shadow: 0 18px 36px rgba(31, 45, 58, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.88) inset !important;
}
.empty-state:hover .empty-mark,
.empty-state:focus-visible .empty-mark {
  border-color: #008de1 !important;
  box-shadow: 0 20px 42px rgba(31, 45, 58, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset !important;
}
.brand {
  min-width: 260px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 13px !important;
}
.brand-logo {
  width: 46px !important;
  height: 46px !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}
.brand-wordmark,
.brand h1 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  color: var(--logo) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#questionAiAskBtn {
  min-width: 100px;
}
.brand-wordmark span {
  display: inline-flex;
  align-items: center;
  min-height: 1.6em;
  margin-left: 3px;
  padding: 0 7px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68em;
  font-weight: 900;
}
.floating-zoom-controls {
  position: fixed !important;
  left: 224px !important;
  bottom: 75px !important;
}
@media (max-width: 760px) {
  .brand {
    min-width: 0 !important;
  }
  .brand-logo {
    width: 38px !important;
    height: 38px !important;
  }
  .brand-wordmark,
  .brand h1 {
    font-size: 20px !important;
  }
}
.page-stage {
  position: relative;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  justify-items: center;
}
.pdf-page {
  flex: 0 0 auto;
}
.css-label-section[open] {
  gap: 8px;
}
.css-label-grid {
  display: grid;
  align-items: center;
}
.css-label-grid .type-setting-row {
  display: contents;
}
.css-label-grid .type-setting-row-wide {
  display: contents;
}
.css-label-grid .type-setting-row > span,
.css-label-grid .type-setting-row-wide > span {
  grid-column: 1;
  align-self: center;
  color: #605e5c;
  font-weight: 700;
  line-height: 1.2;
}
.css-label-grid input,
.css-label-grid select {
  grid-column: 2;
  width: 100%;
  min-width: 0;
}
.css-label-grid .css-label-toggle-row {
  display: contents;
}
.css-label-grid .css-label-toggle-row input {
  justify-self: start;
  width: 18px;
  height: 18px;
  min-height: 18px;
}
.css-label-grid .css-label-color {
  min-height: 32px;
}
.resize-handle {
  outline: 0 !important;
  box-shadow: 0 2px 7px rgba(31, 37, 40, 0.2) !important;
}
.text-box.primary-selected > .rotate-handle {
  right: -34px !important;
  bottom: -34px !important;
  width: 28px !important;
  height: 28px !important;
}
.text-box.primary-selected:has(.editable:hover) > .rotate-handle,
.text-box.primary-selected:has(.form-builder-native-control:hover) > .rotate-handle,
.text-box.primary-selected:has(button:hover) > .rotate-handle,
.text-box.primary-selected:has(input:hover) > .rotate-handle,
.text-box.primary-selected:has(select:hover) > .rotate-handle,
.text-box.primary-selected:has(textarea:hover) > .rotate-handle {
  display: none !important;
  pointer-events: none !important;
}
:root {
  --accent-soft: rgba(0, 141, 225, 0.11);
  --accent-softer: rgba(0, 141, 225, 0.065);
}
.top-actions {
  position: relative;
}
.save-reminder {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 130;
  width: min(260px, calc(100vw - 32px));
  box-sizing: border-box;
  display: grid;
  gap: 3px;
  padding: 12px 34px 12px 13px;
  border: 1px solid rgba(0, 141, 225, 0.22);
  border-radius: 6px;
  background: #fff;
  color: #201f1e;
  box-shadow: 0 16px 38px rgba(31, 45, 58, 0.2);
  font-size: 12px;
  line-height: 1.35;
}
.save-reminder::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 36px;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(0, 141, 225, 0.22);
  border-left: 1px solid rgba(0, 141, 225, 0.22);
  background: #fff;
  transform: rotate(45deg);
}
.save-reminder strong {
  color: var(--accent-dark);
  font-size: 13px;
}
.save-reminder-close {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #605e5c;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.save-reminder-close:hover,
.save-reminder-close:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.header-footer-modal {
  border-color: #d7dce0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 28px 70px rgba(31, 45, 58, 0.24) !important;
}
.header-footer-sidebar,
.header-footer-properties,
.header-footer-editor-panel {
  border-color: #dfe4e8 !important;
  border-radius: 6px !important;
  background: #f8f9fa !important;
}
.header-footer-function-tools,
.header-footer-image-tools,
.header-footer-ai-background {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dfe4e8;
  border-radius: 6px;
  background: #fff;
}
.header-footer-function-actions,
.header-footer-border-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.header-footer-border-grid {
  padding: 10px;
  border: 1px solid #dfe4e8;
  border-radius: 6px;
  background: #fff;
}
.header-footer-border-grid label,
.header-footer-image-tools label,
.header-footer-ai-background label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
}
.header-footer-ai-background textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cfdce3;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 8px 9px;
  font: 600 13px/1.35 var(--font);
  outline: none;
}
.header-footer-ai-background textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 141, 225, 0.12);
}
.header-footer-ai-background-footer span {
  min-height: 16px;
  line-height: 1.35;
}
.header-footer-ai-background .secondary-button {
  width: 100%;
  min-height: 34px;
}
.header-footer-function-tools .secondary-button,
.header-footer-image-tools .secondary-button,
.header-footer-action-row .secondary-button {
  min-height: 34px;
}
.header-footer-functions-button {
  width: 100%;
  min-height: 36px;
}
.header-footer-ai-button,
.header-footer-ai-apply {
  width: 100%;
}
.header-footer-ai-result {
  margin: 0;
}
.header-footer-editor-item,
.header-footer-page-item {
  box-sizing: border-box;
}
.header-footer-page-item.selected {
  outline: 0 !important;
  background: transparent !important;
}
.header-footer-resize-handle {
  z-index: 6;
}
.header-footer-resize-handle::before {
  box-shadow: 0 1px 4px rgba(31, 45, 58, 0.18);
}
.header-footer-resize-handle:hover::before,
.header-footer-resize-handle:focus-visible::before {
  background: rgba(0, 141, 225, 0.58);
}
.css-settings-popover:not(.label-settings-popover) .css-settings-scroll {
  padding: 0;
}
.css-settings-popover:not(.label-settings-popover) .css-section summary {
  box-sizing: border-box;
  border-color: #d7dce0;
  border-radius: 0;
}
.css-settings-popover:not(.label-settings-popover) .css-section[open] > .type-setting-row,
.css-settings-popover:not(.label-settings-popover) .css-section[open] > label {
  margin-top: 8px;
}
.css-settings-popover:not(.label-settings-popover) .css-section:not([open]) > .type-setting-row,
.css-settings-popover:not(.label-settings-popover) .css-section:not([open]) > label {
  display: none;
}
.page-stage.zoom-previewing .box-toolbar {
  transform: rotate(var(--box-counter-rotation, 0deg))
    translateY(0)
    scale(calc(1 / var(--pdf-zoom-preview-scale, 1)));
}
.page-stage.zoom-previewing .text-box.toolbar-rotation-active > .box-toolbar {
  transform: rotate(var(--box-counter-rotation, 0deg))
    translateY(8px)
    scale(calc(0.985 / var(--pdf-zoom-preview-scale, 1)));
}
.download-button:not(:disabled),
.primary-button,
.subscriber-auth-button,
.tools-button.active,
.tools-button[aria-expanded="true"],
body.freehand-mode .freehand-pen-button,
.freehand-pen-button.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.tool-button:hover,
.alignment-picker-toggle:hover,
.symbol-option:hover,
.text-mode-option:hover,
.alignment-option:hover,
.file-button:hover,
.file-button:focus-visible,
.secondary-button:hover,
.secondary-button:focus-visible {
  border-color: rgba(0, 141, 225, 0.28) !important;
  background: var(--accent-soft) !important;
  color: var(--accent-dark) !important;
}
@media (max-width: 900px) {
  .header-footer-function-actions,
  .header-footer-border-grid {
    grid-template-columns: 1fr;
  }
}
.header-footer-modal {
  width: min(1180px, 100%);
  max-height: min(820px, calc(100vh - 40px));
  overflow: hidden;
  border: 1px solid #c8c6c4;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.header-footer-body {
  display: grid;
  gap: 14px;
  padding: 16px;
  overflow: auto;
  max-height: calc(100vh - 180px);
}
.header-footer-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #c8c6c4;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.header-footer-tabs button {
  min-height: 38px;
  border: 0;
  border-right: 1px solid #c8c6c4;
  background: #fff;
  color: #323130;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.header-footer-tabs button:last-child {
  border-right: 0;
}
.header-footer-tabs button.active {
  background: rgba(0, 141, 225, 0.12);
  color: #008de1;
  box-shadow: inset 0 -3px 0 #008de1;
}
.header-footer-layout {
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(360px, 1fr) minmax(210px, 250px);
  gap: 14px;
  align-items: start;
}
.header-footer-sidebar,
.header-footer-properties,
.header-footer-editor-panel {
  border: 1px solid #edebe9;
  border-radius: 6px;
  background: #faf9f8;
}
.header-footer-sidebar,
.header-footer-properties {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.header-footer-toggle,
.header-footer-height,
.header-footer-item-controls label {
  display: grid;
  gap: 6px;
  color: #323130;
  font-size: 13px;
  font-weight: 650;
}
.header-footer-toggle {
  grid-template-columns: auto 1fr;
  align-items: center;
}
.header-footer-height input,
.header-footer-item-controls input,
.header-footer-item-controls select,
.header-footer-item-controls textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid #c8c6c4;
  border-radius: 3px;
  background: #fff;
  color: #201f1e;
}
.header-footer-item-controls textarea {
  min-height: 74px;
  resize: vertical;
}
.header-footer-add-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.header-footer-add-grid button {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 68px;
  border: 1px solid #c8c6c4;
  border-radius: 4px;
  background: #fff;
  color: #323130;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.header-footer-add-grid button:hover,
.header-footer-add-grid button:focus-visible,
.header-footer-add-grid button.active {
  border-color: #008de1;
  background: rgba(0, 141, 225, 0.1);
  color: #008de1;
}
.header-footer-add-grid svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header-footer-hint,
.header-footer-empty-selection {
  margin: 0;
  color: #605e5c;
  font-size: 12px;
  line-height: 1.45;
}
.header-footer-editor-panel {
  overflow: hidden;
}
.header-footer-ruler {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #edebe9;
  color: #605e5c;
  font-size: 12px;
  font-weight: 650;
}
.header-footer-editor-surface {
  position: relative;
  height: var(--header-footer-editor-height, 132px);
  margin: 14px;
  overflow: hidden;
  border: 1px dashed rgba(0, 141, 225, 0.42);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(0, 141, 225, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(0, 141, 225, 0.05) 1px, transparent 1px),
    #fff;
  background-size: 36px 36px;
}
.header-footer-editor-surface.drawing-mode {
  cursor: crosshair;
}
.header-footer-draft-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}
.header-footer-draft-layer svg {
  display: block;
  width: 100%;
  height: 100%;
}
.header-footer-editor-item {
  position: absolute;
  display: flex;
  align-items: center;
  min-width: 16px;
  min-height: 14px;
  overflow: hidden;
  padding: 2px 4px;
  border: 1px solid rgba(96, 94, 92, 0.35);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.86);
  color: #201f1e;
  line-height: 1.2;
  white-space: pre-wrap;
  cursor: move;
  user-select: none;
}
.header-footer-editor-item.selected {
  border-color: #008de1;
  box-shadow: 0 0 0 2px rgba(0, 141, 225, 0.16);
}
.header-footer-editor-item img,
.header-footer-page-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.header-footer-editor-item .header-footer-drawing-svg,
.header-footer-page-item .header-footer-drawing-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.header-footer-item-resize {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 2px 0 2px 0;
  background: #008de1;
  cursor: nwse-resize;
}
.header-footer-properties h3 {
  margin: 0;
  color: #201f1e;
  font-size: 14px;
}
.header-footer-item-controls {
  display: grid;
  gap: 10px;
}
.header-footer-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.danger-light {
  color: #a4262c;
}
.header-footer-region {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
  background: rgba(0, 141, 225, 0.035);
}
.header-footer-header {
  border-bottom: 1px dashed rgba(0, 141, 225, 0.42);
}
.header-footer-footer {
  border-top: 1px dashed rgba(0, 141, 225, 0.42);
}
.header-footer-page-item {
  position: absolute;
  display: flex;
  align-items: center;
  min-width: 8px;
  min-height: 8px;
  overflow: hidden;
  padding: 0 2px;
  color: #201f1e;
  line-height: 1.2;
  white-space: pre-wrap;
  cursor: move;
  pointer-events: auto;
  user-select: none;
}
.header-footer-page-item.selected {
  outline: 1px solid #008de1;
  outline-offset: 2px;
  background: rgba(0, 141, 225, 0.06);
}
.header-footer-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #008de1;
  cursor: ns-resize;
  pointer-events: auto;
}
.header-footer-resize-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 141, 225, 0.28);
  transform: translate(-50%, -50%);
}
.header-footer-header .header-footer-resize-handle {
  bottom: -6px;
}
.header-footer-footer .header-footer-resize-handle {
  top: -6px;
}
.header-footer-export-box {
  pointer-events: none !important;
}
@media (max-width: 900px) {
  .header-footer-layout {
    grid-template-columns: 1fr;
  }
  .header-footer-body {
    max-height: calc(100vh - 150px);
  }
}
.signature-action-button {
  border-color: #d2d0ce !important;
  background: #f3f2f1 !important;
  color: #201f1e !important;
}
.signature-action-button:hover,
.signature-action-button:focus-visible {
  border-color: rgba(0, 141, 225, 0.26) !important;
  background: rgba(0, 141, 225, 0.1) !important;
  color: #006fb5 !important;
}
.text-box.signature-box.primary-selected.can-merge-drawings .signature-merge-button {
  background: #f3f2f1 !important;
}
.css-settings-popover:not(.label-settings-popover) .css-settings-scroll {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
.css-settings-popover:not(.label-settings-popover) .css-section summary {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  border: 1px solid #d2d0ce;
  background: #f3f2f1;
  text-align: center;
}
.css-settings-popover:not(.label-settings-popover) .css-section:first-of-type summary {
  grid-column: 1;
  border-radius: 6px 0 0 6px;
}
.css-settings-popover:not(.label-settings-popover) .css-section:nth-of-type(2) summary {
  grid-column: 2;
  border-left: 0;
  border-radius: 0 6px 6px 0;
}
.css-settings-popover:not(.label-settings-popover) .css-section[open] summary {
  border-color: rgba(0, 141, 225, 0.34);
  background: rgba(0, 141, 225, 0.12);
  color: #006fb5;
}
.css-settings-popover:not(.label-settings-popover) .css-section summary::after {
  display: none;
}
.css-settings-popover:not(.label-settings-popover) .css-section > .type-setting-row,
.css-settings-popover:not(.label-settings-popover) .css-section > label {
  grid-column: 1 / -1;
}
.css-settings-popover:not(.label-settings-popover) .css-section[open] > .type-setting-row:first-of-type {
  margin-top: 4px;
}
.css-settings-popover:not(.label-settings-popover) .css-copy-styles-button:hover,
.css-settings-popover:not(.label-settings-popover) .css-copy-styles-button:focus-visible {
  border-color: rgba(0, 141, 225, 0.4) !important;
  background: rgba(0, 141, 225, 0.18) !important;
  color: #003a7f !important;
}
.member-plan-price,
.subscriber-auth-button,
.tools-button[aria-expanded="true"],
.tools-button.active,
.preview-button.is-loading,
.freehand-pen-button.active,
body.freehand-mode .freehand-pen-button,
.download-button:not(:disabled) {
  color: #fff !important;
}
.label-control.open .label-settings-toggle::before,
.label-control.open .label-settings-toggle::after {
  display: none !important;
}
.alignment-menu-label {
  display: none !important;
}
.signature-action-button {
  border-color: #d6e5ea !important;
  background: #edf7f8 !important;
  color: #201f1e !important;
}
.signature-action-button:hover,
.signature-action-button:focus-visible {
  border-color: #c8c6c4 !important;
  background: #f3f2f1 !important;
  color: #201f1e !important;
}
.group-input-action-button {
  border-color: rgba(0, 141, 225, 0.34) !important;
  background: #ffffff !important;
  color: #201f1e !important;
}
.group-input-action-button:hover,
.group-input-action-button:focus-visible,
.group-input-action-button.active {
  border-color: rgba(0, 141, 225, 0.44) !important;
  background: #e5f8f5 !important;
  color: var(--accent-dark) !important;
}
.css-settings-popover:not(.label-settings-popover) {
  width: 276px;
  box-sizing: border-box;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px;
}
.css-settings-popover:not(.label-settings-popover) .css-settings-scroll {
  display: grid;
  gap: 10px;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.css-settings-popover:not(.label-settings-popover) .css-section {
  display: grid;
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.css-settings-popover:not(.label-settings-popover) .css-section + .css-section {
  padding-top: 10px;
  border-top: 1px solid #edebe9;
}
.css-settings-popover:not(.label-settings-popover) .css-section summary {
  min-height: 24px;
  color: #323130;
  font-size: 12px;
  font-weight: 800;
}
.css-settings-popover:not(.label-settings-popover) .type-setting-row {
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 9px 12px;
  align-items: center;
}
.css-settings-popover:not(.label-settings-popover) .type-setting-row > span {
  color: #605e5c;
  font-weight: 700;
}
.css-settings-popover:not(.label-settings-popover) .type-setting-row input,
.css-settings-popover:not(.label-settings-popover) .type-setting-row select {
  width: 100%;
  background: #fff !important;
}
.css-settings-popover:not(.label-settings-popover) .css-value-unit {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 46px;
}
.css-settings-popover:not(.label-settings-popover) .css-copy-styles-button {
  border-color: #d6e5ea !important;
  background: #edf7f8 !important;
  color: #201f1e !important;
}
.download-button:disabled {
  border-color: rgba(0, 141, 225, 0.24) !important;
  background: rgba(0, 141, 225, 0.12) !important;
  color: #006fb5 !important;
  opacity: 1 !important;
}
a,
.consistency-entry-link {
  color: #008de1 !important;
}
a:hover,
a:focus-visible,
.consistency-entry-link:hover {
  color: #006fb5 !important;
}
.canvas-panel.zoom-restoring {
  scroll-behavior: auto !important;
}
.function-ai-helper {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid #edebe9;
  border-radius: 4px;
  background: #fafafa;
}
.function-ai-helper-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.function-ai-helper-header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.function-ai-helper-header strong {
  color: #201f1e;
  font-size: 12px;
  line-height: 1.15;
}
.function-ai-helper-header span {
  color: #605e5c;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}
.function-ai-helper-header span.danger {
  color: #a4262c;
}
.function-ai-help-button,
.function-ai-apply-button {
  min-height: 31px;
  white-space: nowrap;
}
.function-ai-result {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border-radius: 4px;
  background: #fff;
  color: #323130;
  font-size: 12px;
  line-height: 1.35;
}
.function-ai-result p {
  margin: 0;
}
.function-ai-result code {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 6px 7px;
  border-radius: 3px;
  background: #f3f2f1;
  color: #201f1e;
  font: 700 12px/1.35 ui-monospace, Consolas, monospace;
}
.function-ai-result small {
  color: #605e5c;
  font-weight: 700;
}
:root {
  --bg: #f3f3f3;
  --accent: #008de1;
  --accent-dark: #006fb5;
  --soft-blue: #e7f6fb;
}
body,
.app-shell,
.workspace,
.canvas-panel,
.empty-state {
  background: #f3f3f3 !important;
  background-image: none !important;
}
.file-button,
.download-button,
.primary-button,
.add-page-button,
.subscriber-auth-button,
.calculator-grid .calculator-equals,
.tool-large-result {
  border-color: #008de1 !important;
  background: #008de1 !important;
}
.file-button:hover,
.download-button:hover,
.primary-button:hover,
.add-page-button:hover,
.subscriber-auth-button:hover,
.calculator-grid .calculator-equals:hover,
.tool-large-result:hover {
  border-color: #006fb5 !important;
  background: #006fb5 !important;
}
.join-button.member-active,
.join-button.subscriber-active,
.page-chip.active,
.preview-button.active,
.tools-button.active,
.freehand-pen-button.active,
.freehand-option-button.active,
.function-dropdown-helper-item.is-help-open .function-dropdown-icon-button,
.function-select-card:hover,
.function-field-list-item:hover,
.floating-zoom-controls button:hover,
.floating-zoom-controls button:focus-visible {
  background: #e7f6fb !important;
  color: #006fb5 !important;
}
.page-chip.active,
.function-field-preview-box.is-selected,
.function-field-list-item.is-selected {
  box-shadow: inset 3px 0 0 #008de1 !important;
}
.empty-mark {
  color: #006fb5 !important;
}
.empty-state:hover .empty-mark,
.empty-state:focus-visible .empty-mark,
.text-box.selected,
.text-box.primary-selected {
  border-color: #008de1 !important;
}
.page-stage.zoom-previewing {
  will-change: transform;
  transition: transform 0.12s cubic-bezier(0.2, 0.82, 0.22, 1);
}
.zoom-scroll-spacer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  visibility: hidden;
  pointer-events: none;
}
.editable:empty::before,
.text-box.compact-field .editable:empty::before,
.text-box.has-background-fill .editable:empty::before {
  content: none !important;
  display: none !important;
}
.css-settings-popover input,
.css-settings-popover select,
.css-settings-popover textarea,
.type-settings-popover input,
.type-settings-popover select,
.border-settings-popover input,
.border-settings-popover select {
  background: #fff !important;
}
.css-label-grid {
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 10px 12px;
}
.css-label-grid .type-setting-row > span,
.css-label-grid .type-setting-row-wide > span {
  justify-self: start;
}
.css-label-grid input,
.css-label-grid select {
  justify-self: stretch;
}
:root {
  --accent: #008de1 !important;
  --accent-dark: #006fb5 !important;
  --soft-blue: #eaf2ff !important;
}
::selection {
  background: rgba(0, 141, 225, 0.22) !important;
}
.primary-button,
.add-page-button,
.subscriber-auth-button,
.calculator-grid .calculator-equals,
.tool-large-result {
  border-color: #008de1 !important;
  background: #008de1 !important;
}
.primary-button:hover,
.add-page-button:hover,
.subscriber-auth-button:hover,
.calculator-grid .calculator-equals:hover,
.tool-large-result:hover {
  border-color: #006fb5 !important;
  background: #006fb5 !important;
}
.file-button,
.download-button,
.secondary-file-button {
  border-color: #c8c6c4 !important;
  background: #fff !important;
  color: #323130 !important;
}
.file-button:hover,
.file-button:focus-visible,
.download-button:hover,
.download-button:focus-visible,
.secondary-file-button:hover,
.secondary-file-button:focus-visible {
  border-color: #b8c2cc !important;
  background: #f3f3f3 !important;
  color: #201f1e !important;
  box-shadow: none !important;
  transform: none !important;
}
.text-box.selected,
.text-box.primary-selected,
.text-box.marquee-selected,
.empty-state:hover .empty-mark,
.empty-state:focus-visible .empty-mark {
  border-color: #008de1 !important;
}
.text-box.selected,
.text-box.primary-selected {
  box-shadow: 0 0 0 1px rgba(0, 141, 225, 0.22),
    0 2px 10px rgba(0, 141, 225, 0.16) !important;
}
.resize-handle,
.rotate-handle {
  background: #008de1 !important;
}
.alignment-menu {
  grid-template-columns: minmax(0, 1fr) !important;
  width: max-content;
  min-width: 158px;
  align-content: start;
}
.alignment-menu-section {
  display: grid;
  gap: 5px;
}
.alignment-menu-section + .alignment-menu-section {
  padding-top: 6px;
  border-top: 1px solid #edebe9;
}
.alignment-menu-label {
  color: #605e5c;
  font: 700 10px/1.2 var(--font);
  text-transform: uppercase;
}
.alignment-option-grid {
  display: grid;
  grid-template-columns: repeat(4, 31px);
  gap: 5px;
}
.alignment-option-grid-three {
  grid-template-columns: repeat(3, 31px);
}
.label-control {
  position: relative;
  display: inline-grid;
}
.label-control.open {
  z-index: 30;
}
.label-control.open .label-settings-toggle {
  border-color: var(--accent);
  background: var(--soft-mint);
  color: var(--accent-dark);
}
.label-control.open .label-settings-popover {
  display: grid;
}
.label-settings-popover {
  width: 276px;
  box-sizing: border-box;
  max-height: min(380px, var(--toolbar-popover-max-height, 380px)) !important;
  overflow-y: auto !important;
}
.label-settings-popover .css-label-grid {
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 9px 12px;
}
.label-settings-popover .type-setting-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  grid-column: 1 / -1;
  align-items: center;
}
.label-settings-popover .type-setting-row > span {
  color: #605e5c;
  font-weight: 700;
}
.label-settings-popover input,
.label-settings-popover select {
  background: #fff !important;
}
.function-field-list-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 8px;
}
.function-field-name-input {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #201f1e;
  font: 700 13px/1.2 var(--font);
}
.function-field-name-input:focus {
  border-color: #008de1;
  background: #fff;
  outline: none;
}
.function-field-preview-box {
  display: grid;
  place-items: start;
  overflow: hidden;
  padding: 2px 3px;
  border-color: rgba(0, 141, 225, 0.62) !important;
  background: rgba(0, 141, 225, 0.11) !important;
  color: #006fb5;
  font: 800 9px/1 var(--font);
  text-align: left;
  text-overflow: ellipsis;
}
.function-field-preview-box.selected,
.function-field-preview-box.is-selected {
  box-shadow: 0 0 0 4px rgba(0, 141, 225, 0.18) !important;
}
input:focus,
select:focus,
textarea:focus,
.find-replace-fields input[type="text"]:focus,
.select-where-fields input[type="text"]:focus,
.select-where-fields select:focus,
.pdf-password-body input:focus,
.save-dialog-fields input:focus,
.save-password-grid input:focus,
.credit-topup-controls input:focus {
  border-color: #008de1 !important;
  box-shadow: 0 0 0 2px rgba(0, 141, 225, 0.18) !important;
}
.join-button.member-active,
.join-button.subscriber-active,
.page-chip.active,
.guide-section h3,
.suggestion-source-section h3,
.suggestion-paste-section h3,
.suggestion-source-list-section h3,
.member-plan-heading h3,
.member-plan-card h3,
.member-content h3,
.credit-price-box,
.member-plan-pill,
.consistency-pill,
.context-helper-icon,
.member-badge,
.empty-mark {
  color: #006fb5 !important;
}
.page-chip.active,
.add-page-option:has(input:checked),
.consistency-issue.checked,
.member-plan-card.subscriber-plan-card,
.function-field-list-item.is-selected {
  box-shadow: inset 3px 0 0 #008de1 !important;
}
.member-plan-card li::before,
.member-plan-price,
.subscriber-auth-button,
.tools-button[aria-expanded="true"],
.freehand-pen-button.active,
.preview-button.is-loading {
  border-color: #008de1 !important;
  background: #008de1 !important;
}
.preview-button:hover,
.tools-button:hover,
.freehand-pen-button:hover,
.freehand-option-button:hover,
.preview-button:focus-visible,
.tools-button:focus-visible,
.freehand-pen-button:focus-visible,
.freehand-option-button:focus-visible {
  border-color: #008de1 !important;
  color: #006fb5 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16),
    0 0 0 2px rgba(0, 141, 225, 0.18) !important;
}
.box-selection-marquee,
.drag-field-preview-box {
  border-color: #008de1 !important;
  background: rgba(0, 141, 225, 0.14) !important;
}
.alignment-guide-line.vertical {
  border-left-color: rgba(0, 141, 225, 0.86) !important;
}
.alignment-guide-line.horizontal {
  border-top-color: rgba(0, 141, 225, 0.86) !important;
}
.alignment-guide-distance {
  color: #006fb5 !important;
}
.download-button:not(:disabled) {
  border-color: #008de1 !important;
  background: #008de1 !important;
  color: #fff !important;
}
.download-button:not(:disabled):hover,
.download-button:not(:disabled):focus-visible {
  border-color: #006fb5 !important;
  background: #006fb5 !important;
  color: #fff !important;
}
.tools-button[aria-expanded="true"],
.tools-button.active,
.freehand-pen-button.active,
body.freehand-mode .freehand-pen-button {
  border-color: #008de1 !important;
  background: #008de1 !important;
  color: #fff !important;
}
.text-box {
  border-color: rgba(0, 141, 225, 0.16) !important;
}
.text-box.selected,
.text-box.primary-selected,
.text-box.marquee-selected {
  border-color: #008de1 !important;
}
.box-toolbar.toolbar-near-top [data-tooltip]::before {
  top: calc(100% + 3px);
  bottom: auto;
  transform: translateX(-50%) translateY(-3px);
  border-color: transparent;
  border-bottom-color: var(--ink);
}
.box-toolbar.toolbar-near-top [data-tooltip]::after {
  top: calc(100% + 12px);
  bottom: auto;
  transform: translateX(-50%) translateY(-5px);
}
.box-toolbar.toolbar-near-top [data-tooltip]:hover::before,
.box-toolbar.toolbar-near-top [data-tooltip]:hover::after,
.box-toolbar.toolbar-near-top [data-tooltip]:focus-visible::before,
.box-toolbar.toolbar-near-top [data-tooltip]:focus-visible::after,
.box-toolbar.toolbar-near-top [data-tooltip]:focus-within::before,
.box-toolbar.toolbar-near-top [data-tooltip]:focus-within::after {
  transform: translateX(-50%) translateY(0);
}
.function-ai-result.is-error {
  border: 1px solid rgba(164, 38, 44, 0.28);
  background: #fff5f5;
  color: #a4262c;
}
.resize-handle {
  border: 2px solid #fff !important;
}
.rotate-handle,
.text-box.primary-selected > .rotate-handle {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.save-reminder[hidden],
.header-footer-function-tools[hidden],
.header-footer-image-tools[hidden],
.header-footer-ai-result[hidden],
.header-footer-ai-apply[hidden] {
  display: none !important;
}
.header-footer-region {
  z-index: 24 !important;
}
.header-footer-page-item {
  pointer-events: none !important;
  cursor: default !important;
}
.header-footer-resize-handle {
  z-index: 6 !important;
  height: 18px !important;
}
.header-footer-header .header-footer-resize-handle {
  bottom: -9px !important;
}
.header-footer-footer .header-footer-resize-handle {
  top: -9px !important;
}
.page-stage.zoom-previewing .box-toolbar {
  transform: rotate(var(--box-counter-rotation, 0deg))
    translateY(0)
    scale(calc(1 / var(--pdf-zoom-preview-scale, 1))) !important;
}
.css-settings-popover:not(.label-settings-popover) {
  width: 288px !important;
}
.css-settings-popover:not(.label-settings-popover) .css-settings-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
}
.css-settings-popover:not(.label-settings-popover) .css-section-tab {
  min-height: 36px;
  border: 1px solid #d7dce0;
  background: #f7f8f9;
  color: #323130;
  font: 700 12px/1 var(--font);
  cursor: pointer;
}
.css-settings-popover:not(.label-settings-popover) .css-section-tab:first-child {
  border-radius: 5px 0 0 5px;
}
.css-settings-popover:not(.label-settings-popover) .css-section-tab:last-child {
  border-left: 0;
  border-radius: 0 5px 5px 0;
}
.css-settings-popover:not(.label-settings-popover) .css-section-tab.active {
  border-color: rgba(0, 141, 225, 0.42);
  background: rgba(0, 141, 225, 0.12);
  color: #006fb5;
}
.css-settings-popover:not(.label-settings-popover) .css-settings-scroll {
  display: block !important;
}
.css-settings-popover:not(.label-settings-popover) .css-section-panel {
  display: grid !important;
  gap: 8px !important;
}
.css-settings-popover:not(.label-settings-popover) .css-section-panel[hidden] {
  display: none !important;
}
.css-settings-popover:not(.label-settings-popover) .css-section-panel.active > label {
  display: grid !important;
}
.css-settings-popover:not(.label-settings-popover) .css-section.css-section-panel.active:not([open]) > label.type-setting-row {
  display: grid !important;
}
.css-settings-popover:not(.label-settings-popover) .css-section-panel:not(.active) > label {
  display: none !important;
}
.css-settings-popover:not(.label-settings-popover) .css-section-panel .type-setting-row {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 0 !important;
}
.css-settings-popover:not(.label-settings-popover) .css-section-panel .type-setting-row > span:first-child {
  min-width: 0;
  color: #605e5c;
  font-weight: 700;
}
.css-settings-popover:not(.label-settings-popover) .css-section-panel input,
.css-settings-popover:not(.label-settings-popover) .css-section-panel select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.header-footer-modal {
  height: min(820px, calc(100vh - 40px)) !important;
  display: flex !important;
  flex-direction: column;
}
.header-footer-body {
  flex: 1 1 auto;
  min-height: 0;
}
.header-footer-layout {
  height: 100%;
  min-height: 0;
}
.header-footer-editor-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.header-footer-editor-surface {
  height: var(--header-footer-editor-height, 132px) !important;
  flex: 0 0 auto;
  max-height: calc(100% - 48px);
  transition: height 0.18s ease;
}
.header-footer-properties {
  height: 100%;
  min-height: 0;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
.header-footer-item-controls {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}
.header-footer-tabs button {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 12px !important;
}
.header-footer-tabs {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
}
.header-footer-region {
  pointer-events: auto !important;
}
.header-footer-edit-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 141, 225, 0.32);
  border-radius: 999px;
  background: #fff;
  color: #008de1;
  box-shadow: 0 8px 20px rgba(31, 45, 58, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}
.header-footer-region:hover .header-footer-edit-button,
.header-footer-region:focus-within .header-footer-edit-button {
  opacity: 1;
  transform: translateY(0);
}
.header-footer-edit-button:hover,
.header-footer-edit-button:focus-visible {
  background: #008de1;
  color: #fff;
}
.header-footer-edit-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header-footer-resize-handle {
  display: none !important;
}
.open-split-control {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.open-split-control .open-file-button {
  border-radius: 6px 0 0 6px !important;
  margin-right: 0 !important;
}
.open-menu-button {
  width: 34px;
  min-width: 34px;
  padding: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.32) !important;
  border-radius: 0 6px 6px 0 !important;
  display: inline-grid !important;
  place-items: center;
}
.open-menu-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.open-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 15000;
  width: 236px;
  padding: 12px;
  border: 1px solid #c8d2dc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  color: #201f1e;
}
.open-menu-new {
  display: grid;
  gap: 10px;
}
.open-menu-import {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e1e8ee;
}
.open-menu-new strong {
  font-size: 13px;
}
.open-menu-import strong {
  color: #201f1e;
  font-size: 13px;
}
.open-menu-new label {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: #605e5c;
  font: 700 12px/1.2 var(--font);
}
.open-menu-new input {
  width: 100%;
  min-height: 34px;
  border: 1px solid #c8d2dc;
  border-radius: 6px;
  background: #fff;
  padding: 0 8px;
  box-sizing: border-box;
  color: #201f1e;
}
.open-menu-new .secondary-button {
  width: 100%;
}
.open-menu-import .secondary-button {
  width: 100%;
  border: 1px solid #b8c6d1;
  background: #fff;
}
.open-menu-new #createNewDocumentBtn {
  border: 1px solid #b8c6d1;
  background: #fff;
}
.margin-ruler {
  position: absolute;
  left: 0;
  right: 0;
  top: -34px;
  height: 28px;
  display: grid;
  align-items: center;
  z-index: 28;
  pointer-events: auto;
  color: #323130;
  font: 700 10px/1 var(--font);
}
.margin-ruler-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 10px;
  border: 1px solid #c8d2dc;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(50, 49, 48, 0.28) 0 1px, transparent 1px 28px),
    #ffffff;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.08);
}
.margin-ruler-content {
  position: absolute;
  top: 9px;
  height: 10px;
  border-left: 2px solid #008de1;
  border-right: 2px solid #008de1;
  background: rgba(0, 141, 225, 0.10);
  pointer-events: none;
}
.margin-ruler-shade {
  position: absolute;
  top: 9px;
  height: 10px;
  background: rgba(96, 94, 92, 0.16);
  pointer-events: none;
}
.margin-ruler-shade.left {
  left: 0;
}
.margin-ruler-handle {
  position: absolute;
  top: 2px;
  width: 18px;
  height: 24px;
  border: 1px solid #8a98a8;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  cursor: ew-resize;
  transform: translateX(-50%);
}
.margin-ruler-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 99px;
  background: #008de1;
  transform: translateX(-50%);
}
.margin-ruler-toggle {
  position: absolute;
  right: 6px;
  top: -2px;
  min-width: 28px;
  height: 22px;
  border: 1px solid #c8d2dc;
  border-radius: 5px;
  background: #fff;
  color: #323130;
  font: 700 10px/1 var(--font);
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.10);
}
.margin-ruler-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(0, 141, 225, 0.55);
  pointer-events: none;
  z-index: 12;
}
.pdf-page.margins-visible {
  margin-top: 18px;
}
.pdf-page.margins-visible .annotation-layer::before,
.pdf-page.margins-visible .annotation-layer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0, 141, 225, 0.055);
  pointer-events: none;
  z-index: 1;
}
.pdf-page.margins-visible .annotation-layer::before {
  left: 0;
  width: var(--page-margin-left, 0px);
}
.pdf-page.margins-visible .annotation-layer::after {
  right: 0;
  width: var(--page-margin-right, 0px);
}
.function-field-preview-box.header-footer-preview-box {
  border-style: dashed;
  background: rgba(0, 141, 225, 0.18);
}
.topbar {
  position: relative !important;
  z-index: 50000 !important;
  overflow: visible !important;
}
.top-actions {
  position: relative !important;
  z-index: 50010 !important;
  overflow: visible !important;
}
.open-split-control {
  z-index: 50020 !important;
}
.open-menu {
  z-index: 70000 !important;
}
.save-reminder {
  z-index: 65000 !important;
}
.modal-backdrop {
  z-index: 80000 !important;
}
.header-footer-body {
  height: min(700px, calc(100vh - 138px)) !important;
  max-height: min(700px, calc(100vh - 138px)) !important;
  grid-template-rows: 40px minmax(0, 1fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
}
.header-footer-layout {
  height: 100% !important;
  min-height: 0 !important;
  align-items: stretch !important;
}
.header-footer-sidebar,
.header-footer-properties,
.header-footer-editor-panel {
  min-height: 0 !important;
}
.header-footer-sidebar,
.header-footer-properties {
  align-content: start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.header-footer-generate-button {
  width: 100%;
  min-height: 36px;
  margin-top: auto;
  border-color: #b8c7d8 !important;
  background: #fff !important;
  color: #201f1e !important;
}
.header-footer-generate-button:hover,
.header-footer-generate-button:focus-visible {
  border-color: rgba(0, 141, 225, 0.34) !important;
  background: rgba(0, 141, 225, 0.08) !important;
}
.header-footer-background-modal {
  width: min(560px, calc(100vw - 28px));
  border: 1px solid #d7dce0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(31, 45, 58, 0.24);
}
.header-footer-background-modal .modal-header p {
  margin: 4px 0 0;
  color: #605e5c;
  font-size: 13px;
}
.header-footer-ai-background {
  display: grid;
  gap: 12px;
  padding: 16px 18px 4px;
}
.header-footer-ai-background label {
  display: grid;
  gap: 6px;
  color: #605e5c;
  font-size: 12px;
  font-weight: 700;
}
.header-footer-ai-background textarea {
  min-height: 104px;
  max-height: 180px;
  resize: vertical;
}
.header-footer-ai-background-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.header-footer-ai-background-footer span {
  color: #605e5c;
  font-size: 12px;
  font-weight: 650;
}
.header-footer-ai-background-footer span.danger,
.header-footer-ai-background-footer span.is-over-limit {
  color: #b42318;
}
.header-footer-background-download {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  text-decoration: none;
  white-space: nowrap;
}
.header-footer-background-download[hidden] {
  display: none !important;
}
.unsaved-document-modal {
  width: min(470px, calc(100vw - 28px));
  border: 1px solid #d7dce0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(31, 45, 58, 0.24);
}
.unsaved-document-body {
  padding: 16px 18px 4px;
}
.unsaved-document-body p {
  margin: 0;
  color: #605e5c;
  line-height: 1.45;
}
.css-settings-popover:not(.label-settings-popover) {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(430px, var(--toolbar-popover-max-height, 430px)) !important;
  overflow: hidden !important;
}
.css-control:not(.open) > .css-settings-popover:not(.label-settings-popover) {
  display: none !important;
}
.css-control.open > .css-settings-popover:not(.label-settings-popover) {
  display: grid !important;
}
.css-settings-popover:not(.label-settings-popover) .css-settings-tabs {
  flex: 0 0 auto;
}
.css-settings-popover:not(.label-settings-popover) .css-settings-scroll {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 0 0 !important;
}
.css-settings-popover:not(.label-settings-popover) .css-section-panel {
  min-width: 0 !important;
  overflow: visible !important;
}
.css-settings-popover:not(.label-settings-popover) .type-setting-row,
.css-settings-popover:not(.label-settings-popover) .css-value-unit {
  min-width: 0 !important;
}
.css-settings-popover:not(.label-settings-popover) .css-copy-styles-button {
  flex: 0 0 auto;
  margin-top: 8px !important;
}
@media (max-width: 760px) {
  .header-footer-ai-background-footer {
    grid-template-columns: 1fr;
  }
}
.header-footer-editor-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}
.header-footer-functions-button {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid #b8c7d8 !important;
  background: #fff !important;
  color: #201f1e !important;
}
.header-footer-functions-button:hover,
.header-footer-functions-button:focus-visible {
  border-color: rgba(0, 141, 225, 0.42) !important;
  background: rgba(0, 141, 225, 0.08) !important;
  color: #006fb5 !important;
}
.header-footer-functions-icon {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  background: rgba(0, 141, 225, 0.11);
  color: #008de1;
  font: 800 15px/1 "Segoe UI", system-ui, sans-serif;
}
.margin-ruler {
  top: -58px !important;
  height: 52px !important;
  z-index: 180 !important;
}
.pdf-page.margins-visible {
  margin-top: 44px !important;
}
.margin-ruler-track,
.margin-ruler-content,
.margin-ruler-shade {
  top: 34px !important;
}
.margin-ruler-handle {
  top: 24px !important;
}
.margin-ruler-input {
  position: absolute;
  top: 0;
  width: 58px;
  height: 22px;
  padding: 0 4px;
  border: 1px solid #b8c7d8;
  border-radius: 5px;
  background: #fff;
  color: #201f1e;
  box-shadow: 0 2px 7px rgba(31, 45, 58, 0.12);
  font: 700 10px/1 var(--font);
  text-align: center;
  transform: translateX(-50%);
  box-sizing: border-box;
}
.margin-ruler-input:focus {
  border-color: #008de1;
  outline: 2px solid rgba(0, 141, 225, 0.16);
}
.margin-ruler-actions {
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px;
  border: 1px solid #c8d2dc;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 3px 10px rgba(31, 45, 58, 0.14);
  transform: translateX(-50%);
}
.margin-ruler-action {
  width: 24px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #605e5c;
  cursor: pointer;
}
.margin-ruler-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.margin-ruler-action:hover,
.margin-ruler-action:focus-visible,
.margin-ruler-action.active {
  background: rgba(0, 141, 225, 0.11);
  color: #008de1;
}

@media (max-width: 760px) {
  .topbar {
    min-height: 52px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px !important;
  }
  .brand {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    gap: 8px !important;
  }
  .brand-logo {
    width: 32px !important;
    height: 32px !important;
    padding: 3px !important;
  }
  .brand-wordmark {
    font-size: 17px !important;
  }
  .top-actions {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
  #helpBtn,
  #undoBtn,
  #redoBtn,
  .top-actions > label[for="saveInput"] {
    display: none;
  }
  .mobile-options-control {
    display: inline-flex;
    flex: 0 0 auto;
    order: 90;
  }
  #joinBtn {
    order: 100;
    flex: 0 0 auto;
  }
  .open-split-control {
    order: 20;
  }
  #saveBtn {
    order: 30;
  }
  .top-actions .file-button,
  .top-actions .join-button,
  .top-actions .top-icon-button {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
  .top-actions .top-icon-button {
    width: 32px !important;
    padding: 0 !important;
  }
  .top-actions .open-split-control {
    flex: 0 0 auto;
  }
  .mobile-zoom-controls {
    display: inline-flex !important;
  }
  .quick-tool-stack {
    z-index: 95;
  }
  .box-toolbar {
    z-index: 140 !important;
  }
  .text-mode-menu,
  .symbol-menu,
  .alignment-menu,
  .type-settings-popover,
  .border-settings-popover,
  .css-settings-popover,
  .label-settings-popover,
  .function-settings-popover {
    z-index: 160 !important;
    bottom: calc(var(--mobile-toolbar-bottom, 86px) + var(--mobile-toolbar-height, 92px) + 10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .type-settings-popover,
  .border-settings-popover,
  .css-settings-popover,
  .label-settings-popover,
  .function-settings-popover {
    max-height: min(58vh, calc(100dvh - var(--mobile-top-offset, 112px) - var(--mobile-toolbar-bottom, 86px) - var(--mobile-toolbar-height, 92px) - 28px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .form-builder-checkbox-field > .resize-handle,
  .form-builder-radio-field > .resize-handle {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .topbar {
    gap: 5px !important;
    padding-inline: 6px !important;
  }
  .brand-logo {
    display: none !important;
  }
  .brand-wordmark {
    font-size: 15px !important;
  }
  .top-actions {
    gap: 3px !important;
  }
  .top-actions .file-button,
  .top-actions .join-button,
  .top-actions .top-icon-button {
    padding: 0 7px !important;
    font-size: 12px !important;
  }
  .open-menu-button {
    width: 30px !important;
    min-width: 30px !important;
  }
}

body.practice-mode {
  min-height: 100vh;
  overflow: hidden;
  background: #f3f3f3 !important;
}

body.practice-mode .topbar,
body.practice-mode .page-panel,
body.practice-mode .bottombar,
body.practice-mode .floating-zoom-controls,
body.practice-mode .save-reminder {
  display: none !important;
}

body.practice-mode .app-shell,
body.practice-mode .workspace,
body.practice-mode .canvas-panel {
  width: 100%;
  height: 100vh;
  min-height: 0;
}

body.practice-mode .workspace {
  grid-template-columns: 1fr !important;
}

body.practice-mode .canvas-panel {
  padding: 18px !important;
  overflow: auto;
}

body.practice-mode .page-stage {
  align-items: flex-start;
  padding: 0;
}

.signature-library-popup {
  position: fixed;
  z-index: 260;
  width: min(360px, calc(100vw - 20px));
  max-height: min(420px, calc(100vh - 20px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(0, 141, 225, 0.22);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(32, 31, 30, 0.22);
}

.signature-library-popup[hidden] {
  display: none;
}

.signature-library-popup header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 14px;
}

.signature-picker-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
}

.signature-picker-search,
.signature-manager-search,
.signature-manager-name {
  width: 100%;
  min-height: 34px;
}

.signature-picker-list,
.signature-manager-list {
  display: grid;
  gap: 7px;
  overflow-y: auto;
}

.signature-picker-list {
  max-height: 238px;
}

.signature-picker-item,
.signature-manager-list-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.signature-picker-item:hover,
.signature-picker-item:focus-visible,
.signature-manager-list-item:hover,
.signature-manager-list-item:focus-visible,
.signature-manager-list-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 141, 225, 0.12);
  outline: none;
}

.signature-picker-item canvas,
.signature-manager-list-item canvas {
  flex: 0 0 auto;
  border: 1px solid rgba(219, 231, 239, 0.95);
  border-radius: 4px;
  background: #fff;
}

.signature-picker-item span,
.signature-manager-list-item span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signature-picker-empty,
.signature-manager-empty,
.signature-manager-status {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.signature-manager-status.is-error {
  color: var(--danger);
}

.signature-picker-draw-new {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fbff;
  color: var(--accent-dark);
  font-weight: 850;
  cursor: pointer;
}

.signature-manager-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  width: min(780px, 100%);
}

.signature-manager-list-pane,
.signature-manager-editor {
  display: grid;
  align-content: start;
  gap: 10px;
}

.signature-manager-list {
  max-height: 330px;
}

.signature-manager-name-row,
.signature-manager-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.signature-manager-drawing-wrap {
  display: grid;
  min-width: 0;
}

.signature-manager-canvas {
  display: block;
  width: 100%;
  height: 190px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

.signature-manager-canvas-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: -1px;
}

.signature-manager-canvas-actions {
  display: flex;
  flex: 0 0 auto;
  justify-self: end;
}

.signature-manager-icon-button,
.signature-manager-controls label {
  position: relative;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-right: 0;
  background: #f3f2f1;
  color: var(--ink);
  cursor: pointer;
}

.signature-manager-icon-button {
  width: 34px;
}

.signature-manager-icon-button:first-child {
  border-radius: 0 0 0 6px;
}

.signature-manager-icon-button:last-child {
  border-right: 1px solid var(--line);
  border-radius: 0 0 6px 0;
}

.signature-manager-icon-button:hover,
.signature-manager-icon-button:focus-visible {
  border-color: rgba(0, 141, 225, 0.28);
  background: rgba(0, 141, 225, 0.1);
  color: var(--accent-dark);
  outline: none;
}

.signature-manager-icon-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.signature-manager-upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.signature-manager-controls {
  display: flex;
  flex: 0 1 auto;
  align-items: flex-start;
  min-width: 0;
}

.signature-manager-controls label {
  gap: 0;
  min-width: 0;
  padding: 0 8px;
}

.signature-manager-controls label:first-child {
  border-radius: 0 0 0 6px;
}

.signature-manager-controls label:last-child {
  border-right: 1px solid var(--line);
  border-radius: 0 0 6px 0;
}

.signature-manager-controls label:hover,
.signature-manager-controls label:focus-within {
  border-color: rgba(0, 141, 225, 0.28);
  background: rgba(0, 141, 225, 0.1);
  color: var(--accent-dark);
}

.signature-manager-controls span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.signature-manager-colour-control {
  width: 98px;
}

.signature-manager-thickness-control {
  width: 126px;
}

.signature-manager-colour {
  width: 82px;
  min-height: 24px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.signature-manager-thickness {
  width: 100%;
  min-height: 24px;
  cursor: pointer;
}

.signature-manager-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.signature-manager-new,
.signature-manager-footer-actions .signature-manager-cancel {
  border: 1px solid #c8d6dd !important;
  background: #fff !important;
  color: #201f1e !important;
  box-shadow: none !important;
}

.signature-manager-new:hover,
.signature-manager-new:focus-visible,
.signature-manager-footer-actions .signature-manager-cancel:hover,
.signature-manager-footer-actions .signature-manager-cancel:focus-visible {
  border-color: #aebfc8 !important;
  background: #f3f2f1 !important;
  color: #201f1e !important;
  box-shadow: none !important;
  outline: none;
}

.signature-action-button {
  border-color: #d6e5ea !important;
  background: #f3f2f1 !important;
  color: #201f1e !important;
}

.signature-action-button:hover,
.signature-action-button:focus-visible {
  border-color: #9fd3ef !important;
  background: #e5f3fb !important;
  color: #006fb5 !important;
}

.text-box.drag-field-sampled {
  border-color: #008de1 !important;
  box-shadow: 0 0 0 1px rgba(0, 141, 225, 0.26),
    0 2px 10px rgba(0, 141, 225, 0.18) !important;
}

@media (max-width: 760px) {
  .signature-manager-layout {
    grid-template-columns: 1fr;
    width: min(520px, calc(100vw - 28px));
  }

  .signature-manager-canvas-footer {
    gap: 8px;
  }

  .signature-manager-thickness-control {
    width: min(116px, 35vw);
  }

  .signature-manager-footer-actions {
    justify-content: stretch;
  }

  .signature-manager-footer-actions button {
    flex: 1 1 130px;
  }
}

/* Screenshot blue overlay palette */
:root {
  --panel: #f8fafa !important;
  --ink: #162229 !important;
  --muted: #43688e !important;
  --logo: #093650 !important;
  --line: #d8e2e7 !important;
  --accent: #008de1 !important;
  --accent-dark: #006fb5 !important;
  --soft-mint: #f0f4f7 !important;
  --soft-blue: #e8f2f8 !important;
  --danger: #9f2c3d !important;
  --shadow: 0 18px 42px rgba(22, 34, 41, 0.11) !important;
}

body {
  background: #f0f4f7 !important;
  color: #162229 !important;
}

.app-shell,
.workspace,
.canvas-panel {
  background: #f0f4f7 !important;
}

.topbar,
.page-panel {
  background: #f8fafa !important;
  color: #162229 !important;
}

.topbar {
  border-bottom-color: #d8e2e7 !important;
  box-shadow: none !important;
}

.page-panel {
  border-right: 1px solid #c4d4dd !important;
  box-shadow: none !important;
}

.bottombar {
  border-top-color: #d8e2e7 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.panel-title,
.brand-wordmark,
.empty-state h2,
.modal-header h2,
.floating-tool-header h2,
.guide-section h3,
.suggestion-source-section h3,
.suggestion-paste-section h3,
.suggestion-source-list-section h3,
.member-plan-heading h3,
.member-plan-card h3,
.member-content h3,
.consistency-issue h3 {
  color: #162229 !important;
}

.brand-wordmark span,
.content-brand-pdf {
  background: #008de1 !important;
  color: #fff !important;
}

.empty-state {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #162229 !important;
}

.empty-state p,
.modal-header p,
.guide-credit-summary,
.suggestion-manager-note,
.grammar-member-prompt,
.member-notice,
.grammar-status-message,
.question-ai-status,
.consistency-consent,
.page-chip,
.tool-map-status {
  color: #43688e !important;
}

.empty-mark {
  background: #fff !important;
  color: #008de1 !important;
  box-shadow: 0 20px 54px rgba(9, 54, 80, 0.12) !important;
}

.file-button,
.secondary-file-button,
.top-icon-button,
.join-button,
.consistency-button,
.page-thumbnail-toggle,
.member-auth-button,
.context-helper-disable,
.guide-cookie-button,
.consistency-entry-link,
.context-helper-close,
.box-selection-tip-close,
.save-password-toggle,
.open-menu-button,
.mobile-options-menu button,
.page-context-menu button,
.pdf-context-menu button,
.answer-suggestion-option {
  border-color: #bfd2de !important;
  background: #fff !important;
  color: #162229 !important;
  box-shadow: none !important;
}

.file-button:hover,
.file-button:focus-visible,
.secondary-file-button:hover,
.secondary-file-button:focus-visible,
.top-icon-button:hover,
.top-icon-button:focus-visible,
.join-button:hover,
.join-button:focus-visible,
.consistency-button:hover,
.consistency-button:focus-visible,
.page-thumbnail-toggle:hover,
.page-thumbnail-toggle:focus-visible,
.member-auth-button:hover,
.member-auth-button:focus-visible,
.context-helper-disable:hover,
.context-helper-disable:focus-visible,
.guide-cookie-button:hover,
.guide-cookie-button:focus-visible,
.consistency-entry-link:hover,
.consistency-entry-link:focus-visible,
.context-helper-close:hover,
.context-helper-close:focus-visible,
.box-selection-tip-close:hover,
.box-selection-tip-close:focus-visible,
.save-password-toggle:hover,
.save-password-toggle:focus-visible,
.open-menu-button:hover,
.open-menu-button:focus-visible,
.mobile-options-menu button:hover:not(:disabled),
.mobile-options-menu button:focus-visible:not(:disabled),
.page-context-menu button:hover:not(:disabled),
.pdf-context-menu button:hover:not(:disabled),
.answer-suggestion-option:hover,
.answer-suggestion-option:focus-visible {
  border-color: #9fb8c8 !important;
  background: #eef5f9 !important;
  color: #162229 !important;
  box-shadow: none !important;
  transform: none !important;
}

.primary-button,
.add-page-button,
.member-plan-price,
.subscriber-auth-button,
.calculator-grid .calculator-equals,
.tool-large-result,
.tools-button[aria-expanded="true"],
.freehand-pen-button.active,
.preview-button.is-loading {
  border-color: #008de1 !important;
  background: #008de1 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.primary-button:hover,
.primary-button:focus-visible,
.add-page-button:hover,
.add-page-button:focus-visible,
.subscriber-auth-button:hover,
.subscriber-auth-button:focus-visible,
.calculator-grid .calculator-equals:hover,
.calculator-grid .calculator-equals:focus-visible,
.tool-large-result:hover,
.tool-large-result:focus-visible {
  border-color: #006fb5 !important;
  background: #006fb5 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

.download-button {
  border-color: #008de1 !important;
  background: #008de1 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.download-button:not(:disabled),
.download-button:disabled {
  border-color: #008de1 !important;
  background: #008de1 !important;
  color: #fff !important;
}

.download-button:hover,
.download-button:focus-visible {
  border-color: #006fb5 !important;
  background: #006fb5 !important;
  color: #fff !important;
  transform: none !important;
}

.download-button:disabled {
  opacity: 0.5 !important;
}

@media (max-width: 760px) {
  .bottombar {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .bottombar .consistency-button,
  .bottombar .download-actions {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .bottombar .consistency-button,
  .bottombar .download-button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .bottombar .download-actions {
    justify-content: stretch !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

.consistency-badge {
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  background: #008de1 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(0, 141, 225, 0.24) !important;
}

.page-chip.active,
.guide-section h3,
.suggestion-source-section h3,
.suggestion-paste-section h3,
.suggestion-source-list-section h3,
.preview-button:hover,
.tools-button:hover,
.freehand-pen-button:hover,
.freehand-option-button:hover,
.alignment-guide-distance {
  color: #008de1 !important;
}

.quick-circle-button,
.preview-button,
.tools-button,
.freehand-pen-button,
.freehand-option-button,
.floating-zoom-controls button,
.mobile-zoom-controls {
  border-color: #d8e2e7 !important;
  background: #f8fafa !important;
  color: #264a61 !important;
  box-shadow: 0 18px 40px rgba(22, 34, 41, 0.11) !important;
}

.quick-circle-button:hover,
.quick-circle-button:focus-visible,
.preview-button:hover,
.preview-button:focus-visible,
.tools-button:hover,
.tools-button:focus-visible,
.freehand-pen-button:hover,
.freehand-pen-button:focus-visible,
.freehand-option-button:hover,
.freehand-option-button:focus-visible,
.floating-zoom-controls button:hover,
.floating-zoom-controls button:focus-visible {
  border-color: #b6cad6 !important;
  background: #eef5f9 !important;
  color: #162229 !important;
  box-shadow: 0 18px 40px rgba(22, 34, 41, 0.12) !important;
}

.open-menu,
.mobile-options-menu,
.tools-menu,
.floating-tool-panel,
.page-context-menu,
.pdf-context-menu,
.box-toolbar,
.save-reminder,
.grammar-modal,
.function-modal,
.question-ai-modal,
.member-modal,
.consistency-modal,
.find-replace-modal,
.select-where-modal,
.add-page-modal,
.delete-page-modal,
.save-dialog-modal,
.pdf-password-modal,
.docx-credit-modal,
.suggestion-manager-modal,
.suggestion-source-edit-modal,
.box-selection-tip-modal,
.guide-modal,
.header-footer-modal,
.header-footer-background-modal,
.unsaved-document-modal {
  border-color: #c4d4dd !important;
  background: #fff !important;
  color: #162229 !important;
  box-shadow: 0 18px 42px rgba(22, 34, 41, 0.11) !important;
}

.modal-header,
.modal-actions,
.floating-tool-header,
.guide-credit-summary,
.suggestion-manager-note,
.grammar-member-prompt,
.member-notice,
.grammar-status-message,
.question-ai-status,
.consistency-power-control,
.consistency-consent,
.save-password-box,
.credit-price-box,
.member-plan-pill,
.consistency-pill,
.context-helper-icon,
.member-badge,
.add-page-option:has(input:checked),
.page-chip.active,
.consistency-issue.checked {
  border-color: #d8e2e7 !important;
  background: #f0f4f7 !important;
  color: #264a61 !important;
}

.type-settings-popover,
.border-settings-popover,
.css-settings-popover,
.function-settings-popover,
.alignment-menu,
.symbol-menu,
.signature-menu,
.text-mode-menu,
.answer-suggestion-popover {
  border-color: #c4d4dd !important;
  background: #fff !important;
  box-shadow: 0 18px 42px rgba(22, 34, 41, 0.11) !important;
}

.type-setting-row label,
.find-replace-fields label,
.select-where-fields label,
.pdf-password-body label,
.save-dialog-fields label,
.save-password-grid label,
.credit-topup-controls label,
.tool-field-grid label,
.tool-single-field {
  color: #43688e !important;
}

.type-setting-row input,
.type-setting-row select,
.find-replace-fields input,
.select-where-fields input,
.pdf-password-body input,
.save-dialog-fields input,
.save-password-grid input,
.credit-topup-controls input,
.credit-topup-controls select,
.suggestion-source-edit-textarea,
.tool-text-cleaner-input,
.signature-manager-name,
.signature-manager-search {
  border-color: #d8e2e7 !important;
  background: #fff !important;
  color: #162229 !important;
}

.text-box.selected,
.text-box.primary-selected,
.text-box.marquee-selected,
.text-box.drag-field-sampled {
  border-color: #008de1 !important;
  box-shadow: 0 0 0 1px rgba(0, 141, 225, 0.22),
    0 2px 10px rgba(0, 141, 225, 0.14) !important;
}

.text-box.pinned-box,
.text-box.pinned-box.selected,
.text-box.pinned-box.primary-selected,
.text-box.pinned-box.marquee-selected,
.text-box.pinned-box.drag-field-sampled {
  z-index: var(--box-layer, 1) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.resize-handle,
.rotate-handle {
  background: #008de1 !important;
}

.box-selection-marquee,
.drag-field-preview-box {
  border-color: #008de1 !important;
  background: rgba(0, 141, 225, 0.12) !important;
}

.tools-menu,
.floating-tool-panel {
  background: #f8fafa !important;
}

.floating-tool-body {
  background: #fff !important;
}

.brand-wordmark {
  align-items: center !important;
  gap: 4px !important;
}

.brand-wordmark span,
.content-brand-pdf {
  min-height: 0 !important;
  height: auto !important;
  padding: 3px 0.34em !important;
  border-radius: 3px !important;
  font-size: 0.52em !important;
  line-height: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  .box-toolbar {
    position: fixed !important;
    top: calc(var(--mobile-pages-bar-top, 72px) + 6px) !important;
    right: 8px !important;
    bottom: auto !important;
    left: 8px !important;
    z-index: 220 !important;
    width: auto !important;
    max-width: none !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 8px !important;
  }

  .quick-tool-stack,
  .mobile-zoom-controls {
    z-index: 120 !important;
  }

  body.mobile-textbox-selected .quick-tool-stack {
    display: none !important;
  }

  .text-mode-menu,
  .symbol-menu,
  .alignment-menu,
  .signature-menu,
  .type-settings-popover,
  .border-settings-popover,
  .css-settings-popover,
  .label-settings-popover,
  .function-settings-popover,
  .answer-suggestion-popover {
    position: fixed !important;
    top: calc(var(--mobile-pages-bar-top, 72px) + var(--mobile-toolbar-height, 56px) + 14px) !important;
    right: 8px !important;
    bottom: auto !important;
    left: 8px !important;
    z-index: 260 !important;
    max-height: min(
      58vh,
      calc(100dvh - var(--mobile-pages-bar-top, 72px) - var(--mobile-toolbar-height, 56px) - var(--mobile-bottom-offset, 72px) - 34px)
    ) !important;
  }

  .text-mode-menu,
  .symbol-menu,
  .alignment-menu,
  .signature-menu {
    left: auto !important;
    width: max-content !important;
    max-width: calc(100vw - 16px) !important;
  }

  .page-stage.zoom-previewing .box-toolbar {
    top: var(--mobile-toolbar-stage-top, calc(var(--mobile-pages-bar-top, 72px) + 6px)) !important;
    right: auto !important;
    left: var(--mobile-toolbar-stage-left, 8px) !important;
    width: var(--mobile-toolbar-stage-width, calc(100vw - 16px)) !important;
    transform-origin: left top !important;
    transform: rotate(var(--box-counter-rotation, 0deg))
      scale(calc(1 / var(--pdf-zoom-preview-scale, 1))) !important;
  }

  .page-stage.zoom-previewing .text-mode-menu,
  .page-stage.zoom-previewing .symbol-menu,
  .page-stage.zoom-previewing .alignment-menu,
  .page-stage.zoom-previewing .signature-menu,
  .page-stage.zoom-previewing .type-settings-popover,
  .page-stage.zoom-previewing .border-settings-popover,
  .page-stage.zoom-previewing .css-settings-popover,
  .page-stage.zoom-previewing .label-settings-popover,
  .page-stage.zoom-previewing .function-settings-popover,
  .page-stage.zoom-previewing .answer-suggestion-popover {
    top: var(--mobile-toolbar-popup-stage-top, calc(var(--mobile-pages-bar-top, 72px) + var(--mobile-toolbar-height, 56px) + 14px)) !important;
    right: auto !important;
    left: var(--mobile-toolbar-popup-stage-left, 8px) !important;
    width: var(--mobile-toolbar-popup-stage-width, calc(100vw - 16px)) !important;
    transform-origin: left top !important;
    transform: scale(calc(1 / var(--pdf-zoom-preview-scale, 1))) !important;
  }

  .mobile-toolbar-portal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 60000 !important;
    pointer-events: none !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled {
    position: fixed !important;
    top: var(--mobile-toolbar-fixed-top, calc(var(--mobile-pages-bar-top, 72px) + 6px)) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--mobile-toolbar-fixed-left, 8px) !important;
    z-index: 60001 !important;
    display: flex !important;
    width: var(--mobile-toolbar-fixed-width, calc(100vw - 16px)) !important;
    max-width: none !important;
    transform: none !important;
    transform-origin: left top !important;
    pointer-events: auto !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled.mobile-signature-toolbar-active .signature-toolbar-actions {
    display: flex !important;
    position: absolute !important;
    left: 6px !important;
    top: calc(100% - 1px) !important;
    z-index: 60004 !important;
    width: max-content !important;
    pointer-events: auto !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled.mobile-signature-toolbar-active:not(.can-merge-drawings) .signature-convert-button {
    border-right: 1px solid rgba(0, 141, 225, 0.34) !important;
    border-radius: 0 0 7px 0 !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled.mobile-signature-toolbar-active.can-merge-drawings .signature-merge-button {
    display: grid !important;
  }

  .signature-library-popup {
    z-index: 70050 !important;
  }

  .mobile-toolbar-portal .text-mode-menu,
  .mobile-toolbar-portal .symbol-menu,
  .mobile-toolbar-portal .alignment-menu,
  .mobile-toolbar-portal .signature-menu,
  .mobile-toolbar-portal .type-settings-popover,
  .mobile-toolbar-portal .border-settings-popover,
  .mobile-toolbar-portal .css-settings-popover,
  .mobile-toolbar-portal .label-settings-popover,
  .mobile-toolbar-portal .function-settings-popover,
  .mobile-toolbar-portal .answer-suggestion-popover {
    position: fixed !important;
    top: var(--mobile-toolbar-fixed-popup-top, calc(var(--mobile-pages-bar-top, 72px) + var(--mobile-toolbar-height, 56px) + 14px)) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--mobile-toolbar-fixed-popup-left, 8px) !important;
    z-index: 60002 !important;
    width: var(--mobile-toolbar-fixed-popup-width, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 760px) {
  .mobile-toolbar-portal .type-settings-popover,
  .mobile-toolbar-portal .css-settings-popover:not(.label-settings-popover) {
    box-sizing: border-box !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .mobile-toolbar-portal .type-settings-popover .type-setting-row,
  .mobile-toolbar-portal .type-settings-popover .type-setting-row-wide,
  .mobile-toolbar-portal .css-settings-popover:not(.label-settings-popover) .type-setting-row,
  .mobile-toolbar-portal .css-settings-popover:not(.label-settings-popover) .type-setting-row-wide {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px 10px !important;
    align-items: center !important;
    width: 100% !important;
  }

  .mobile-toolbar-portal .type-settings-popover .type-setting-row > span,
  .mobile-toolbar-portal .type-settings-popover .type-setting-row-wide > span,
  .mobile-toolbar-portal .css-settings-popover:not(.label-settings-popover) .type-setting-row > span,
  .mobile-toolbar-portal .css-settings-popover:not(.label-settings-popover) .type-setting-row-wide > span {
    min-width: 0 !important;
    color: #43688e !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
  }

  .mobile-toolbar-portal .type-settings-popover input,
  .mobile-toolbar-portal .type-settings-popover select,
  .mobile-toolbar-portal .css-settings-popover:not(.label-settings-popover) input,
  .mobile-toolbar-portal .css-settings-popover:not(.label-settings-popover) select {
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .mobile-toolbar-portal .css-settings-popover:not(.label-settings-popover) .css-value-unit {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
  }

  .mobile-toolbar-portal .css-settings-popover:not(.label-settings-popover) .css-pinned-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .mobile-toolbar-portal .css-settings-popover:not(.label-settings-popover) .css-toggle-control {
    justify-content: flex-start !important;
    width: 100% !important;
  }
}

.box-toolbar input.safe-colour-input,
.type-settings-popover .type-setting-row input.safe-colour-input,
.css-settings-popover .type-setting-row input.safe-colour-input,
.css-settings-popover .css-section-panel input.safe-colour-input,
.label-settings-popover input.safe-colour-input,
.freehand-popover input.safe-colour-input,
.signature-manager-colour-control input.safe-colour-input,
.mobile-toolbar-portal .type-settings-popover input.safe-colour-input,
.mobile-toolbar-portal .css-settings-popover input.safe-colour-input {
  padding-left: 30px !important;
  background:
    linear-gradient(to right, var(--colour-preview, #111111) 0 21px, #fff 21px 100%) !important;
}

.mobile-more-toggle,
.mobile-toolbar-more-bar {
  display: none;
}

@media (max-width: 760px) {
  .mobile-toolbar-more-bar {
    position: fixed !important;
    top: var(--mobile-more-toolbar-top, calc(var(--mobile-pages-bar-top, 72px) + 6px)) !important;
    left: var(--mobile-more-toolbar-left, 8px) !important;
    z-index: 60003 !important;
    box-sizing: border-box !important;
    width: var(--mobile-more-toolbar-width, calc(100vw - 16px)) !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 6px !important;
    border: 1px solid rgba(0, 141, 225, 0.2) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 14px 34px rgba(11, 64, 91, 0.18) !important;
    pointer-events: auto !important;
  }

  .mobile-toolbar-more-bar.open:not([hidden]) {
    display: flex !important;
  }

  .mobile-toolbar-more-bar .tool-button {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 1px solid rgba(17, 62, 87, 0.16) !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #113e57 !important;
    box-shadow: none !important;
  }

  .mobile-toolbar-more-bar .tool-button:hover,
  .mobile-toolbar-more-bar .tool-button:focus-visible,
  .mobile-toolbar-more-bar .tool-button.active {
    border-color: rgba(0, 141, 225, 0.36) !important;
    background: #eaf7ff !important;
    color: #0078c8 !important;
  }

  .mobile-toolbar-more-bar .tool-button svg {
    width: 17px !important;
    height: 17px !important;
  }

  .mobile-more-text-icon {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    font-weight: 850;
    line-height: 1;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: var(--mobile-toolbar-fixed-width, auto) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    min-height: 0 !important;
    padding: 5px !important;
    border: 1px solid rgba(0, 141, 225, 0.18) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 14px 32px rgba(11, 64, 91, 0.16) !important;
    overflow: visible !important;
    transition: opacity 0.16s ease, transform 0.16s ease !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled.mobile-toolbar-typing-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(6px) !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .move-button,
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .type-settings-toggle,
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled > [data-action="signature"],
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled > [data-action="delete"],
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .mobile-more-toggle {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 7px !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .symbol-control {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .symbol-control .check-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .symbol-picker-label {
    width: 20px !important;
    min-width: 20px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .type-control {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .mobile-more-toggle {
    display: inline-flex !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .text-mode-control,
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .alignment-toolbar-group,
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .css-control,
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .label-control {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .text-mode-toggle,
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .alignment-picker-toggle,
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .css-settings-toggle,
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .label-settings-toggle {
    display: none !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .text-mode-menu,
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .alignment-menu,
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .css-settings-popover,
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled .label-settings-popover {
    pointer-events: auto !important;
  }

  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled > [data-action="image"],
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled > [data-action="question-ai"],
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled > [data-action="grammar"],
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled > [data-action="copy"],
  .mobile-toolbar-portal > .box-toolbar.mobile-toolbar-portaled > [data-action="paste"] {
    display: none !important;
  }
}
@media (max-width: 760px) {
  .type-settings-popover,
  .border-settings-popover,
  .css-settings-popover,
  .label-settings-popover,
  .function-settings-popover,
  .answer-suggestion-popover {
    box-sizing: border-box !important;
    right: auto !important;
    left: 50vw !important;
    width: min(420px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    transform: translateX(-50%) !important;
  }
}
.mobile-toolbar-popover-header {
  display: none;
}

@media (max-width: 760px) {
  .mobile-toolbar-popover-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -10px -10px 8px;
    padding: 10px 10px 9px;
    border-bottom: 1px solid #d8e2e7;
    border-radius: 14px 14px 0 0;
    background: #ffffff;
    color: #162229;
    font: 850 14px/1.2 var(--font);
  }

  .mobile-toolbar-popover-close {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #c4d4dd;
    border-radius: 8px;
    background: #f0f6fa;
    color: #264a61;
    font: 850 20px/1 var(--font);
    cursor: pointer;
  }

  .mobile-toolbar-popover-close:hover,
  .mobile-toolbar-popover-close:focus-visible {
    border-color: #008de1;
    background: #e5f5ff;
    color: #0078c8;
    outline: none;
  }

  .type-settings-popover,
  .border-settings-popover,
  .css-settings-popover,
  .label-settings-popover,
  .function-settings-popover,
  .mobile-toolbar-portal .type-settings-popover,
  .mobile-toolbar-portal .border-settings-popover,
  .mobile-toolbar-portal .css-settings-popover,
  .mobile-toolbar-portal .label-settings-popover,
  .mobile-toolbar-portal .function-settings-popover {
    position: fixed !important;
    top: calc(var(--mobile-pages-bar-top, 72px) + 12px) !important;
    right: auto !important;
    bottom: max(calc(var(--mobile-bottom-offset, 72px) + 12px), calc(var(--mobile-keyboard-offset, 0px) + 12px)) !important;
    left: 50vw !important;
    z-index: 70040 !important;
    box-sizing: border-box !important;
    width: min(430px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid #c4d4dd !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 58px rgba(11, 64, 91, 0.22) !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
  }

  .type-control.open .type-settings-popover,
  .border-control.open .border-settings-popover,
  .css-control.open .css-settings-popover,
  .label-control.open .label-settings-popover,
  .function-control.open .function-settings-popover {
    display: grid !important;
  }

  .type-settings-popover::after,
  .border-settings-popover::after,
  .css-settings-popover::after,
  .label-settings-popover::after,
  .function-settings-popover::after {
    display: none !important;
  }

  .css-settings-popover:not(.label-settings-popover) {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }

  .css-settings-popover .css-settings-scroll {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  .label-settings-popover .css-label-grid {
    min-height: 0 !important;
  }

  .type-settings-popover .type-setting-row,
  .type-settings-popover .type-setting-row-wide,
  .border-settings-popover .type-setting-row,
  .border-settings-popover .type-setting-row-wide,
  .label-settings-popover .type-setting-row,
  .label-settings-popover .type-setting-row-wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 9px 12px !important;
    width: 100% !important;
  }

  .type-settings-popover input,
  .type-settings-popover select,
  .border-settings-popover input,
  .border-settings-popover select,
  .label-settings-popover input,
  .label-settings-popover select {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 760px) {
  .type-settings-popover,
  .border-settings-popover,
  .css-settings-popover,
  .label-settings-popover,
  .function-settings-popover,
  .mobile-toolbar-portal .type-settings-popover,
  .mobile-toolbar-portal .border-settings-popover,
  .mobile-toolbar-portal .css-settings-popover,
  .mobile-toolbar-portal .label-settings-popover,
  .mobile-toolbar-portal .function-settings-popover {
    top: calc(var(--mobile-pages-bar-top, 72px) + 10px) !important;
    bottom: calc(var(--mobile-bottom-offset, 72px) + 10px) !important;
    height: auto !important;
    max-height: calc(100dvh - var(--mobile-pages-bar-top, 72px) - var(--mobile-bottom-offset, 72px) - 20px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .css-settings-popover:not(.label-settings-popover),
  .label-settings-popover,
  .function-settings-popover,
  .mobile-toolbar-portal .css-settings-popover:not(.label-settings-popover),
  .mobile-toolbar-portal .label-settings-popover,
  .mobile-toolbar-portal .function-settings-popover {
    min-height: min(430px, calc(100dvh - var(--mobile-pages-bar-top, 72px) - var(--mobile-bottom-offset, 72px) - 20px)) !important;
  }

  .type-settings-popover,
  .border-settings-popover,
  .mobile-toolbar-portal .type-settings-popover,
  .mobile-toolbar-portal .border-settings-popover {
    min-height: min(300px, calc(100dvh - var(--mobile-pages-bar-top, 72px) - var(--mobile-bottom-offset, 72px) - 20px)) !important;
  }

  .css-settings-popover .css-settings-scroll,
  .mobile-toolbar-portal .css-settings-popover .css-settings-scroll {
    max-height: none !important;
    overflow-y: visible !important;
  }
}
@media (max-width: 760px) {
  .type-settings-popover,
  .border-settings-popover,
  .css-settings-popover,
  .label-settings-popover,
  .function-settings-popover,
  .mobile-toolbar-portal .type-settings-popover,
  .mobile-toolbar-portal .border-settings-popover,
  .mobile-toolbar-portal .css-settings-popover,
  .mobile-toolbar-portal .label-settings-popover,
  .mobile-toolbar-portal .function-settings-popover {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
  }
}
@media (max-width: 760px) {
  #previewControls,
  .preview-controls {
    display: none !important;
  }
}
.mobile-desktop-only-message {
  display: none;
}

@media (max-width: 900px), (pointer: coarse) and (max-width: 1200px) {
  body {
    min-height: 100dvh;
    overflow: auto;
    background: #eef5f9;
  }

  .app-shell {
    display: none !important;
  }

  .mobile-desktop-only-message {
    box-sizing: border-box;
    display: flex;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: 28px 18px;
    background:
      radial-gradient(circle at 50% 18%, rgba(0, 141, 225, 0.12), transparent 34%),
      linear-gradient(180deg, #f8fbfd 0%, #e9f2f7 100%);
    color: #162229;
  }

  .mobile-desktop-only-card {
    width: min(100%, 430px);
    border: 1px solid rgba(168, 193, 207, 0.78);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(22, 34, 41, 0.14);
  }

  .mobile-desktop-only-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 14px;
  }

  .mobile-desktop-only-card h1 {
    margin: 0 0 12px;
    color: #06273d;
    font-size: 24px;
    line-height: 1.15;
  }

  .mobile-desktop-only-card p {
    margin: 0;
    color: #315f78;
    font-size: 16px;
    line-height: 1.5;
  }

  .mobile-desktop-only-card .mobile-desktop-only-note {
    margin-top: 12px;
    color: #5d7f91;
    font-size: 14px;
  }
}