*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Helvetica Neue,sans-serif;background:#f5f5f7;color:#1a1a1a}.viewer{display:flex;flex-direction:column;height:100%}.viewer-center{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:#555;padding:24px}.viewer-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#1d1d1f;color:#fff;flex-wrap:wrap}.viewer-bar strong{margin-right:8px}.viewer-route{margin-left:auto;font:12px ui-monospace,Menlo,monospace;color:#9a9aa0}.seg{border:1px solid #4a4a4e;background:transparent;color:#ddd;border-radius:6px;padding:4px 12px;font-size:13px;cursor:pointer}.seg.on{background:#fff;color:#1d1d1f;border-color:#fff}.seg.comment.on{background:#f59e0b;border-color:#f59e0b;color:#fff}.seg.replay{background:#3b82f6;border-color:#3b82f6;color:#fff}.seg:disabled{opacity:.4;cursor:not-allowed}.viewer-main{flex:1;display:flex;min-height:0}.viewer-stage{flex:1;position:relative}.viewer-stage iframe{width:100%;height:100%;border:none;background:#fff}.pin{position:absolute;width:24px;height:24px;border-radius:50% 50% 50% 4px;background:#f59e0b;color:#fff;border:2px solid #fff;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px #0000004d;z-index:20}.pin.resolved{background:#9ca3af}.comment-pop{position:absolute;width:300px;background:#fff;border:1px solid #f59e0b;border-radius:12px;box-shadow:0 10px 30px #0003;padding:10px;z-index:30}.pop-head{font-size:12px;margin-bottom:8px}.pop-head span{color:#999}.comment-pop input,.comment-pop textarea{width:100%;border:1px solid #e0e0e5;border-radius:8px;padding:7px 9px;font-size:13px;font-family:inherit;margin-bottom:6px;resize:none;outline:none}.pop-actions{display:flex;justify-content:flex-end;gap:8px}.pop-actions button{border:1px solid #d9d9de;background:#fff;border-radius:8px;padding:5px 12px;cursor:pointer;font-size:13px}.pop-actions .primary{background:#f59e0b;color:#fff;border-color:#f59e0b}.pop-actions .primary:disabled{opacity:.4}.comment-detail{position:absolute;right:16px;bottom:16px;width:300px;background:#fff;border-radius:12px;box-shadow:0 10px 30px #0003;padding:12px;z-index:30}.detail-head{display:flex;align-items:baseline;gap:8px}.detail-head span{font-size:11px;color:#999;flex:1}.detail-head button{border:none;background:none;cursor:pointer;color:#999}.comment-detail p{font-size:13px;line-height:1.6}.comment-detail .primary{border:none;background:#3b82f6;color:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:12px}.viewer-canvas{flex:1;overflow:auto;display:flex;flex-wrap:wrap;gap:24px;padding:24px;align-content:flex-start;background:radial-gradient(#d9d9de 1px,transparent 1px);background-size:24px 24px}.frame{width:375px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px #0000001a;position:relative;flex-shrink:0}.frame-head{display:flex;justify-content:space-between;padding:8px 12px;background:#1d1d1f;color:#fff;font-size:13px}.frame-head code{font-size:11px;color:#9a9aa0}.frame iframe{width:375px;height:600px;border:none;display:block}.frame-mask{position:absolute;inset:36px 0 0}.comment-list{width:320px;background:#fff;border-left:1px solid #e5e5ea;overflow-y:auto;padding:14px}.comment-list h3{margin:0 0 10px;font-size:14px}.comment-list .empty{color:#999;font-size:12px}.comment-list .item{border:1px solid #eee;border-radius:10px;padding:10px;margin-bottom:10px}.comment-list .item.resolved{opacity:.55}.item-head{display:flex;gap:8px;align-items:baseline;font-size:12px}.item-head code{color:#999;font-size:11px}.item-head .tag{margin-left:auto;font-size:11px;color:#07c160}.comment-list .item p{margin:6px 0;font-size:13px;line-height:1.6}.comment-list .item button{border:1px solid #d9d9de;background:#fff;border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer}@media(max-width:640px){.comment-list{position:fixed;inset:48px 0 0 auto;width:min(320px,90vw);z-index:40}}