:root{font-family:system-ui,"Microsoft YaHei",sans-serif;color:#23364b;background:#f2f6fa}*{box-sizing:border-box}body{margin:0}.hidden{display:none!important}.page{min-height:100dvh}.login-card{width:min(400px,calc(100% - 36px));margin:10dvh auto;background:white;border:1px solid #dce5ee;border-radius:20px;padding:30px;box-shadow:0 8px 28px #29476715}.brand{width:52px;height:52px}.login-card h1{margin:12px 0 4px;font-size:27px}.login-card p{color:#687e94}.login-card label{display:block;margin:20px 0 7px;font-weight:600}.login-card input{width:100%;height:46px;padding:10px 12px;border:1px solid #bdccda;border-radius:10px;font:inherit}.login-card input:focus{outline:2px solid #83b5e0;border-color:#365e86}button{font:inherit;cursor:pointer;border:1px solid #cbd9e5;border-radius:10px;background:white;color:#284b6e;padding:9px 14px;min-height:42px}button:disabled{opacity:.6;cursor:default}.primary{background:#365e86;color:white;border-color:#365e86;font-weight:600}.login-card .primary{width:100%;margin-top:24px}.quiet{background:transparent;border-color:transparent}.error{color:#b02c37;min-height:20px}.topbar{height:64px;background:#e6eef7;border-bottom:1px solid #d1dfec;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:8px}.topbar strong{font-size:18px}.topbar small{display:block;color:#657d94;font-size:12px}.overview{display:flex;align-items:center;justify-content:space-between;padding:22px 18px 10px;gap:12px}.overview h1{font-size:25px;margin:0 0 5px}.overview p{margin:0;color:#5d748a;font-size:13px}.overview p.online{color:#267251}.overview p.offline{color:#a0523c}#board-error{padding:0 18px;margin:0}.board-list{padding:10px 16px 30px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.board-card{border:1px solid #d6e2ec;background:white;border-radius:15px;overflow:hidden;text-align:left;padding:0;box-shadow:0 2px 9px #29476712}.board-card img{display:block;width:100%;height:150px;object-fit:contain;background:#fff}.board-card .body{display:block;padding:13px 15px}.board-card strong{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-card small{display:block;margin-top:6px;color:#72869a}.empty{grid-column:1/-1;padding:50px 16px;text-align:center;color:#718497;background:white;border-radius:15px}.viewerbar{background:#e6eef7}.viewerbar strong{max-width:50vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viewer-tools{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:white;border-bottom:1px solid #e2e8ef;font-size:12px;color:#73879a}.viewer-tools button{min-height:32px;padding:3px 9px}.viewer-stage{height:calc(100dvh - 112px);overflow:auto;background:#dce6f0;display:flex;align-items:center;justify-content:center;touch-action:pan-x pan-y}.viewer-stage img{display:block;max-width:none;max-height:none;width:auto;height:auto;background:white;box-shadow:0 4px 20px #20344b22;object-fit:contain}.viewer-stage img.loading{visibility:hidden}@media(max-width:520px){.overview{padding-top:18px}.board-list{grid-template-columns:1fr 1fr;gap:10px;padding:10px}.board-card img{height:116px}.board-card .body{padding:10px}.board-card strong{font-size:13px}.board-card small{font-size:11px}}

.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:18px 0 16px;padding:4px;border-radius:12px;background:#e8eef5}.auth-tabs button{border:0;border-radius:9px;padding:10px;background:transparent;color:#587089;font-weight:700}.auth-tabs button.active{background:#fff;color:#23496d;box-shadow:0 2px 8px #23496d18}.remember{display:flex;align-items:center;gap:8px;margin:14px 0;color:#52677b}.remember input{width:18px;height:18px}.login-card details{margin-top:16px;color:#718295;font-size:12px}
.viewer-tools>div{display:flex;gap:4px}.viewer-tools button{min-width:46px;min-height:40px;padding:4px 11px;font-size:16px;touch-action:manipulation}.viewer-tools #zoom-reset{min-width:72px;font-size:14px}.page,.viewer-stage{background-color:#f7f8fa;background-image:radial-gradient(circle,#b9c3cd 1px,transparent 1.2px);background-size:24px 24px}.topbar,.viewer-tools,.overview,.board-list{background-image:none}.viewer-stage{overflow:hidden;display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none}.viewer-stage img{transform-origin:center center;-webkit-user-drag:none;pointer-events:none;image-rendering:auto}.viewer-stage img.gesturing{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cache-panel{margin:4px 18px 8px;padding:11px 13px;border:1px solid #d4e0eb;border-radius:12px;background:#fff;color:#526b82;font-size:12px}.cache-panel>div{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px}.cache-panel strong{color:#294e71}.cache-panel progress{display:block;width:100%;height:8px;border:0;border-radius:8px;overflow:hidden;accent-color:#365e86}.cache-panel progress::-webkit-progress-bar{background:#e6edf4}.cache-panel progress::-webkit-progress-value{background:#365e86;border-radius:8px}.cache-panel.complete progress::-webkit-progress-value{background:#2f7a57}


#viewer-page{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}#viewer-page .topbar,#viewer-page .viewer-tools{flex-shrink:0}.viewer-stage{height:auto;min-height:0;flex:1;width:100%}.topbar .quiet{text-decoration:none;white-space:nowrap}.header-actions{display:flex;align-items:center;gap:4px}.viewer-tools{flex-wrap:wrap;gap:6px}button,a.quiet{touch-action:manipulation}
@media(min-width:600px){.topbar{height:72px;padding-inline:28px}.overview{padding:28px 28px 14px}.cache-panel{margin:4px 28px 12px}#board-error{padding-inline:28px}.board-list{padding:12px 28px 36px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}.board-card img{height:180px}.board-card .body{padding:16px 18px}.board-card strong{font-size:17px}.viewer-tools{padding:10px 28px;font-size:14px}.viewer-tools button{min-width:48px;min-height:44px}.viewerbar strong{max-width:65vw;font-size:20px}.login-card{width:min(440px,calc(100% - 48px));margin:8dvh auto;padding:36px}}
@media(min-width:1100px){.overview,.cache-panel,#board-error,.board-list{width:calc(100% - 96px);max-width:1760px;margin-inline:auto}.overview{padding:32px 0 16px}.cache-panel{margin-top:4px;margin-bottom:12px}#board-error{padding-inline:0}.board-list{padding:12px 0 40px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px}.board-card img{height:210px}.topbar{padding-inline:48px}}
@media(max-height:600px){.login-card{margin:20px auto}.viewerbar{height:52px}.viewer-tools{padding-block:4px}}

#viewer-content{position:relative;transform-origin:center center}
#viewer-content img{width:100%;height:100%}
#annotation-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.annotation-tools{flex-shrink:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;background:#fff;border-bottom:1px solid #d5e0ec}
.annotation-tools button{min-height:42px;padding:8px 10px}
.annotation-tools button.active{background:#e2edf7;border-color:#365e86;color:#23496d}
.annotation-modes,.annotation-options{display:flex;align-items:center;gap:4px}
.annotation-options input[type=color]{width:36px;height:36px;padding:2px;border:1px solid #cbd9e5;border-radius:8px;background:white}
.annotation-options input[type=range]{width:78px;accent-color:#365e86}
#annotation-status{color:#597187;font-size:12px;flex:1;min-width:120px}
#comments-panel{max-height:25dvh;overflow:auto;flex-shrink:0;background:#f0f5fa;padding:14px 20px}
#comment-list p{white-space:pre-wrap;border-bottom:1px solid #dae4ec;padding-bottom:8px;margin:8px 0}
#comment-dialog{width:min(460px,calc(100% - 32px));border:1px solid #ccdbea;border-radius:16px;padding:24px;color:#23364b;box-shadow:0 12px 48px #18324d33}
#comment-dialog::backdrop{background:#23364b55}#comment-dialog textarea{width:100%;font:inherit;padding:12px;border:1px solid #c4d4e3;border-radius:10px;resize:vertical}
#comment-dialog form>div{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
@media(min-width:600px){.annotation-tools{padding:10px 28px;gap:16px}.annotation-modes,.annotation-options{gap:8px}.annotation-tools button{min-height:44px;padding-inline:16px}.annotation-options input[type=range]{width:120px}}
@media(max-width:520px){.annotation-tools{gap:4px;padding:6px 8px}.annotation-tools button{font-size:13px;padding-inline:8px}.annotation-options{flex:1}.annotation-options input[type=range]{width:64px}#annotation-status{width:100%;flex:auto}}

/* Keep zoomed content out of viewport sizing so panning reaches every edge. */
.viewer-stage{position:relative;display:block}
#viewer-content{position:absolute;left:50%;top:50%;max-width:none;max-height:none}

/* A whiteboard has no page-sized paper layer; only items own their fill. */
.viewer-stage img{background:transparent;box-shadow:none}
.board-card img{background-color:#f5f7fa;background-image:radial-gradient(circle,#b9c3cd 1px,transparent 1.2px);background-size:24px 24px}
.viewer-stage{background-color:#f5f7fa}

[hidden]{display:none!important}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:8px;border:0;border-radius:10px;background:transparent;color:#526b82;position:relative;flex-shrink:0;text-decoration:none}
.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-button:hover{background:#e8eff6}.icon-button:focus-visible{outline:2px solid #365e86;outline-offset:2px}
.brand-lockup{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.brand-mark{width:32px;height:32px;border-radius:8px}.brand-lockup strong{font-size:17px;letter-spacing:-.3px}.brand-lockup #mf-app-version{flex-basis:100%;margin:0!important;font-size:10px!important}
.topbar{height:64px;padding:0 14px}.header-actions{gap:2px}.space-identity{display:flex;align-items:center;gap:12px;min-width:0}.space-identity>div:last-child{min-width:0}.overview{padding:22px 16px 14px}.overview h1{font-size:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:5px}.overview #sync-button{background:#365e86;color:white;border-radius:12px}.overview p{font-size:12px}
.account-avatar{width:44px;height:44px;flex-shrink:0;border:2px solid #d7e3ee;border-radius:50%;background:#e5edf6;display:grid;place-items:center;position:relative;overflow:hidden;color:#365e86;font-size:19px;font-weight:600}.account-avatar img{position:absolute;width:100%;height:100%;object-fit:cover}
.viewerbar{height:56px;padding:0 10px;gap:8px;background:#f6f9fc}.viewerbar strong{font-size:16px;max-width:none;flex:1;text-align:center;min-width:0}.viewerbar .header-actions{gap:0}
.viewer-tools{padding:5px 14px;min-height:40px;gap:8px;flex-wrap:nowrap}.viewer-tools #viewer-time{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.viewer-tools .zoom-controls{flex-shrink:0;gap:0;align-items:center;background:#f2f5f9;border-radius:9px;padding:0 2px}.viewer-tools .icon-button{width:32px;height:30px;min-height:30px;padding:7px}.viewer-tools #zoom-reset{min-width:52px;height:30px;min-height:30px;border:0;background:transparent;padding:0 3px;font-size:12px}
.annotation-tools{padding:7px 12px;gap:0;display:block;background:#fff;box-shadow:0 2px 8px #29476708}.annotation-modes{display:flex;align-items:center;justify-content:center;gap:5px;overflow-x:auto;scrollbar-width:none}.annotation-tools .icon-button{width:40px;min-height:40px;height:40px;padding:9px;border:0}.annotation-tools .icon-button.active{background:#365e86;color:#fff}.tool-divider{width:1px;height:23px;background:#dce5ee;flex-shrink:0;margin:0 5px}.count-badge{position:absolute;top:0;right:0;min-width:14px;height:14px;border-radius:7px;display:grid;place-items:center;background:#365e86;color:white;font-size:9px;padding:0 3px}
.annotation-options{justify-content:center;gap:10px;border-top:1px solid #eef2f6;margin-top:7px;padding-top:8px}.annotation-options input[type=color]{width:28px;height:28px;border:1px solid #d6e1ec;border-radius:8px;padding:3px}.annotation-options input[type=range]{width:110px;height:22px;accent-color:#365e86}.stroke-sample{width:24px;height:3px;border-radius:3px;background:#365e86}
#viewer-page{position:relative}.annotation-feedback{position:absolute;z-index:5;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:none}.annotation-feedback:has(#annotation-status:empty){display:none}.annotation-feedback small{width:auto!important;flex-basis:auto!important;font-size:11px;line-height:1.4;color:#60758a;background:#ffffffeb;border:1px solid #e0e8f0;border-radius:20px;padding:6px 12px;box-shadow:0 2px 10px #29476710;max-width:calc(100% - 44px)}.annotation-feedback .icon-button{pointer-events:auto;background:white;border:1px solid #d6e1ec;width:32px;height:32px;min-height:32px;padding:6px}
#board-error:empty{display:none}#board-error{font-size:12px;color:#826341;padding:5px 18px 8px}.cache-panel{margin:0 16px 10px;padding:10px 12px;font-size:11px}.cache-panel>div{margin-bottom:5px}.cache-panel progress{height:4px}
.syncing svg{animation:sync-spin .9s linear infinite}@keyframes sync-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.syncing svg{animation:none}}