:root {
  color-scheme: light;
  --workspace-chrome: 157px;
  --ink: #242a33;
  --muted: #6b7280;
  --line: #d9dce1;
  --line-soft: #e9ebef;
  --surface: #fff;
  --canvas: #f4f5f7;
  --accent: #176b9a;
  --accent-soft: #e8f3f9;
  --paper: #fff;
}
@counter-style decimal-paren { system: extends decimal; suffix: ') '; }
@counter-style upper-roman-paren { system: extends upper-roman; suffix: ') '; }
@counter-style lower-roman-paren { system: extends lower-roman; suffix: ') '; }
@counter-style upper-alpha-paren { system: extends upper-alpha; suffix: ') '; }
@counter-style lower-alpha-paren { system: extends lower-alpha; suffix: ') '; }
@counter-style decimal-bracket { system: extends decimal; prefix: '('; suffix: ') '; }
@counter-style upper-roman-bracket { system: extends upper-roman; prefix: '('; suffix: ') '; }
@counter-style lower-roman-bracket { system: extends lower-roman; prefix: '('; suffix: ') '; }
@counter-style upper-alpha-bracket { system: extends upper-alpha; prefix: '('; suffix: ') '; }
@counter-style lower-alpha-bracket { system: extends lower-alpha; prefix: '('; suffix: ') '; }
body.header-collapsed { --workspace-chrome: 109px; }
body.tools-collapsed { --workspace-chrome: 73px; }
body.header-collapsed.tools-collapsed { --workspace-chrome: 25px; }
body.home-ribbon-active { --workspace-chrome: 157px; }
body.home-ribbon-active.header-collapsed { --workspace-chrome: 109px; }
body.home-ribbon-active.tools-collapsed { --workspace-chrome: 73px; }
body.home-ribbon-active.header-collapsed.tools-collapsed { --workspace-chrome: 25px; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { min-width: 360px; overflow: hidden; color: var(--ink); background: var(--surface); font: 13px 'DM Sans', Arial, sans-serif; }
button, input, select { color: inherit; font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-header { height: 48px; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line-soft); background: #fff; transition: height .28s ease, opacity .22s ease, padding .28s ease, transform .28s ease; }
body.header-collapsed .app-header { height: 0; padding-block: 0; border-bottom-width: 0; opacity: 0; transform: translateY(-100%); }
.editor-brand { flex: 0 0 auto; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -.02em; text-decoration: none; }
.app-launcher { width: 46px; height: 100%; flex: 0 0 46px; border: 0; background: #fff; font-size: 19px; }
.app-launcher:hover { background: #f0f2f4; }
.brand { display: grid; place-items: center; flex: 0 0 28px; color: #176b9a; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 26px; height: 27px; border: 1px solid #d8e6f0; border-radius: 4px; background: #edf6fb; font: 600 20px 'Noto Nastaliq Urdu', serif; }
.title-area { display: flex; align-items: center; gap: 9px; min-width: 0; }
.document-name { width: 170px; padding: 5px 7px; border: 1px solid #d9dce1; border-radius: 4px; outline: 0; background: #fff; font-size: 14px; }
.document-name:hover, .document-name:focus { border-color: #c8ccd2; background: #fff; }
.save-status { color: #6b7280; font-size: 11px; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.header-button { min-height: 30px; padding: 0 11px; border: 1px solid #d5d8dd; border-radius: 4px; background: #fff; font-size: 12px; }
.header-actions .header-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; }
.header-actions .header-button img { width: 18px; height: 18px; }
.header-button:hover { background: #f5f6f8; }
.print-action { color: #fff; border-color: #176b9a; background: #176b9a; }
.print-action:hover { background: #125b83; }
.print-action img { filter: brightness(0) invert(1); }

.tab-row { height: 36px; display: flex; align-items: stretch; gap: 2px; overflow-x: auto; overflow-y: hidden; padding: 0 12px 0 0; border-bottom: 1px solid var(--line); background: #fff; scrollbar-width: none; }
.tab-row::-webkit-scrollbar { display: none; }
.app-launcher { width: 38px; flex-basis: 38px; font-size: 18px; }
.tab-button { position: relative; min-width: 48px; flex: 0 0 auto; padding: 0 9px; border: 0; background: transparent; font-size: 12px; }
.tab-button:hover { background: #f7f8fa; }
.tab-button.active { font-weight: 600; }
.tab-button.active::after { position: absolute; right: 9px; bottom: 0; left: 9px; height: 2px; background: #176b9a; content: ''; }
.tab-spacer { flex: 1; }
.tab-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; margin-inline-start: auto; padding-inline-start: 6px; }
.focus-action { min-height: 27px; padding-inline: 9px; border-color: #d7dfef; border-radius: 5px; color: #344d80; font-size: 11px; }
.focus-action:hover { border-color: #b9c8e6; background: #f3f6fc; }
.typing-toggle { height: 27px; display: flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid #d8e5dc; border-radius: 5px; background: #f8fbf8; color: #52645a; font-size: 10px; transition: background .15s, border-color .15s, color .15s; }
.typing-toggle:hover { border-color: #a8c9b4; background: #f1f8f3; }
.typing-toggle.active { border-color: #a9d0b7; background: #eff8f1; color: #287047; }
.typing-toggle > span:last-child { white-space: nowrap; }
.typing-indicator { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #929aa4; }
.typing-toggle.active .typing-indicator { background: #2da568; }
.typing-toggle:not(.active) .typing-indicator { background: #9097a1; }
.help-button { width: 26px; height: 26px; display: grid; flex: 0 0 26px; place-items: center; border: 1px solid #d8dfe8; border-radius: 50%; background: #fff; color: #59677b; font-size: 12px; font-weight: 600; }
.help-button:hover { border-color: #aebdd8; background: #f4f7fc; color: #3453bd; }
.bar-toggle { width: 26px; height: 22px; display: inline-grid; place-items: center; flex: 0 0 26px; padding: 2px; border: 1px solid #d9dce1; border-radius: 4px; background: #fff; }
.bar-toggle:hover { border-color: #aebbd5; background: #f4f6fa; }
.bar-toggle img { width: 16px; height: 16px; transition: transform .25s ease; }
.bar-toggle[aria-expanded="true"] img { transform: rotate(180deg); }
.header-toggle { width: 27px; height: 27px; flex-basis: 27px; margin: 0; border-color: #d8dfe8; border-radius: 5px; }
.header-toggle img { width: 15px; height: 15px; }

.ribbon-shell { position: relative; height: 42px; transition: height .28s ease; }
.ribbon { position: absolute; inset: 0 0 auto; height: 42px; overflow-x: auto; overflow-y: hidden; padding-right: 42px; border-bottom: 1px solid #cfd3d9; background: #fff; scrollbar-width: none; transition: transform .28s ease, opacity .2s ease; }
.ribbon::-webkit-scrollbar { display: none; }
.ribbon-shell.home-ribbon, .ribbon-shell.home-ribbon .ribbon { height: 42px; }
[data-panel="insert"].active .insert-ribbon-group { min-height: 41px; justify-content: center; gap: 2px; padding: 2px 7px; border-right-color: #e2e7ee; }
[data-panel="insert"].active .insert-action { min-height: 36px; min-width: 48px; flex-direction: column; gap: 0; padding: 2px 5px; border: 1px solid transparent; border-radius: 5px; color: #303a49; font-size: 9px; font-weight: 500; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
[data-panel="insert"].active .insert-action:hover, [data-panel="insert"].active .insert-action:focus-visible { border-color: #d6e7f2; outline: none; background: #eff7fc; color: #145f8b; box-shadow: 0 2px 5px #1b5c7d12; }
[data-panel="insert"].active .insert-action:active { transform: translateY(1px); }
[data-panel="insert"].active .insert-action > img, [data-panel="insert"].active .insert-action > .insert-glyph { width: 17px; height: 17px; }
[data-panel="insert"].active .insert-action > img { padding: 1px; border-radius: 3px; object-fit: contain; }
[data-panel="insert"].active .footer-insert-action > img { transform: rotate(180deg); }
[data-panel="insert"].active .insert-action > .insert-glyph { color: #176b9a; font-size: 15px; }
[data-panel="insert"].active .insert-action > span:not(.insert-glyph) { color: #3d4858; font-size: 9px; line-height: 11px; }
.tools-toggle { position: absolute; z-index: 2; right: 12px; bottom: 0; }
body.tools-collapsed .ribbon-shell { height: 18px; }
body.tools-collapsed .ribbon { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.ribbon-panel { display: none; width: max-content; min-width: 100%; height: 100%; align-items: stretch; }
.ribbon-panel.active { display: flex; }
.home-panel.active { display: flex; width: max-content; min-width: 100%; height: 100%; flex-wrap: nowrap; align-items: stretch; }
.home-panel .ribbon-group { flex: 0 0 auto; }
.ribbon-group { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 7px; border-right: 1px solid var(--line-soft); }
.ribbon-group:last-child { border-right: 0; }
.view-ribbon-group { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 4px; padding: 2px 7px; }
.view-action { min-width: 56px; height: 35px; display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #303a49; font-size: 9px; font-weight: 500; line-height: 12px; white-space: nowrap; }
.view-action:hover, .view-action:focus-visible, .view-action[aria-pressed="true"] { border-color: #d6e7f2; outline: none; background: #eff7fc; color: #145f8b; }
.view-glyph { height: 17px; font: 16px/17px Arial, sans-serif; }
.view-zoom-group { flex-direction: row; align-items: center; gap: 3px; padding-inline: 8px; }
.view-zoom-group input[type="range"] { width: 82px; accent-color: #176b9a; }
.view-ribbon-group .group-caption { display: none; }
.help-ribbon-group { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 4px; padding: 2px 8px; }
.help-ribbon-action { min-width: 62px; height: 35px; display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #303a49; font-size: 9px; font-weight: 500; line-height: 12px; text-decoration: none; white-space: nowrap; }
.help-ribbon-action:hover, .help-ribbon-action:focus-visible { border-color: #d6e7f2; outline: none; background: #eff7fc; color: #145f8b; }
.help-ribbon-glyph { height: 17px; font: 16px/17px Arial, sans-serif; }
.control-row { min-height: 25px; display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
.home-panel .command-group { display: flex; flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1px; padding: 4px 7px; border-right: 1px solid var(--line-soft); }
.home-panel .format-group { flex: 0 0 auto; }
.home-panel .paragraph-group { min-width: 0; flex-direction: row; align-items: center; gap: 2px; }
.home-panel .paragraph-group .control-row { display: contents; }
.home-panel .editing-group { min-width: 0; flex-direction: row; align-items: center; gap: 3px; padding-inline: 7px; }
.home-panel .editing-group .ribbon-action { flex: 0 0 auto; }
.clipboard-tool img { width: 16px; height: 16px; object-fit: contain; }
.stack-tools { display: flex; gap: 7px; }
.icon-button { min-width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #3d4652; font-size: 14px; }
.icon-button:hover, .icon-button.is-active { border-color: #c7dce9; background: var(--accent-soft); color: #145f8b; }
.text-tool { font-family: Arial, sans-serif; }
.ribbon-select { height: 25px; padding: 0 7px; border: 1px solid #cdd1d7; border-radius: 2px; background: #fff; font-size: 11px; }
.font-family-control { position: relative; display: inline-flex; flex: 0 0 auto; }
.font-family-control::after { position: absolute; top: 50%; right: 7px; color: #424b57; content: '▾'; font-size: 10px; line-height: 1; transform: translateY(-50%); pointer-events: none; }
.font-select { width: auto; max-width: 230px; padding: 0 22px 0 6px; overflow: hidden; color: transparent; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: normal; }
.font-select option { max-width: 230px; overflow: hidden; color: #242a33; font-size: 12px; }
.font-family-preview { position: absolute; inset: 0 21px 0 5px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #242a33; direction: ltr; font-size: 11px; line-height: normal; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.font-size-control { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; }
.size-input { width: 38px; padding: 0 3px; text-align: center; border-radius: 2px 0 0 2px; }
.font-size-toggle { width: 20px; height: 25px; padding: 0; border: 1px solid #cdd1d7; border-left: 0; border-radius: 0 2px 2px 0; background: #fff; color: #424b57; cursor: pointer; }
.font-size-toggle:hover { background: #f2f5f7; }
.font-size-menu { position: fixed; z-index: 1000; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; width: 132px; padding: 5px; border: 1px solid #cdd1d7; border-radius: 4px; background: #fff; box-shadow: 0 4px 12px #0003; }
.font-size-menu[hidden] { display: none; }
.font-size-menu button { min-width: 0; height: 25px; border: 0; border-radius: 3px; background: transparent; color: #333; cursor: pointer; font-size: 12px; }
.font-size-menu button:hover, .font-size-menu button:focus-visible { background: var(--accent-soft); color: #145f8b; outline: none; }
.format-group .text-tool { width: 25px; }
.italic-tool em { font: italic 400 15px Georgia, 'Times New Roman', serif; }
.ribbon-divider { width: 1px; height: 20px; margin: 0 3px; background: #dfe2e6; }
.color-picker { position: relative; display: flex; align-items: center; }
.color-tool { position: relative; width: 27px; height: 25px; display: inline-grid; place-items: center; border: 0; border-radius: 3px; background: transparent; cursor: pointer; font-weight: 700; }
.color-tool:hover { background: #f0f2f4; }
.color-tool > span { position: absolute; right: 4px; bottom: 2px; left: 4px; height: 3px; background: #26334a; }
.highlight-tool > span { background: #fff1a8; }
.color-palette { position: fixed; z-index: 20; top: 0; left: 0; display: none; width: 222px; grid-template-columns: repeat(10, 16px); gap: 5px; padding: 9px; border: 1px solid #c8c8c8; background: #fff; box-shadow: 0 3px 10px #0002; }
.color-picker.open .color-palette { display: grid; }
.color-swatch { width: 16px; height: 16px; padding: 0; border: 1px solid #d2d2d2; }
.color-swatch:hover, .color-swatch:focus-visible { outline: 2px solid #176b9a; outline-offset: 1px; }
.standard-colors-label { grid-column: 1 / -1; padding-top: 5px; border-top: 1px solid #ddd; color: #46505d; font-size: 10px; }
.more-colors { position: relative; grid-column: 1 / -1; padding: 4px 0 0; border-top: 1px solid #ddd; color: #176b9a; cursor: pointer; font-size: 11px; }
.more-colors input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.group-caption { display: none; }
.paragraph-group { min-width: 0; padding: 4px 0 4px 5px; }
.paragraph-toolbar { display: flex; align-items: center; gap: 2px; }
.list-tools, .alignment-tools, .indent-tools { display: flex; align-items: center; gap: 1px; }
.alignment-tools { width: auto; flex: 0 0 auto; justify-content: flex-start; gap: 1px; }
.split-tool { display: inline-flex; align-items: center; }
.split-tool .list-main { min-width: 25px; width: 25px; padding-inline: 3px; border-radius: 3px 0 0 3px; }
.list-tool-icon { width: 17px; height: 17px; display: block; overflow: visible; fill: #111; stroke: #111; stroke-linecap: round; stroke-width: 1; }
.list-tool-icon path { fill: none; }
.number-tool-icon text { stroke: none; font: 5px Arial, sans-serif; }
.split-tool .split-arrow { width: 14px; min-width: 14px; padding: 0; border-radius: 0 3px 3px 0; font-size: 8px; }
.alignment-button { width: 22px; min-width: 22px; padding: 0; }
.alignment-button.active { border-color: #c7cbd1; background: #f0f1f3; }
.align-glyph { width: 14px; height: 14px; display: block; fill: none; stroke: #505967; stroke-linecap: round; stroke-width: 1.2; }
.paragraph-tool-main { width: 24px; min-width: 24px; padding: 0 3px; border-radius: 3px 0 0 3px; }
.paragraph-tool-icon { width: 17px; height: 17px; display: block; fill: none; stroke: #505967; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.1; }
.paragraph-menu { position: fixed; z-index: 1000; min-width: 210px; padding: 10px; border: 1px solid #c8cdd4; border-radius: 3px; background: #fff; color: #20252b; box-shadow: 0 4px 14px #0003; }
.paragraph-menu[hidden] { display: none; }
.paragraph-menu > strong { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.bullet-options { display: grid; grid-template-columns: repeat(6, 34px); gap: 3px; }
.bullet-options button { width: 34px; height: 34px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: #111; font: 17px Arial, sans-serif; }
.bullet-options button:hover, .numbering-options button:hover, .spacing-menu button:hover, .paragraph-menu button:focus-visible { border-color: #9bbbd0; outline: 1px solid #b9d3e3; background: #f0f7fb; color: #111; }
.numbering-menu { width: 376px; }
.numbering-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.numbering-options button { min-width: 0; height: 43px; display: flex; align-items: center; gap: 5px; padding: 3px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: #111; text-align: left; }
.numbering-options button span { width: 33px; flex: 0 0 33px; font: 12px/13px Arial, sans-serif; }
.numbering-options button i { height: 1px; flex: 1; background: #b9bdc2; }
.spacing-menu { min-width: 155px; padding: 6px; border-color: #c8cdd4; background: #fff; color: #20252b; }
.spacing-menu button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 5px 7px; border: 0; border-radius: 2px; background: transparent; color: inherit; text-align: left; font-size: 11px; }
.spacing-menu button span { white-space: nowrap; }
.spacing-menu > strong { margin: 2px 7px 6px; }
.menu-separator { height: 1px; margin: 4px 0; background: #d8dce1; }
.indent-menu { min-width: 135px; }
.spacing-menu button:hover, .spacing-menu button:focus-visible { border-color: #9bbbd0; outline: 1px solid #b9d3e3; background: #f0f7fb; color: #111; }
.line-spacing { display: flex; align-items: center; gap: 3px; color: #59616c; }
.line-spacing[hidden] { display: none; }
.line-spacing select { width: 45px; border: 0; background: transparent; font-size: 10px; }
.style-group { min-width: 158px; }
.style-preview { width: 120px; height: 55px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 11px; border: 1px solid #bfc5cc; border-radius: 3px; background: #fff; text-align: left; }
.style-preview:hover { border-color: #176b9a; background: #f6fbfe; }
.style-preview strong { font-size: 12px; font-weight: 500; }
.style-preview small { color: #747b85; font-size: 9px; }
.editing-group { min-width: 80px; align-items: flex-start; }
.ribbon-action { min-height: 21px; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; text-align: left; font-size: 11px; }
.ribbon-action:hover, .insert-action:hover { color: #176b9a; background: #f4f8fb; }
.insert-group { min-width: 0; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 3px; padding: 4px 7px; }
.insert-action { min-width: 0; min-height: 29px; display: inline-flex; flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: center; gap: 5px; padding: 3px 7px; border: 0; border-radius: 3px; background: transparent; font-size: 11px; white-space: nowrap; }
.insert-action > img { width: 19px; height: 19px; object-fit: contain; }
.insert-action > .insert-glyph { color: #176b9a; font-size: 17px; line-height: 1; }
.insert-action > .insert-glyph { display: inline-grid; width: 19px; height: 19px; place-items: center; }
.layout-group { min-width: 0; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; padding-inline: 7px; }
.layout-group label { display: flex; flex-direction: row; align-items: center; gap: 5px; color: #616974; font-size: 10px; white-space: nowrap; }
.layout-page-setup, .layout-background-group { position: relative; height: 42px; gap: 2px; padding: 1px 6px; }
.layout-action { position: relative; min-width: 47px; height: 38px; display: inline-flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 1px 4px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #354052; font-size: 9px; line-height: 11px; white-space: nowrap; }
.layout-action:hover, .layout-action:focus-visible, .layout-menu-trigger[aria-expanded="true"] { border-color: #d4e5ef; outline: none; background: #eef6fb; color: #145f8b; }
.layout-glyph { width: 18px; height: 18px; display: block; color: #111; font: 17px/18px Arial, sans-serif; object-fit: contain; }
.orientation-glyph { color: #111; }
.layout-menu { position: fixed; z-index: 1100; display: grid; min-width: 190px; gap: 2px; padding: 7px; border: 1px solid #cbd2dc; border-radius: 6px; background: #fff; color: #303a49; box-shadow: 0 6px 20px #1720332b; }
.layout-menu[hidden] { display: none; }
.layout-menu > strong { padding: 4px 7px 6px; border-bottom: 1px solid #e7eaf0; color: #435166; font-size: 11px; font-weight: 600; }
.layout-menu > button { min-height: 30px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 4px 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #303a49; text-align: left; font-size: 11px; }
.layout-menu > button:hover, .layout-menu > button:focus-visible { border-color: #d8e8f2; outline: none; background: #eff7fc; }
.layout-menu > button small { color: #758092; font-size: 9px; line-height: 12px; }
.layout-menu .layout-menu-primary { align-items: center; border-color: #176b9a; background: #176b9a; color: #fff; }
.layout-menu .layout-menu-primary:hover, .layout-menu .layout-menu-primary:focus-visible { border-color: #125b83; background: #125b83; color: #fff; }
.layout-custom-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; padding: 7px; border-top: 1px solid #e7eaf0; }
.layout-custom-fields label { display: flex; align-items: center; gap: 3px; color: #606b7b; font-size: 10px; }
.layout-custom-fields input { width: 46px; height: 25px; padding: 2px 4px; border: 1px solid #d4d9e0; border-radius: 3px; font-size: 10px; }
.layout-background-group { gap: 3px; }
.layout-color-action { cursor: pointer; }
.layout-color-action input { position: absolute; right: 5px; bottom: 3px; width: 12px; height: 3px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.layout-color-action input::-webkit-color-swatch-wrapper { padding: 0; }
.layout-color-action input::-webkit-color-swatch { border: 0; }
.paper[data-line-numbering="continuous"] > p::before,
.paper[data-line-numbering="restart"] > p::before { display: inline-block; min-width: 28px; margin-inline-end: 8px; color: #7d8795; direction: ltr; font: 10px/1.8 'DM Sans', Arial, sans-serif; text-align: left; content: attr(data-layout-line); }
.paper[data-column-count="2"] { column-count: 2; column-gap: 36px; }
.paper[data-column-count="3"] { column-count: 3; column-gap: 26px; }
.paper .page-break { column-span: all; }
.paper .column-break { break-before: column; }
.paper .document-header, .paper .document-footer { column-span: all; }
.paper.hide-document-header .document-header, .paper.hide-document-footer .document-footer { display: none; }
.paper[data-page-border="solid"] { outline: 1px solid #697586; outline-offset: -12px; }
.paper[data-page-border="double"] { outline: 3px double #697586; outline-offset: -12px; }
.insert-menu { position: fixed; z-index: 1000; padding: 10px; border: 1px solid #c8cdd4; border-radius: 3px; background: #fff; color: #20252b; box-shadow: 0 4px 14px #0003; }
.insert-menu[hidden] { display: none; }
.insert-menu > strong { display: block; margin: 0 0 8px; color: #176b9a; font-size: 12px; font-weight: 600; }
.table-menu { width: 190px; }
.table-picker-grid { display: grid; grid-template-columns: repeat(8, 20px); grid-template-rows: repeat(10, 16px); gap: 1px; }
.table-picker-grid button { min-width: 0; padding: 0; border: 1px solid #969696; background: #fff; }
.table-picker-grid button:hover, .table-picker-grid button.selected { border-color: #176b9a; background: #d8edf8; }
.table-menu output { display: block; margin-top: 8px; color: #59616c; font-size: 11px; }
.page-number-menu { width: 224px; }
.page-number-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 3px 0 9px; border-bottom: 1px solid var(--line-soft); }
.page-number-presets button { height: 58px; display: flex; flex-direction: column; justify-content: space-between; padding: 5px; border: 1px solid #c8cdd4; background: #fff; color: #176b9a; text-align: left; font-size: 10px; }
.page-number-presets button:nth-child(3n + 2) { align-items: center; }
.page-number-presets button:nth-child(3n) { align-items: flex-end; }
.page-number-presets button:nth-child(n + 4) { justify-content: flex-end; }
.page-number-presets button:hover { border-color: #176b9a; background: var(--accent-soft); }
.page-number-presets button span { color: var(--muted); font-size: 8px; white-space: nowrap; }
.include-page-count { display: flex; align-items: center; gap: 6px; padding: 8px 0; color: #3f4650; font-size: 11px; }
.include-page-count input { margin: 0; accent-color: var(--accent); }
.insert-menu-link { width: 100%; padding: 6px 0 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: #176b9a; text-align: left; font-size: 11px; }
.emoji-menu { width: 222px; }
.emoji-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.emoji-grid button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 4px; background: transparent; font: 20px/1 Arial, sans-serif; }
.emoji-grid button:hover, .emoji-grid button:focus-visible { outline: 1px solid #c5ddeb; background: #eef7fb; }
.document-header, .document-footer { min-height: 36px; direction: ltr; font: 12px/1.4 'DM Sans', Arial, sans-serif; }
.document-header { margin-bottom: 14px; padding-bottom: 6px; border-bottom: 1px solid #d9dce1; }
.document-footer { margin-top: 18px; padding-top: 6px; border-top: 1px solid #d9dce1; }
.document-header p, .document-footer p { min-height: 1em; margin: 0; text-indent: 0; }
.paper [data-page-number-field] { direction: ltr; unicode-bidi: isolate; }
.layout-group .ribbon-select { min-width: 95px; }
.layout-group .group-caption { bottom: 3px; }
.layout-group input[type="range"] { width: 100px; accent-color: #176b9a; }
.zoom-label { min-width: 36px; font-size: 11px; }

.document-workspace { height: calc(100vh - var(--workspace-chrome)); min-height: 0; display: flex; overflow-x: hidden; overflow-y: auto; background: var(--canvas); transition: height .28s ease; }
.keyboard-sidebar { position: sticky; top: 0; width: 326px; height: 100%; flex: 0 0 326px; overflow: auto; padding: 34px 12px 14px; }
.keyboard-toggle { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d5d8dd; border-radius: 5px; background: #fff; color: #344154; font-size: 12px; }
.keyboard-toggle:hover, .keyboard-toggle[aria-expanded="true"] { border-color: #9bbbd0; background: #f0f7fb; }
.onscreen-keyboard { margin-top: 8px; padding: 9px; border: 1px solid #d9dce1; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px #17203314; }
.onscreen-keyboard[hidden] { display: none; }
.keyboard-heading { margin-bottom: 8px; color: #515c6b; font-size: 11px; font-weight: 600; text-align: center; }
.keyboard-layout-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-bottom: 8px; }
.keyboard-layout-tabs button { min-height: 27px; border: 1px solid #dfe3e8; border-radius: 4px; background: #f9fafb; color: #535e6c; font-size: 11px; }
.keyboard-layout-tabs button[aria-selected="true"] { border-color: #20252b; background: #20252b; color: #fff; }
.keyboard-layout[hidden] { display: none; }
.keyboard-letters { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.keyboard-letters button, .keyboard-controls button { min-width: 0; height: 39px; display: grid; place-items: center; padding: 0; border: 1px solid #dfe3e8; border-radius: 4px; background: #f9fafb; color: #20252b; font: 22px/1.25 'Noto Naskh Arabic', 'Noto Sans Arabic', serif; }
.keyboard-letters button:hover, .keyboard-controls button:hover { border-color: #9bbbd0; background: #eaf4fa; }
.english-keyboard, .symbol-keyboard { display: grid; gap: 4px; }
.english-key-row { display: flex; justify-content: center; gap: 3px; }
.english-key-row button, .symbol-keyboard button { min-width: 0; height: 33px; flex: 1 1 0; padding: 0 2px; border: 1px solid #dfe3e8; border-radius: 4px; background: #f9fafb; color: #20252b; font: 13px 'DM Sans', Arial, sans-serif; }
.english-key-row button:hover, .symbol-keyboard button:hover, .keyboard-shift[aria-pressed="true"] { border-color: #9bbbd0; background: #eaf4fa; }
.english-key-row .keyboard-shift { flex: 1.4 1 0; }
.symbol-keyboard { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.symbol-keyboard button { font-size: 15px; }
.keyboard-controls { display: flex; gap: 4px; margin-top: 6px; }
.keyboard-controls button { flex: 1; font: 12px 'DM Sans', Arial, sans-serif; }
.keyboard-controls button:first-child, .keyboard-controls button:last-child { flex: 0 0 38px; font-size: 16px; }
.document-center { width: 0; min-width: 0; min-height: 100%; height: max-content; flex: 1 0 auto; display: flex; flex-direction: column; }
.ads-sidebar { position: sticky; top: 0; width: 180px; height: 100%; flex: 0 0 180px; border-left: 1px solid #e4e7eb; background: #f1f2f4; }
.ruler { position: sticky; z-index: 2; top: 0; height: 22px; flex: 0 0 22px; overflow: hidden; border-bottom: 1px solid #c7cbd1; background: linear-gradient(#fff, #f1f3f5); box-shadow: 0 1px 2px #17203312; }
.ruler-track { position: relative; height: 21px; margin-inline: auto; border-inline: 1px solid #d0d4da; background: linear-gradient(to right, #e9ebee 0 var(--ruler-start, 10.8%), #fff var(--ruler-start, 10.8%) var(--ruler-end, 89.2%), #e9ebee var(--ruler-end, 89.2%) 100%); touch-action: none; user-select: none; }
.ruler-scale { position: absolute; inset: 0; background-image: repeating-linear-gradient(to right, transparent 0 calc(var(--ruler-unit, 96px) / 8 - 1px), #aeb4bc calc(var(--ruler-unit, 96px) / 8 - 1px) calc(var(--ruler-unit, 96px) / 8)); background-position: left bottom; background-size: auto 5px; background-repeat: repeat-x; pointer-events: none; }
.ruler-scale::after { position: absolute; inset: 0; background: repeating-linear-gradient(to right, transparent 0 calc(var(--ruler-unit, 96px) - 1px), #858c95 calc(var(--ruler-unit, 96px) - 1px) var(--ruler-unit, 96px)); content: ''; }
.ruler-label { position: absolute; top: 0; transform: translateX(-50%); color: #252a31; font: 9px/11px Arial, sans-serif; pointer-events: none; }
.vertical-ruler .ruler-label { font-size: 8px; }
.ruler-marker { position: absolute; z-index: 2; width: 12px; height: 7px; padding: 0; border: 0; background: transparent; cursor: ew-resize; touch-action: none; }
.margin-marker { top: 14px; }
.margin-marker::after { position: absolute; top: 0; left: 1px; width: 0; height: 0; border-top: 7px solid #17191c; border-right: 5px solid transparent; border-left: 5px solid transparent; content: ''; }
.end-indent-marker { top: 0; }
.start-indent-marker { top: 7px; }
.indent-marker::after { position: absolute; left: 2px; width: 0; height: 0; border-right: 5px solid transparent; border-left: 5px solid transparent; content: ''; }
.end-indent-marker::after { top: 0; border-top: 6px solid #17191c; }
.start-indent-marker::after { top: 4px; border-bottom: 6px solid #17191c; }
.first-line-marker { top: 0; }
.first-line-marker::after { top: 0; border-top: 6px solid #17191c; }
.document-stage { min-height: 0; flex: 1 0 auto; display: flex; justify-content: center; overflow-x: hidden; overflow-y: visible; padding: 14px 24px 38px; }
.page-frame { position: relative; width: max-content; height: max-content; flex: 0 0 auto; margin: 0 auto; padding-right: 20px; }
.paper { width: var(--layout-page-width, 794px); min-height: 1123px; margin: 0 auto; padding: 78px 86px; outline: none; background: var(--paper); box-shadow: 0 1px 5px rgba(24, 34, 47, .18); color: #26334a; direction: rtl; text-align: right; font: 18px/1.8 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif; overflow-wrap: anywhere; transform-origin: top center; }
.page-frame .paper { margin: 0; transform-origin: top left; }
.vertical-ruler { position: absolute; top: 0; left: calc(100% - 20px); width: 20px; border: 1px solid #c7cbd1; background: linear-gradient(to right, #f1f3f5, #fff); box-shadow: 1px 0 2px #17203312; }
.vertical-ruler-track { position: relative; width: 19px; height: 100%; background: linear-gradient(to bottom, #e9ebee 0 var(--ruler-start, 6.9%), #fff var(--ruler-start, 6.9%) var(--ruler-end, 93.1%), #e9ebee var(--ruler-end, 93.1%) 100%); touch-action: none; user-select: none; }
.vertical-ruler-scale { position: absolute; inset: 0; background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--ruler-unit, 96px) / 8 - 1px), #aeb4bc calc(var(--ruler-unit, 96px) / 8 - 1px) calc(var(--ruler-unit, 96px) / 8)); background-position: right top; background-size: 5px auto; background-repeat: repeat-y; pointer-events: none; }
.vertical-ruler-scale::after { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--ruler-unit, 96px) - 1px), #858c95 calc(var(--ruler-unit, 96px) - 1px) var(--ruler-unit, 96px)); content: ''; }
.vertical-ruler .ruler-label { left: 2px; transform: none; font-size: 9px; }
.vertical-margin-marker { top: 0; left: 3px; cursor: ns-resize; }
.vertical-margin-marker::after { position: absolute; top: 2px; left: 0; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid #17191c; content: ''; }
.bottom-margin-marker { top: auto; left: 3px; transform: rotate(180deg); }
.paper p { min-height: 1.8em; margin: 0 0 12px; text-indent: var(--ruler-first-line-indent, 0px); padding-inline-start: var(--ruler-paragraph-start-indent, 0px); padding-inline-end: var(--ruler-paragraph-end-indent, 0px); }
.paper h1, .paper h2, .paper h3 { line-height: 1.9; }
.paper h1 { margin: 0 0 16px; font-size: 1.55em; font-weight: 600; }
.paper img { max-width: 100%; height: auto; }
.paper table { width: 100%; margin: 12px 0; border-collapse: collapse; }
.paper td, .paper th { min-width: 50px; padding: 8px; border: 1px solid #aeb6c5; }
.paper .page-break { margin: 26px 0; border-top: 1px dashed #aeb6c5; break-after: page; }
.paper a { color: #176b9a; text-decoration: underline; }
.find-panel { position: fixed; z-index: 5; top: 222px; right: 18px; display: grid; gap: 7px; min-width: 310px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 4px 16px #17255424; }
.find-row, .replace-row { display: flex; align-items: center; gap: 5px; }
.find-panel input[type="search"], .find-panel input[type="text"] { min-width: 0; height: 30px; flex: 1; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; outline-color: var(--accent); }
.find-panel button { min-height: 29px; padding: 0 8px; border: 1px solid transparent; border-radius: 4px; background: #f5f6f8; white-space: nowrap; }
.find-panel button:hover { border-color: #cbd2dc; background: #edf1f5; }
.find-panel #find-previous, .find-panel #find-next, .find-panel #find-close { min-width: 30px; padding: 0; font-size: 16px; }
.replace-row { display: none; }
.find-panel.replace-mode .replace-row { display: flex; }
.find-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 17px; color: var(--muted); font-size: 11px; }
.find-options label { display: inline-flex; align-items: center; gap: 5px; }
.find-options input { margin: 0; accent-color: var(--accent); }
.find-options output { text-align: right; }
@media (max-width: 520px) {
  .find-panel { top: auto; right: 8px; bottom: 12px; left: 8px; min-width: 0; }
}
.shortcuts-dialog { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 680px); padding: 24px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); box-shadow: 0 12px 40px #17255430; }
.shortcuts-dialog::backdrop { background: #17203370; }
.shortcuts-dialog form { position: absolute; top: 12px; right: 13px; }
.shortcuts-close { width: 30px; height: 30px; border: 0; border-radius: 4px; background: #f2f4f7; font-size: 20px; }
.shortcuts-dialog h2 { margin: 0 38px 16px 0; font-size: 18px; }
.shortcuts-dialog dl { display: grid; gap: 0; margin: 0; }
.shortcuts-dialog dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 11px; }
.shortcuts-dialog dt { font-weight: 500; }
.shortcuts-dialog dd { margin: 0; color: #68738c; text-align: right; }
.shortcuts-dialog > p { margin: 15px 0 0; color: #68738c; font-size: 10px; line-height: 1.6; }

.status-bar { height: 31px; position: fixed; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 15px; border-top: 1px solid #d2d6dc; background: #fff; color: #505862; font-size: 10px; }
.status-left, .status-right { height: 100%; display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.status-left b { font-weight: 500; }
.status-right { gap: 8px; }
.status-right button { border: 0; background: transparent; color: #555e69; }
.status-right input { width: 86px; accent-color: #176b9a; }
.status-fit { padding: 3px 6px; }
.toast { position: fixed; z-index: 10; right: 50%; bottom: 48px; max-width: calc(100vw - 32px); padding: 9px 14px; transform: translateX(50%); border-radius: 5px; background: #252a31; color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s; font-size: 12px; }
.toast.visible { opacity: 1; }

.focus-exit-button { position: fixed; z-index: 20; top: 14px; right: 18px; display: none; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 1px solid #d5d8dd; border-radius: 5px; background: #fff; color: var(--ink); box-shadow: 0 2px 8px #17203324; font-size: 12px; }
.focus-exit-button:hover { background: #f5f6f8; }
body.focus-mode .focus-exit-button { display: inline-flex; }
body.focus-mode .app-header, body.focus-mode .tab-row, body.focus-mode .ribbon-shell { display: none; }
body.focus-mode .document-workspace { height: calc(100vh - 31px); }
body.focus-mode .ruler, body.focus-mode .vertical-ruler { display: none; }
body.focus-mode .document-stage { padding-top: 30px; }
body.hide-rulers .ruler, body.hide-rulers .vertical-ruler { display: none; }
body.dark-mode {
  color-scheme: dark;
  --ink: #e8edf3;
  --muted: #aab4c0;
  --line: #414953;
  --line-soft: #343b45;
  --surface: #20262f;
  --canvas: #292f38;
  --accent-soft: #293e4b;
}
body.dark-mode .app-header,
body.dark-mode .tab-row,
body.dark-mode .ribbon,
body.dark-mode .app-launcher,
body.dark-mode .document-name,
body.dark-mode .header-button,
body.dark-mode .bar-toggle,
body.dark-mode .help-button,
body.dark-mode .focus-exit-button,
body.dark-mode .view-action,
body.dark-mode .status-bar { border-color: #414953; background-color: #20262f; color: #e8edf3; }
body.dark-mode .help-ribbon-action { color: #e8edf3; }
body.dark-mode .help-ribbon-action:hover,
body.dark-mode .help-ribbon-action:focus-visible { border-color: #42647a; background: #293e4b; color: #c6eaff; }
body.dark-mode .tab-button:hover,
body.dark-mode .app-launcher:hover,
body.dark-mode .header-button:hover,
body.dark-mode .bar-toggle:hover,
body.dark-mode .help-button:hover,
body.dark-mode .focus-exit-button:hover { background-color: #2c333d; }
body.dark-mode .tab-button.active::after { background: #55a8d0; }
body.dark-mode .view-action:hover,
body.dark-mode .view-action:focus-visible,
body.dark-mode .view-action[aria-pressed="true"] { border-color: #42647a; background: #293e4b; color: #c6eaff; }
body.dark-mode .ribbon-action:hover,
body.dark-mode .ribbon-action:focus-visible { background: #293e4b; color: #c6eaff; }
body.dark-mode .ribbon button:hover,
body.dark-mode .ribbon button:focus-visible { border-color: #42647a; background: #293e4b; color: #c6eaff; }
body.dark-mode .icon-button { color: #e8edf3; }
body.dark-mode .icon-button:hover,
body.dark-mode .icon-button.is-active { border-color: #42647a; background: #293e4b; color: #c6eaff; }
body.dark-mode .ruler { border-color: #414953; background: linear-gradient(#303741, #252b34); }
body.dark-mode .ruler-track { border-color: #414953; background: linear-gradient(to right, #343b45 0 var(--ruler-start, 10.8%), #292f38 var(--ruler-start, 10.8%) var(--ruler-end, 89.2%), #343b45 var(--ruler-end, 89.2%) 100%); }
body.dark-mode .vertical-ruler-track { background: linear-gradient(to bottom, #343b45 0 var(--ruler-start, 6.9%), #292f38 var(--ruler-start, 6.9%) var(--ruler-end, 93.1%), #343b45 var(--ruler-end, 93.1%) 100%); }
body.dark-mode .vertical-ruler { border-color: #414953; background: linear-gradient(to right, #303741, #252b34); }
body.dark-mode .keyboard-toggle { border-color: #414953; background: #20262f; color: #e8edf3; }
body.dark-mode .ads-sidebar { border-color: #414953; background: #242a33; }
body.dark-mode .find-panel,
body.dark-mode .shortcuts-dialog { border-color: #414953; background: #20262f; color: #e8edf3; }
body.dark-mode .find-panel input[type="search"],
body.dark-mode .find-panel input[type="text"] { border-color: #515b68; background: #292f38; color: #e8edf3; }
body.dark-mode .find-panel button,
body.dark-mode .shortcuts-close { background: #303741; color: #e8edf3; }
body.dark-mode .find-panel button:hover { border-color: #515b68; background: #39424e; }
body.dark-mode .status-right button { color: #e8edf3; }
body.dark-mode .status-right input,
body.dark-mode .view-zoom-group input[type="range"] { accent-color: #55a8d0; }
body.dark-mode .ribbon button,
body.dark-mode .ribbon label,
body.dark-mode .ribbon select,
body.dark-mode .ribbon output,
body.dark-mode .tab-button,
body.dark-mode .save-status,
body.dark-mode .status-bar,
body.dark-mode .typing-toggle { color: #e8edf3; }
body.dark-mode .document-name,
body.dark-mode .font-select,
body.dark-mode .size-input,
body.dark-mode .ribbon-select,
body.dark-mode .layout-custom-fields input,
body.dark-mode .line-spacing select { border-color: #515b68; background-color: #292f38; color: #e8edf3; }
body.dark-mode .font-family-preview { color: #e8edf3; }
body.dark-mode .font-family-control .font-select { color: transparent; }
body.dark-mode .font-family-control::after { color: #c7d0da; }
body.dark-mode .font-size-toggle { border-color: #515b68; background: #303741; color: #e8edf3; }
body.dark-mode .ribbon-divider { background: #414953; }
body.dark-mode .alignment-button.active { border-color: #515b68; background: #39424e; }
body.dark-mode .layout-action,
body.dark-mode .layout-group label,
body.dark-mode .line-spacing { color: #e8edf3; }
body.dark-mode .layout-glyph { color: #e8edf3; }
body.dark-mode .layout-action:hover,
body.dark-mode .layout-action:focus-visible,
body.dark-mode .layout-menu-trigger[aria-expanded="true"] { border-color: #42647a; background: #293e4b; color: #c6eaff; }
body.dark-mode .font-size-menu,
body.dark-mode .color-palette,
body.dark-mode .paragraph-menu,
body.dark-mode .layout-menu,
body.dark-mode .insert-menu,
body.dark-mode .find-panel,
body.dark-mode .shortcuts-dialog,
body.dark-mode .onscreen-keyboard,
body.dark-mode .style-preview { border-color: #414953; background: #20262f; color: #e8edf3; }
body.dark-mode .layout-menu > strong { border-color: #414953; color: #e8edf3; }
body.dark-mode .insert-menu > strong,
body.dark-mode .insert-menu-link,
body.dark-mode .more-colors { color: #80c8ee; }
body.dark-mode .standard-colors-label { border-color: #414953; color: #b9c4d0; }
body.dark-mode .style-preview:hover { border-color: #42647a; background: #293e4b; }
body.dark-mode .style-preview strong { color: #e8edf3; }
body.dark-mode .font-size-menu button,
body.dark-mode .bullet-options button,
body.dark-mode .numbering-options button,
body.dark-mode .spacing-menu button,
body.dark-mode .layout-menu > button,
body.dark-mode .page-number-presets button,
body.dark-mode .table-picker-grid button,
body.dark-mode .emoji-grid button,
body.dark-mode .keyboard-layout-tabs button,
body.dark-mode .keyboard-letters button,
body.dark-mode .keyboard-controls button,
body.dark-mode .english-key-row button,
body.dark-mode .symbol-keyboard button { color: #e8edf3; }
body.dark-mode .font-size-menu button:hover,
body.dark-mode .layout-menu > button:hover,
body.dark-mode .layout-menu > button:focus-visible,
body.dark-mode .page-number-presets button:hover,
body.dark-mode .table-picker-grid button:hover,
body.dark-mode .table-picker-grid button.selected,
body.dark-mode .emoji-grid button:hover,
body.dark-mode .emoji-grid button:focus-visible,
body.dark-mode .keyboard-letters button:hover,
body.dark-mode .keyboard-controls button:hover,
body.dark-mode .english-key-row button:hover,
body.dark-mode .symbol-keyboard button:hover,
body.dark-mode .keyboard-shift[aria-pressed="true"] { border-color: #42647a; background: #293e4b; color: #e8edf3; }
body.dark-mode .layout-menu > button small,
body.dark-mode .style-preview small,
body.dark-mode .page-number-presets button span,
body.dark-mode .table-menu output,
body.dark-mode .keyboard-heading,
body.dark-mode .shortcuts-dialog dd { color: #b9c4d0; }
body.dark-mode .layout-custom-fields { border-color: #414953; }
body.dark-mode .numbering-options button i,
body.dark-mode .menu-separator { background: #515b68; }
body.dark-mode .layout-menu .layout-menu-primary,
body.dark-mode .layout-menu .layout-menu-primary:hover,
body.dark-mode .layout-menu .layout-menu-primary:focus-visible,
body.dark-mode .keyboard-layout-tabs button[aria-selected="true"] { border-color: #176b9a; background: #176b9a; color: #fff; }
body.dark-mode [data-panel="insert"].active .insert-action,
body.dark-mode [data-panel="insert"].active .insert-action > span:not(.insert-glyph) { color: #e8edf3; }
body.dark-mode [data-panel="insert"].active .insert-action:hover,
body.dark-mode [data-panel="insert"].active .insert-action:focus-visible { border-color: #42647a; background: #293e4b; color: #c6eaff; }
body.dark-mode [data-panel="insert"].active .insert-action:hover > span:not(.insert-glyph),
body.dark-mode [data-panel="insert"].active .insert-action:focus-visible > span:not(.insert-glyph) { color: #c6eaff; }
body.dark-mode .keyboard-layout-tabs button { border-color: #515b68; background: #292f38; color: #e8edf3; }
body.dark-mode .keyboard-letters button,
body.dark-mode .keyboard-controls button,
body.dark-mode .english-key-row button,
body.dark-mode .symbol-keyboard button { border-color: #515b68; background: #292f38; }
body.dark-mode .page-number-presets button { border-color: #515b68; background: #292f38; color: #80c8ee; }
body.dark-mode .page-number-presets button:hover { border-color: #42647a; background: #293e4b; }
body.dark-mode .typing-toggle.active { border-color: #315b42; background: #20382b; color: #d7f4df; }
body.dark-mode .typing-toggle:not(.active) { border-color: #515b68; background: #292f38; color: #e8edf3; }
body.dark-mode .shortcuts-dialog > p { color: #b9c4d0; }
body.dark-mode .find-options { color: #b9c4d0; }
body.dark-mode .ribbon img,
body.dark-mode .bar-toggle img,
body.dark-mode .header-actions img { filter: brightness(0) invert(1); }
body.dark-mode .list-tool-icon { fill: #e8edf3; stroke: #e8edf3; }
body.dark-mode .align-glyph,
body.dark-mode .paragraph-tool-icon { stroke: #e8edf3; }
body.dark-mode .ruler-label { color: #e8edf3; }
body.dark-mode .ruler-scale,
body.dark-mode .vertical-ruler-scale { filter: brightness(1.8); }
body.dark-mode .paper { color: #242a33; }

@media (max-width: 900px) {
  .document-workspace { height: calc(100vh - var(--workspace-chrome)); }
  .ads-sidebar { display: none; }
  .status-left, .status-right { gap: 9px; }
}
@media (max-width: 600px) {
  :root { --workspace-chrome: 149px; }
  body { min-width: 360px; }
  .app-header { gap: 6px; padding: 0 12px; }
  .editor-brand { font-size: 12px; }
  .document-name { width: 100px; font-size: 12px; }
  .save-status { display: none; }
  .header-actions { gap: 4px; }
  .header-button { padding-inline: 7px; font-size: 10px; }
  .header-actions .header-button { gap: 4px; padding-inline: 7px; font-size: 10px; }
  .header-actions .header-button img { width: 16px; height: 16px; }
  .focus-action span { display: none; }
  .focus-exit-button { top: 8px; right: 8px; min-height: 31px; }
  .shortcuts-dialog { padding: 20px 16px; }
  .shortcuts-dialog dl > div { align-items: flex-start; flex-direction: column; gap: 3px; }
  .shortcuts-dialog dd { text-align: left; }
  .tab-row { gap: 1px; padding-right: 0; }
  .tab-button { min-width: 36px; padding-inline: 4px; font-size: 10px; }
  .app-launcher { width: 30px; flex-basis: 30px; }
  .tab-spacer { flex: 0 0 0; }
  .tab-actions { gap: 4px; padding-inline-start: 4px; }
  .typing-toggle { height: 25px; gap: 4px; padding-inline: 7px; font-size: 9px; }
  .focus-action { min-height: 25px; padding-inline: 7px; }
  .help-button { width: 24px; height: 24px; flex-basis: 24px; }
  .header-toggle { width: 25px; height: 25px; flex-basis: 25px; }
  .ribbon-group { padding-inline: 7px; }
  body.header-collapsed { --workspace-chrome: 101px; }
  body.tools-collapsed { --workspace-chrome: 65px; }
  body.header-collapsed.tools-collapsed { --workspace-chrome: 25px; }
  body.home-ribbon-active { --workspace-chrome: 149px; }
  body.home-ribbon-active.header-collapsed { --workspace-chrome: 101px; }
  body.home-ribbon-active.tools-collapsed { --workspace-chrome: 65px; }
  body.home-ribbon-active.header-collapsed.tools-collapsed { --workspace-chrome: 25px; }
  .document-stage { padding: 10px 10px 35px; }
  .paper { width: min(var(--layout-page-width, 794px), 100%); min-height: 900px; padding: 45px 28px; font-size: 16px; }
  .page-frame .paper { width: min(var(--layout-page-width, 794px), calc(100vw - 60px)); }
  .keyboard-sidebar { position: fixed; z-index: 4; top: calc(var(--workspace-chrome) + 24px); bottom: 38px; left: 0; width: 320px; overflow: visible; padding: 0; pointer-events: none; }
  .keyboard-toggle { width: auto; min-height: 34px; padding: 0 10px; box-shadow: 0 2px 8px #17203324; pointer-events: auto; }
  .keyboard-sidebar.keyboard-open { overflow: auto; padding: 0 8px 8px 0; pointer-events: auto; }
  .onscreen-keyboard { width: 312px; margin-top: 6px; box-shadow: 0 5px 16px #17203330; }
  .status-bar { padding-inline: 8px; }
  .status-left, .status-right { gap: 6px; font-size: 9px; }
  #character-count, #language-status, .status-right > span:first-child, .status-fit { display: none; }
  .status-right input { width: 56px; }
}
@media (max-width: 380px) {
  .app-launcher { display: none; }
}
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { width: auto; height: auto; min-width: 0; overflow: visible; background: #fff !important; }
  .app-header, .tab-row, .ribbon-shell, .ruler, .status-bar, .toast, .keyboard-sidebar, .ads-sidebar { display: none !important; }
  .document-workspace { height: auto; min-height: 0; display: block; overflow: visible; background: #fff; }
  .document-stage { padding: 0; overflow: visible; }
  .paper { width: auto !important; max-width: none; min-height: 0 !important; margin: 0; padding: 20mm; box-shadow: none; transform: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .paper .page-break { break-after: page; border: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}