:root {
  --brand:#0f3d3e; --brand-2:#1a5c5e; --accent:#c45c26; --paper:#fffcf7;
  --bg:#f3f0ea; --muted:#e8e3da; --line:#d4cfc5; --text:#1a1c1b;
  --sub:#5c635f; --danger:#9b2c2c; --shadow:0 8px 28px #1a1c1b18;
  font-family:"Segoe UI",system-ui,sans-serif; color:var(--text); background:var(--bg);
}
*{box-sizing:border-box} body{margin:0;min-height:100vh} button,input,select,textarea{font:inherit}
button{cursor:pointer}.hidden{display:none!important}.muted{color:var(--sub)}.mono{font-family:ui-monospace,monospace}
.app{min-height:100vh;display:flex;flex-direction:column}.topbar{height:58px;background:var(--brand);color:#fff;display:flex;align-items:center;gap:10px;padding:8px 14px;position:sticky;top:0;z-index:20}
.brand{font-weight:750;font-size:20px;margin-right:6px}.brand small{opacity:.7;font-weight:500}.toolbar-group{display:flex;gap:6px;align-items:center;border-left:1px solid #ffffff30;padding-left:10px}
.btn{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:8px 11px;color:var(--text)}
.btn:hover{border-color:var(--brand-2)}.btn.primary{background:var(--accent);border-color:var(--accent);color:white}.btn.ghost{background:#ffffff14;border-color:#ffffff28;color:white}.btn.danger{color:var(--danger)}
.icon-btn{min-width:36px;padding:7px}.page-input{width:56px;padding:7px;border-radius:6px;border:1px solid var(--line)}
.workspace{flex:1;display:grid;grid-template-columns:240px 1fr 280px;min-height:0}.sidebar,.properties{background:var(--paper);border-right:1px solid var(--line);overflow:auto}.properties{border-right:0;border-left:1px solid var(--line);padding:14px}
.sidebar-head{padding:12px;border-bottom:1px solid var(--line);font-weight:650}.thumb-list{padding:10px;display:grid;gap:10px}.thumb{border:2px solid transparent;background:white;border-radius:7px;padding:5px;box-shadow:0 1px 4px #0002}.thumb.active{border-color:var(--accent)}.thumb canvas{width:100%}.thumb span{font-size:12px}
.viewer-wrap{position:relative;overflow:auto;background:#77746f;padding:22px}.pages{display:grid;gap:18px;justify-items:center}.page-shell{position:relative;background:white;box-shadow:var(--shadow);overflow:hidden}.page-shell canvas{display:block}.textLayer{position:absolute;inset:0;overflow:hidden;line-height:1;opacity:1}.textLayer span{color:transparent;position:absolute;white-space:pre;transform-origin:0 0;cursor:text}.textLayer ::selection{background:#58a6ff66}
.markup-layer{position:absolute;inset:0;pointer-events:none}.markup{position:absolute;border:2px solid var(--accent);pointer-events:auto;cursor:move}.markup.highlight{background:#ffe45c77;border:0}.markup.underline{border:0;border-bottom:2px solid var(--accent)}.markup.strikeout{border:0;border-top:2px solid var(--accent)}.markup.note{width:24px!important;height:24px!important;background:#ffd95c;border:1px solid #9a6b12;border-radius:4px}.markup.circle{border-radius:50%}.markup.line{height:0!important;transform-origin:left center}.markup.freeText{border:1px dashed var(--accent);padding:3px;background:#fff8}.markup.ink{border:0}
.empty{margin:auto;max-width:760px;padding:42px 24px}.hero{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:42px;text-align:center;box-shadow:var(--shadow)}.hero h1{font-size:40px;margin:0 0 10px}.hero p{font-size:18px;color:var(--sub)}.drop{margin:28px auto;padding:35px;border:2px dashed var(--brand-2);border-radius:14px;background:#e4f0f0}.drop.drag{background:#d1e9e9}.home-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:4px}.home-convert-note{margin:14px 0 0;font-size:14px;line-height:1.45}.home-caveat{margin:18px auto 0;max-width:560px;font-size:15px;line-height:1.5;color:var(--sub)}.home-credit{margin:22px 0 0;font-size:14px;color:var(--sub)}.home-credit a{color:var(--brand-2);font-weight:650;text-decoration:none}.home-credit a:hover{text-decoration:underline}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:24px}.tool-card{text-align:left;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.tool-card strong{display:block;margin-bottom:5px}
.panel h3{margin:0 0 12px}.field{display:grid;gap:5px;margin:0 0 12px}.field input,.field select,.field textarea{width:100%;padding:8px;border:1px solid var(--line);border-radius:7px;background:white}.row{display:flex;gap:8px;align-items:center}.row>*{min-width:0}.stack{display:grid;gap:8px}.privacy{font-size:13px;color:#d9eeee;margin-left:auto}.status{height:30px;padding:5px 12px;background:var(--paper);border-top:1px solid var(--line);font-size:13px;display:flex;justify-content:space-between}
.modal-backdrop{position:fixed;inset:0;background:#0008;display:grid;place-items:center;z-index:100}.modal{background:var(--paper);width:min(560px,calc(100vw - 28px));max-height:85vh;overflow:auto;border-radius:14px;padding:20px;box-shadow:var(--shadow)}.modal h2{margin-top:0}.file-picker-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.file-picker-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px}.file-picker-list{margin:12px 0 0;padding-left:1.25rem;font-size:14px;color:var(--sub)}.file-picker-list:empty{display:none}.file-field .file-picker-browse{display:inline-block;margin-top:4px}.file-drop-mini{margin-top:14px;padding:20px;font-size:15px}.toast-root{position:fixed;right:16px;bottom:44px;z-index:120;display:grid;gap:8px}.toast{background:#172f30;color:white;padding:11px 14px;border-radius:8px;box-shadow:var(--shadow)}.progress{height:7px;background:var(--muted);border-radius:9px;overflow:hidden}.progress>i{display:block;height:100%;background:var(--accent)}
.ink-filter{filter:grayscale(1) contrast(1.15)}.invert-filter{filter:invert(1) hue-rotate(180deg)}.light-filter{filter:grayscale(1) brightness(1.35) contrast(1.4)}
.viewer-zoom{width:100%;will-change:transform}#office-view{width:100%;min-height:calc(100vh - 88px)}.zoom-toolbar #zoom-label{min-width:3.2rem;text-align:center;font-size:13px;font-weight:600}
.office-workspace{grid-template-columns:220px 1fr}.office-workspace--solo{grid-template-columns:1fr}.office-workspace .properties{display:none!important}.office-view{background:#ece7df}.doc-page{width:min(860px,100%);margin:0 auto;background:white;box-shadow:var(--shadow);padding:42px 48px;line-height:1.55}.doc-page h1,.doc-page h2,.doc-page h3{margin:1.1em 0 .4em}.doc-page table{margin:12px 0}.doc-page td,.doc-page th{border:1px solid var(--line);padding:6px 8px}.doc-page img{max-width:100%;height:auto}.image-page{display:grid;place-items:center}.plain{white-space:pre-wrap;font-family:ui-monospace,monospace}
.slide-stage{position:relative;width:min(960px,100%);margin:0 auto;background:white;box-shadow:var(--shadow);overflow:hidden}.slide-block{position:absolute;overflow:hidden}.slide-text{font-size:18px;line-height:1.3;white-space:pre-wrap}.slide-vector{display:grid;place-items:center;padding:8px;background:#f7f3ec;border:1px dashed var(--line);color:var(--sub);font-size:13px;text-align:center}
.sheet-wrap{overflow:auto;max-height:calc(100vh - 130px);background:white;box-shadow:var(--shadow)}table.grid{border-collapse:separate;border-spacing:0;font-size:14px}table.grid td,table.grid th{border-right:1px solid #e6e0d6;border-bottom:1px solid #e6e0d6;padding:5px 8px;min-width:72px;background:white}table.grid thead th{position:sticky;top:0;background:#f7f3ec;z-index:2}.col-head{font-weight:600;text-align:center}.col-corner{z-index:3}.row-head{position:sticky;left:0;min-width:42px;background:#f7f3ec;z-index:1;text-align:center;font-weight:600}.freeze-col{position:sticky;left:42px;z-index:1}mark.hit{background:#ffe08a;color:inherit}.sheet-note{margin:0 0 8px}
.thumb{text-align:left}
@media(max-width:1000px){.workspace{grid-template-columns:180px 1fr}.properties{position:fixed;right:0;top:58px;bottom:30px;width:280px;z-index:30;box-shadow:var(--shadow)}.privacy{display:none}}
@media(max-width:700px){.topbar{overflow-x:auto}.brand small,.toolbar-group.pages-toolbar{display:none}.workspace{grid-template-columns:1fr}.sidebar{display:none}.viewer-wrap{padding:10px}.hero{padding:24px}.hero h1{font-size:30px}.properties{width:min(90vw,320px)}}