/* ============================================================
   Microsoft Word recreation — chrome, ribbon, canvas, overlays
   ============================================================ */
:root{
  --blue:#185ABD; --blue-dark:#0F4CAB; --blue-hover:#2B6AC9;
  --ribbon-bg:#F5F5F5; --tabrow-bg:#FFFFFF;
  --canvas:#ECEBE9;
  --ink:#252423; --ink-2:#605E5C; --ink-3:#8A8886;
  --line:#E1DFDD; --line-2:#D2D0CE;
  --hover:#E5E3E1; --pressed:#D6D4D2; --active:#CCE3F5; --active-border:#98C6EA;
  --sel:#CCE4F7;
  --font-ui:"Segoe UI","Segoe UI Variable",system-ui,-apple-system,sans-serif;
  --title-h:44px; --tabrow-h:35px; --ribbon-h:94px; --status-h:24px; --ruler-h:21px;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{font-family:var(--font-ui); font-size:12px; color:var(--ink); overflow:hidden; background:#fff;
  -webkit-font-smoothing:antialiased; user-select:none;}
.hidden{display:none !important}
button{font-family:var(--font-ui); background:none; border:none; color:inherit; cursor:pointer; font-size:12px}
button:focus-visible, [tabindex]:focus-visible, input:focus-visible{outline:2px solid var(--blue); outline-offset:-1px; z-index:5}
::-webkit-scrollbar{width:14px; height:14px}
::-webkit-scrollbar-thumb{background:#C8C6C4; border:4px solid transparent; background-clip:padding-box; border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#A19F9D; border-width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-button{display:none}

#app{display:flex; flex-direction:column; height:100vh}

/* ============ TITLE BAR ============ */
#titlebar{height:var(--title-h); background:var(--blue); color:#fff; display:flex; align-items:stretch;
  -webkit-app-region:drag; position:relative; z-index:60; flex:none;}
.tb-left{display:flex; align-items:center; padding-left:6px; gap:1px}
.tb-right{margin-left:auto; display:flex; align-items:center; gap:0}
.tb-btn{height:100%; min-width:34px; display:flex; align-items:center; justify-content:center; color:#fff; padding:0 6px; border-radius:0}
.tb-btn:hover{background:var(--blue-hover)}
.tb-btn:active{background:var(--blue-dark)}
#appIcon{padding:0 8px}
#qat{display:flex; align-items:center; gap:0; margin-left:2px}
#qat .qat-btn{width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:3px; color:#fff; position:relative}
#qat .qat-btn:hover{background:rgba(255,255,255,.22)}
#qat .qat-btn:active{background:rgba(255,255,255,.35)}
#qat .qat-btn:disabled{opacity:.45; cursor:default; background:none}
.qat-caret{min-width:18px; padding:0 4px}
.tb-center{position:absolute; left:50%; transform:translateX(-50%); height:100%; display:flex; align-items:center; gap:14px; -webkit-app-region:no-drag}
.tb-search{display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.16); color:#fff;
  height:28px; padding:0 10px; border-radius:4px; min-width:260px; cursor:text; font-size:12.5px}
.tb-search:hover{background:rgba(255,255,255,.25)}
.tb-search kbd{font-family:var(--font-ui); font-size:10.5px; opacity:.7; margin-left:auto; border:none}
#docTitleWrap{display:flex; align-items:center; gap:7px; font-size:12.5px}
#docTitle{cursor:pointer; padding:2px 5px; border-radius:3px}
#docTitle:hover{background:rgba(255,255,255,.18)}
#saveState{font-size:11px; opacity:.85}
#saveState.dirty::before{content:"● "; font-size:8px; vertical-align:2px}
.tb-user .avatar{width:26px; height:26px; border-radius:50%; background:#E8A33D; color:#3B2F13; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600}
.win{min-width:46px}
.win-close:hover{background:#E81123 !important}

/* ============ RIBBON TABS ============ */
#ribbon{flex:none; position:relative; z-index:50; box-shadow:0 1px 2px rgba(0,0,0,.08)}
#ribbonTabRow{height:var(--tabrow-h); background:var(--tabrow-bg); display:flex; align-items:stretch; padding:0 8px; position:relative}
.rtab{display:flex; align-items:center; padding:0 13px; font-size:12.5px; color:var(--ink); position:relative; border-bottom:2px solid transparent}
.rtab:hover{background:var(--hover)}
.rtab[aria-selected="true"]{color:var(--blue); font-weight:600; border-bottom-color:var(--blue)}
.rtab.file-tab{color:var(--blue); font-weight:600}
.rtab.file-tab:hover{background:var(--hover)}
#ribbonSpacer{flex:1}
#ribbonCollapse{align-self:center; width:26px; height:26px; border-radius:3px; display:flex; align-items:center; justify-content:center; color:var(--ink-2)}
#ribbonCollapse:hover{background:var(--hover)}
.rhtab{display:flex; align-items:center; padding:0 10px; color:var(--ink-2); font-size:12px}
.rhtab:hover{background:var(--hover)}

/* ============ RIBBON BODY ============ */
#ribbonBody{height:var(--ribbon-h); background:var(--ribbon-bg); border-top:1px solid var(--line); overflow:hidden; position:relative}
#ribbon.collapsed #ribbonBody{display:none}
.rpanel{position:absolute; inset:0; display:none; padding:3px 4px 0; gap:2px; align-items:stretch}
.rpanel.active{display:flex}
.rgroup{display:flex; flex-direction:column; border-right:1px solid var(--line); padding:0 3px; position:relative; min-width:2px}
.rgroup:last-child{border-right:none}
.rg-controls{flex:1; display:flex; align-items:flex-start; gap:1px; padding:1px 0}
.rg-col{display:flex; flex-direction:column; gap:0}
.rg-row{display:flex; align-items:center; gap:1px; height:22px}
.rg-label{height:16px; line-height:16px; text-align:center; font-size:11px; color:var(--ink-2); white-space:nowrap;
  padding:0 8px; display:flex; align-items:center; justify-content:center; gap:3px; cursor:default; position:relative}
.rg-launch{width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; border-radius:2px; color:var(--ink-2); position:absolute; right:2px; bottom:1px}
.rg-launch:hover{background:var(--pressed); color:var(--ink)}
.rgroup.has-launch .rg-label{padding-right:20px}

/* Ribbon buttons */
.rbtn{display:flex; align-items:center; gap:5px; padding:0 6px; height:22px; border-radius:3px; color:var(--ink);
  font-size:12px; white-space:nowrap; border:1px solid transparent; position:relative}
.rbtn:hover:not(:disabled){background:var(--hover); border-color:var(--line)}
.rbtn:active:not(:disabled), .rbtn.pressed{background:var(--pressed)}
.rbtn.toggled{background:var(--active); border-color:var(--active-border)}
.rbtn:disabled{opacity:.42; cursor:default}
.rbtn svg{flex:none}
.rbtn.large{flex-direction:column; justify-content:center; gap:3px; height:70px; min-width:46px; padding:3px 5px; font-size:11.5px}
.rbtn.large svg{width:32px; height:32px}
.rbtn .caret{font-size:8px; color:var(--ink-2); margin-left:1px}

/* Split buttons */
.rsplit{display:flex; align-items:stretch; border-radius:3px; border:1px solid transparent}
.rsplit:hover:not(.disabled){background:var(--hover); border-color:var(--line)}
.rsplit .rs-main{display:flex; align-items:center; gap:5px; padding:0 4px 0 6px; border-radius:3px 0 0 3px; color:var(--ink)}
.rsplit .rs-main:hover{background:rgba(0,0,0,.05)}
.rsplit .rs-arrow{display:flex; align-items:center; padding:0 3px; border-radius:0 3px 3px 0; color:var(--ink-2)}
.rsplit .rs-arrow:hover{background:rgba(0,0,0,.09)}
.rsplit.large{flex-direction:column; min-width:52px}
.rsplit.large .rs-main{flex-direction:column; padding:4px 4px 1px; gap:2px; font-size:11.5px}
.rsplit.large .rs-main svg{width:32px; height:32px}
.rsplit.large .rs-arrow{justify-content:center; padding:1px}
.rsplit.disabled{opacity:.42}
.rsplit.disabled .rs-main,.rsplit.disabled .rs-arrow{cursor:default; background:none !important}

/* Combos (font name / size) */
.rcombo{display:flex; align-items:center; height:20px; border:1px solid var(--line-2); background:#fff; border-radius:2px; margin:1px 0}
.rcombo:hover{border-color:var(--ink-3)}
.rcombo:focus-within{border-color:var(--blue)}
.rcombo input{border:none; outline:none; font-family:var(--font-ui); font-size:12px; padding:0 4px; height:100%; background:transparent; min-width:0}
.rcombo .combo-arrow{width:18px; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ink-2)}
.rcombo .combo-arrow:hover{background:var(--hover)}
#fontNameBox{width:122px}
#fontSizeBox{width:36px}

/* ============ DROPDOWNS / GALLERIES ============ */
.wdrop{position:fixed; background:#fff; border:1px solid var(--line-2); box-shadow:0 4px 14px rgba(0,0,0,.18);
  border-radius:4px; padding:4px; z-index:400; min-width:120px; animation:dropIn .08s ease-out; max-height:70vh; overflow:auto}
@keyframes dropIn{from{opacity:0; transform:translateY(-3px)} to{opacity:1; transform:none}}
.wd-item{display:flex; align-items:center; gap:8px; padding:5px 10px 5px 8px; border-radius:3px; cursor:pointer; font-size:12.5px; white-space:nowrap; position:relative}
.wd-item:hover{background:var(--hover)}
.wd-item:active{background:var(--pressed)}
.wd-item.disabled{opacity:.45; cursor:default; background:none !important}
.wd-item .check{width:16px; text-align:center; color:var(--blue); font-weight:600}
.wd-item svg{flex:none}
.wd-sep{height:1px; background:var(--line); margin:4px 6px}
.wd-head{padding:5px 10px 3px; font-size:11px; color:var(--ink-2); font-weight:600; cursor:default}
.wd-item .sub-arrow{margin-left:auto; color:var(--ink-3); font-size:9px}

/* Font picker */
.font-item{font-size:14px; padding:4px 12px}
#fontMenu{max-height:320px; width:210px}
.size-item{padding:3px 14px; font-size:12.5px}
#sizeMenu{width:80px; max-height:320px}

/* Color grid */
.color-grid{display:grid; grid-template-columns:repeat(10,22px); gap:3px; padding:4px 6px}
.color-swatch{width:22px; height:22px; border:1px solid rgba(0,0,0,.15); border-radius:2px; cursor:pointer; position:relative}
.color-swatch:hover{outline:2px solid var(--blue); outline-offset:1px; z-index:2}
.color-row-label{grid-column:1/-1; font-size:11px; color:var(--ink-2); padding:4px 2px 0}
.color-auto{display:flex; align-items:center; gap:8px; padding:5px 10px; border-radius:3px; cursor:pointer; font-size:12.5px}
.color-auto:hover{background:var(--hover)}

/* Styles gallery */
.styles-strip{display:flex; align-items:center; gap:2px; height:70px}
.style-chip{height:62px; min-width:64px; max-width:86px; border:1px solid var(--line); background:#fff; border-radius:2px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; padding:2px 6px; text-align:center}
.style-chip:hover{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue)}
.style-nav{display:flex; flex-direction:column; gap:0}
.style-nav button{width:16px; height:16px; display:flex; align-items:center; justify-content:center; color:var(--ink-2); border-radius:2px; font-size:8px}
.style-nav button:hover{background:var(--hover)}
.style-nav button:disabled{opacity:.3}

/* Table picker */
.table-grid{display:grid; grid-template-columns:repeat(10,18px); gap:2px; padding:6px}
.table-cell{width:18px; height:18px; border:1px solid var(--line-2); background:#fff; border-radius:1px}
.table-cell.hot{background:var(--active); border-color:var(--blue)}
.table-grid-label{text-align:center; padding:2px 0 4px; font-size:12px; color:var(--ink)}

/* ============ TOOLTIP ============ */
#tooltip{position:fixed; z-index:600; background:#fff; border:1px solid var(--line-2); box-shadow:0 3px 10px rgba(0,0,0,.16);
  border-radius:3px; padding:7px 10px; max-width:300px; font-size:12px; pointer-events:none; animation:tipIn .12s ease}
@keyframes tipIn{from{opacity:0} to{opacity:1}}
#tooltip .tt-title{font-weight:600; margin-bottom:2px; display:flex; align-items:center; gap:6px}
#tooltip .tt-key{color:var(--ink-3); font-weight:400; font-size:11px}
#tooltip .tt-desc{color:var(--ink-2); line-height:1.35}
#tooltip .tt-help{margin-top:5px; padding-top:5px; border-top:1px solid var(--line); color:var(--ink-3); font-size:11px}

/* ============ WORKSPACE / PAGES ============ */
#mainArea{flex:1; display:flex; min-height:0}
#workspace{flex:1; display:flex; flex-direction:column; min-width:0; background:var(--canvas)}
#rulerRow{display:flex; flex:none}
#rulerCorner{width:0; background:var(--canvas)}
#rulerWrap{flex:1; overflow:hidden; position:relative; height:var(--ruler-h)}
#ruler{position:absolute; top:0; height:var(--ruler-h); background:#F8F7F6; border-bottom:1px solid var(--line); user-select:none}
body.no-ruler #rulerRow{display:none}
#scrollArea{flex:1; overflow:auto; position:relative; padding:22px 0 30px}
#pageSizer{margin:0 auto; position:relative}
#pagesStack{outline:none; min-height:20px}
#pagesStack.readonly{caret-color:transparent}

.page{background:#fff; margin:0 auto 14px; position:relative; display:flow-root; box-shadow:0 1px 2px rgba(0,0,0,.14),0 4px 14px rgba(0,0,0,.10)}
.page:last-child{margin-bottom:0}
body.compact-pages .page{margin-bottom:0; box-shadow:none; border-bottom:1px solid var(--line)}
.page-header,.page-footer{position:absolute; left:0; right:0; color:var(--ink-2); font-size:12px; padding:0; z-index:3}
.page-header{top:0; height:48px}
.page-footer{bottom:0; height:48px}
.hf-inner{margin:0; padding:24px 0 0; height:100%; position:relative}
.page-footer .hf-inner{padding:8px 0 0}
.hf-inner[contenteditable="true"]{outline:none; background:#fff}
.hf-inner[contenteditable="true"]:hover{background:#F8F7F6}
.hf-tab-line{border-bottom:1px solid var(--line-2); position:absolute; left:0; right:0; bottom:8px}
.hf-label{position:absolute; top:6px; left:0; font-size:10px; color:var(--ink-3); letter-spacing:.4px; text-transform:uppercase; pointer-events:none}
.page-footer .hf-label{top:auto; bottom:30px}
body.hf-editing .page-content{opacity:.35}
body:not(.hf-editing) .hf-label{display:none}
body:not(.hf-editing) .hf-tab-line{display:none}
.page-content{position:relative; outline:none; cursor:text; overflow:hidden}
.page-content p,.page-content h1,.page-content h2,.page-content h3,.page-content blockquote{overflow-wrap:break-word}
.pn-field{color:var(--ink-2)}
.pgbreak{height:0; position:relative; user-select:none}
.pgbreak::after{content:""; position:absolute; left:0; right:0; top:-1px; border-top:1px dashed #9D9B99}
.pgbreak .pgbreak-tag{position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--canvas);
  color:var(--ink-3); font-size:10px; padding:0 8px; font-family:var(--font-ui)}

/* Web layout */
body.view-web .page{box-shadow:none; margin-bottom:0}
body.view-web .page-header,body.view-web .page-footer,body.view-web #rulerRow{display:none}
body.view-web .page-content{overflow:visible}

/* Read mode */
body.view-read #ribbon,body.view-read #statusbar,body.view-read #rulerRow{display:none}
body.view-read #scrollArea{background:#F8F7F6; padding-top:36px}
body.view-read .page{box-shadow:0 2px 10px rgba(0,0,0,.16)}
#readExit{position:fixed; top:10px; right:14px; z-index:90; background:#fff; border:1px solid var(--line-2); border-radius:4px; padding:5px 12px; box-shadow:0 2px 8px rgba(0,0,0,.15)}
#readExit:hover{background:var(--hover)}

/* ============ DOCUMENT TEXT DEFAULTS ============ */
.page-content{font-family:Calibri,Carlito,sans-serif; font-size:22px; font-size:11pt; line-height:1.15; color:#000}
.page-content p{margin:0 0 8pt}
.doc-title{font-size:26pt; font-weight:300; color:#1F3864; margin:0 0 4pt; letter-spacing:.2px}
.doc-subtitle{font-size:13pt; color:#5B5B5B; font-style:italic; margin:0 0 12pt}
.page-content h1{font-size:16pt; font-weight:400; color:#2F5496; margin:14pt 0 4pt; line-height:1.2}
.page-content h2{font-size:13pt; font-weight:400; color:#2F5496; margin:10pt 0 2pt; line-height:1.2}
.page-content h3{font-size:12pt; font-weight:600; color:#1F3864; margin:8pt 0 2pt}
.page-content blockquote, .page-content .style-quote{margin:8pt 18pt; font-style:italic; color:#404040}
.page-content .style-intensequote{margin:10pt 22pt; font-style:italic; color:#2F5496; border-top:1px solid #2F5496; border-bottom:1px solid #2F5496; padding:6pt 4pt}
.page-content ul,.page-content ol{margin:0 0 8pt; padding-left:26pt}
.page-content ul.lst-circle{list-style-type:circle}
.page-content ul.lst-square{list-style-type:square}
.page-content ul.lst-dash{list-style-type:'–  '}
.page-content ol.num-alpha-lower{list-style-type:lower-alpha}
.page-content ol.num-alpha-upper{list-style-type:upper-alpha}
.page-content ol.num-roman-lower{list-style-type:lower-roman}
.page-content ol.num-roman-upper{list-style-type:upper-roman}
.page-content ol.num-decimal{list-style-type:decimal}
.page-content li{margin:0 0 3pt}
.page-content table.doc-table{border-collapse:collapse; margin:4pt 0 10pt; width:100%; font-size:11pt}
.page-content table.doc-table td,.page-content table.doc-table th{border:1px solid #8EAADB; padding:3pt 6pt; vertical-align:top; min-width:20px}
.page-content table.doc-table th{background:#D6E2F5; font-weight:600; text-align:left}
.page-content table.doc-table tr:nth-child(even) td{background:#F2F6FC}
.page-content img{max-width:100%}
.page-content figure.img-block{margin:6pt 0; position:relative}
.page-content figure.img-block.selected img{outline:2px solid var(--blue)}
.img-handle{position:absolute; width:10px; height:10px; background:#fff; border:2px solid var(--blue); border-radius:50%; right:-6px; bottom:-6px; cursor:nwse-resize; z-index:5}
.page-content a{color:#0563C1; text-decoration:underline}
.page-content .textbox{border:1px solid #7F7F7F; padding:8pt; margin:6pt 0; background:#fff}
.toc-line{display:flex; margin:0 0 2pt}
.toc-line .toc-dots{flex:1; border-bottom:1px dotted #7F7F7F; margin:0 6px 4px}
.toc-1{font-weight:600}
.toc-2{padding-left:16pt}
.toc-3{padding-left:32pt}
.page-content .footnote-ref{vertical-align:super; font-size:70%}
.footnote-sep{border-top:1px solid #7F7F7F; width:35%; margin:10pt 0 4pt; font-size:9pt}
.footnote-item{font-size:9pt; margin:0 0 2pt}
.tc-ins{background:rgba(0,180,0,.08); text-decoration:underline; text-decoration-color:#0B6A0B}
.tc-del{color:#C00000; text-decoration:line-through}
.comment-anchor{background:rgba(255,213,79,.45); border-bottom:2px solid #F2B600}

/* Selection tint inside doc */
#pagesStack ::selection{background:var(--sel)}

/* ============ RULER ============ */
#ruler .ruler-page{position:absolute; top:0; bottom:0; background:#fff; border-left:1px solid var(--line-2); border-right:1px solid var(--line-2)}
#ruler .tick{position:absolute; bottom:0; width:1px; background:#9D9B99}
#ruler .tick.major{height:7px}
#ruler .tick.minor{height:4px}
#ruler .tick-num{position:absolute; top:2px; font-size:9px; color:#605E5C; transform:translateX(-50%)}
.rmark{position:absolute; cursor:ew-resize; z-index:4; width:0; height:0}
.rmark-first{top:2px; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:7px solid #605E5C; transform:translateX(-5px)}
.rmark-hang{bottom:2px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid #605E5C; transform:translateX(-5px)}
.rmark-left{bottom:2px; width:10px; height:5px; background:#605E5C; transform:translate(-5px,-9px)}
.rmark:hover{border-bottom-color:var(--blue); border-top-color:var(--blue)}
.rmark-left:hover{background:var(--blue)}

/* ============ STATUS BAR ============ */
#statusbar{height:var(--status-h); background:var(--blue); color:#fff; display:flex; align-items:stretch; flex:none; font-size:12px; z-index:60}
.sb-left{display:flex; align-items:stretch}
.sb-right{margin-left:auto; display:flex; align-items:center; gap:2px; padding-right:6px}
.sb-item{display:flex; align-items:center; padding:0 9px; color:#fff; height:100%; gap:5px}
button.sb-item:hover{background:var(--blue-hover)}
.sb-view.active{background:rgba(0,0,0,.18)}
.sb-sep{width:1px; background:rgba(255,255,255,.35); height:14px; align-self:center; margin:0 4px}
#zoomSlider{width:104px; accent-color:#fff; height:100%; cursor:pointer}
#zoomPct{min-width:44px; justify-content:flex-end}

/* ============ NAV PANE (Find) ============ */
#navPane{width:280px; flex:none; background:#FAFAF9; border-right:1px solid var(--line); display:flex; flex-direction:column}
#navHead{display:flex; align-items:center; padding:8px 12px 4px; font-size:14px; font-weight:600}
#navHead .xbtn{margin-left:auto}
.xbtn{width:24px; height:24px; border-radius:3px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-2); font-size:10px}
.xbtn:hover{background:var(--hover); color:var(--ink)}
#navTabs{display:flex; gap:2px; padding:0 10px; border-bottom:1px solid var(--line)}
.nav-tab{padding:5px 10px; font-size:12px; color:var(--ink-2); border-bottom:2px solid transparent}
.nav-tab.active{color:var(--blue); border-bottom-color:var(--blue); font-weight:600}
#navSearchRow{padding:8px 10px 4px}
#navReplaceRow{padding:2px 10px 6px}
.nav-searchbox{display:flex; align-items:center; border:1px solid var(--line-2); background:#fff; border-radius:3px; overflow:hidden}
.nav-searchbox:focus-within{border-color:var(--blue)}
.nav-searchbox input{flex:1; border:none; outline:none; padding:6px 8px; font-size:12.5px; font-family:var(--font-ui); min-width:0}
.nav-repbtns{display:flex; gap:6px; margin-top:6px}
.wbtn{border:1px solid var(--line-2); border-radius:3px; padding:4px 12px; background:#fff; font-size:12px}
.wbtn:hover{background:var(--hover)}
.wbtn.primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.wbtn.primary:hover{background:var(--blue-hover)}
.find-status{padding:2px 12px 6px; font-size:11px; color:var(--ink-2)}
#findResults{flex:1; overflow:auto; padding:2px 6px}
.find-hit{padding:5px 8px; border-radius:3px; cursor:pointer; font-size:12px; line-height:1.35; color:var(--ink-2)}
.find-hit:hover{background:var(--hover)}
.find-hit.current{background:#DEECF9}
.find-hit mark{background:#FFD335; color:#000; padding:0}

/* ============ MINI TOOLBAR ============ */
#miniToolbar{position:fixed; z-index:500; background:#fff; border:1px solid var(--line-2); box-shadow:0 3px 10px rgba(0,0,0,.18);
  border-radius:4px; display:flex; align-items:center; padding:2px; gap:0; opacity:0; transition:opacity .18s ease; pointer-events:none}
#miniToolbar.show{opacity:1; pointer-events:auto}
#miniToolbar .rbtn{height:24px; padding:0 5px}
#miniToolbar .mt-sep{width:1px; height:16px; background:var(--line); margin:0 3px}

/* ============ CONTEXT MENU ============ */
#contextMenu{position:fixed; z-index:550; background:#fff; border:1px solid var(--line-2); box-shadow:0 4px 14px rgba(0,0,0,.2);
  border-radius:4px; padding:4px; min-width:220px; animation:dropIn .08s ease-out}
#contextMenu .cm-suggest{font-weight:600}

/* ============ BACKSTAGE ============ */
#backstage{position:fixed; inset:0; z-index:300; display:flex; background:#fff; animation:bsIn .12s ease}
@keyframes bsIn{from{opacity:0} to{opacity:1}}
#bsRail{width:230px; background:var(--blue); display:flex; flex-direction:column; flex:none}
.bs-top{padding:10px 0 4px 8px}
.bs-back{width:38px; height:32px; border-radius:4px}
.bs-back:hover{background:var(--blue-hover)}
#bsNav{flex:1; padding-top:6px; overflow:auto}
.bs-bottom{padding:8px 0 14px}
.bs-item{display:flex; align-items:center; width:100%; text-align:left; color:#fff; padding:9px 22px; font-size:13.5px}
.bs-item:hover{background:var(--blue-hover)}
.bs-item.active{background:rgba(255,255,255,.16); box-shadow:inset 3px 0 0 #fff}
#bsContent{flex:1; overflow:auto; background:#fff; padding:28px 40px; user-select:none}
.bs-h1{font-size:24px; font-weight:600; margin-bottom:18px}
.bs-h2{font-size:15px; font-weight:600; margin:20px 0 10px}
.bs-cards{display:flex; gap:14px; flex-wrap:wrap}
.bs-card{width:170px; cursor:pointer}
.bs-card .bs-thumb{height:200px; border:1px solid var(--line-2); border-radius:3px; background:#fff; overflow:hidden; position:relative; padding:14px 16px}
.bs-card:hover .bs-thumb{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue)}
.bs-card .bs-name{text-align:center; padding:7px 0 0; font-size:12.5px}
.bs-thumb .thumb-line{height:5px; background:#D8D6D4; border-radius:2px; margin-bottom:7px}
.bs-thumb .thumb-title{height:9px; background:#A6B8D4; width:70%; margin-bottom:12px}
.bs-thumb .thumb-blank{display:flex; height:100%; align-items:center; justify-content:center; color:var(--ink-3)}
.bs-list-row{display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:4px; cursor:pointer; max-width:640px}
.bs-list-row:hover{background:#F0EBE4}
.bs-list-row .doc-ic{width:28px; height:34px; flex:none; border:1px solid #B8CCE8; border-radius:2px; background:linear-gradient(#fff,#F2F6FC); position:relative}
.bs-list-row .doc-ic::after{content:"W"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--blue); font-weight:700; font-size:13px}
.bs-list-row .nm{font-size:13px}
.bs-list-row .meta{font-size:11px; color:var(--ink-2)}
.bs-info-grid{display:grid; grid-template-columns:1fr 300px; gap:40px; max-width:900px}
.bs-props{font-size:12.5px; color:var(--ink-2); line-height:2}
.bs-props b{color:var(--ink); font-weight:600}
.bs-stat-chips{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0}
.bs-chip{background:#F3F2F1; border-radius:3px; padding:6px 12px; font-size:12px}
.bs-chip b{font-size:14px; margin-right:5px}
.print-opts{display:flex; flex-direction:column; gap:12px; width:250px; flex:none}
.print-opt{border:1px solid var(--line-2); border-radius:3px; padding:8px 10px; font-size:12.5px; background:#fff; width:100%; text-align:left}
#printPreviewWrap{flex:1; background:var(--canvas); border-radius:4px; overflow:auto; padding:24px; display:flex; flex-direction:column; align-items:center; gap:16px; max-height:calc(100vh - 120px)}
#printPreviewWrap .pv-page{box-shadow:0 2px 10px rgba(0,0,0,.2); background:#fff}
.bs-print-layout{display:flex; gap:24px; align-items:flex-start}
#printBtn{font-size:14px; padding:8px 30px; display:flex; gap:8px; align-items:center}

/* ============ DIALOGS ============ */
.dlg-back{position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:700; display:flex; align-items:center; justify-content:center; animation:tipIn .1s}
.dlg{background:#fff; border-radius:4px; box-shadow:0 8px 30px rgba(0,0,0,.3); width:460px; max-width:92vw; max-height:86vh; display:flex; flex-direction:column; overflow:hidden}
.dlg-head{display:flex; align-items:center; padding:10px 14px; font-size:14px; font-weight:600; border-bottom:1px solid var(--line); cursor:move; user-select:none}
.dlg-head .xbtn{margin-left:auto}
.dlg-body{padding:14px; overflow:auto; font-size:12.5px}
.dlg-foot{display:flex; justify-content:flex-end; gap:8px; padding:10px 14px; border-top:1px solid var(--line); background:#FAFAF9}
.dlg-row{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.dlg-row label{width:110px; color:var(--ink-2); flex:none}
.dlg input[type=text],.dlg input[type=number],.dlg select{border:1px solid var(--line-2); border-radius:2px; padding:4px 7px; font-size:12.5px; font-family:var(--font-ui); flex:1; min-width:0}
.dlg input:focus,.dlg select:focus{border-color:var(--blue); outline:none}
.dlg fieldset{border:1px solid var(--line); border-radius:3px; padding:10px; margin-bottom:12px}
.dlg legend{font-size:11.5px; color:var(--ink-2); padding:0 5px}
.dlg-tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); padding:0 12px}
.dlg-tab{padding:6px 12px; border-bottom:2px solid transparent; color:var(--ink-2)}
.dlg-tab.active{color:var(--blue); border-bottom-color:var(--blue); font-weight:600}
.symbol-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:2px}
.symbol-cell{aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:16px; border:1px solid transparent; border-radius:2px; cursor:pointer; font-family:Calibri}
.symbol-cell:hover{border-color:var(--blue); background:#F0F6FC}
.zoom-opts{display:flex; flex-direction:column; gap:7px}
.zoom-opts label{display:flex; align-items:center; gap:8px; cursor:pointer}
.wc-grid{display:grid; grid-template-columns:1fr auto; gap:5px 20px; font-size:12.5px}
.wc-grid .v{text-align:right; font-weight:600}

/* ============ KEYTIPS ============ */
#keytips{position:fixed; inset:0; z-index:650; pointer-events:none}
.keytip{position:absolute; background:#44413E; color:#fff; font-size:10px; padding:1px 4px; border-radius:2px; transform:translate(-50%,-50%)}

/* ============ COMMENTS ============ */
#commentPane{width:260px; flex:none; background:#FAFAF9; border-left:1px solid var(--line); display:flex; flex-direction:column}
#commentHead{padding:10px 14px 6px; font-size:14px; font-weight:600}
#commentList{flex:1; overflow:auto; padding:4px 10px; display:flex; flex-direction:column; gap:10px}
.comment-card{background:#fff; border:1px solid var(--line); border-radius:4px; padding:8px 10px; box-shadow:0 1px 3px rgba(0,0,0,.07)}
.comment-card .cc-head{display:flex; align-items:center; gap:7px; margin-bottom:5px}
.comment-card .cc-avatar{width:22px; height:22px; border-radius:50%; background:#E8A33D; font-size:10px; display:flex; align-items:center; justify-content:center; font-weight:600}
.comment-card .cc-name{font-size:12px; font-weight:600}
.comment-card .cc-time{font-size:10.5px; color:var(--ink-3)}
.comment-card .cc-quote{font-size:11px; color:var(--ink-2); border-left:2px solid #F2B600; padding-left:6px; margin-bottom:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.comment-card textarea{width:100%; border:none; outline:none; resize:none; font-family:var(--font-ui); font-size:12px; min-height:34px}
.comment-card .cc-foot{display:flex; justify-content:flex-end; gap:4px}
.comment-card .cc-foot button{font-size:11px; color:var(--ink-2); padding:2px 7px; border-radius:3px}
.comment-card .cc-foot button:hover{background:var(--hover)}

/* ============ DRAW ============ */
.draw-canvas{position:absolute; inset:0; z-index:4; pointer-events:none}
body.drawing .draw-canvas{pointer-events:auto; cursor:crosshair}
body.drawing .page-content{caret-color:transparent}
.pen-chip{display:inline-block; width:20px; height:20px; border-radius:2px; border:1px solid rgba(0,0,0,.2)}

/* gap hint */
#gapHint{position:fixed; z-index:80; background:#44413E; color:#fff; font-size:11px; padding:3px 9px; border-radius:3px; pointer-events:none; opacity:0; transition:opacity .15s}
#gapHint.show{opacity:.95}

/* Tell Me */
#tellmeDrop{width:340px}
.tm-item{display:flex; align-items:center; gap:9px; padding:7px 12px; cursor:pointer; border-radius:3px; font-size:12.5px}
.tm-item:hover,.tm-item.hot{background:var(--hover)}
.tm-item .tm-cat{margin-left:auto; font-size:10.5px; color:var(--ink-3)}

/* print media */
@media print{
  #titlebar,#ribbon,#statusbar,#rulerRow,#navPane,#commentPane,#miniToolbar,#contextMenu,#tooltip,#backstage,#gapHint,#keytips,.draw-canvas-off{display:none !important}
  body{overflow:visible}
  #app{height:auto; display:block}
  #mainArea{display:block}
  #workspace{background:#fff}
  #scrollArea{overflow:visible; padding:0}
  #pageSizer{width:auto !important; height:auto !important; transform:none !important}
  #pagesStack{transform:none !important}
  .page{margin:0; box-shadow:none; page-break-after:always; break-after:page}
  .page:last-child{page-break-after:auto; break-after:auto}
}