/* ============ themes.css — Office themes (Colorful / White / Light Gray / Dark Gray / Black) ============ */
body.theme-white #app{
  --titlebar-bg:#fff; --titlebar-fg:#1e1e1e;
  --tabstrip-bg:#f7f7f7; --tab-fg:#1e1e1e; --tab-hover:#e8e8e8; --tab-active-bg:#fff; --tab-active-fg:#1e1e1e;
  --ribbon-bg:#fff; --btn-hover:#e9e9e9; --btn-active:#d5d5d5;
  --statusbar-bg:#f4f4f4;
}
body.theme-lightgray #app{
  --titlebar-bg:#e9e9e9; --titlebar-fg:#1e1e1e;
  --tabstrip-bg:#e9e9e9; --tab-fg:#1e1e1e; --tab-hover:#dcdcdc; --tab-active-bg:#f5f5f5; --tab-active-fg:#1e1e1e;
  --ribbon-bg:#f5f5f5; --btn-hover:#e4e4e4; --btn-active:#d2d2d2;
  --statusbar-bg:#f5f5f5;
}
body.theme-darkgray #app{
  --titlebar-bg:#333333; --titlebar-fg:#fff;
  --tabstrip-bg:#3a3a3a; --tab-fg:#fff; --tab-hover:#4d4d4d; --tab-active-bg:#3a3a3a; --tab-active-fg:#fff; --tab-active-border:#3a3a3a;
  --ribbon-bg:#3a3a3a; --ribbon-fg:#f0f0f0; --btn-hover:#4d4d4d; --btn-active:#5a5a5a; --btn-disabled:#666;
  --statusbar-bg:#3a3a3a; --statusbar-fg:#d0d0d0;
  --menu-bg:#3a3a3a; --menu-fg:#f0f0f0; --menu-border:#555; --menu-hover:#4d4d4d; --menu-sep:#4d4d4d;
  --input-bg:#4a4a4a; --input-border:#666;
  --dialog-bg:#3a3a3a; --dialog-titlebar:#3a3a3a;
  --scrollthumb:#777;
}
body.theme-darkgray #app .gname,body.theme-black #app .gname{color:#b8b8b8}
body.theme-darkgray #app .ribbon-btn,body.theme-black #app .ribbon-btn{color:#e8e8e8}
body.theme-darkgray #app .ribbon-btn.active,body.theme-black #app .ribbon-btn.active{background:#4d5f7a;border-color:#5a6d8a}
body.theme-darkgray #app .combo-btn,body.theme-black #app .combo-btn{color:#e8e8e8;background:#4a4a4a}
body.theme-darkgray #app .combo-btn:hover,body.theme-black #app .combo-btn:hover{background:#555}
body.theme-darkgray #app .stepper,body.theme-black #app .stepper{background:#4a4a4a;border-color:#666;color:#ddd}
body.theme-darkgray #app .rgroup + .rgroup::before,body.theme-black #app .rgroup + .rgroup::before{background:#555}
body.theme-darkgray #app #statusbar,body.theme-black #app #statusbar{border-top-color:#4a4a4a}
body.theme-darkgray #app #tabstrip,body.theme-black #app #tabstrip{border:none}
body.theme-darkgray #app .tooltip,body.theme-black #app .tooltip{background:#3a3a3a;color:#f0f0f0;border-color:#555}
body.theme-darkgray #app .tooltip .tt-desc,body.theme-black #app .tooltip .tt-desc{color:#c8c8c8}
body.theme-darkgray #app .sb-viewbtn svg,body.theme-black #app .sb-viewbtn svg{fill:#ccc}
body.theme-black #app{
  --titlebar-bg:#000; --titlebar-fg:#fff;
  --tabstrip-bg:#000; --tab-fg:#e8e8e8; --tab-hover:#262626; --tab-active-bg:#000; --tab-active-fg:#fff;
  --ribbon-bg:#000; --ribbon-fg:#e8e8e8; --btn-hover:#262626; --btn-active:#3a3a3a;
  --statusbar-bg:#000; --statusbar-fg:#c8c8c8;
  --menu-bg:#1f1f1f; --menu-fg:#e8e8e8; --menu-border:#3a3a3a; --menu-hover:#2d2d2d; --menu-sep:#333;
  --input-bg:#2b2b2b; --input-border:#4a4a4a;
  --dialog-bg:#1f1f1f; --dialog-titlebar:#000;
  --scrollthumb:#555;
}
body.theme-darkgray #app .tellme-box,body.theme-black #app .tellme-box{background:#4a4a4a;color:#e8e8e8;border-color:#666}
body.theme-darkgray #app #qat .tb-btn:disabled,body.theme-black #app #qat .tb-btn:disabled{color:#666}

/* dark document canvas option (View/Design) */
body.darkpage #pagescroll{background:#1e1e1e}
body.darkpage .word-page{background:#fff}
body.darkpage .word-page.page-dark{background:#242424}
body.darkpage .word-page.page-dark .pc{color:#e2e2e2}
body.darkpage .word-page.page-dark .page-hd .hd-inner,body.darkpage .word-page.page-dark .page-ft .ft-inner{color:#9a9a9a}
body.darkpage #rulerrow{background:#2a2a2a;border-bottom-color:#3a3a3a}
body.darkpage #hruler .hr-marks{background:#2a2a2a}
body.darkpage #hruler .hr-num{color:#8a8a8a}
body.darkpage #vruler{background:#2a2a2a;border-right-color:#3a3a3a}