/* ============ base.css — reset, variables, app shell, title bar, status bar ============ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Segoe UI','Calibri',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:12px;color:#1e1e1e;background:#fff;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
svg.ic{width:16px;height:16px;fill:currentColor;pointer-events:none}
button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
[hidden]{display:none!important}

#app{
  --accent:#2b579a;
  --tb-h:44px; --tabstrip-h:38px; --sb-h:27px;
  --titlebar-bg:#2b579a; --titlebar-fg:#fff;
  --tabstrip-bg:#2b579a; --tab-fg:#fff; --tab-hover:#3a6bb5; --tab-active-bg:#fff; --tab-active-fg:#1e1e1e;
  --ribbon-bg:#fff; --ribbon-fg:#262626;
  --btn-hover:#e4e6ea; --btn-active:#d0d3d8; --btn-disabled:#c8c8c8;
  --statusbar-bg:#f4f4f4; --statusbar-fg:#444;
  --editor-bg:#f3f3f3; --ruler-bg:#fff;
  --sel:#cce4f5;
  --page-shadow:0 0 0 1px #d0d0d0,0 2px 8px rgba(0,0,0,.18),0 12px 28px rgba(0,0,0,.12);
  --menu-bg:#fff; --menu-fg:#1e1e1e; --menu-border:#d5d5d5; --menu-hover:#d8ecf9; --menu-sep:#e4e4e4;
  --input-bg:#fff; --input-border:#ababab;
  --dialog-bg:#f3f3f3; --dialog-titlebar:#fff;
  --scrollthumb:#b8b8b8;
  display:flex;flex-direction:column;height:100vh;
}

/* ---------------- Title bar ---------------- */
#titlebar{
  height:var(--tb-h);background:var(--titlebar-bg);color:var(--titlebar-fg);
  display:flex;align-items:center;gap:2px;padding:0 6px 0 10px;flex:0 0 auto;
}
.tb-btn{
  width:28px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:inherit;
}
.tb-btn:hover{background:rgba(255,255,255,.16)}
.tb-btn:active{background:rgba(255,255,255,.28)}
.tb-btn:disabled{color:rgba(255,255,255,.35);cursor:default}
.tb-btn:disabled:hover{background:none}
.tb-appicon{width:26px;height:26px;margin-right:4px}
.tb-appicon svg{width:26px;height:26px}
#qat{display:flex;align-items:center;position:relative}
#qat .tb-btn svg{width:16px;height:16px}
.qat-more-wrap{position:relative}
#qatMenu{position:fixed;z-index:200;top:auto;left:auto}
#tbTitle{display:flex;align-items:baseline;gap:6px;margin-left:18px;font-size:12px;white-space:nowrap;overflow:hidden;min-width:0;flex:0 1 auto}
.doc-title{font-weight:400}
.doc-title-suffix{opacity:.75}
.dirty-dot{width:7px;height:7px;border-radius:50%;background:#ffd83d;flex:0 0 auto}
#autosaveBox{display:flex;align-items:center;gap:6px;margin-left:10px;padding:2px 8px;border-radius:4px;flex:0 0 auto;white-space:nowrap}
#autosaveBox:hover{background:rgba(255,255,255,.16)}
.autosave-label{font-size:11.5px;opacity:.9}
.switch{width:34px;height:18px;border-radius:10px;background:rgba(255,255,255,.35);position:relative;transition:background .15s;flex:0 0 auto}
.switch[aria-checked="true"]{background:#57ab5a}
.switch .knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch[aria-checked="true"] .knob{left:18px}
#saveStatus{margin-left:6px;font-size:11px;opacity:.85;white-space:nowrap;flex:0 0 auto}
#tellmeWrap{margin-left:auto;position:relative;display:flex;align-items:center}
.tellme-box{
  display:flex;align-items:center;background:#fff;color:#1e1e1e;border-radius:3px;
  width:220px;height:28px;padding:0 8px;border:1px solid rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.tellme-box:focus-within{outline:1px solid #7a9fd1}
.tellme-icon{width:14px;height:14px;fill:#666;margin-right:6px;flex:0 0 auto}
#tellmeInput{border:none;outline:none;width:100%;font-size:12px;background:transparent}
.tellme-menu{position:fixed;z-index:200}
#winCtrls{display:flex;align-items:center;margin-left:10px;flex:0 0 auto}
.wc-btn{
  width:44px;height:var(--tb-h);display:flex;align-items:center;justify-content:center;color:inherit;
  margin-right:-6px;
}
.wc-btn:hover{background:rgba(255,255,255,.16)}
.wc-close:hover{background:#c42b1c}
.wc-btn svg{width:12px;height:12px}

/* ---------------- Tab strip ---------------- */
#tabstrip{
  height:var(--tabstrip-h);background:var(--tabstrip-bg);display:flex;align-items:flex-end;
  padding:0 2px;flex:0 0 auto;position:relative;z-index:60;
}
.tab{
  height:32px;padding:0 14px;color:var(--tab-fg);border-radius:4px 4px 0 0;font-size:12.5px;
  display:flex;align-items:center;gap:7px;border-bottom:2px solid transparent;margin-bottom:2px;margin-right:2px;
}
.tab:hover{background:var(--tab-hover)}
.tab.active{
  background:var(--tab-active-bg);color:var(--tab-active-fg);border-bottom:2px solid #fff;
}
.tab.active:hover{background:var(--tab-active-bg)}
.file-tab{font-weight:600}
.file-w svg{width:22px;height:22px}
.file-w{width:22px;height:22px;display:flex}
.tabstrip-spacer{flex:1}
.ribbon-display-wrap{position:relative}
.ribbon-display-btn{width:34px;padding:0;justify-content:center}
.ribbon-display-btn svg{width:18px;height:18px}

/* ---------------- Status bar ---------------- */
#statusbar{
  height:var(--sb-h);background:var(--statusbar-bg);color:var(--statusbar-fg);
  display:flex;align-items:center;justify-content:space-between;padding:0 12px;flex:0 0 auto;
  border-top:1px solid #d9d9d9;font-size:11.5px;user-select:none;
}
.sb-left{display:flex;align-items:center;gap:0;min-width:0}
.sb-item{padding:3px 9px;border-radius:3px;white-space:nowrap;cursor:default;height:22px;display:flex;align-items:center}
.sb-item:hover{background:var(--btn-hover)}
.sb-item:active{background:var(--btn-active)}
.sb-right{display:flex;align-items:center;gap:3px}
.sb-viewbtn{width:24px;height:22px;border-radius:3px;display:flex;align-items:center;justify-content:center}
.sb-viewbtn:hover{background:var(--btn-hover)}
.sb-viewbtn.active{background:#d5e4f3}
.sb-viewbtn svg{width:15px;height:15px;fill:#444}
.sb-sep{width:1px;height:16px;background:#d0d0d0;margin:0 6px}
.sb-zoombtn{width:20px;height:22px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#444}
.sb-zoombtn:hover{background:var(--btn-hover)}
#sbZoomSlider{width:90px;height:14px;accent-color:var(--accent)}
.sb-zoomval{min-width:46px;height:22px;border-radius:3px;padding:0 6px;font-size:11.5px;text-align:center}
.sb-zoomval:hover{background:var(--btn-hover)}
.sb-fitbtn{width:24px;height:22px;border-radius:3px;display:flex;align-items:center;justify-content:center}
.sb-fitbtn:hover{background:var(--btn-hover)}
.sb-fitbtn svg{width:14px;height:14px;fill:#444}
.sb-proofing{width:20px;display:flex;align-items:center;justify-content:center}
.sb-proofing svg{width:14px;height:14px;fill:#57ab5a}
.sb-proofing.has-errors svg{fill:#c8a64a}
.sb-proofing.has-errors:hover{background:transparent;cursor:pointer}
#sbAccess svg{width:14px;height:14px;fill:#666}

/* ---------------- Scrollbars ---------------- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scrollthumb);border:3px solid transparent;background-clip:content-box;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#a0a0a0;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ---------------- Generic menu ---------------- */
.menu{
  position:fixed;z-index:500;background:var(--menu-bg);color:var(--menu-fg);
  border:1px solid var(--menu-border);border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.12);
  padding:4px;min-width:150px;max-height:70vh;overflow-y:auto;
}
.menu-item{
  display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:3px;font-size:12.5px;
  cursor:pointer;white-space:nowrap;min-height:24px;
}
.menu-item:hover{background:var(--menu-hover)}
.menu-item:active{background:#bcd8ee}
.menu-item.disabled{color:#a8a8a8;pointer-events:none}
.menu-item .mi-icon{width:16px;height:16px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.menu-item .mi-icon svg{width:15px;height:15px;fill:currentColor}
.menu-item .mi-label{flex:1}
.menu-item .mi-check{width:16px;display:flex;align-items:center;justify-content:center}
.menu-item .mi-check svg{width:13px;height:13px;fill:var(--accent)}
.menu-item .mi-shortcut{color:#777;font-size:11px;margin-left:14px}
.menu-sep{height:1px;background:var(--menu-sep);margin:4px 6px}
.menu-header{padding:5px 10px 3px;font-size:11px;color:#666;font-weight:600}
.menu-scroll{max-height:320px;overflow-y:auto}
.menu-title{padding:6px 10px;font-weight:600;font-size:12.5px;border-bottom:1px solid var(--menu-sep);margin-bottom:4px}

/* tooltip */
.tooltip{
  position:fixed;z-index:2000;background:#fff;color:#1e1e1e;border:1px solid #c8c8c8;
  border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.2);padding:7px 10px;max-width:340px;
  font-size:12px;pointer-events:none;
}
.tooltip .tt-title{font-weight:600;margin-bottom:2px}
.tooltip .tt-desc{color:#444;font-size:11.5px;line-height:1.35}
.tooltip .tt-shortcut{color:#777;font-size:11px;margin-top:3px;font-weight:600}

/* context menu */
.context-menu{position:fixed;z-index:1900;min-width:200px}
.context-menu .menu-item{min-height:26px}

/* toast */
#toastroot{position:fixed;bottom:44px;left:50%;transform:translateX(-50%);z-index:3000;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{
  background:#323232;color:#fff;padding:8px 16px;border-radius:3px;font-size:12.5px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);opacity:0;transform:translateY(8px);transition:all .18s;max-width:70vw;
}
.toast.show{opacity:1;transform:translateY(0)}

/* floating mini bar (selection) */
#floatingBar{
  position:fixed;z-index:1200;background:#fff;border:1px solid var(--menu-border);border-radius:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);display:flex;align-items:center;padding:2px;gap:1px;
}
#floatingBar .ribbon-btn{width:30px;height:28px}
#floatingBar .ribbon-btn.active{background:#d5e4f3}

/* dialogs */
.dialog-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1500;
  display:flex;align-items:flex-start;justify-content:center;padding-top:9vh;
}
.dialog{
  background:var(--dialog-bg);border:1px solid #d0d0d0;border-radius:4px;
  box-shadow:0 14px 40px rgba(0,0,0,.3);min-width:340px;max-width:94vw;
}
.dialog-titlebar{
  background:var(--dialog-titlebar);border-bottom:1px solid #d5d5d5;border-radius:4px 4px 0 0;
  padding:10px 14px;display:flex;align-items:center;gap:10px;
}
.dialog-title{font-size:13.5px;font-weight:600;flex:1}
.dialog-close{width:26px;height:24px;border-radius:3px;display:flex;align-items:center;justify-content:center;color:#555}
.dialog-close:hover{background:var(--btn-hover)}
.dialog-close svg{width:12px;height:12px}
.dialog-body{padding:14px 16px;max-height:72vh;overflow-y:auto}
.dialog-foot{padding:10px 16px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #e0e0e0;background:#fff;border-radius:0 0 4px 4px}
.dlg-btn{
  padding:5px 18px;border-radius:3px;background:#f5f5f5;border:1px solid #c8c8c8;font-size:12.5px;min-width:80px;
}
.dlg-btn:hover{background:#e9e9e9}
.dlg-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.dlg-btn.primary:hover{background:#24508c}
.dlg-btn:disabled{color:#a8a8a8;pointer-events:none}
.dlg-field{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.dlg-field label{min-width:96px;text-align:right;font-size:12px;color:#333}
.dlg-field input[type=text],.dlg-field input[type=number],.dlg-field select{
  height:24px;border:1px solid var(--input-border);border-radius:2px;padding:0 6px;background:var(--input-bg);font-size:12.5px;flex:1;min-width:0;
}
.dlg-field input:focus,.dlg-field select:focus{outline:1px solid var(--accent)}
.dlg-row{display:flex;gap:18px}
.dlg-col{flex:1}
.dlg-check{display:flex;align-items:center;gap:6px;font-size:12.5px;margin-bottom:6px;cursor:pointer}
.dlg-check input{accent-color:var(--accent)}
fieldset{border:1px solid #d5d5d5;border-radius:3px;padding:8px 12px;margin-bottom:12px}
fieldset legend{font-size:12px;font-weight:600;padding:0 4px;color:#333}
.dlg-preview{border:1px solid #d5d5d5;background:#fff;border-radius:3px;padding:12px;margin-top:8px;min-height:70px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.form-title{font-size:13px;font-weight:600;margin-bottom:10px}

/* dropdown layer click-catcher */
#dropdownLayer{position:fixed;inset:0;z-index:400}

/* image resize handles */
#imageHandles{position:fixed;z-index:900;pointer-events:none}
#imageHandles .ih-corner{position:absolute;width:9px;height:9px;background:#fff;border:1px solid var(--accent);pointer-events:auto}
#imageHandles .ih-bracket{position:absolute;background:var(--accent);pointer-events:none}