/* office-doc — style.css */
.office-doc-container {
    --office-doc-accent: var(--primary, #2563eb);
    --office-doc-accent-hover: var(--primary-hover, #1d4ed8);
    --office-doc-line: var(--border, #e5e7eb);
    --office-doc-txt: var(--text, #333333);
    --office-doc-txt2: var(--text-secondary, #6b7280);
    --office-doc-card: var(--bg-card, #ffffff);
    --office-doc-inp: var(--bg-input, #ffffff);
    --office-doc-btn: var(--bg-btn, #f3f4f6);
    --office-doc-btnh: var(--bg-btn-hover, #e5e7eb);
    --office-doc-ok: var(--success, #16a34a);
    --office-doc-err: var(--danger, #dc2626);
    --office-doc-r: var(--radius, 8px);
    --office-doc-rs: var(--radius-sm, 4px);
    --office-doc-paper: var(--text, #ffffff);
    --office-doc-ink: var(--text, #000000);
    --office-doc-ink2: var(--text-muted, #444444);
    --office-doc-ph: var(--border, #bbbbbb);
    --office-doc-rule: var(--text-muted, #999999);
    --office-doc-rule2: var(--text, #e5e7eb);
    --office-doc-code: var(--bg-sub, #f5f5f5);
    --office-doc-th: var(--bg-sub, #f0f0f0);
    --office-doc-link: var(--text, #0563c1);
    --office-doc-hit: var(--text, #ffd54f);
    --office-doc-hitcur: var(--text, #ffcdd2);
    --office-doc-cmt: var(--text, #fff8c5);
    --office-doc-cmtb: var(--text, #d4a72c);
    --office-doc-sh1: var(--text, #4472c4);
    --office-doc-sh2: var(--text, #ed7d31);
    --office-doc-sh3: var(--text, #70ad47);
    --office-doc-shadow: rgba(0,0,0,.18);
    --office-doc-maskbg: rgba(0,0,0,.45);
    --office-doc-grid: var(--text, #e8e8e8);
    --office-doc-on: var(--text, #ffffff);

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, "Segoe UI", "WenQuanYi Micro Hei", sans-serif;
    color: var(--office-doc-txt);
    font-size: 14px;
    line-height: 1.5;
}
.office-doc-container *, .office-doc-container *::before, .office-doc-container *::after { box-sizing: border-box; }

/* tabs */
.office-doc-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--office-doc-line); margin-bottom: 8px; }
.office-doc-tab {
    border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--office-doc-txt2);
    padding: 6px 14px; cursor: pointer; font-size: 13px; border-radius: var(--office-doc-rs) var(--office-doc-rs) 0 0;
    font-family: inherit; white-space: nowrap;
}
.office-doc-tab:hover { background: var(--office-doc-btn); color: var(--office-doc-txt); }
.office-doc-tab.office-doc-on {
    background: var(--office-doc-card); border-color: var(--office-doc-line); color: var(--office-doc-accent);
    font-weight: 600; box-shadow: inset 0 2px 0 var(--office-doc-accent);
}

/* ribbon */
.office-doc-ribbon { background: var(--office-doc-card); border: 1px solid var(--office-doc-line); border-radius: var(--office-doc-r); padding: 8px 10px; margin-bottom: 8px; }
.office-doc-pane { display: none; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; }
.office-doc-pane.office-doc-on { display: flex; }
.office-doc-grp { display: flex; flex-direction: column; gap: 5px; padding-right: 12px; border-right: 1px solid var(--office-doc-line); min-width: 0; }
.office-doc-grp:last-child { border-right: none; }
.office-doc-glbl { font-size: 11px; color: var(--office-doc-txt2); text-align: center; letter-spacing: .5px; }
.office-doc-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.office-doc-row-w { flex-wrap: wrap; }

.office-doc-btn {
    border: 1px solid var(--office-doc-line); background: var(--office-doc-btn); color: var(--office-doc-txt);
    padding: 4px 6px; border-radius: var(--office-doc-rs); cursor: pointer; font-size: 12px;
    font-family: inherit; white-space: nowrap; min-height: 30px; min-width: 32px; line-height: 1.2;
}
.office-doc-btn:hover { background: var(--office-doc-btnh); }
.office-doc-btn:active { transform: translateY(1px); }
.office-doc-btn.office-doc-on { background: var(--office-doc-accent); color: var(--office-doc-on); border-color: var(--office-doc-accent); }
.office-doc-pri { background: var(--office-doc-accent); color: var(--office-doc-on); border-color: var(--office-doc-accent); }
.office-doc-pri:hover { background: var(--office-doc-accent-hover); color: var(--office-doc-on); }
.office-doc-ico {
    border: 1px solid var(--office-doc-line); background: var(--office-doc-btn); color: var(--office-doc-txt);
    width: 30px; height: 28px; border-radius: var(--office-doc-rs); cursor: pointer; font-size: 13px;
    font-family: inherit; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.office-doc-ico:hover { background: var(--office-doc-btnh); }

/* ---- ribbon icons + hover tooltip ---- */
.office-doc-ic { width: 16px; height: 16px; flex: 0 0 16px; vertical-align: -3px; margin-right: 0; opacity: .9; }
.office-doc-btn { display: inline-flex; align-items: center; justify-content: center; }
.office-doc-btn[data-tip], .office-doc-ico[data-tip] { position: relative; }
.office-doc-btn[data-tip]::after, .office-doc-ico[data-tip]::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 5px); left: 50%;
    transform: translateX(-50%);
    background: var(--office-doc-txt, #333); color: var(--office-doc-card, #fff);
    font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0;
    padding: 4px 8px; border-radius: var(--office-doc-rs, 6px);
    white-space: nowrap; pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity .12s ease;
}
.office-doc-btn[data-tip]:hover::after, .office-doc-ico[data-tip]:hover::after {
    opacity: 1; visibility: visible;
}

.office-doc-ico.office-doc-on { background: var(--office-doc-accent); color: var(--office-doc-on); border-color: var(--office-doc-accent); }
.office-doc-sel {
    border: 1px solid var(--office-doc-line); background: var(--office-doc-inp); color: var(--office-doc-txt);
    padding: 5px 6px; border-radius: var(--office-doc-rs); font-size: 12px; font-family: inherit;
    min-height: 28px; max-width: 150px;
}
.office-doc-sel-n { max-width: 68px; }
.office-doc-inp {
    border: 1px solid var(--office-doc-line); background: var(--office-doc-inp); color: var(--office-doc-txt);
    padding: 5px 8px; border-radius: var(--office-doc-rs); font-size: 12px; font-family: inherit; min-height: 28px; min-width: 90px;
}
.office-doc-nb { width: 58px; }
.office-doc-lb { font-size: 12px; color: var(--office-doc-txt2); }
.office-doc-ck { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--office-doc-txt); cursor: pointer; white-space: nowrap; }
.office-doc-cl { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; border: 1px solid var(--office-doc-line); background: var(--office-doc-btn); border-radius: var(--office-doc-rs); padding: 0 6px; height: 28px; }
.office-doc-cl input { width: 22px; height: 22px; border: none; background: transparent; padding: 0; cursor: pointer; }
.office-doc-cl span { font-size: 12px; color: var(--office-doc-txt); }

/* find bar */
.office-doc-fbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--office-doc-card); border: 1px solid var(--office-doc-line); border-radius: var(--office-doc-r); padding: 8px 10px; margin-bottom: 10px; }
.office-doc-fc { font-size: 12px; color: var(--office-doc-txt2); min-width: 60px; }
.office-doc-fbar[hidden], .office-doc-mask[hidden] { display: none; }

/* body / nav / stage */
.office-doc-body { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.office-doc-nav { width: 200px; flex: 0 0 200px; background: var(--office-doc-card); border: 1px solid var(--office-doc-line); border-radius: var(--office-doc-r); padding: 10px; max-height: 620px; overflow: auto; }
.office-doc-nvh { font-size: 12px; font-weight: 600; color: var(--office-doc-txt2); margin-bottom: 8px; }
.office-doc-nvl { display: flex; flex-direction: column; gap: 4px; }
.office-doc-nvi { font-size: 12px; color: var(--office-doc-txt); cursor: pointer; padding: 4px 6px; border-radius: var(--office-doc-rs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: none; background: transparent; text-align: left; font-family: inherit; width: 100%; }
.office-doc-nvi:hover { background: var(--office-doc-btn); }
.office-doc-nvi.lv2 { padding-left: 18px; }
.office-doc-nvi.lv3 { padding-left: 30px; }

.office-doc-stage { flex: 1 1 auto; min-width: 0; overflow: auto; max-height: 680px; background: var(--office-doc-btn); border: 1px solid var(--office-doc-line); border-radius: var(--office-doc-r); padding: 14px; }
.office-doc-ruler { height: 22px; margin: 0 auto 6px; background: var(--office-doc-card); border: 1px solid var(--office-doc-line); border-radius: var(--office-doc-rs); width: 100%; position: relative; overflow: hidden; }
.office-doc-ruler canvas { display: block; width: 100%; height: 100%; }

/* page sheet */
.office-doc-sheet {
    position: relative;
    --office-doc-pw: 210mm; --office-doc-ph: 297mm; --office-doc-pad: 25mm 22mm;
    width: var(--office-doc-pw); min-height: var(--office-doc-ph); margin: 0 auto;
    background: var(--office-doc-paper); color: var(--office-doc-ink); box-shadow: 0 2px 12px var(--office-doc-shadow);
    padding: var(--office-doc-pad); box-sizing: border-box;
    transform-origin: top center; font-family: "Calibri", "Songti SC", "SimSun", serif;
}
.office-doc-sheet.office-doc-landscape { --office-doc-pw: 297mm; --office-doc-ph: 210mm; }
.office-doc-doc { min-height: 180mm; outline: none; font-size: 11pt; line-height: 1.5; }
.office-doc-doc:focus, .office-doc-hdr:focus, .office-doc-ftr:focus { outline: none; }
.office-doc-hdr[hidden], .office-doc-ftr[hidden] { display: none !important; }
.office-doc-hdr, .office-doc-ftr { outline: none; font-size: 9pt; color: var(--office-doc-ink2); padding: 4px 0; border-bottom: 1px solid var(--office-doc-rule2); margin-bottom: 6px; }
.office-doc-ftr { border-bottom: none; border-top: 1px solid var(--office-doc-rule2); margin: 6px 0 0; }
.office-doc-hdr:empty::before, .office-doc-ftr:empty::before { content: attr(data-ph); color: var(--office-doc-ph); }

/* document content styles */
.office-doc-doc h1 { font-size: 22pt; margin: 12pt 0 6pt; line-height: 1.2; }
.office-doc-doc h2 { font-size: 17pt; margin: 10pt 0 5pt; line-height: 1.25; }
.office-doc-doc h3 { font-size: 14pt; margin: 8pt 0 4pt; line-height: 1.3; }
.office-doc-doc p { margin: 0 0 6pt; }
.office-doc-doc blockquote { margin: 8pt 0 8pt 14pt; padding-left: 10pt; border-left: 3px solid var(--office-doc-rule); color: var(--office-doc-ink2); }
.office-doc-doc pre { background: var(--office-doc-code); padding: 8pt; border-radius: 3px; font-family: "Consolas", monospace; white-space: pre-wrap; word-break: break-word; }
.office-doc-doc ul, .office-doc-doc ol { margin: 4pt 0 8pt; padding-left: 22pt; }
.office-doc-doc li { margin: 2pt 0; }
.office-doc-doc table { border-collapse: collapse; margin: 8pt 0; }
.office-doc-doc td, .office-doc-doc th { border: 1px solid var(--office-doc-rule); padding: 4pt 6pt; min-width: 24pt; }
.office-doc-doc th { background: var(--office-doc-th); font-weight: 600; }
.office-doc-doc img { max-width: 100%; height: auto; }
.office-doc-doc img.office-doc-fl { float: left; margin: 0 8pt 8pt 0; }
.office-doc-doc img.office-doc-fr { float: right; margin: 0 0 8pt 8pt; }
.office-doc-doc a { color: var(--office-doc-link); }
.office-doc-doc hr { border: none; border-top: 1px solid var(--office-doc-rule); margin: 10pt 0; }
.office-doc-doc .office-doc-pb { border-top: 1px dashed var(--office-doc-rule); margin: 14pt 0; page-break-after: always; }
.office-doc-doc .office-doc-shp { display: inline-block; vertical-align: middle; }
.office-doc-doc .office-doc-cmt { background: var(--office-doc-cmt); border-bottom: 1px dotted var(--office-doc-cmtb); }
.office-doc-doc .office-doc-hit { background: var(--office-doc-hit); }
.office-doc-doc .office-doc-miss { background: var(--office-doc-hitcur); }
.office-doc-doc .office-doc-toc a { color: var(--office-doc-link); text-decoration: none; }
.office-doc-doc.office-doc-grid { background-image: linear-gradient(var(--office-doc-grid) 1px, transparent 1px); background-size: 100% 18pt; }


.office-doc-doc .office-doc-shp { display: inline-block; width: 90px; height: 60px; vertical-align: middle; }
.office-doc-doc .office-doc-shp-rect { background: var(--office-doc-sh1); }
.office-doc-doc .office-doc-shp-round { background: var(--office-doc-sh1); border-radius: 12px; }
.office-doc-doc .office-doc-shp-circle { background: var(--office-doc-sh1); border-radius: 50%; width: 70px; }
.office-doc-doc .office-doc-shp-tri { width: 0; height: 0; background: none; border-left: 45px solid transparent; border-right: 45px solid transparent; border-bottom: 70px solid var(--office-doc-sh1); }
.office-doc-doc .office-doc-shp-star { background: var(--office-doc-sh2); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.office-doc-doc .office-doc-shp-arrow { background: var(--office-doc-sh3); clip-path: polygon(0% 35%, 60% 35%, 60% 0%, 100% 50%, 60% 100%, 60% 65%, 0% 65%); }

/* status */
.office-doc-stat { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; padding: 6px 10px; background: var(--office-doc-card); border: 1px solid var(--office-doc-line); border-radius: var(--office-doc-r); font-size: 12px; color: var(--office-doc-txt2); }
.office-doc-stat b { color: var(--office-doc-txt); font-weight: 600; }
.office-doc-msg { margin-left: auto; color: var(--office-doc-ok); }
.office-doc-msg.office-doc-err { color: var(--office-doc-err); }

/* dialog */
.office-doc-mask { position: absolute; inset: 0; background: var(--office-doc-maskbg); display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: var(--office-doc-r); }
.office-doc-dlg { background: var(--office-doc-card); border: 1px solid var(--office-doc-line); border-radius: var(--office-doc-r); width: 480px; max-width: 100%; display: flex; flex-direction: column; max-height: 80%; }
.office-doc-dh { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--office-doc-line); font-weight: 600; font-size: 14px; }
.office-doc-dx { border: none; background: transparent; color: var(--office-doc-txt2); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; font-family: inherit; }
.office-doc-db { padding: 14px; overflow: auto; flex: 1 1 auto; font-size: 13px; }
.office-doc-db p { margin: 0 0 8px; }
.office-doc-db table { border-collapse: collapse; width: 100%; }
.office-doc-db td { border: 1px solid var(--office-doc-line); padding: 5px 8px; }
.office-doc-db td:first-child { color: var(--office-doc-txt2); width: 40%; }
.office-doc-df { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--office-doc-line); }

.office-doc-print { display: none; }

/* responsive */
@media (max-width: 1100px) {
    .office-doc-nav { display: none; }
}
@media (max-width: 768px) {
    .office-doc-grp { border-right: none; padding-right: 0; width: 100%; }
    .office-doc-pane { flex-direction: column; }
    .office-doc-stage { max-height: 520px; padding: 8px; }
    .office-doc-stat { gap: 8px; font-size: 11px; }
    .office-doc-dlg { width: 100%; }
}
@media (max-width: 420px) {
    .office-doc-tab { padding: 5px 9px; font-size: 12px; }
    .office-doc-sel { max-width: 110px; }
    .office-doc-msg { margin-left: 0; width: 100%; }
}

/* print */
@media print {
    .office-doc-tabs, .office-doc-ribbon, .office-doc-fbar, .office-doc-stat,
    .office-doc-mask, .office-doc-nav, .office-doc-ruler, .office-doc-stage > .office-doc-ruler { display: none !important; }
    .office-doc-container, .office-doc-body, .office-doc-stage { display: block !important; background: var(--office-doc-paper) !important; border: none !important; padding: 0 !important; margin: 0 !important; max-height: none !important; overflow: visible !important; }
    .office-doc-sheet {
        box-shadow: none !important; margin: 0 !important; transform: none !important;
        width: auto !important; min-height: 0 !important; padding: 0 !important;
    }
    .office-doc-doc { min-height: 0 !important; }
    .office-doc-hdr, .office-doc-ftr { border-color: var(--office-doc-rule) !important; }
    .office-doc-doc .office-doc-pb { page-break-after: always; }
    .office-doc-doc table { page-break-inside: auto; }
    .office-doc-doc tr { page-break-inside: avoid; }
    .office-doc-doc h1, .office-doc-doc h2, .office-doc-doc h3 { page-break-after: avoid; }
    .office-doc-doc img { page-break-inside: avoid; }
}

/* ---- v1.1.0 additions ---- */
.office-doc-doc img.office-doc-isel { outline: 2px solid var(--office-doc-accent); outline-offset: 2px; }
.office-doc-doc .office-doc-cmt { background: var(--office-doc-cmt); border-bottom: 1px dotted var(--office-doc-cmtb); cursor: help; }
.office-doc-doc [data-note] { position: relative; }
.office-doc-doc [data-note]:hover::after {
    content: attr(data-note);
    position: absolute; left: 0; top: 100%;
    min-width: 140px; max-width: 260px;
    background: var(--office-doc-panel); color: var(--office-doc-txt);
    border: 1px solid var(--office-doc-line); border-radius: var(--office-doc-rs);
    padding: 6px 8px; font-size: 12px; line-height: 1.5;
    white-space: pre-wrap; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.office-doc-sheet .office-doc-wmlay {
    position: absolute; inset: 0;
    pointer-events: none; user-select: none; overflow: hidden;
}
.office-doc-sheet .office-doc-doc,
.office-doc-sheet .office-doc-hdr,
.office-doc-sheet .office-doc-ftr { position: relative; }
.office-doc-sheet .office-doc-wmlay[hidden] { display: none; }
.office-doc-sheet .office-doc-wmimg {
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    object-fit: none; object-position: left top;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.office-doc-db .office-doc-dlg-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.office-doc-db .office-doc-dlg-lb { min-width: 120px; font-size: 13px; color: var(--office-doc-txt2); }
.office-doc-db .office-doc-dlg-in {
    flex: 1 1 160px; min-width: 120px;
    padding: 6px 8px; font-size: 13px;
    border: 1px solid var(--office-doc-line); border-radius: var(--office-doc-rs);
    background: var(--office-doc-surface); color: var(--office-doc-txt);
}
.office-doc-db .office-doc-dlg-in:focus { outline: 2px solid var(--office-doc-accent); outline-offset: 0; }
.office-doc-db textarea.office-doc-dlg-in { width: 100%; resize: vertical; font-family: inherit; }
.office-doc-db .office-doc-dlg-tip { font-size: 12px; color: var(--office-doc-txt2); margin: 8px 0 0; }
.office-doc-db .office-doc-dlg-list { max-height: 240px; overflow-y: auto; margin-top: 8px; }
.office-doc-db table { border-collapse: collapse; width: 100%; }
.office-doc-db table td { padding: 5px 8px; border-bottom: 1px solid var(--office-doc-line); font-size: 13px; }
.office-doc-db table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
@media print {
    .office-doc-sheet .office-doc-wmlay { position: absolute; inset: 0; display: block; }
    .office-doc-sheet .office-doc-wmimg {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}

/* line numbers (V1.4) */
.office-doc-body.office-doc-ln { counter-reset: odln; }
.office-doc-body.office-doc-ln > p,
.office-doc-body.office-doc-ln > h1,
.office-doc-body.office-doc-ln > h2,
.office-doc-body.office-doc-ln > h3,
.office-doc-body.office-doc-ln > li { position: relative; padding-left: 34px; }
.office-doc-body.office-doc-ln > p::before,
.office-doc-body.office-doc-ln > h1::before,
.office-doc-body.office-doc-ln > h2::before,
.office-doc-body.office-doc-ln > h3::before,
.office-doc-body.office-doc-ln > li::before {
    counter-increment: odln;
    content: counter(odln);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    text-align: right;
    color: var(--muted, #94a3b8);
    font-size: 12px;
    user-select: none;
}

/* right-click context menu (rendered on document.body, must use platform-level vars) */
.office-doc-ctx { position: absolute; min-width: 172px; max-width: 260px; padding: 4px;
    background: var(--bg-card, #ffffff); border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-sm, 6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16); }
.office-doc-ctx[hidden] { display: none; }
.office-doc-ctxi { display: block; width: 100%; text-align: left; padding: 6px 10px;
    font-family: inherit; font-size: 13px; line-height: 1.4; color: var(--text, #333333);
    background: transparent; border: none; border-radius: var(--radius-sm, 6px); cursor: pointer; }
.office-doc-ctxi:hover { background: var(--bg-btn-hover, #e5e7eb); }
.office-doc-ctxsep { height: 1px; margin: 4px 6px; background: var(--border, #e5e7eb); }

/* unified ribbon control box */
.office-doc-ribbon button { min-height: 30px; min-width: 32px; }